{ "pipes": [ { "name": "ReplacePipe", "id": "pipe-ReplacePipe-af180d25771e8bd0dadcbf002491aeb14ddd48c08d7a94be8b2d3eee8393f755526f7dd4584df386e7bb460a49e4039336574a1c5e6123cd87fd191a600ff39b", "file": "src/i18n/replace.pipe.ts", "type": "pipe", "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "properties": [], "methods": [ { "name": "transform", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "variables", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 8, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "variables", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "standalone": false, "ngname": "i18nReplace", "sourceCode": "import { Pipe, PipeTransform } from \"@angular/core\";\nimport { replace } from \"./i18n.service\";\n\n@Pipe({\n\tname: \"i18nReplace\"\n})\nexport class ReplacePipe implements PipeTransform {\n\ttransform(value, variables) {\n\t\treturn replace(value, variables);\n\t}\n}\n" } ], "interfaces": [ { "name": "ActionableContent", "id": "interface-ActionableContent-1e6a0d1f177d4ea78a97cdf66c1ab84910c5ffe5331a4e85a112f2426a6a73d2ffb92831d54dc953f511f39496ccfbc691a60a13597c3eb31b601738df0cfaf3", "file": "src/notification/notification-content.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { Subject } from \"rxjs\";\nimport { TemplateRef } from \"@angular/core\";\n\nexport type NotificationType = \"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\";\nexport type NotificationVariants = \"inline\" | \"toast\";\n\nexport interface NotificationContent {\n\t[key: string]: any;\n\ttype: NotificationType;\n\ttitle: string;\n\ttarget?: string;\n\tduration?: number;\n\tsmart?: boolean;\n\tcloseLabel?: any;\n\tmessage?: string;\n\tshowClose?: boolean;\n\tlowContrast?: boolean;\n\ttemplate?: TemplateRef;\n}\n\nexport interface ActionableContent extends NotificationContent {\n\tactionsTemplate?: TemplateRef;\n\tactions?: NotificationAction[];\n\tlinks?: NotificationLink[];\n\tvariant?: NotificationVariants;\n}\n\nexport interface ToastContent extends NotificationContent {\n\tsubtitle: string;\n\tcaption: string;\n}\n\nexport interface NotificationAction {\n\ttext: string;\n\tclick: Subject<{ event: Event, action: any }> | ((event: { event: Event, action: any }) => any);\n\t[key: string]: any;\n}\n\nexport interface NotificationLink {\n\ttext: string;\n\thref: string;\n}\n", "properties": [ { "name": "actions", "deprecated": false, "deprecationMessage": "", "type": "NotificationAction[]", "optional": true, "description": "", "line": 23 }, { "name": "actionsTemplate", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": true, "description": "", "line": 22 }, { "name": "links", "deprecated": false, "deprecationMessage": "", "type": "NotificationLink[]", "optional": true, "description": "", "line": 24 }, { "name": "variant", "deprecated": false, "deprecationMessage": "", "type": "NotificationVariants", "optional": true, "description": "", "line": 25 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [ "NotificationContent" ] }, { "name": "AlertModalData", "id": "interface-AlertModalData-89b613a70b4a567cdfbde1b5723d43a05d54fd0b1ff69c173e9562ef34090a33b30ebd57e9cdd3d66b1a5c52d0768b8aa79dbb3ac2b99784307291bcba149369", "file": "src/modal/alert-modal.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "export enum AlertModalType {\n\tdefault = \"default\",\n\tdanger = \"danger\"\n}\n\nexport interface AlertModalData {\n\t/**\n\t * type of the modal\n\t */\n\ttype?: AlertModalType;\n\t/**\n\t * Additional label shown over the modal\n\t */\n\tlabel?: string;\n\t/**\n\t * Primary title for the modal\n\t */\n\ttitle?: string;\n\t/**\n\t * Content for the modal body, could include HTML tags\n\t */\n\tcontent?: string;\n\t/**\n\t * Size of the modal to display.\n\t */\n\tsize?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\t/**\n\t * Array of `ModalButton`s\n\t */\n\tbuttons?: Array;\n\t/**\n\t * Specify whether the modal contains scrolling content. This property overrides the automatic detection\n\t * of the existence of scrolling content. Set this property to `true` to force overflow indicator to\n\t * show up or to `false` to force overflow indicator to disappear.\n\t * It is set to `null` by default which indicates not to override automatic detection.\n\t */\n\thasScrollingContent?: boolean;\n\t/**\n\t * Callback for non-specific close events. `return false;` to prevent the modal from closing\n\t * Property trigger has a value of `overlay` or `close`\n\t */\n\tclose?: (trigger?: \"overlay\" | \"close\") => boolean;\n\t/**\n\t * Set to `false` to hide the header's close button.\n\t */\n\tshowCloseButton?: boolean;\n}\n\nexport enum ModalButtonType {\n\tprimary = \"primary\",\n\tsecondary = \"secondary\",\n\ttertiary = \"tertiary\",\n\tghost = \"ghost\",\n\tdanger = \"danger\",\n\tdanger_primary = \"danger--primary\"\n}\n\nexport interface ModalButton {\n\t/**\n\t * Display value of the button\n\t */\n\ttext: string;\n\t/**\n\t * Optional unique ID for the button\n\t */\n\tid?: string;\n\t/**\n\t * Button type\n\t */\n\ttype?: ModalButtonType;\n\t/**\n\t * Callback for the button `click` event\n\t */\n\tclick?: Function;\n}\n", "properties": [ { "name": "buttons", "deprecated": false, "deprecationMessage": "", "type": "Array", "optional": true, "description": "

Array of ModalButtons

\n", "line": 30, "rawdescription": "\n\nArray of `ModalButton`s\n" }, { "name": "close", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": true, "description": "

Callback for non-specific close events. return false; to prevent the modal from closing\nProperty trigger has a value of overlay or close

\n", "line": 42, "rawdescription": "\n\nCallback for non-specific close events. `return false;` to prevent the modal from closing\nProperty trigger has a value of `overlay` or `close`\n" }, { "name": "content", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "

Content for the modal body, could include HTML tags

\n", "line": 22, "rawdescription": "\n\nContent for the modal body, could include HTML tags\n" }, { "name": "hasScrollingContent", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

Specify whether the modal contains scrolling content. This property overrides the automatic detection\nof the existence of scrolling content. Set this property to true to force overflow indicator to\nshow up or to false to force overflow indicator to disappear.\nIt is set to null by default which indicates not to override automatic detection.

\n", "line": 37, "rawdescription": "\n\nSpecify whether the modal contains scrolling content. This property overrides the automatic detection\nof the existence of scrolling content. Set this property to `true` to force overflow indicator to\nshow up or to `false` to force overflow indicator to disappear.\nIt is set to `null` by default which indicates not to override automatic detection.\n" }, { "name": "label", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "

Additional label shown over the modal

\n", "line": 14, "rawdescription": "\n\nAdditional label shown over the modal\n" }, { "name": "showCloseButton", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

Set to false to hide the header's close button.

\n", "line": 46, "rawdescription": "\n\nSet to `false` to hide the header's close button.\n" }, { "name": "size", "deprecated": false, "deprecationMessage": "", "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"", "optional": true, "description": "

Size of the modal to display.

\n", "line": 26, "rawdescription": "\n\nSize of the modal to display.\n" }, { "name": "title", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "

Primary title for the modal

\n", "line": 18, "rawdescription": "\n\nPrimary title for the modal\n" }, { "name": "type", "deprecated": false, "deprecationMessage": "", "type": "AlertModalType", "optional": true, "description": "

type of the modal

\n", "line": 10, "rawdescription": "\n\ntype of the modal\n" } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "BreadcrumbItem", "id": "interface-BreadcrumbItem-e31ff11233b8b02008eb253010fa50595f44bf0755705690464dd53b5010cce9dc70fcdf91f07647c399a419c98223f9acfa13f42418ba0c60f45c16a8ffd88a", "file": "src/breadcrumb/breadcrumb-item.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { TemplateRef } from \"@angular/core\";\n\n/**\n * A structure that represents a breadcrumb item.\n */\nexport interface BreadcrumbItem {\n\t/**\n\t * Content to be displayed in the breadcrumb item.\n\t */\n\tcontent: string;\n\t/**\n\t * Href for the breadcrumb item.\n\t */\n\thref?: string;\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\troute?: any[];\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\trouteExtras?: any;\n\t/**\n\t * Optional `TemplateRef` for the breadcrumb item. Receives the content as an `$implicit` template variable\n\t */\n\ttemplate?: TemplateRef;\n\t/**\n\t * aria-current for the breadcrumb item.\n\t */\n\tariaCurrent?: string;\n\t/**\n\t * Sets the current class for the breadcrumb item.\n\t */\n\tcurrent?: boolean;\n}\n", "properties": [ { "name": "ariaCurrent", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "

aria-current for the breadcrumb item.

\n", "line": 32, "rawdescription": "\n\naria-current for the breadcrumb item.\n" }, { "name": "content", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

Content to be displayed in the breadcrumb item.

\n", "line": 10, "rawdescription": "\n\nContent to be displayed in the breadcrumb item.\n" }, { "name": "current", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

Sets the current class for the breadcrumb item.

\n", "line": 36, "rawdescription": "\n\nSets the current class for the breadcrumb item.\n" }, { "name": "href", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "

Href for the breadcrumb item.

\n", "line": 14, "rawdescription": "\n\nHref for the breadcrumb item.\n" }, { "name": "route", "deprecated": false, "deprecationMessage": "", "type": "any[]", "optional": true, "description": "

Array of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate

\n", "line": 19, "rawdescription": "\n\nArray of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate\n" }, { "name": "routeExtras", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": true, "description": "

Router options. Used in conjunction with route\nSee: https://angular.io/api/router/Router#navigate

\n", "line": 24, "rawdescription": "\n\nRouter options. Used in conjunction with `route`\nSee: https://angular.io/api/router/Router#navigate\n" }, { "name": "template", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": true, "description": "

Optional TemplateRef for the breadcrumb item. Receives the content as an $implicit template variable

\n", "line": 28, "rawdescription": "\n\nOptional `TemplateRef` for the breadcrumb item. Receives the content as an `$implicit` template variable\n" } ], "indexSignatures": [], "kind": 171, "description": "

A structure that represents a breadcrumb item.

\n", "rawdescription": "\n\nA structure that represents a breadcrumb item.\n", "methods": [], "extends": [] }, { "name": "CloseMeta", "id": "interface-CloseMeta-aa4ccbe5ac7f0c088c23f7030f0e80b6df1f15a896569560a9894c55fe3826cde419fb4a9a0a69fbe0bb63d7dab9007b383d7bcb048884fa67e9290ed759a73b", "file": "src/dialog/dialog-config.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { ElementRef, TemplateRef } from \"@angular/core\";\n\n/**\n * An enum of the various reasons a dialog may close. For use with `CloseMeta` and `shouldClose`\n *\n * It's expected that `interaction` will be a common closure reason.\n */\nexport enum CloseReasons {\n\t/**\n\t * For when the component is closed by being destroyed\n\t */\n\tdestroyed,\n\t/**\n\t * For use in cases where the dialog closes for programmatic reasons other than destruction\n\t */\n\tprogrammatic,\n\t/**\n\t * interaction reasons will also provide a target for the interaction\n\t */\n\tinteraction,\n\t/**\n\t * For use in cases where the dialog closes due to being hidden\n\t */\n\thidden\n}\n\n/**\n * Interface representing various metadata that can be passed to `shouldClose` and the `close` event\n */\nexport interface CloseMeta {\n\treason: CloseReasons;\n\ttarget?: EventTarget;\n}\n\n/**\n * Data structure for definig properties of a `Dialog` component.\n **/\nexport interface DialogConfig {\n\t/**\n\t * Title for the `Dialog` header.\n\t */\n\ttitle?: string;\n\t/**\n\t * Body content for the `Dialog`.\n\t */\n\tcontent: string | TemplateRef;\n\t/**\n\t * Parameter for triggering `Dialog` display.\n\t */\n\ttrigger?: \"click\" | \"hover\" | \"mouseenter\";\n\t/**\n\t * Parameter for triggering the `Dialog` close event.\n\t */\n\tcloseTrigger?: \"mouseout\" | \"mouseleave\";\n\t/**\n\t * Callback to control the closing behaviour. return `true` to close, and `false` to prevent closing\n\t */\n\tshouldClose?: (meta?: CloseMeta) => boolean;\n\t/**\n\t * If true the dialog will close when hidden (by scrolling or otherwise going out of the viewport)\n\t * If false the dialog will stay open until explicitly closed\n\t * When true this closure method can be picked up via `CloseReasons.hidden`\n\t */\n\tcloseWhenHidden?: boolean;\n\t/**\n\t * Parameter defining the placement in which the `Dialog` appears.\n\t */\n\tplacement?: string;\n\t/**\n\t * Used to set the offset of the `Dialog` relative to the content it\n\t * is associated to.\n\t */\n\tgap?: number;\n\t/**\n\t * Reference to the Parent element that links the `Dialog`.\n\t */\n\tparentRef?: ElementRef;\n\t/**\n\t * Set to `true` to open the dialog next to the triggering component\n\t */\n\tappendInline?: boolean;\n\t/**\n\t * Config object passed to the rendered component. (Optional)\n\t */\n\tdata?: Object;\n\t/**\n\t * Additional arbitrary properties (mostly for internal/extended component use)\n\t */\n\t[propName: string]: any;\n\t/**\n\t * Classes to add to the dialog container\n\t */\n\twrapperClass?: string;\n\t/**\n\t * This specifies any vertical and horizontal offset for the position of the dialog\n\t */\n\toffset?: { x: number, y: number };\n\t/**\n\t * This prevents the dialog from being toggled\n\t */\n\tdisabled?: boolean;\n}\n", "properties": [ { "name": "reason", "deprecated": false, "deprecationMessage": "", "type": "CloseReasons", "optional": false, "description": "", "line": 31 }, { "name": "target", "deprecated": false, "deprecationMessage": "", "type": "EventTarget", "optional": true, "description": "", "line": 32 } ], "indexSignatures": [], "kind": 171, "description": "

Interface representing various metadata that can be passed to shouldClose and the close event

\n", "rawdescription": "\n\nInterface representing various metadata that can be passed to `shouldClose` and the `close` event\n", "methods": [], "extends": [] }, { "name": "DataGridPosition", "id": "interface-DataGridPosition-1a07e40000ad0a03c69bfa750d2a244b531aa250bce669da5c76033e397d939a6f0b83c8e636808892ee31e7b389748f2b48e5521973de9e6b9b1c2c05d2fabe", "file": "src/table/data-grid-interaction-model.class.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import {\n\tBehaviorSubject,\n\tObservable,\n\tcombineLatest\n} from \"rxjs\";\nimport { map } from \"rxjs/operators\";\nimport { TableAdapter } from \"./table-adapter.class\";\nimport { tabbableSelectorIgnoreTabIndex, getFocusElementList } from \"carbon-components-angular/common\";\n\n/**\n * The current and previous position in the grid.\n *\n * `current` and `previous` are tuples that follow the `[row, column]` convention.\n */\nexport interface DataGridPosition {\n\tcurrent: [number, number];\n\tprevious: [number, number];\n}\n\n/**\n * `DataGridInteractionModel` provides centralized control over arbitrary 2d grids, following the w3 specs.\n *\n * Refs:\n * - https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html\n * - https://www.w3.org/TR/wai-aria-practices/#grid\n *\n * Example usage (taken from `table.component`):\n```typescript\n// a standard HTML table\nconst table = this.elementRef.nativeElement.querySelector(\"table\") as HTMLTableElement;\n\n// `TableDomAdapter` implements `TableAdapter` and provides a consistent interface to query rows and columns in a table\nconst tableAdapter = new TableDomAdapter(table);\n\n// the keydown events that we'll use for keyboard navigation of the table\nconst keydownEventStream = fromEvent(table, \"keydown\");\n\n// the click events we'll use to ensure focus is updated correctly on click\nconst clickEventStream = fromEvent(table, \"click\");\n\n// the `DataGridInteractionModel` instance!\nthis.interactionModel = new DataGridInteractionModel(keydownEventStream, clickEventStream, tableAdapter);\n\n// subscribe to the combined position updates\nthis.interactionModel.position.subscribe(event => {\n\tconst [currentRow, currentColumn] = event.current;\n\tconst [previousRow, previousColumn] = event.previous;\n\n\t// query the TableAdapter for the cell at the current row and column ...\n\tconst currentElement = tableAdapter.getCell(currentRow, currentColumn);\n\t// ... and make it focusable it\n\tTable.setTabIndex(currentElement, 0);\n\n\t// if the model has just initialized don't focus or reset anything\n\tif (previousRow === -1 || previousColumn === -1) { return; }\n\n\t// query the TableAdapter for the cell at the previous row and column ...\n\tconst previousElement = tableAdapter.getCell(previousRow, previousColumn);\n\t// ... and make it unfocusable (now there is only a single focusable cell)\n\tTable.setTabIndex(previousElement, -1);\n\n\t// finally, focus the current cell (skipped during initilzation)\n\tTable.focus(currentElement);\n});\n```\n */\nexport class DataGridInteractionModel {\n\t/**\n\t * An Observable that provides an aggregated view of the `rowIndex` and `columnIndex` Observables\n\t */\n\treadonly position: Observable;\n\t/**\n\t * An Observable that provides the current and previous row indexes.\n\t */\n\treadonly rowIndex: Observable<{ current: number, previous: number }>;\n\t/**\n\t * An Observable that provides the current and previous column indexes.\n\t */\n\treadonly columnIndex: Observable<{ current: number, previous: number }>;\n\n\t/**\n\t * Internal subject to handle changes in row\n\t */\n\tprotected rowSubject = new BehaviorSubject({ current: 0, previous: -1 });\n\t/**\n\t * Internal subject to handle changes in column\n\t */\n\tprotected columnSubject = new BehaviorSubject({ current: 0, previous: -1 });\n\n\t/**\n\t * The latest value emitted by the rowSubject\n\t */\n\tprotected get currentRow() {\n\t\treturn this.rowSubject.getValue().current;\n\t}\n\n\t/**\n\t * The latest value emitted by the columnSubject\n\t */\n\tprotected get currentColumn() {\n\t\treturn this.columnSubject.getValue().current;\n\t}\n\n\t/**\n\t * The last column as reported by the adapter\n\t */\n\tprotected get lastColumn() {\n\t\treturn this.tableAdapter.lastColumnIndex;\n\t}\n\n\t/**\n\t * The last row as reported by the adapter\n\t */\n\tprotected get lastRow() {\n\t\treturn this.tableAdapter.lastRowIndex;\n\t}\n\n\t/**\n\t * `DataGridInteractionModel` requires knowledge of events, and a representation of your table/grid to be useful.\n\t *\n\t * @param keyboardEventStream an Observable of KeyboardEvents. Should be scoped to the table container.\n\t * @param clickEventStream an Observable of ClickEvents. should only include clicks that take action on items known by the TableAdapter\n\t * @param tableAdapter an instance of a concrete class that implements TableAdapter. The standard carbon table uses TableDomAdapter\n\t */\n\tconstructor(\n\t\tprotected keyboardEventStream: Observable,\n\t\tprotected clickEventStream: Observable,\n\t\tprotected tableAdapter: TableAdapter\n\t) {\n\t\tthis.rowIndex = this.rowSubject.asObservable();\n\t\tthis.columnIndex = this.columnSubject.asObservable();\n\t\tthis.position = combineLatest(this.rowIndex, this.columnIndex).pipe(map(positions => {\n\t\t\tconst [row, column] = positions;\n\t\t\treturn {\n\t\t\t\tcurrent: [row.current, column.current],\n\t\t\t\tprevious: [row.previous, column.previous]\n\t\t\t};\n\t\t})) as Observable;\n\t\tthis.keyboardEventStream.subscribe(this.handleKeyboardEvent.bind(this));\n\t\tthis.clickEventStream.subscribe(this.handleClickEvent.bind(this));\n\t}\n\n\t/**\n\t * Handles moving the position according to the w3 datagrid navigation specs\n\t *\n\t * Refs:\n\t * - https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html\n\t * - https://www.w3.org/TR/wai-aria-practices/#grid\n\t *\n\t * @param event the KeyboardEvent to handle\n\t */\n\thandleKeyboardEvent(event: KeyboardEvent) {\n\t\tconst currentCell = this.tableAdapter.getCell(this.currentRow, this.currentColumn);\n\t\tlet currentColumn = this.tableAdapter.findColumnIndex(currentCell);\n\t\tlet currentRow = this.tableAdapter.findRowIndex(currentCell);\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowRight\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\t// add the colspan since findColumnIndex will return the\n\t\t\t\t// first column containing the cell (of N columns it may span)\n\t\t\t\t// and we want to navigate to the next \"real\" column\n\t\t\t\tthis.goToColumn(currentColumn + currentCell.colSpan);\n\t\t\t\tbreak;\n\t\t\tcase \"ArrowLeft\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\t// we only ever need to subtract 1 from the column, since findColumnIndex returns the\n\t\t\t\t// first of N columns containing the cell\n\t\t\t\tthis.goToColumn(currentColumn - 1);\n\t\t\t\tbreak;\n\t\t\tcase \"ArrowDown\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.goToRow(currentRow + currentCell.rowSpan);\n\t\t\t\tbreak;\n\t\t\tcase \"ArrowUp\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.goToRow(currentRow - 1);\n\t\t\t\tbreak;\n\t\t\tcase \"Home\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (event.ctrlKey) {\n\t\t\t\t\tthis.goTo({row: 0, column: 0});\n\t\t\t\t} else {\n\t\t\t\t\tthis.goToColumn(0);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase \"End\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (event.ctrlKey) {\n\t\t\t\t\tthis.goTo({ row: this.lastRow, column: this.lastColumn });\n\t\t\t\t} else {\n\t\t\t\t\tthis.goToColumn(this.lastColumn);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Handles moving the position to the clicked cell\n\t *\n\t * @param event the MouseEvent to handle\n\t */\n\thandleClickEvent(event: MouseEvent) {\n\t\tconst cell = (event.target as HTMLElement).closest(\"td, th\") as HTMLTableCellElement;\n\t\tconst [rowIndex, cellIndex] = this.tableAdapter.findIndex(cell);\n\t\tthis.goTo({ row: rowIndex, column: cellIndex });\n\t}\n\n\t/**\n\t * Jump to a specific column without changing the row\n\t *\n\t * @param index column to jump to\n\t */\n\tgoToColumn(index: number) {\n\t\tif (index > this.lastColumn || index < 0) { return; }\n\t\tthis.goTo({ row: this.currentRow, column: index});\n\t}\n\n\t/**\n\t * Jump to a specific row without changing the column\n\t *\n\t * @param index row to jump to\n\t */\n\tgoToRow(index: number) {\n\t\tif (index > this.lastRow || index < 0) { return; }\n\t\tthis.goTo({row: index, column: this.currentColumn});\n\t}\n\n\t/**\n\t * Jump to the specified row and column\n\t *\n\t * @param param0 an object that contains `row` and `column` properties\n\t */\n\tgoTo({row, column}) {\n\t\tthis.rowSubject.next({ current: row, previous: this.currentRow });\n\t\tthis.columnSubject.next({ current: column, previous: this.currentColumn });\n\t}\n\n\t/**\n\t * Convenience method to reset the tab indexes on a standard carbon table.\n\t * For custom tables you may want to reset the indexes manually and simply call `.reset()`\n\t */\n\tresetTabIndexes(newTabIndex = -1) {\n\t\tfor (let i = 0; i < this.tableAdapter.lastRowIndex; i++) {\n\t\t\tconst row = this.tableAdapter.getRow(i) as HTMLTableRowElement;\n\t\t\tfor (const cell of Array.from(row.cells)) {\n\t\t\t\tconst tabbableElements = getFocusElementList(cell, tabbableSelectorIgnoreTabIndex);\n\t\t\t\ttabbableElements.forEach((node: HTMLElement) => node.tabIndex = newTabIndex);\n\t\t\t\tcell.tabIndex = newTabIndex;\n\t\t\t}\n\t\t}\n\n\t\tthis.reset();\n\t}\n\n\t/**\n\t * Resets the models focus position\n\t */\n\treset() {\n\t\tthis.rowSubject.next({ current: 0, previous: -1 });\n\t\tthis.columnSubject.next({ current: 0, previous: -1 });\n\t}\n}\n", "properties": [ { "name": "current", "deprecated": false, "deprecationMessage": "", "type": "[number, number]", "optional": false, "description": "", "line": 16 }, { "name": "previous", "deprecated": false, "deprecationMessage": "", "type": "[number, number]", "optional": false, "description": "", "line": 17 } ], "indexSignatures": [], "kind": 171, "description": "

The current and previous position in the grid.

\n

current and previous are tuples that follow the [row, column] convention.

\n", "rawdescription": "\n\nThe current and previous position in the grid.\n\n`current` and `previous` are tuples that follow the `[row, column]` convention.\n", "methods": [], "extends": [] }, { "name": "DialogConfig", "id": "interface-DialogConfig-aa4ccbe5ac7f0c088c23f7030f0e80b6df1f15a896569560a9894c55fe3826cde419fb4a9a0a69fbe0bb63d7dab9007b383d7bcb048884fa67e9290ed759a73b", "file": "src/dialog/dialog-config.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { ElementRef, TemplateRef } from \"@angular/core\";\n\n/**\n * An enum of the various reasons a dialog may close. For use with `CloseMeta` and `shouldClose`\n *\n * It's expected that `interaction` will be a common closure reason.\n */\nexport enum CloseReasons {\n\t/**\n\t * For when the component is closed by being destroyed\n\t */\n\tdestroyed,\n\t/**\n\t * For use in cases where the dialog closes for programmatic reasons other than destruction\n\t */\n\tprogrammatic,\n\t/**\n\t * interaction reasons will also provide a target for the interaction\n\t */\n\tinteraction,\n\t/**\n\t * For use in cases where the dialog closes due to being hidden\n\t */\n\thidden\n}\n\n/**\n * Interface representing various metadata that can be passed to `shouldClose` and the `close` event\n */\nexport interface CloseMeta {\n\treason: CloseReasons;\n\ttarget?: EventTarget;\n}\n\n/**\n * Data structure for definig properties of a `Dialog` component.\n **/\nexport interface DialogConfig {\n\t/**\n\t * Title for the `Dialog` header.\n\t */\n\ttitle?: string;\n\t/**\n\t * Body content for the `Dialog`.\n\t */\n\tcontent: string | TemplateRef;\n\t/**\n\t * Parameter for triggering `Dialog` display.\n\t */\n\ttrigger?: \"click\" | \"hover\" | \"mouseenter\";\n\t/**\n\t * Parameter for triggering the `Dialog` close event.\n\t */\n\tcloseTrigger?: \"mouseout\" | \"mouseleave\";\n\t/**\n\t * Callback to control the closing behaviour. return `true` to close, and `false` to prevent closing\n\t */\n\tshouldClose?: (meta?: CloseMeta) => boolean;\n\t/**\n\t * If true the dialog will close when hidden (by scrolling or otherwise going out of the viewport)\n\t * If false the dialog will stay open until explicitly closed\n\t * When true this closure method can be picked up via `CloseReasons.hidden`\n\t */\n\tcloseWhenHidden?: boolean;\n\t/**\n\t * Parameter defining the placement in which the `Dialog` appears.\n\t */\n\tplacement?: string;\n\t/**\n\t * Used to set the offset of the `Dialog` relative to the content it\n\t * is associated to.\n\t */\n\tgap?: number;\n\t/**\n\t * Reference to the Parent element that links the `Dialog`.\n\t */\n\tparentRef?: ElementRef;\n\t/**\n\t * Set to `true` to open the dialog next to the triggering component\n\t */\n\tappendInline?: boolean;\n\t/**\n\t * Config object passed to the rendered component. (Optional)\n\t */\n\tdata?: Object;\n\t/**\n\t * Additional arbitrary properties (mostly for internal/extended component use)\n\t */\n\t[propName: string]: any;\n\t/**\n\t * Classes to add to the dialog container\n\t */\n\twrapperClass?: string;\n\t/**\n\t * This specifies any vertical and horizontal offset for the position of the dialog\n\t */\n\toffset?: { x: number, y: number };\n\t/**\n\t * This prevents the dialog from being toggled\n\t */\n\tdisabled?: boolean;\n}\n", "properties": [ { "name": "appendInline", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

Set to true to open the dialog next to the triggering component

\n", "line": 81, "rawdescription": "\n\nSet to `true` to open the dialog next to the triggering component\n" }, { "name": "closeTrigger", "deprecated": false, "deprecationMessage": "", "type": "\"mouseout\" | \"mouseleave\"", "optional": true, "description": "

Parameter for triggering the Dialog close event.

\n", "line": 54, "rawdescription": "\n\nParameter for triggering the `Dialog` close event.\n" }, { "name": "closeWhenHidden", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

If true the dialog will close when hidden (by scrolling or otherwise going out of the viewport)\nIf false the dialog will stay open until explicitly closed\nWhen true this closure method can be picked up via CloseReasons.hidden

\n", "line": 64, "rawdescription": "\n\nIf true the dialog will close when hidden (by scrolling or otherwise going out of the viewport)\nIf false the dialog will stay open until explicitly closed\nWhen true this closure method can be picked up via `CloseReasons.hidden`\n" }, { "name": "content", "deprecated": false, "deprecationMessage": "", "type": "string | TemplateRef", "optional": false, "description": "

Body content for the Dialog.

\n", "line": 46, "rawdescription": "\n\nBody content for the `Dialog`.\n" }, { "name": "data", "deprecated": false, "deprecationMessage": "", "type": "Object", "optional": true, "description": "

Config object passed to the rendered component. (Optional)

\n", "line": 85, "rawdescription": "\n\nConfig object passed to the rendered component. (Optional)\n" }, { "name": "disabled", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

This prevents the dialog from being toggled

\n", "line": 101, "rawdescription": "\n\nThis prevents the dialog from being toggled\n" }, { "name": "gap", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": true, "description": "

Used to set the offset of the Dialog relative to the content it\nis associated to.

\n", "line": 73, "rawdescription": "\n\nUsed to set the offset of the `Dialog` relative to the content it\nis associated to.\n" }, { "name": "offset", "deprecated": false, "deprecationMessage": "", "type": "literal type", "optional": true, "description": "

This specifies any vertical and horizontal offset for the position of the dialog

\n", "line": 97, "rawdescription": "\n\nThis specifies any vertical and horizontal offset for the position of the dialog\n" }, { "name": "parentRef", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": true, "description": "

Reference to the Parent element that links the Dialog.

\n", "line": 77, "rawdescription": "\n\nReference to the Parent element that links the `Dialog`.\n" }, { "name": "placement", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "

Parameter defining the placement in which the Dialog appears.

\n", "line": 68, "rawdescription": "\n\nParameter defining the placement in which the `Dialog` appears.\n" }, { "name": "shouldClose", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": true, "description": "

Callback to control the closing behaviour. return true to close, and false to prevent closing

\n", "line": 58, "rawdescription": "\n\nCallback to control the closing behaviour. return `true` to close, and `false` to prevent closing\n" }, { "name": "title", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "

Title for the Dialog header.

\n", "line": 42, "rawdescription": "\n\nTitle for the `Dialog` header.\n" }, { "name": "trigger", "deprecated": false, "deprecationMessage": "", "type": "\"click\" | \"hover\" | \"mouseenter\"", "optional": true, "description": "

Parameter for triggering Dialog display.

\n", "line": 50, "rawdescription": "\n\nParameter for triggering `Dialog` display.\n" }, { "name": "wrapperClass", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "

Classes to add to the dialog container

\n", "line": 93, "rawdescription": "\n\nClasses to add to the dialog container\n" } ], "indexSignatures": [ { "id": "index-declaration-aa4ccbe5ac7f0c088c23f7030f0e80b6df1f15a896569560a9894c55fe3826cde419fb4a9a0a69fbe0bb63d7dab9007b383d7bcb048884fa67e9290ed759a73b", "args": [ { "name": "propName", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "any", "line": 85, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAdditional arbitrary properties (mostly for internal/extended component use)\n", "description": "

Additional arbitrary properties (mostly for internal/extended component use)

\n" } ], "kind": 171, "description": "

Data structure for definig properties of a Dialog component.

\n", "rawdescription": "\n\nData structure for definig properties of a `Dialog` component.\n", "methods": [], "extends": [] }, { "name": "ElementVisibilityEvent", "id": "interface-ElementVisibilityEvent-0869a864b16f2fcbf727f5059bc8605c8378298f548b9a0af4bc27ffc739342f292f48d978c1fab46941fda6e1c027e181daad245a164eee8538dfb60e016f2e", "file": "src/utils/element.types.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "export interface ElementVisibilityEvent {\n\tvisible: boolean;\n}\n", "properties": [ { "name": "visible", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": false, "description": "", "line": 2 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "EventOnNode", "id": "interface-EventOnNode-be3eae17d143a1c4f4f77c37a2ccd29b23c49139c15ebbe4b45a7cce0f6d0246c96c7082462e0fd64e0fd48fee5c428b973e04a3ce4a05d3c7ce5b56e718609d", "file": "src/treeview/tree-node.types.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { TemplateRef } from \"@angular/core\";\n\nexport interface Node {\n\tlabel: string | TemplateRef;\n\tlabelContext?: any;\n\tvalue?: any;\n\tid?: string;\n\tactive?: boolean;\n\tdisabled?: boolean;\n\t// Selectable is only valid for nodes with children.\n\t// If true, the node won't become selected and if clicked it would only expand/compress itself\n\tselectable?: boolean;\n\texpanded?: boolean;\n\tselected?: boolean;\n\ticon?: string | TemplateRef;\n\ticonContext?: any;\n\tgap?: number;\n\tchildren?: Node[];\n\t[key: string]: any;\n}\n\nexport interface EventOnNode {\n\tnode: Node;\n\tevent: Event;\n}\n", "properties": [ { "name": "event", "deprecated": false, "deprecationMessage": "", "type": "Event", "optional": false, "description": "", "line": 24 }, { "name": "node", "deprecated": false, "deprecationMessage": "", "type": "Node", "optional": false, "description": "", "line": 23 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "ExpandableTileTranslations", "id": "interface-ExpandableTileTranslations-4e3f205f1d28aed7b4db46864b34a465540c07c6010cf5057e03b8fc995cbcc2b274cec35bc6fe12509329d79b8660765740d78f8ffeaea1b931a941b7752077", "file": "src/tiles/expandable-tile.component.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tElementRef,\n\tAfterViewInit,\n\tViewChild\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface ExpandableTileTranslations {\n\tEXPAND: string;\n\tCOLLAPSE: string;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TilesModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tiles-expandable--basic)\n */\n@Component({\n\tselector: \"cds-expandable-tile, ibm-expandable-tile\",\n\ttemplate: `\n\t\t\n\t\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`\n})\nexport class ExpandableTile implements AfterViewInit {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Controls the expanded state\n\t */\n\t@Input() expanded = false;\n\t/**\n\t * Controls the interactive state\n\t */\n\t@Input() interactive = false;\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"EXPAND\": \"Expand\",\n\t *\t\t\"COLLAPSE\": \"Collapse\",\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value: ExpandableTileTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"TILES\"), value);\n\t\tthis.expand.override(valueWithDefaults.EXPAND);\n\t\tthis.collapse.override(valueWithDefaults.COLLAPSE);\n\t}\n\n\t@ViewChild(\"container\") tileContainer: ElementRef;\n\n\ttileMaxHeight = 0;\n\tcurrentExpandedHeight = 0;\n\n\texpand = this.i18n.getOverridable(\"TILES.EXPAND\");\n\tcollapse = this.i18n.getOverridable(\"TILES.COLLAPSE\");\n\n\tconstructor(protected i18n: I18n, protected element: ElementRef) {}\n\n\tngAfterViewInit() {\n\t\tthis.updateMaxHeight();\n\t}\n\n\tget expandedHeight() {\n\t\tconst tile = this.element.nativeElement.querySelector(\".cds--tile\");\n\t\tconst tilePadding\n\t\t\t= parseInt(getComputedStyle(tile).paddingBottom, 10) + parseInt(getComputedStyle(tile).paddingTop, 10);\n\t\tconst expandedHeight = this.tileMaxHeight + tilePadding;\n\t\tif (!isNaN(expandedHeight)) {\n\t\t\tthis.currentExpandedHeight = expandedHeight;\n\t\t}\n\t\treturn this.currentExpandedHeight;\n\t}\n\n\tupdateMaxHeight() {\n\t\tif (this.expanded) {\n\t\t\tthis.tileMaxHeight = this.tileContainer.nativeElement.getBoundingClientRect().height;\n\t\t} else {\n\t\t\tthis.tileMaxHeight = this.element.nativeElement.querySelector(\".cds--tile-content__above-the-fold\").getBoundingClientRect().height;\n\t\t}\n\t}\n\n\tonClick() {\n\t\tthis.expanded = !this.expanded;\n\t\tthis.updateMaxHeight();\n\t}\n}\n", "properties": [ { "name": "COLLAPSE", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 13 }, { "name": "EXPAND", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 12 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "Experiment", "id": "interface-Experiment-82a0b5e260a0a5c514fbf5d0b4d0d9563d0ae9b88079eb7de33612da6cd6c4fff6fea8e240e5f363b9561f05c42868abfc6d6996341d705065246a5dfc477611", "file": "src/experimental/experimental.service.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { Injectable } from \"@angular/core\";\n\n/**\n * Represents options for an experiment. The only required property is `enabled`, however other options may be supplied.\n */\nexport interface Experiment {\n\tenabled: boolean;\n\t[key: string]: any;\n}\n\n@Injectable()\nexport class ExperimentalService {\n\t/**\n\t * Map to hold all our experiments\n\t */\n\tprivate experiments = new Map();\n\n\t/**\n\t * Adds an experiment if it doesn't exist.\n\t */\n\taddExperiment(name: string, options: Experiment = {enabled: false}) {\n\t\tif (!this.experiments.has(name)) {\n\t\t\tthis.experiments.set(name, options);\n\t\t}\n\t}\n\n\t/**\n\t * Enables an experiment by name\n\t * @param name name of the experiment to enable\n\t */\n\tenableExperiment(name: string) {\n\t\tconst experiment = this.getExperiment(name);\n\t\texperiment.enabled = true;\n\t}\n\n\t/**\n\t * Disables an experiment by name\n\t * @param name name of the experiment to disable\n\t */\n\tdisableExperiment(name: string) {\n\t\tconst experiment = this.getExperiment(name);\n\t\texperiment.enabled = false;\n\t}\n\n\t/**\n\t * Get the options for an experiment by name\n\t * @param name name of experiment to get\n\t */\n\tgetExperiment(name: string): Experiment {\n\t\tif (!this.experiments.has(name)) {\n\t\t\tthis.addExperiment(name);\n\t\t\treturn this.getExperiment(name);\n\t\t}\n\n\t\treturn this.experiments.get(name);\n\t}\n\n\t/**\n\t * Get an array of tuples representing an experiment and it's options\n\t */\n\tgetExperiments(): Array<[string, Experiment]> {\n\t\treturn Array.from(this.experiments.entries());\n\t}\n}\n", "properties": [ { "name": "enabled", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": false, "description": "", "line": 7 } ], "indexSignatures": [ { "id": "index-declaration-82a0b5e260a0a5c514fbf5d0b4d0d9563d0ae9b88079eb7de33612da6cd6c4fff6fea8e240e5f363b9561f05c42868abfc6d6996341d705065246a5dfc477611", "args": [ { "name": "key", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "any", "line": 7, "deprecated": false, "deprecationMessage": "" } ], "kind": 181, "description": "

Represents options for an experiment. The only required property is enabled, however other options may be supplied.

\n", "rawdescription": "\n\nRepresents options for an experiment. The only required property is `enabled`, however other options may be supplied.\n", "methods": [], "extends": [] }, { "name": "FileItem", "id": "interface-FileItem-85a77a2e47c8c04c21863430991f105803538d13bbf0d649992a83205090f0ffc24b888b51fea0ee724e3b165b3ed466744e44fcc5cbfcacf4a270481f25c698", "file": "src/file-uploader/file-item.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "export interface FileItem {\n\tfile: File;\n\tstate: \"edit\" | \"upload\" | \"complete\";\n\tuploaded: boolean;\n\tinvalid?: boolean;\n\tinvalidTitle?: string;\n\tinvalidText?: string;\n}\n", "properties": [ { "name": "file", "deprecated": false, "deprecationMessage": "", "type": "File", "optional": false, "description": "", "line": 2 }, { "name": "invalid", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "", "line": 5 }, { "name": "invalidText", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "", "line": 7 }, { "name": "invalidTitle", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "", "line": 6 }, { "name": "state", "deprecated": false, "deprecationMessage": "", "type": "\"edit\" | \"upload\" | \"complete\"", "optional": false, "description": "", "line": 3 }, { "name": "uploaded", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": false, "description": "", "line": 4 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "HeaderItemInterface", "id": "interface-HeaderItemInterface-30fb4c9b64de9b11fb7b28ddd3ee5e0fdba54a86d7277c8e757682aab1502c23396a9910e3513f9594ec08cb97a0954e1d45eed5fd6101d57dd431c31fbfcab0", "file": "src/ui-shell/header/header-navigation-items.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "export interface NavigationItem {\n\ttype: \"menu\" | \"item\";\n\ttitle?: string;\n\thref?: string;\n\ttrigger?: \"click\" | \"mouseover\";\n\troute?: any[];\n\trouteExtras?: any[];\n\tcontent?: string;\n\tisCurrentPage?: boolean;\n\tmenuItems?: HeaderItemInterface[];\n}\n\nexport interface HeaderItemInterface {\n\thref?: string;\n\troute?: any[];\n\trouteExtras?: any[];\n\tcontent?: string;\n}\n", "properties": [ { "name": "content", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "", "line": 21 }, { "name": "href", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "", "line": 18 }, { "name": "route", "deprecated": false, "deprecationMessage": "", "type": "any[]", "optional": true, "description": "", "line": 19 }, { "name": "routeExtras", "deprecated": false, "deprecationMessage": "", "type": "any[]", "optional": true, "description": "", "line": 20 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "IconDescriptor", "id": "interface-IconDescriptor-4f5767040e0cac9f7ec08605bb398f8cfffd46da2e75d08f25b0dd04c662da07862eb1690cb9795e5d981c319ed2eeac8870cf82792aef54320fa5e28dd35dea", "file": "src/icon/icon.service.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { Injectable } from \"@angular/core\";\nimport { toString } from \"@carbon/icon-helpers\";\n\n// icon imports\nimport {\n\tAdd16,\n\tCalendar16,\n\tCaretDown16,\n\tCaretLeft16,\n\tCaretRight16,\n\tCaretUp16,\n\tCheckmark16,\n\tCheckmarkFilled16,\n\tCheckmarkOutline16,\n\tChevronDown16,\n\tChevronRight16,\n\tClose16,\n\tCopy16,\n\tDownload16,\n\tErrorFilled16,\n\tInformationFilled16,\n\tMenu16,\n\tOverflowMenuVertical16,\n\tSave16,\n\tSettings16,\n\tTrashCan16,\n\tWarning16,\n\tWarningFilled16\n} from \"@carbon/icons\";\n\n/**\n * An object that represents a parsed icon\n */\nexport interface IconDescriptor {\n\t/**\n\t * The element to render. For the root this is `svg`\n\t */\n\telem: string;\n\t/**\n\t * An object of attributes to apply to the element.\n\t *\n\t * The type here is non-exhaustive.\n\t */\n\tattrs: {\n\t\txmlns: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\tviewBox: string,\n\t\tfill: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\twidth: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\theight: string,\n\t\t[x: string]: string\n\t};\n\t/**\n\t * The content (children) of the element as an array of `IconDescriptor`s\n\t * (usually without a few fields, namely `name` and `size`)\n\t */\n\tcontent: IconDescriptor[];\n\t/**\n\t * The name of the icon.\n\t *\n\t * Needed by the icon service.\n\t */\n\tname: string;\n\t/**\n\t * The size of the icon in pixels.\n\t *\n\t * Needed by the icon service.\n\t */\n\tsize: number;\n\t/**\n\t * Optional. A string representation of the compiled svg.\n\t * If missing the icon service will add this.\n\t */\n\tsvg?: string;\n}\n\n/**\n * Abstract class that represent a cache of icons.\n *\n * The actual caching mechanism will be implementation specific,\n * but it's likely a good idea to key by the icons name and/or size.\n * Icon name and size will always be strings, and they will be the two consistent\n * identifiers of an icon. For the purposes of storage additonal descriptor properties may\n * be used, but the name and size are the only ones guarenteed to be passed for lookup purposes.\n */\nexport abstract class IconCache {\n\t/**\n\t * Finds and returns an icon based on it's name and size\n\t */\n\tabstract get(name: string, size: string): object;\n\t/**\n\t * stores an icon descriptor to the cache\n\t */\n\tabstract set(name: string, size: string, descriptor: object): void;\n}\n\n/**\n * Custom error for when a name can't be found\n */\nexport class IconNameNotFoundError extends Error {\n\tconstructor(name: string) {\n\t\tsuper(`Icon ${name} not found`);\n\t}\n}\n\n/**\n * Custom error for when a specific size can't be found\n */\nexport class IconSizeNotFoundError extends Error {\n\tconstructor(size: string, name: string) {\n\t\tsuper(`Size ${size} for ${name} not found`);\n\t}\n}\n\n/**\n * Concrete implementation of `IconCache` as a simple in memory cache\n */\nexport class IconMemoryCache extends IconCache {\n\tprivate iconMap = new Map>();\n\n\tget(name: string, size: string) {\n\t\tif (!this.iconMap.has(name)) {\n\t\t\tthrow new IconNameNotFoundError(name);\n\t\t}\n\t\tconst sizeMap = this.iconMap.get(name);\n\t\tif (!sizeMap.has(size)) {\n\t\t\tthrow new IconSizeNotFoundError(size, name);\n\t\t}\n\t\treturn sizeMap.get(size);\n\t}\n\n\tset(name: string, size: string, descriptor: object) {\n\t\tif (!this.iconMap.has(name)) {\n\t\t\tthis.iconMap.set(name, new Map());\n\t\t}\n\t\tconst sizeMap = this.iconMap.get(name);\n\t\tsizeMap.set(size, descriptor);\n\t}\n}\n\n/**\n * The icon service is a singleton service responsible for registering and retriving icons from `@carbon/icons`.\n *\n * It's important to register icons before use. It's reccommended to register your icons early, likely in your app.component.\n *\n * To allow for improved tree shaking _do not_ import all the icons from `@carbon/icons` and register them.\n * Instead register only the icons in use by your application. If your application makes use of lazy loaded\n * modules you may also lazy load the icons used in that module by registering them early on in that module.\n *\n * `ngOnInit` should be sufficiantly early to register icons.\n *\n * Example:\n * ```\n * import { Accessibility16 } from \"@carbon/icons\";\n *\n * // ...\n *\n * class MyComponent implements OnInit {\n * \tconstructor(protected iconService: IconService) {}\n *\n * \t// ...\n *\n * \tngOnInit() {\n * \t\tthis.iconService.register(Accessibility16);\n * \t}\n *\n * \t// ...\n * }\n * ```\n *\n * If needed it is possible to register an icon under a different name, via `registerAs`.\n */\n@Injectable()\nexport class IconService {\n\tprivate iconCache: IconCache = new IconMemoryCache();\n\n\t/**\n\t * Registers an array of icons based on the metadata provided by `@carbon/icons`\n\t */\n\tpublic registerAll(descriptors: object[]) {\n\t\tdescriptors.forEach(icon => this.register(icon));\n\t}\n\n\t/**\n\t * Registers an icon based on the metadata provided by `@carbon/icons`\n\t */\n\tpublic register(descriptor: object) {\n\t\tconst { name } = descriptor as IconDescriptor;\n\t\tthis.registerAs(name, descriptor);\n\t}\n\n\t/**\n\t * Registers an icon based on a uniqe name and metadata provided by `@carbon/icons`\n\t */\n\tpublic registerAs(name: string, descriptor: object) {\n\t\tconst { size } = descriptor as IconDescriptor;\n\t\tthis.iconCache.set(name, size.toString(), descriptor);\n\t}\n\n\t/**\n\t * Gets an icon, converts it to a string, and caches the result\n\t */\n\tpublic get(name: string, size: string): IconDescriptor {\n\t\ttry {\n\t\t\tconst icon = this.iconCache.get(name, size.toString()) as IconDescriptor;\n\t\t\tif (!icon.svg) {\n\t\t\t\ticon.svg = toString(icon);\n\t\t\t}\n\t\t\treturn icon;\n\t\t} catch (e) {\n\t\t\tthrow e;\n\t\t}\n\t}\n\n\t/**\n\t * Configure various service settings (caching strategy ...)\n\t */\n\tpublic configure(options: { cache: IconCache }) {\n\t\tthis.iconCache = options.cache;\n\t}\n}\n", "properties": [ { "name": "attrs", "deprecated": false, "deprecationMessage": "", "type": "literal type", "optional": false, "description": "

An object of attributes to apply to the element.

\n

The type here is non-exhaustive.

\n", "line": 44, "rawdescription": "\n\nAn object of attributes to apply to the element.\n\nThe type here is non-exhaustive.\n" }, { "name": "content", "deprecated": false, "deprecationMessage": "", "type": "IconDescriptor[]", "optional": false, "description": "

The content (children) of the element as an array of IconDescriptors\n(usually without a few fields, namely name and size)

\n", "line": 59, "rawdescription": "\n\nThe content (children) of the element as an array of `IconDescriptor`s\n(usually without a few fields, namely `name` and `size`)\n" }, { "name": "elem", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

The element to render. For the root this is svg

\n", "line": 38, "rawdescription": "\n\nThe element to render. For the root this is `svg`\n" }, { "name": "name", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

The name of the icon.

\n

Needed by the icon service.

\n", "line": 65, "rawdescription": "\n\nThe name of the icon.\n\nNeeded by the icon service.\n" }, { "name": "size", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The size of the icon in pixels.

\n

Needed by the icon service.

\n", "line": 71, "rawdescription": "\n\nThe size of the icon in pixels.\n\nNeeded by the icon service.\n" }, { "name": "svg", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "

Optional. A string representation of the compiled svg.\nIf missing the icon service will add this.

\n", "line": 76, "rawdescription": "\n\nOptional. A string representation of the compiled svg.\nIf missing the icon service will add this.\n" } ], "indexSignatures": [], "kind": 171, "description": "

An object that represents a parsed icon

\n", "rawdescription": "\n\nAn object that represents a parsed icon\n", "methods": [], "extends": [] }, { "name": "ItemClickEvent", "id": "interface-ItemClickEvent-c8501f265294441e5f0427089a0c8204448c2ab6dd441f4ac2e46f26e0848b478b2b79365a7bdb5c03729f2819199405917a6192d839956d9c841e2a47e8d1fe", "file": "src/context-menu/context-menu.types.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "export interface ItemClickEvent {\n\ttype: null | \"checkbox\" | \"radio\";\n\tlabel: string;\n\tinfo: string;\n\tvalue: string;\n\tevent: MouseEvent & KeyboardEvent;\n}\n", "properties": [ { "name": "event", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 6 }, { "name": "info", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 4 }, { "name": "label", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 3 }, { "name": "type", "deprecated": false, "deprecationMessage": "", "type": "null | \"checkbox\" | \"radio\"", "optional": false, "description": "", "line": 2 }, { "name": "value", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 5 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "ListItem", "id": "interface-ListItem-043fe08147662c52d17dac8302eb87bf3ba4a5588b939c29ee862cf6e869f0d5de5011495bdd5cbfe9c10908c53b7368cba80937b1e840c02f1d278a09cc6579", "file": "src/dropdown/list-item.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "export interface ListItem {\n\t/**\n\t * Content to be displayed in the list.\n\t */\n\tcontent: string;\n\t/**\n\t * Flag for the selected state of the item.\n\t */\n\tselected: boolean;\n\t/**\n\t * If the item is in a disabled state.\n\t * (Note: not all lists have to support disabled states, and not all lists behave the same with disabled items)\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Optional nested items.\n\t */\n\titems?: ListItem[];\n\n\t/**\n\t * Allows for any other custom properties to be included in the ListItem\n\t */\n\t[x: string]: any;\n}\n", "properties": [ { "name": "content", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

Content to be displayed in the list.

\n", "line": 22, "rawdescription": "\n\nContent to be displayed in the list.\n" }, { "name": "disabled", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

If the item is in a disabled state.\n(Note: not all lists have to support disabled states, and not all lists behave the same with disabled items)

\n", "line": 31, "rawdescription": "\n\nIf the item is in a disabled state.\n(Note: not all lists have to support disabled states, and not all lists behave the same with disabled items)\n" }, { "name": "items", "deprecated": false, "deprecationMessage": "", "type": "ListItem[]", "optional": true, "description": "

Optional nested items.

\n", "line": 35, "rawdescription": "\n\nOptional nested items.\n" }, { "name": "selected", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": false, "description": "

Flag for the selected state of the item.

\n", "line": 26, "rawdescription": "\n\nFlag for the selected state of the item.\n" } ], "indexSignatures": [ { "id": "index-declaration-043fe08147662c52d17dac8302eb87bf3ba4a5588b939c29ee862cf6e869f0d5de5011495bdd5cbfe9c10908c53b7368cba80937b1e840c02f1d278a09cc6579", "args": [ { "name": "x", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "any", "line": 35, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAllows for any other custom properties to be included in the ListItem\n", "description": "

Allows for any other custom properties to be included in the ListItem

\n" } ], "kind": 181, "description": "

A generic structure that represents an item in a list.\nA list item may contain additional lists with sub-items to represent a tree.

\nExample :
export interface ListItem {\n    content: string;\n    selected: boolean;\n    disabled?: boolean;\n    items?: ListItem[];\n}

content and selected are the only required properties you must provide.\nWhen using a custom item template (supported by all the Carbon-Angular item views, not required by AbstractDropdownView)\nthe entire ListItem will be passed to the template as item.

\n", "rawdescription": "\n\nA generic structure that represents an item in a list.\nA list item may contain additional lists with sub-items to represent a tree.\n\n```typescript\nexport interface ListItem {\n\tcontent: string;\n\tselected: boolean;\n\tdisabled?: boolean;\n\titems?: ListItem[];\n}\n```\n\n`content` and `selected` are the only **required** properties you **must** provide.\nWhen using a custom item template (supported by all the Carbon-Angular item views, not required by AbstractDropdownView)\nthe entire ListItem will be passed to the template as `item`.\n", "methods": [], "extends": [] }, { "name": "ModalButton", "id": "interface-ModalButton-89b613a70b4a567cdfbde1b5723d43a05d54fd0b1ff69c173e9562ef34090a33b30ebd57e9cdd3d66b1a5c52d0768b8aa79dbb3ac2b99784307291bcba149369", "file": "src/modal/alert-modal.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "export enum AlertModalType {\n\tdefault = \"default\",\n\tdanger = \"danger\"\n}\n\nexport interface AlertModalData {\n\t/**\n\t * type of the modal\n\t */\n\ttype?: AlertModalType;\n\t/**\n\t * Additional label shown over the modal\n\t */\n\tlabel?: string;\n\t/**\n\t * Primary title for the modal\n\t */\n\ttitle?: string;\n\t/**\n\t * Content for the modal body, could include HTML tags\n\t */\n\tcontent?: string;\n\t/**\n\t * Size of the modal to display.\n\t */\n\tsize?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\t/**\n\t * Array of `ModalButton`s\n\t */\n\tbuttons?: Array;\n\t/**\n\t * Specify whether the modal contains scrolling content. This property overrides the automatic detection\n\t * of the existence of scrolling content. Set this property to `true` to force overflow indicator to\n\t * show up or to `false` to force overflow indicator to disappear.\n\t * It is set to `null` by default which indicates not to override automatic detection.\n\t */\n\thasScrollingContent?: boolean;\n\t/**\n\t * Callback for non-specific close events. `return false;` to prevent the modal from closing\n\t * Property trigger has a value of `overlay` or `close`\n\t */\n\tclose?: (trigger?: \"overlay\" | \"close\") => boolean;\n\t/**\n\t * Set to `false` to hide the header's close button.\n\t */\n\tshowCloseButton?: boolean;\n}\n\nexport enum ModalButtonType {\n\tprimary = \"primary\",\n\tsecondary = \"secondary\",\n\ttertiary = \"tertiary\",\n\tghost = \"ghost\",\n\tdanger = \"danger\",\n\tdanger_primary = \"danger--primary\"\n}\n\nexport interface ModalButton {\n\t/**\n\t * Display value of the button\n\t */\n\ttext: string;\n\t/**\n\t * Optional unique ID for the button\n\t */\n\tid?: string;\n\t/**\n\t * Button type\n\t */\n\ttype?: ModalButtonType;\n\t/**\n\t * Callback for the button `click` event\n\t */\n\tclick?: Function;\n}\n", "properties": [ { "name": "click", "deprecated": false, "deprecationMessage": "", "type": "Function", "optional": true, "description": "

Callback for the button click event

\n", "line": 74, "rawdescription": "\n\nCallback for the button `click` event\n" }, { "name": "id", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "

Optional unique ID for the button

\n", "line": 66, "rawdescription": "\n\nOptional unique ID for the button\n" }, { "name": "text", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

Display value of the button

\n", "line": 62, "rawdescription": "\n\nDisplay value of the button\n" }, { "name": "type", "deprecated": false, "deprecationMessage": "", "type": "ModalButtonType", "optional": true, "description": "

Button type

\n", "line": 70, "rawdescription": "\n\nButton type\n" } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "NavigationItem", "id": "interface-NavigationItem-30fb4c9b64de9b11fb7b28ddd3ee5e0fdba54a86d7277c8e757682aab1502c23396a9910e3513f9594ec08cb97a0954e1d45eed5fd6101d57dd431c31fbfcab0", "file": "src/ui-shell/header/header-navigation-items.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "export interface NavigationItem {\n\ttype: \"menu\" | \"item\";\n\ttitle?: string;\n\thref?: string;\n\ttrigger?: \"click\" | \"mouseover\";\n\troute?: any[];\n\trouteExtras?: any[];\n\tcontent?: string;\n\tisCurrentPage?: boolean;\n\tmenuItems?: HeaderItemInterface[];\n}\n\nexport interface HeaderItemInterface {\n\thref?: string;\n\troute?: any[];\n\trouteExtras?: any[];\n\tcontent?: string;\n}\n", "properties": [ { "name": "content", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "", "line": 12 }, { "name": "href", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "", "line": 8 }, { "name": "isCurrentPage", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "", "line": 13 }, { "name": "menuItems", "deprecated": false, "deprecationMessage": "", "type": "HeaderItemInterface[]", "optional": true, "description": "", "line": 14 }, { "name": "route", "deprecated": false, "deprecationMessage": "", "type": "any[]", "optional": true, "description": "", "line": 10 }, { "name": "routeExtras", "deprecated": false, "deprecationMessage": "", "type": "any[]", "optional": true, "description": "", "line": 11 }, { "name": "title", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "", "line": 7 }, { "name": "trigger", "deprecated": false, "deprecationMessage": "", "type": "\"click\" | \"mouseover\"", "optional": true, "description": "", "line": 9 }, { "name": "type", "deprecated": false, "deprecationMessage": "", "type": "\"menu\" | \"item\"", "optional": false, "description": "", "line": 6 } ], "indexSignatures": [], "kind": 171, "description": "

Used for both HeaderMenus and HeaderItems in the header navigation to generate\nitems and menus through a model.

\n", "rawdescription": "\n\nUsed for both HeaderMenus and HeaderItems in the header navigation to generate\nitems and menus through a model.\n", "methods": [], "extends": [] }, { "name": "Node", "id": "interface-Node-be3eae17d143a1c4f4f77c37a2ccd29b23c49139c15ebbe4b45a7cce0f6d0246c96c7082462e0fd64e0fd48fee5c428b973e04a3ce4a05d3c7ce5b56e718609d", "file": "src/treeview/tree-node.types.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { TemplateRef } from \"@angular/core\";\n\nexport interface Node {\n\tlabel: string | TemplateRef;\n\tlabelContext?: any;\n\tvalue?: any;\n\tid?: string;\n\tactive?: boolean;\n\tdisabled?: boolean;\n\t// Selectable is only valid for nodes with children.\n\t// If true, the node won't become selected and if clicked it would only expand/compress itself\n\tselectable?: boolean;\n\texpanded?: boolean;\n\tselected?: boolean;\n\ticon?: string | TemplateRef;\n\ticonContext?: any;\n\tgap?: number;\n\tchildren?: Node[];\n\t[key: string]: any;\n}\n\nexport interface EventOnNode {\n\tnode: Node;\n\tevent: Event;\n}\n", "properties": [ { "name": "active", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "", "line": 8 }, { "name": "children", "deprecated": false, "deprecationMessage": "", "type": "Node[]", "optional": true, "description": "", "line": 18 }, { "name": "disabled", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "", "line": 9 }, { "name": "expanded", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "", "line": 13 }, { "name": "gap", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": true, "description": "", "line": 17 }, { "name": "icon", "deprecated": false, "deprecationMessage": "", "type": "string | TemplateRef", "optional": true, "description": "", "line": 15 }, { "name": "iconContext", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": true, "description": "", "line": 16 }, { "name": "id", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "", "line": 7 }, { "name": "label", "deprecated": false, "deprecationMessage": "", "type": "string | TemplateRef", "optional": false, "description": "", "line": 4 }, { "name": "labelContext", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": true, "description": "", "line": 5 }, { "name": "selectable", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "", "line": 12 }, { "name": "selected", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "", "line": 14 }, { "name": "value", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": true, "description": "", "line": 6 } ], "indexSignatures": [ { "id": "index-declaration-be3eae17d143a1c4f4f77c37a2ccd29b23c49139c15ebbe4b45a7cce0f6d0246c96c7082462e0fd64e0fd48fee5c428b973e04a3ce4a05d3c7ce5b56e718609d", "args": [ { "name": "key", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "any", "line": 18, "deprecated": false, "deprecationMessage": "" } ], "kind": 181, "methods": [], "extends": [] }, { "name": "NotificationAction", "id": "interface-NotificationAction-1e6a0d1f177d4ea78a97cdf66c1ab84910c5ffe5331a4e85a112f2426a6a73d2ffb92831d54dc953f511f39496ccfbc691a60a13597c3eb31b601738df0cfaf3", "file": "src/notification/notification-content.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { Subject } from \"rxjs\";\nimport { TemplateRef } from \"@angular/core\";\n\nexport type NotificationType = \"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\";\nexport type NotificationVariants = \"inline\" | \"toast\";\n\nexport interface NotificationContent {\n\t[key: string]: any;\n\ttype: NotificationType;\n\ttitle: string;\n\ttarget?: string;\n\tduration?: number;\n\tsmart?: boolean;\n\tcloseLabel?: any;\n\tmessage?: string;\n\tshowClose?: boolean;\n\tlowContrast?: boolean;\n\ttemplate?: TemplateRef;\n}\n\nexport interface ActionableContent extends NotificationContent {\n\tactionsTemplate?: TemplateRef;\n\tactions?: NotificationAction[];\n\tlinks?: NotificationLink[];\n\tvariant?: NotificationVariants;\n}\n\nexport interface ToastContent extends NotificationContent {\n\tsubtitle: string;\n\tcaption: string;\n}\n\nexport interface NotificationAction {\n\ttext: string;\n\tclick: Subject<{ event: Event, action: any }> | ((event: { event: Event, action: any }) => any);\n\t[key: string]: any;\n}\n\nexport interface NotificationLink {\n\ttext: string;\n\thref: string;\n}\n", "properties": [ { "name": "click", "deprecated": false, "deprecationMessage": "", "type": "Subject | ", "optional": false, "description": "", "line": 35 }, { "name": "text", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 34 } ], "indexSignatures": [ { "id": "index-declaration-1e6a0d1f177d4ea78a97cdf66c1ab84910c5ffe5331a4e85a112f2426a6a73d2ffb92831d54dc953f511f39496ccfbc691a60a13597c3eb31b601738df0cfaf3", "args": [ { "name": "key", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "any", "line": 35, "deprecated": false, "deprecationMessage": "" } ], "kind": 181, "methods": [], "extends": [] }, { "name": "NotificationContent", "id": "interface-NotificationContent-1e6a0d1f177d4ea78a97cdf66c1ab84910c5ffe5331a4e85a112f2426a6a73d2ffb92831d54dc953f511f39496ccfbc691a60a13597c3eb31b601738df0cfaf3", "file": "src/notification/notification-content.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { Subject } from \"rxjs\";\nimport { TemplateRef } from \"@angular/core\";\n\nexport type NotificationType = \"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\";\nexport type NotificationVariants = \"inline\" | \"toast\";\n\nexport interface NotificationContent {\n\t[key: string]: any;\n\ttype: NotificationType;\n\ttitle: string;\n\ttarget?: string;\n\tduration?: number;\n\tsmart?: boolean;\n\tcloseLabel?: any;\n\tmessage?: string;\n\tshowClose?: boolean;\n\tlowContrast?: boolean;\n\ttemplate?: TemplateRef;\n}\n\nexport interface ActionableContent extends NotificationContent {\n\tactionsTemplate?: TemplateRef;\n\tactions?: NotificationAction[];\n\tlinks?: NotificationLink[];\n\tvariant?: NotificationVariants;\n}\n\nexport interface ToastContent extends NotificationContent {\n\tsubtitle: string;\n\tcaption: string;\n}\n\nexport interface NotificationAction {\n\ttext: string;\n\tclick: Subject<{ event: Event, action: any }> | ((event: { event: Event, action: any }) => any);\n\t[key: string]: any;\n}\n\nexport interface NotificationLink {\n\ttext: string;\n\thref: string;\n}\n", "properties": [ { "name": "closeLabel", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": true, "description": "", "line": 14 }, { "name": "duration", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": true, "description": "", "line": 12 }, { "name": "lowContrast", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "", "line": 17 }, { "name": "message", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "", "line": 15 }, { "name": "showClose", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "", "line": 16 }, { "name": "smart", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "", "line": 13 }, { "name": "target", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "", "line": 11 }, { "name": "template", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": true, "description": "", "line": 18 }, { "name": "title", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 10 }, { "name": "type", "deprecated": false, "deprecationMessage": "", "type": "NotificationType", "optional": false, "description": "", "line": 9 } ], "indexSignatures": [ { "id": "index-declaration-1e6a0d1f177d4ea78a97cdf66c1ab84910c5ffe5331a4e85a112f2426a6a73d2ffb92831d54dc953f511f39496ccfbc691a60a13597c3eb31b601738df0cfaf3", "args": [ { "name": "key", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "any", "line": 7, "deprecated": false, "deprecationMessage": "" } ], "kind": 171, "methods": [], "extends": [] }, { "name": "NotificationLink", "id": "interface-NotificationLink-1e6a0d1f177d4ea78a97cdf66c1ab84910c5ffe5331a4e85a112f2426a6a73d2ffb92831d54dc953f511f39496ccfbc691a60a13597c3eb31b601738df0cfaf3", "file": "src/notification/notification-content.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { Subject } from \"rxjs\";\nimport { TemplateRef } from \"@angular/core\";\n\nexport type NotificationType = \"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\";\nexport type NotificationVariants = \"inline\" | \"toast\";\n\nexport interface NotificationContent {\n\t[key: string]: any;\n\ttype: NotificationType;\n\ttitle: string;\n\ttarget?: string;\n\tduration?: number;\n\tsmart?: boolean;\n\tcloseLabel?: any;\n\tmessage?: string;\n\tshowClose?: boolean;\n\tlowContrast?: boolean;\n\ttemplate?: TemplateRef;\n}\n\nexport interface ActionableContent extends NotificationContent {\n\tactionsTemplate?: TemplateRef;\n\tactions?: NotificationAction[];\n\tlinks?: NotificationLink[];\n\tvariant?: NotificationVariants;\n}\n\nexport interface ToastContent extends NotificationContent {\n\tsubtitle: string;\n\tcaption: string;\n}\n\nexport interface NotificationAction {\n\ttext: string;\n\tclick: Subject<{ event: Event, action: any }> | ((event: { event: Event, action: any }) => any);\n\t[key: string]: any;\n}\n\nexport interface NotificationLink {\n\ttext: string;\n\thref: string;\n}\n", "properties": [ { "name": "href", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 41 }, { "name": "text", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 40 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "PaginationNavTranslations", "id": "interface-PaginationNavTranslations-02747b3f02dda4195eb9b8d17de227f10ddb93cd71d7303c3e81567547ccb446b5f32191b820b258e4c180ac7d7172629000d09893bd3b623c8f47837e111b52", "file": "src/pagination/pagination-nav/pagination-nav.component.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { PaginationModel } from \"../pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { merge } from \"carbon-components-angular/utils\";\nimport { range } from \"carbon-components-angular/common\";\n\nexport interface PaginationNavTranslations {\n\tNEXT: string;\n\tPREVIOUS: string;\n}\n\n/**\n * Use pagination when you have multiple pages of data to handle. Get started with importing the module:\n *\n * ```typescript\n * import { PaginationModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * \n * ```\n *\n * In your `selectPage()` method set the `model.currentPage` to selected page, _after_\n * you load the page.\n *\n * ```typescript\n * selectPage(page) {\n * \t// ... your code to load the page goes here\n *\n * \tthis.model.currentPage = page;\n *\n * \t// ... anything you want to do after page selection changes goes here\n * }\n * ```\n *\n * [See demo](../../?path=/story/components-pagination-nav--basic)\n */\n@Component({\n\tselector: \"cds-pagination-nav, ibm-pagination-navm\",\n\ttemplate: `\n\t
\n\t\t
\n\t\t\t
    \n\t\t\t\t
  • \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    • \n\t\t\t\t= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)\"\n\t\t\t\t\tpage=\"1\"\n\t\t\t\t\t(click)=\"currentPage = 1\"\n\t\t\t\t\t[isActive]=\"currentPage == 1\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t 1\"\n\t\t\t\t\t[page]=\"totalNumbersArray.length\"\n\t\t\t\t\t(click)=\"currentPage = totalNumbersArray.length\"\n\t\t\t\t\t[isActive]=\"currentPage == totalNumbersArray.length\">\n\t\t\t\t\n\t\t\t\t
  • \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    • \n\t\t\t
\n\t\t
\n\t
\n\t`\n})\nexport class PaginationNav {\n\tstatic paginationCounter = 0;\n\t/**\n\t * `PaginationNavModel` with the information about pages you're controlling.\n\t */\n\t@Input() model: PaginationModel;\n\t/**\n\t * Set to `true` to disable the backward/forward buttons.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Number of items to show in pagination. Minimum is 4.\n\t */\n\t@Input() numOfItemsToShow = 4;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"NEXT\": \"Next\",\n\t *\t\t\"PREVIOUS\": \"Previous\",\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value: PaginationNavTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.nextItemText.override(valueWithDefaults.NEXT);\n\t\tthis.previousItemText.override(valueWithDefaults.PREVIOUS);\n\t}\n\n\t/**\n\t * Sets the pagination nav size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t// Size\n\t@HostBinding(\"class.cds--layout--size-sm\") get smallLayoutSize() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get mediumLayoutSize() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get largeLayoutSize() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t/**\n\t * Emits the new page number.\n\t *\n\t * You should tie into this and update `model.currentPage` once the fresh\n\t * data is finally loaded.\n\t */\n\t@Output() selectPage = new EventEmitter();\n\n\tget totalNumbersArray() {\n\t\treturn range(this.totalDataLength + 1, 1);\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\n\tset currentPage(value) {\n\t\tvalue = Number(value);\n\t\t// emits the value to allow the user to update current page\n\t\t// in the model once the page is loaded\n\t\tthis.selectPage.emit(value);\n\t}\n\n\tget totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\n\tget startOffset() {\n\t\treturn this.numOfItemsToShow <= 4 && this.currentPage > 1 ? 0 : 1;\n\t}\n\n\tget frontCuts() {\n\t\tconst cuts = this.getCuts();\n\t\treturn cuts.front;\n\t}\n\n\tget backCuts() {\n\t\tconst cuts = this.getCuts();\n\t\treturn cuts.back;\n\t}\n\n\tget leftArrowDisabled() {\n\t\treturn this.disabled || this.currentPage === 1;\n\t}\n\n\tget rightArrowDisabled() {\n\t\treturn this.disabled || this.currentPage === this.totalDataLength;\n\t}\n\n\tnextItemText = this.i18n.getOverridable(\"PAGINATION.NEXT\");\n\tpreviousItemText = this.i18n.getOverridable(\"PAGINATION.PREVIOUS\");\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPaginationNav.paginationCounter++;\n\t}\n\n\thandleOverflowSelection(page) {\n\t\tif (typeof page === \"number\") {\n\t\t\tthis.currentPage = page;\n\t\t}\n\t}\n\n\tpublic jumpToNext() {\n\t\tthis.currentPage = this.currentPage < this.totalDataLength ? this.currentPage + 1 : this.totalDataLength;\n\t}\n\n\tpublic jumpToPrevious() {\n\t\tthis.currentPage = this.currentPage > 1 ? this.currentPage - 1 : 1;\n\t}\n\n\tpublic getPages() {\n\t\tif (this.totalDataLength <= 1) {\n\t\t\treturn null;\n\t\t}\n\t\tconst cuts = this.getCuts();\n\t\treturn this.totalNumbersArray.slice(this.startOffset + cuts.front, (1 + cuts.back) * -1);\n\t}\n\n\tprivate getCuts(splitPoint = null) {\n\t\tconst page = this.currentPage - 1;\n\t\tconst totalItems = this.totalDataLength;\n\t\tconst itemsThatFit = this.numOfItemsToShow;\n\n\t\tif (itemsThatFit >= totalItems) {\n\t\t\treturn {\n\t\t\t\tfront: 0,\n\t\t\t\tback: 0\n\t\t\t};\n\t\t}\n\t\tconst split = splitPoint || Math.ceil(itemsThatFit / 2) - 1;\n\t\tlet frontHidden = page + 1 - split;\n\t\tlet backHidden = totalItems - page - (itemsThatFit - split) + 1;\n\n\t\tif (frontHidden <= 1) {\n\t\t\tbackHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;\n\t\t\tfrontHidden = 0;\n\t\t}\n\t\tif (backHidden <= 1) {\n\t\t\tfrontHidden -= backHidden <= 0 ? Math.abs(backHidden) + 1 : 0;\n\t\t\tbackHidden = 0;\n\t\t}\n\t\treturn {\n\t\t\tfront: frontHidden,\n\t\t\tback: backHidden\n\t\t};\n\t}\n}\n", "properties": [ { "name": "NEXT", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 16 }, { "name": "PREVIOUS", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 17 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "PaginationTranslations", "id": "interface-PaginationTranslations-498d1b7f28e249198f36024770e3da5187e679e1768caa47ddf368ad36aa53a0e28dba75abac78353c5268a39a0c508412543491b68c3cfb9614f95b44306089", "file": "src/pagination/pagination.component.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { PaginationModel } from \"./pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface PaginationTranslations {\n\tITEMS_PER_PAGE: string;\n\tOPEN_LIST_OF_OPTIONS: string;\n\tBACKWARD: string;\n\tFORWARD: string;\n\tTOTAL_ITEMS_UNKNOWN: string;\n\tTOTAL_ITEMS: string;\n\tTOTAL_ITEM: string;\n\tOF_LAST_PAGES: string;\n\tOF_LAST_PAGE: string;\n}\n\n/**\n * Use pagination when you have multiple pages of data to handle. Get started with importing the module:\n *\n * ```typescript\n * import { PaginationModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n *\t\n * ```\n *\n * In your `selectPage()` method set the `model.currentPage` to selected page, _after_\n * you load the page.\n *\n * ```typescript\n * selectPage(page) {\n * \t// ... your code to load the page goes here\n *\n * \tthis.model.currentPage = page;\n *\n * \t// ... anything you want to do after page selection changes goes here\n * }\n * ```\n *\n * [See demo](../../?path=/story/components-pagination--basic)\n */\n@Component({\n\tselector: \"cds-pagination, ibm-pagination\",\n\ttemplate: `\n\t\n\t\t\n\t\t
\n\t\t\t

\n\t\t\t

\n\t\t\t

\n\t\t
\n\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t\n\t\t\t 1\" class=\"cds--pagination__text cds--pagination__items-count\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t\n\t\t\t\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t\n\t\t\n\n\t\t\n\t\t
\n\t\t\t

\n\t\t
\n\n\t\t
\n\t\t\t\n\t\t\t\t{{currentPage}}\n\t\t\t\t{{pageText.subject | async}}\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t pageSelectThreshold\"\n\t\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\n\t\t\t\n\t\t\t\t{{currentPage}}\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t\n\t\t\t 1\" class=\"cds--pagination__text\">\n\t\t\t\t{{currentPage}}\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\n\t\t\t\t= lastPage || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\n\t`\n})\nexport class Pagination {\n\tstatic paginationCounter = 0;\n\n\t/**\n\t * Set to `true` for a loading pagination component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * `PaginationModel` with the information about pages you're controlling.\n\t */\n\t@Input() model: PaginationModel;\n\t/**\n \t * Set to `true` to disable the backward/forward buttons.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to disable the select box that changes the page.\n\t */\n\t@Input() pageInputDisabled = false;\n\t/**\n\t * Controls wether or not to show the page selects\n\t */\n\t@Input() showPageInput = true;\n\t/**\n\t * Set to `true` if the total number of items is unknown.\n\t */\n\t@Input() pagesUnknown = false;\n\t@Input() pageSelectThreshold = 1000;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"ITEMS_PER_PAGE\": \"Items per page:\",\n\t *\t\t\"OPEN_LIST_OF_OPTIONS\": \"Open list of options\",\n\t *\t\t\"BACKWARD\": \"Backward\",\n\t *\t\t\"FORWARD\": \"Forward\",\n\t *\t\t\"TOTAL_ITEMS_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t *\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t *\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t *\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t *\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations (value: PaginationTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE);\n\t\tthis.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS);\n\t\tthis.backwardText.override(valueWithDefaults.BACKWARD);\n\t\tthis.forwardText.override(valueWithDefaults.FORWARD);\n\t\tthis.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS);\n\t\tthis.totalItemText.override(valueWithDefaults.TOTAL_ITEM);\n\t\tthis.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN);\n\t\tthis.pageText.override(valueWithDefaults.PAGE);\n\t\tthis.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES);\n\t\tthis.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE);\n\t}\n\n\t/**\n\t * Options for items per page select\n\t *\n\t * A default array of options will be defined: [10, 20, 30, 40, 50]\n\t */\n\t@Input() itemsPerPageOptions: number[] = [10, 20, 30, 40, 50];\n\n\t/**\n\t * Emits the new page number.\n\t *\n\t * You should tie into this and update `model.currentPage` once the fresh\n\t * data is finally loaded.\n\t */\n\t@Output() selectPage = new EventEmitter();\n\n\tget itemsPerPage() {\n\t\treturn this.model.pageLength;\n\t}\n\tset itemsPerPage(value) {\n\t\tthis.model.pageLength = Number(value);\n\t\tthis.currentPage = 1; // reset page\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\tset currentPage(value) {\n\t\tvalue = Number(value);\n\t\t// emits the value to allow the user to update current page\n\t\t// in the model once the page is loaded\n\t\tthis.selectPage.emit(value);\n\t}\n\n\tget totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\t/**\n\t * The last page number to display in the pagination view.\n\t */\n\tget lastPage(): number {\n\t\tconst last = Math.ceil(this.totalDataLength / this.itemsPerPage);\n\t\treturn last > 0 ? last : 1;\n\t}\n\n\tget startItemIndex() {\n\t\treturn this.endItemIndex > 0 ? (this.currentPage - 1) * this.itemsPerPage + 1 : 0;\n\t}\n\n\tget endItemIndex() {\n\t\tconst projectedEndItemIndex = this.currentPage * this.itemsPerPage;\n\n\t\treturn projectedEndItemIndex < this.totalDataLength ? projectedEndItemIndex : this.totalDataLength;\n\t}\n\n\t/**\n\t * The previous page number to navigate to, from the current page.\n\t */\n\tget previousPage(): number {\n\t\treturn this.currentPage <= 1 ? 1 : this.currentPage - 1;\n\t}\n\n\t/**\n\t * The next page number to navigate to, from the current page.\n\t */\n\tget nextPage(): number {\n\t\tconst lastPage = this.lastPage;\n\t\treturn this.currentPage >= lastPage ? lastPage : this.currentPage + 1;\n\t}\n\n\tget pageOptions() {\n\t\t/**\n\t\t * Calculate number of pages based on totalDataLength and itemsPerPage.\n\t\t * Even if totalDataLength is 0, numberOfPages should be always at least 1.\n\t\t * New array will be constructed only if number of pages changes.\n\t\t */\n\t\tconst numberOfPages = Math.max(Math.ceil(this.totalDataLength / this.itemsPerPage), 1);\n\t\tif (this._pageOptions.length !== numberOfPages) {\n\t\t\tthis._pageOptions = Array(numberOfPages);\n\t\t}\n\t\treturn this._pageOptions;\n\t}\n\n\titemsPerPageSelectId = `pagination-select-items-per-page-${Pagination.paginationCounter}`;\n\tcurrentPageSelectId = `pagination-select-current-page-${Pagination.paginationCounter}`;\n\n\titemsPerPageText = this.i18n.getOverridable(\"PAGINATION.ITEMS_PER_PAGE\");\n\toptionsListText = this.i18n.getOverridable(\"PAGINATION.OPEN_LIST_OF_OPTIONS\");\n\tbackwardText = this.i18n.getOverridable(\"PAGINATION.BACKWARD\");\n\tforwardText = this.i18n.getOverridable(\"PAGINATION.FORWARD\");\n\ttotalItemsText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS\");\n\ttotalItemText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEM\");\n\ttotalItemsUnknownText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS_UNKNOWN\");\n\tpageText = this.i18n.getOverridable(\"PAGINATION.PAGE\");\n\tofLastPagesText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGES\");\n\tofLastPageText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGE\");\n\n\tprotected _pageOptions = [];\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPagination.paginationCounter++;\n\t}\n}\n", "properties": [ { "name": "BACKWARD", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 16 }, { "name": "FORWARD", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 17 }, { "name": "ITEMS_PER_PAGE", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 14 }, { "name": "OF_LAST_PAGE", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 22 }, { "name": "OF_LAST_PAGES", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 21 }, { "name": "OPEN_LIST_OF_OPTIONS", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 15 }, { "name": "TOTAL_ITEM", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 20 }, { "name": "TOTAL_ITEMS", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 19 }, { "name": "TOTAL_ITEMS_UNKNOWN", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 18 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "ScrollCustomEvent", "id": "interface-ScrollCustomEvent-cbf25f1a83ee1a9062db6c65c9b49a9d931d38c87036e24c17b1c60e6c9b07bbdcd58aaac233acd0140582e76031fe4371c00ae24b873724ac691d9702dfa9af", "file": "src/dropdown/list/scroll-custom-event.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "export interface ScrollCustomEvent {\n\t/**\n\t * Flag to communicate if scroll is at the top of container\n\t */\n\tatTop: boolean;\n\t/**\n\t * Flag to communicate if scroll is at the bottom of container\n\t */\n\tatBottom: boolean;\n\t/**\n\t * Complete Scroll event available to get any more data required\n\t */\n\tevent: Event;\n}\n", "properties": [ { "name": "atBottom", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": false, "description": "

Flag to communicate if scroll is at the bottom of container

\n", "line": 20, "rawdescription": "\n\nFlag to communicate if scroll is at the bottom of container\n" }, { "name": "atTop", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": false, "description": "

Flag to communicate if scroll is at the top of container

\n", "line": 16, "rawdescription": "\n\nFlag to communicate if scroll is at the top of container\n" }, { "name": "event", "deprecated": false, "deprecationMessage": "", "type": "Event", "optional": false, "description": "

Complete Scroll event available to get any more data required

\n", "line": 24, "rawdescription": "\n\nComplete Scroll event available to get any more data required\n" } ], "indexSignatures": [], "kind": 171, "description": "

A custom structure that represents a custom event to emit when scroll.

\nExample :
export interface ScrollCustomEvent {\n    atTop: boolean;\n    atBottom: boolean;\n    event: Event;\n}
", "rawdescription": "\n\nA custom structure that represents a custom event to emit when scroll.\n\n```typescript\nexport interface ScrollCustomEvent {\n\tatTop: boolean;\n\tatBottom: boolean;\n\tevent: Event;\n}\n```\n", "methods": [], "extends": [] }, { "name": "SideNavItemInterface", "id": "interface-SideNavItemInterface-c69fe83e412af34518c055d7a1dd14ea9ba7c9ba964eccde3dfaa52cab2844657440adfa9c8ee201ea0bfeecca82aa94d2d48573564503379f2dd275a56c8422", "file": "src/ui-shell/sidenav/sidenav-item.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { HeaderItemInterface } from \"../header/header.module\";\n\nexport interface SideNavItemInterface extends HeaderItemInterface {\n\tisSubMenu?: boolean;\n\tactive?: boolean;\n}\n", "properties": [ { "name": "active", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "", "line": 5 }, { "name": "isSubMenu", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "", "line": 4 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [ "HeaderItemInterface" ] }, { "name": "Step", "id": "interface-Step-377efc3bbf7e4d6fc469c7a9338110653ec49977c1a3024f18eeb465cf032e9c774e80b1478ba65d202fad027e99bc98d128484696aa9974553116ce50026e38", "file": "src/progress-indicator/progress-indicator-step.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "export interface Step {\n\t/**\n\t * The label of the `step`\n\t */\n\tlabel: string;\n\t/**\n\t * Optional label with additional information\n\t */\n\tsecondaryLabel?: string;\n\t/**\n\t * Determines whether the step is complete or incomplete\n\t */\n\tcomplete?: boolean;\n\t/**\n\t * Determines whether the step is invalid or valid\n\t */\n\tinvalid?: boolean;\n\t/**\n\t * Function to execute on click\n\t */\n\tonClick?: Function;\n\t/**\n\t * Determines whether the step is disabled or not\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Icon description\n\t */\n\tdescription?: string;\n}\n", "properties": [ { "name": "complete", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

Determines whether the step is complete or incomplete

\n", "line": 13, "rawdescription": "\n\nDetermines whether the step is complete or incomplete\n" }, { "name": "description", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "

Icon description

\n", "line": 29, "rawdescription": "\n\nIcon description\n" }, { "name": "disabled", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

Determines whether the step is disabled or not

\n", "line": 25, "rawdescription": "\n\nDetermines whether the step is disabled or not\n" }, { "name": "invalid", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

Determines whether the step is invalid or valid

\n", "line": 17, "rawdescription": "\n\nDetermines whether the step is invalid or valid\n" }, { "name": "label", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

The label of the step

\n", "line": 5, "rawdescription": "\n\nThe label of the `step`\n" }, { "name": "onClick", "deprecated": false, "deprecationMessage": "", "type": "Function", "optional": true, "description": "

Function to execute on click

\n", "line": 21, "rawdescription": "\n\nFunction to execute on click\n" }, { "name": "secondaryLabel", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "

Optional label with additional information

\n", "line": 9, "rawdescription": "\n\nOptional label with additional information\n" } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "TableTranslations", "id": "interface-TableTranslations-0b6096c73ee59d73392a19aa2f8fc16005275b958470fcf37f3a6bda262dd109d5520044419625f9465c6cace00027221ebe1217c3d6dadbc6a861315052fdaf", "file": "src/table/table.types.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "export interface TableTranslations {\n\tFILTER: string;\n\tEND_OF_DATA: string;\n\tSCROLL_TOP: string;\n\tCHECKBOX_HEADER: string;\n\tCHECKBOX_ROW: string;\n}\n\nexport type TableRowSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n", "properties": [ { "name": "CHECKBOX_HEADER", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 5 }, { "name": "CHECKBOX_ROW", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 6 }, { "name": "END_OF_DATA", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 3 }, { "name": "FILTER", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 2 }, { "name": "SCROLL_TOP", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 4 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "TileSelection", "id": "interface-TileSelection-2b40eef8e04f491679840c0b223759a6ff35e8c2fdf8dd12075a706d41505c8b44f5a9e2e7389b40fadc7880ee838acc47f7b066b21c076113516afab532c189", "file": "src/tiles/tile-selection.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "export interface TileSelection {\n\tvalue: string;\n\tselected: boolean;\n\tname: string;\n}\n", "properties": [ { "name": "name", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 4 }, { "name": "selected", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": false, "description": "", "line": 3 }, { "name": "value", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 2 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [] }, { "name": "ToastContent", "id": "interface-ToastContent-1e6a0d1f177d4ea78a97cdf66c1ab84910c5ffe5331a4e85a112f2426a6a73d2ffb92831d54dc953f511f39496ccfbc691a60a13597c3eb31b601738df0cfaf3", "file": "src/notification/notification-content.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { Subject } from \"rxjs\";\nimport { TemplateRef } from \"@angular/core\";\n\nexport type NotificationType = \"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\";\nexport type NotificationVariants = \"inline\" | \"toast\";\n\nexport interface NotificationContent {\n\t[key: string]: any;\n\ttype: NotificationType;\n\ttitle: string;\n\ttarget?: string;\n\tduration?: number;\n\tsmart?: boolean;\n\tcloseLabel?: any;\n\tmessage?: string;\n\tshowClose?: boolean;\n\tlowContrast?: boolean;\n\ttemplate?: TemplateRef;\n}\n\nexport interface ActionableContent extends NotificationContent {\n\tactionsTemplate?: TemplateRef;\n\tactions?: NotificationAction[];\n\tlinks?: NotificationLink[];\n\tvariant?: NotificationVariants;\n}\n\nexport interface ToastContent extends NotificationContent {\n\tsubtitle: string;\n\tcaption: string;\n}\n\nexport interface NotificationAction {\n\ttext: string;\n\tclick: Subject<{ event: Event, action: any }> | ((event: { event: Event, action: any }) => any);\n\t[key: string]: any;\n}\n\nexport interface NotificationLink {\n\ttext: string;\n\thref: string;\n}\n", "properties": [ { "name": "caption", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 30 }, { "name": "subtitle", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 29 } ], "indexSignatures": [], "kind": 171, "methods": [], "extends": [ "NotificationContent" ] }, { "name": "TooltipConfig", "id": "interface-TooltipConfig-d5cd824d57567c4de97dc9f53202d01da3ab0806d8c6ba861431fde41494bfa7b599f6071a1a37f423ce7fbc45b3936cd49a3199a69153a8492024055e9dfb03", "file": "src/tooltip/tooltip.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "interface", "sourceCode": "import { TemplateRef } from \"@angular/core\";\n\nexport type TooltipAlignments = \"top\" | \"top-left\" | \"top-right\" |\n\t\"bottom\" | \"bottom-left\" | \"bottom-right\" |\n\t\"left\" | \"left-bottom\" | \"left-top\" |\n\t\"right\" | \"right-bottom\" | \"right-top\";\n\n/**\n * Tooltip attributes\n */\nexport interface TooltipConfig {\n\t/**\n\t * The string or template content to be exposed by the tooltip.\n\t */\n\tdescription: string | TemplateRef;\n\t/**\n\t * Specify the tooltip alignement\n\t */\n\talign?: TooltipAlignments;\n\t/**\n\t * Set to `false` to hide caret\n\t */\n\tcaret?: boolean;\n\t/**\n\t * Set to `false` to hide shadow\n\t */\n\tdropShadow?: boolean;\n\t/**\n\t * Set to `true` to enable high contrast\n\t */\n\thighContrast?: boolean;\n\t/**\n\t * Set to `true` to have the popover open by default\n\t * Tooltip will not remain open if user interacts with it (mouseenter & leave) or clicks anywhere in window\n\t */\n\tisOpen?: boolean;\n\t/**\n\t * Set delay before tooltip is shown\n\t */\n\tenterDelayMs?: number;\n\t/**\n\t * Set delay when tooltip disappears\n\t */\n\tleaveDelayMs?: number;\n}\n\n/**\n * Default tooltip configuration for components to populate missing interface attributes\n */\nexport const DEFAULT_TOOLTIP_CONFIG = {\n\talign: \"bottom\" as TooltipAlignments,\n\tcaret: true,\n\tdropShadow: true,\n\thighContrast: true,\n\tisOpen: false,\n\tenterDelayMs: 100,\n\tleaveDelayMs: 300\n};\n", "properties": [ { "name": "align", "deprecated": false, "deprecationMessage": "", "type": "TooltipAlignments", "optional": true, "description": "

Specify the tooltip alignement

\n", "line": 19, "rawdescription": "\n\nSpecify the tooltip alignement\n" }, { "name": "caret", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

Set to false to hide caret

\n", "line": 23, "rawdescription": "\n\nSet to `false` to hide caret\n" }, { "name": "description", "deprecated": false, "deprecationMessage": "", "type": "string | TemplateRef", "optional": false, "description": "

The string or template content to be exposed by the tooltip.

\n", "line": 15, "rawdescription": "\n\nThe string or template content to be exposed by the tooltip.\n" }, { "name": "dropShadow", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

Set to false to hide shadow

\n", "line": 27, "rawdescription": "\n\nSet to `false` to hide shadow\n" }, { "name": "enterDelayMs", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": true, "description": "

Set delay before tooltip is shown

\n", "line": 40, "rawdescription": "\n\nSet delay before tooltip is shown\n" }, { "name": "highContrast", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

Set to true to enable high contrast

\n", "line": 31, "rawdescription": "\n\nSet to `true` to enable high contrast\n" }, { "name": "isOpen", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": true, "description": "

Set to true to have the popover open by default\nTooltip will not remain open if user interacts with it (mouseenter & leave) or clicks anywhere in window

\n", "line": 36, "rawdescription": "\n\nSet to `true` to have the popover open by default\nTooltip will not remain open if user interacts with it (mouseenter & leave) or clicks anywhere in window\n" }, { "name": "leaveDelayMs", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": true, "description": "

Set delay when tooltip disappears

\n", "line": 44, "rawdescription": "\n\nSet delay when tooltip disappears\n" } ], "indexSignatures": [], "kind": 171, "description": "

Tooltip attributes

\n", "rawdescription": "\n\nTooltip attributes\n", "methods": [], "extends": [] } ], "injectables": [ { "name": "AnimationFrameService", "id": "injectable-AnimationFrameService-6053f8d64681eeb69e423d506b89bd7e806cd2a123a9c06224745a1e0efb5089b5123ecbe2975d4cf6e8d8c8ac2f26feb7b516acef4e0ed430e33ec892a4b2dc", "file": "src/utils/animation-frame.service.ts", "properties": [ { "name": "tick", "deprecated": false, "deprecationMessage": "", "type": "Observable", "optional": false, "description": "", "line": 37, "modifierKind": [ 125 ] } ], "methods": [], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "sourceCode": "import {\n\tInjectable,\n\tOnDestroy,\n\tNgZone\n} from \"@angular/core\";\nimport { Observable, Subject, from } from \"rxjs\";\n\n@Injectable()\nexport class AnimationFrameServiceSingleton implements OnDestroy {\n\tpublic tick: Observable;\n\n\tprotected frameSource = new Subject();\n\n\tprotected animationFrameId: number;\n\n\tconstructor(protected ngZone: NgZone) {\n\t\tthis.tick = this.frameSource.asObservable();\n\t\tthis.ngZone.runOutsideAngular(() => {\n\t\t\tthis.animationFrameId = requestAnimationFrame(this.doTick.bind(this));\n\t\t});\n\t}\n\n\tngOnDestroy() {\n\t\tcancelAnimationFrame(this.animationFrameId);\n\t}\n\n\tprotected doTick(frame: number) {\n\t\tthis.frameSource.next(frame);\n\t\tthis.ngZone.runOutsideAngular(() => {\n\t\t\trequestAnimationFrame(this.doTick.bind(this));\n\t\t});\n\t}\n}\n\n@Injectable()\nexport class AnimationFrameService {\n\tpublic tick: Observable;\n\n\tconstructor(protected singleton: AnimationFrameServiceSingleton) {\n\t\tthis.tick = from(this.singleton.tick);\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "singleton", "type": "AnimationFrameServiceSingleton", "deprecated": false, "deprecationMessage": "" } ], "line": 37, "jsdoctags": [ { "name": "singleton", "type": "AnimationFrameServiceSingleton", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "type": "injectable" }, { "name": "AnimationFrameServiceSingleton", "id": "injectable-AnimationFrameServiceSingleton-6053f8d64681eeb69e423d506b89bd7e806cd2a123a9c06224745a1e0efb5089b5123ecbe2975d4cf6e8d8c8ac2f26feb7b516acef4e0ed430e33ec892a4b2dc", "file": "src/utils/animation-frame.service.ts", "properties": [ { "name": "tick", "deprecated": false, "deprecationMessage": "", "type": "Observable", "optional": false, "description": "", "line": 10, "modifierKind": [ 125 ] } ], "methods": [], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "sourceCode": "import {\n\tInjectable,\n\tOnDestroy,\n\tNgZone\n} from \"@angular/core\";\nimport { Observable, Subject, from } from \"rxjs\";\n\n@Injectable()\nexport class AnimationFrameServiceSingleton implements OnDestroy {\n\tpublic tick: Observable;\n\n\tprotected frameSource = new Subject();\n\n\tprotected animationFrameId: number;\n\n\tconstructor(protected ngZone: NgZone) {\n\t\tthis.tick = this.frameSource.asObservable();\n\t\tthis.ngZone.runOutsideAngular(() => {\n\t\t\tthis.animationFrameId = requestAnimationFrame(this.doTick.bind(this));\n\t\t});\n\t}\n\n\tngOnDestroy() {\n\t\tcancelAnimationFrame(this.animationFrameId);\n\t}\n\n\tprotected doTick(frame: number) {\n\t\tthis.frameSource.next(frame);\n\t\tthis.ngZone.runOutsideAngular(() => {\n\t\t\trequestAnimationFrame(this.doTick.bind(this));\n\t\t});\n\t}\n}\n\n@Injectable()\nexport class AnimationFrameService {\n\tpublic tick: Observable;\n\n\tconstructor(protected singleton: AnimationFrameServiceSingleton) {\n\t\tthis.tick = from(this.singleton.tick);\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "" } ], "line": 14, "jsdoctags": [ { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "type": "injectable" }, { "name": "BaseModalService", "id": "injectable-BaseModalService-f3946175a703640ccee7227e79400868d7215191800aa0b2de47313a488009aa8a197b9965fa1e1473b435fc71e828b5b78fb043acbe41da4524cfdf5a5dc609", "file": "src/modal/base-modal.service.ts", "properties": [ { "name": "placeholderService", "deprecated": false, "deprecationMessage": "", "type": "PlaceholderService", "optional": false, "description": "", "line": 41, "modifierKind": [ 125 ] } ], "methods": [ { "name": "create", "args": [ { "name": "data", "type": "literal type", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "ComponentRef", "typeParameters": [ "T" ], "line": 47, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates and renders the modal component that is passed in.\n`inputs` is an optional parameter of `data` that can be passed to the `Modal` component.\n", "description": "

Creates and renders the modal component that is passed in.\ninputs is an optional parameter of data that can be passed to the Modal component.

\n", "jsdoctags": [ { "name": "data", "type": "literal type", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "destroy", "args": [ { "name": "index", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "-1" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 95, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDestroys the modal on the supplied index.\nWhen called without parameters it destroys the most recently created/top most modal.\n", "description": "

Destroys the modal on the supplied index.\nWhen called without parameters it destroys the most recently created/top most modal.

\n", "jsdoctags": [ { "name": "index", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "-1", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "

Modal service handles instantiating and destroying modal instances.\nUses PlaceholderService to track open instances, and for it's placeholder view reference.

\n", "rawdescription": "\n\nModal service handles instantiating and destroying modal instances.\nUses PlaceholderService to track open instances, and for it's placeholder view reference.\n", "sourceCode": "import {\n\tComponentRef,\n\tInjector,\n\tInjectable,\n\tinject,\n\tEnvironmentInjector\n} from \"@angular/core\";\nimport { PlaceholderService } from \"carbon-components-angular/placeholder\";\nimport { tap, delay } from \"rxjs/operators\";\n\n\n/**\n * Modal service handles instantiating and destroying modal instances.\n * Uses PlaceholderService to track open instances, and for it's placeholder view reference.\n */\n@Injectable()\nexport class BaseModalService {\n\t// track all our open modals\n\tprotected static modalList: Array> = [];\n\n\t/**\n\t * Current module/component injection enviornment\n\t * Allows modules to use providers from calling component\n\t *\n\t * Root Module/\n\t * └── Lazy loaded Feature Module/\n\t * \t ├── Provides Service & imports modules\n\t * \t ├── Modal component (component that extends base component)\n\t * \t └── Modal component launcher (dynamically creates modal component)\n\t *\n\t * Passing EnvironmentInjector in `createComponent` will look for provider declaration in feature\n\t * module instead of root module. This is required to pass correct context in a lazy-loaded applications.\n\t * Services injected in root, will also be available as feature module enviornment will also hierarchically inherit\n\t * the root services.\n\t */\n\tprotected environment: EnvironmentInjector = inject(EnvironmentInjector);\n\n\t/**\n\t * Creates an instance of `ModalService`.\n\t */\n\tconstructor(public placeholderService: PlaceholderService) {}\n\n\t/**\n\t * Creates and renders the modal component that is passed in.\n\t * `inputs` is an optional parameter of `data` that can be passed to the `Modal` component.\n\t */\n\tcreate(data: { component: any, inputs?: any }): ComponentRef {\n\t\tlet defaults = { inputs: {} };\n\t\tdata = Object.assign({}, defaults, data);\n\n\t\tconst inputProviders = Object.keys(data.inputs).map(inputName => ({\n\t\t\tprovide: inputName,\n\t\t\tuseValue: data.inputs[inputName]\n\t\t}));\n\t\tconst injector = Injector.create({ providers: inputProviders });\n\t\tconst component = this.placeholderService.createComponent(\n\t\t\tdata.component,\n\t\t\tinjector,\n\t\t\tundefined,\n\t\t\tthis.environment\n\t\t);\n\t\tlet focusedElement = document.activeElement as HTMLElement;\n\t\tsetTimeout(() => {\n\t\t\tcomponent.instance.open = true;\n\t\t});\n\n\t\tcomponent[\"previouslyFocusedElement\"] = focusedElement; // used to return focus to previously focused element\n\n\t\tcomponent.instance.close.pipe(\n\t\t\t// trigger the close animation\n\t\t\ttap(() => {\n\t\t\t\tcomponent.instance.open = false;\n\t\t\t}),\n\t\t\t// delay closing by an arbitrary amount to allow the animation to finish\n\t\t\tdelay(240)\n\t\t).subscribe(() => {\n\t\t\tthis.placeholderService.destroyComponent(component);\n\t\t\t// filter out our component\n\t\t\tBaseModalService.modalList = BaseModalService.modalList.filter(c => c !== component);\n\t\t});\n\n\t\tcomponent.onDestroy(() => {\n\t\t\tfocusedElement.focus();\n\t\t});\n\n\t\tBaseModalService.modalList.push(component);\n\n\t\treturn component;\n\t}\n\n\t/**\n\t * Destroys the modal on the supplied index.\n\t * When called without parameters it destroys the most recently created/top most modal.\n\t */\n\tdestroy(index = -1) {\n\t\t// return if nothing to destroy because it's already destroyed\n\t\tif (index >= BaseModalService.modalList.length || BaseModalService.modalList.length === 0) {\n\t\t\treturn;\n\t\t}\n\t\t// on negative index destroy the last on the list (top modal)\n\t\tif (index < 0) {\n\t\t\tindex = BaseModalService.modalList.length - 1;\n\t\t}\n\n\t\t// Let animation finish before component is removed\n\t\tsetTimeout(() => {\n\t\t\tif (BaseModalService.modalList[index]) {\n\t\t\t\tthis.placeholderService.destroyComponent(BaseModalService.modalList[index]);\n\t\t\t\tBaseModalService.modalList.splice(index, 1);\n\t\t\t}\n\t\t}, 240);\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "

Creates an instance of ModalService.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "placeholderService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "" } ], "line": 36, "rawdescription": "\n\nCreates an instance of `ModalService`.\n", "jsdoctags": [ { "name": "placeholderService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "type": "injectable" }, { "name": "ContextMenuSelectionService", "id": "injectable-ContextMenuSelectionService-72cc68deca1e3548bba74e0cbdb53ef59df786e30335fbe27c6c99bd6c231e53a94056e49bcecca4eefd2595d9a0a23b5c5a1a531b760122d083cc31c25a1264", "file": "src/context-menu/context-menu-selection.service.ts", "properties": [ { "name": "selectionObservable", "deprecated": false, "deprecationMessage": "", "type": "Observable", "optional": false, "description": "", "line": 6, "modifierKind": [ 125 ] } ], "methods": [ { "name": "selectCheckbox", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 22, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "selectCheckboxes", "args": [ { "name": "value", "type": "any[]", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 34, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "value", "type": "any[]", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "selectRadio", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 14, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "sourceCode": "import { Injectable } from \"@angular/core\";\nimport { Observable, ReplaySubject } from \"rxjs\";\n\n@Injectable()\nexport class ContextMenuSelectionService {\n\tpublic selectionObservable: Observable;\n\tprivate selectionSubject = new ReplaySubject(1);\n\tprivate value: any[] = [];\n\n\tconstructor() {\n\t\tthis.selectionObservable = this.selectionSubject.asObservable();\n\t}\n\n\tselectRadio(value: any) {\n\t\tif (!value) {\n\t\t\treturn;\n\t\t}\n\t\tthis.selectionSubject.next(value);\n\t\tthis.value = [value];\n\t}\n\n\tselectCheckbox(value: any) {\n\t\tif (!value) {\n\t\t\treturn;\n\t\t}\n\t\tif (this.value.includes(value)) {\n\t\t\tthis.value = this.value.filter(v => v !== value);\n\t\t} else {\n\t\t\tthis.value.push(value);\n\t\t}\n\t\tthis.selectionSubject.next(this.value);\n\t}\n\n\tselectCheckboxes(value: any[]) {\n\t\tif (!value) {\n\t\t\treturn;\n\t\t}\n\t\tthis.value = value;\n\t\tthis.selectionSubject.next(value);\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 8 }, "extends": [], "type": "injectable" }, { "name": "DialogService", "id": "injectable-DialogService-86563cbc725147710dc206b79bbf0096cba866d2d4de9bbb94969534f8c58004c098e1140bb9475fd4b44e85384a4467a0e2ecd70eb09cfc2f3707347c374ba3", "file": "src/dialog/dialog.service.ts", "properties": [], "methods": [ { "name": "close", "args": [ { "name": "dialogRef", "type": "ComponentRef", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 89, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOn close of `Dialog` item, sets focus back to previous item, unsets\nthe current `dialogRef` item. Unsubscribes to the event of `Dialog` close.\n\n", "description": "

On close of Dialog item, sets focus back to previous item, unsets\nthe current dialogRef item. Unsubscribes to the event of Dialog close.

\n", "jsdoctags": [ { "name": { "pos": 2853, "end": 2862, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "dialogRef" }, "type": "ComponentRef", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 2847, "end": 2852, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the dialogRef to close

\n" } ] }, { "name": "closeAll", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 30, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCloses all known `Dialog`s. Does not focus any previous elements, since we can't know which would be correct\n", "description": "

Closes all known Dialogs. Does not focus any previous elements, since we can't know which would be correct

\n", "modifierKind": [ 126 ] }, { "name": "open", "args": [ { "name": "viewContainer", "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "" }, { "name": "dialogConfig", "type": "DialogConfig", "deprecated": false, "deprecationMessage": "" }, { "name": "component", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "ComponentRef", "typeParameters": [], "line": 51, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nIf `dialogRef` is defined, the Dialog is already open. If\n`dialogRef` is undefined, we create the `Dialog` component and reference to it.\nA subscription is created to track if the `Dialog` should close.\n\nMay be `null` if an `cds-placeholder` exists and `dialogConfig.appendInline` is false\n", "description": "

If dialogRef is defined, the Dialog is already open. If\ndialogRef is undefined, we create the Dialog component and reference to it.\nA subscription is created to track if the Dialog should close.

\n

May be null if an cds-placeholder exists and dialogConfig.appendInline is false

\n", "jsdoctags": [ { "name": { "pos": 1401, "end": 1414, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "viewContainer" }, "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1395, "end": 1400, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

a ViewContainerRef to instantiate the component against.\nMay be null if an cds-placeholder exists and dialogConfig.appendInline is false

\n" }, { "name": { "pos": 1575, "end": 1587, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "dialogConfig" }, "type": "DialogConfig", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1569, "end": 1574, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the DialogConfig for the component

\n" }, { "name": "component", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "singletonClickListen", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 119, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFix for safari hijacking clicks.\n\nRuns on `ngOnInit` of every dialog. Ensures we don't have multiple listeners\nbecause having many of them could degrade performance in certain cases (and is\nnot necessary for our use case)\n\nThis is an internally used function, can change at any point (even get removed)\nand changes to it won't be considered a breaking change. Use at your own risk.\n", "description": "

Fix for safari hijacking clicks.

\n

Runs on ngOnInit of every dialog. Ensures we don't have multiple listeners\nbecause having many of them could degrade performance in certain cases (and is\nnot necessary for our use case)

\n

This is an internally used function, can change at any point (even get removed)\nand changes to it won't be considered a breaking change. Use at your own risk.

\n" } ], "deprecated": false, "deprecationMessage": "", "description": "

Dialog object to be injected into other components.

\n", "rawdescription": "\n\n`Dialog` object to be injected into other components.\n", "sourceCode": "import {\n\tInjector,\n\tComponentRef,\n\tInjectable,\n\tViewContainerRef\n} from \"@angular/core\";\nimport { CloseReasons, DialogConfig } from \"./dialog-config.interface\";\nimport { PlaceholderService } from \"carbon-components-angular/placeholder\";\nimport { Dialog } from \"./dialog.component\";\nimport { tabbableSelector } from \"carbon-components-angular/common\";\n\n/**\n * `Dialog` object to be injected into other components.\n */\n@Injectable()\nexport class DialogService {\n\t/**\n\t * Used in `singletonClickListen`, don't count on its existence and values.\n\t */\n\tprotected static listeningForBodyClicks = false;\n\n\t/**\n\t * A set of all known dialog components\n\t */\n\tprotected static dialogRefs = new Set>();\n\n\t/**\n\t * Closes all known `Dialog`s. Does not focus any previous elements, since we can't know which would be correct\n\t */\n\tpublic static closeAll() {\n\t\tDialogService.dialogRefs.forEach(ref => ref.instance.doClose({\n\t\t\treason: CloseReasons.programmatic\n\t\t}));\n\t\tDialogService.dialogRefs.clear();\n\t}\n\n\t/**\n\t * Creates an instance of `DialogService`.\n\t */\n\tconstructor(protected injector: Injector, protected placeholderService: PlaceholderService) {}\n\n\t/**\n\t * If `dialogRef` is defined, the Dialog is already open. If\n\t * `dialogRef` is undefined, we create the `Dialog` component and reference to it.\n\t * A subscription is created to track if the `Dialog` should close.\n\t *\n\t * @param viewContainer a `ViewContainerRef` to instantiate the component against.\n\t * May be `null` if an `cds-placeholder` exists and `dialogConfig.appendInline` is false\n\t * @param dialogConfig the `DialogConfig` for the component\n\t */\n\topen(viewContainer: ViewContainerRef, dialogConfig: DialogConfig, component: any) {\n\t\tif (!component) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet dialogRef;\n\t\tif (dialogConfig.appendInline) {\n\t\t\t// add our component to the view\n\t\t\tdialogRef = viewContainer.createComponent(component, { index: 0, injector: this.injector });\n\t\t} else if (!this.placeholderService.hasPlaceholderRef()) {\n\t\t\tdialogRef = viewContainer.createComponent(component, { index: 0, injector: this.injector });\n\t\t\tif (dialogRef) {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\twindow.document.querySelector(\"body\").appendChild(dialogRef.location.nativeElement);\n\t\t\t\t});\n\t\t\t}\n\t\t} else {\n\t\t\tdialogRef = this.placeholderService.createComponent(component, this.injector);\n\t\t}\n\n\t\t// keep track of all initialized dialogs\n\t\tDialogService.dialogRefs.add(dialogRef);\n\n\t\t// initialize some extra options\n\t\tdialogConfig[\"previouslyFocusedElement\"] = document.activeElement;\n\t\tdialogRef.instance.dialogConfig = dialogConfig;\n\n\t\tdialogRef.instance.elementRef.nativeElement.focus();\n\n\t\treturn dialogRef as ComponentRef;\n\t}\n\n\t/**\n\t * On close of `Dialog` item, sets focus back to previous item, unsets\n\t * the current `dialogRef` item. Unsubscribes to the event of `Dialog` close.\n\t *\n\t * @param dialogRef the dialogRef to close\n\t */\n\tclose(dialogRef: ComponentRef) {\n\t\t// to handle the case where we have a null `this.dialogRef`\n\t\tif (!dialogRef) { return; }\n\n\t\tconst elementToFocus = dialogRef.instance.dialogConfig[\"previouslyFocusedElement\"];\n\n\t\tdialogRef.destroy();\n\n\t\t// update the globally tracked dialogRefs\n\t\tif (DialogService.dialogRefs.has(dialogRef)) {\n\t\t\tDialogService.dialogRefs.delete(dialogRef);\n\t\t}\n\n\t\t// Keeps the focus on the dialog trigger if there are no focusable elements. Change focus to previously focused element\n\t\t// if there are focusable elements in the dialog.\n\t\tif (!dialogRef.location.nativeElement.querySelectorAll(tabbableSelector)) {\n\t\t\telementToFocus.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Fix for safari hijacking clicks.\n\t *\n\t * Runs on `ngOnInit` of every dialog. Ensures we don't have multiple listeners\n\t * because having many of them could degrade performance in certain cases (and is\n\t * not necessary for our use case)\n\t *\n\t * This is an internally used function, can change at any point (even get removed)\n\t * and changes to it won't be considered a breaking change. Use at your own risk.\n\t */\n\tsingletonClickListen() {\n\t\tif (!DialogService.listeningForBodyClicks) {\n\t\t\tdocument.body.firstElementChild.addEventListener(\"click\", () => null, true);\n\t\t\tDialogService.listeningForBodyClicks = true;\n\t\t}\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "

Creates an instance of DialogService.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "injector", "type": "Injector", "deprecated": false, "deprecationMessage": "" }, { "name": "placeholderService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "" } ], "line": 35, "rawdescription": "\n\nCreates an instance of `DialogService`.\n", "jsdoctags": [ { "name": "injector", "type": "Injector", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "placeholderService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "type": "injectable" }, { "name": "DocumentService", "id": "injectable-DocumentService-d3a6c47a2dfdd0724d28b2c6e5d73ad20f9f7f872c66368596bf56985d8b52b708afe674742b6d8acf0f435a114ab7b9d0f830d7256c9147a62e0f3cb76187dd", "file": "src/utils/document.service.ts", "properties": [], "methods": [ { "name": "handleClick", "args": [ { "name": "callback", "type": "EventHandler", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 26, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "callback", "type": "EventHandler", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "handleEvent", "args": [ { "name": "eventType", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "callback", "type": "EventHandler", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 14, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "eventType", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "callback", "type": "EventHandler", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "sourceCode": "import { Injectable, OnDestroy } from \"@angular/core\";\nimport { Observable, Subscription } from \"rxjs\";\nimport { EventHandler } from \"./types\";\nimport { getEventObservable } from \"./event-observable\";\n\n@Injectable()\nexport class DocumentService implements OnDestroy {\n\tprotected globalEvents = new Map>();\n\n\tprotected documentRef = document;\n\n\tprotected subscriptions = new Subscription();\n\n\thandleEvent(eventType: string, callback: EventHandler) {\n\t\tif (!this.globalEvents.has(eventType)) {\n\t\t\tif (this.documentRef) {\n\t\t\t\tthis.globalEvents.set(eventType, getEventObservable(this.documentRef as any, eventType));\n\t\t\t} else {\n\t\t\t\tthis.globalEvents.set(eventType, new Observable());\n\t\t\t}\n\t\t}\n\t\tconst observable = this.globalEvents.get(eventType);\n\t\tthis.subscriptions.add(observable.subscribe(callback));\n\t}\n\n\thandleClick(callback: EventHandler) {\n\t\tthis.handleEvent(\"click\", callback);\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t\tthis.globalEvents = null;\n\t}\n}\n", "extends": [], "type": "injectable" }, { "name": "DropdownService", "id": "injectable-DropdownService-a7a703522abbcb53facc18e1f0b238537593ed80ca4e5b58b764b7eea9941b47c98ad7f0ab199fe45d8f10814fbdded450cc433f57b00f0dfb972e293f6c43fd", "file": "src/dropdown/dropdown.service.ts", "properties": [], "methods": [ { "name": "appendToBody", "args": [ { "name": "parentRef", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" }, { "name": "menuRef", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" }, { "name": "classList", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "HTMLElement", "typeParameters": [], "line": 44, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAppends the menu to the body, or a `cds-placeholder` (if defined)\n\n", "description": "

Appends the menu to the body, or a cds-placeholder (if defined)

\n", "jsdoctags": [ { "name": { "pos": 1263, "end": 1272, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "parentRef" }, "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1257, "end": 1262, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

container to position relative to

\n" }, { "name": { "pos": 1318, "end": 1325, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "menuRef" }, "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1312, "end": 1317, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

menu to be appended to body

\n" }, { "name": { "pos": 1365, "end": 1374, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "classList" }, "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1359, "end": 1364, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

any extra classes we should wrap the container with

\n" } ] }, { "name": "appendToDropdown", "args": [ { "name": "hostRef", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "HTMLElement", "typeParameters": [], "line": 77, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReattach the dropdown menu to the parent container\n", "description": "

Reattach the dropdown menu to the parent container

\n", "jsdoctags": [ { "name": { "pos": 2533, "end": 2540, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "hostRef" }, "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 2527, "end": 2532, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

container to append to

\n" } ] }, { "name": "updatePosition", "args": [ { "name": "parentRef", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 98, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nposition an open dropdown relative to the given parentRef\n", "description": "

position an open dropdown relative to the given parentRef

\n", "jsdoctags": [ { "name": "parentRef", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "sourceCode": "import { Injectable, ElementRef, OnDestroy } from \"@angular/core\";\nimport { PlaceholderService } from \"carbon-components-angular/placeholder\";\nimport { Subscription } from \"rxjs\";\nimport { position } from \"@carbon/utils-position\";\nimport { AnimationFrameService } from \"carbon-components-angular/utils\";\nimport { closestAttr } from \"carbon-components-angular/utils\";\n\nconst defaultOffset = { top: 0, left: 0 };\n\n@Injectable()\nexport class DropdownService implements OnDestroy {\n\tpublic set offset(value: { top?: number, left?: number }) {\n\t\tthis._offset = Object.assign({}, defaultOffset, value);\n\t}\n\n\tpublic get offset() {\n\t\treturn this._offset;\n\t}\n\t/**\n\t * reference to the body appended menu\n\t */\n\tprotected menuInstance: HTMLElement;\n\n\t/**\n\t * Maintains an Event Observable Subscription for the global requestAnimationFrame.\n\t * requestAnimationFrame is tracked only if the `Dropdown` is appended to the body otherwise we don't need it\n\t */\n\tprotected animationFrameSubscription = new Subscription();\n\n\tprotected _offset = defaultOffset;\n\n\tconstructor(\n\t\tprotected placeholderService: PlaceholderService,\n\t\tprotected animationFrameService: AnimationFrameService\n\t) {}\n\n\t/**\n\t * Appends the menu to the body, or a `cds-placeholder` (if defined)\n\t *\n\t * @param parentRef container to position relative to\n\t * @param menuRef menu to be appended to body\n\t * @param classList any extra classes we should wrap the container with\n\t */\n\tappendToBody(parentRef: HTMLElement, menuRef: HTMLElement, classList): HTMLElement {\n\t\t// build the dropdown list container\n\t\tmenuRef.style.display = \"block\";\n\t\tconst dropdownWrapper = document.createElement(\"div\");\n\t\tdropdownWrapper.className = `dropdown ${classList}`;\n\t\tdropdownWrapper.style.width = parentRef.offsetWidth + \"px\";\n\t\tdropdownWrapper.style.position = \"absolute\";\n\t\tdropdownWrapper.appendChild(menuRef);\n\n\t\t// append it to the placeholder\n\t\tif (this.placeholderService.hasPlaceholderRef()) {\n\t\t\tthis.placeholderService.appendElement(dropdownWrapper);\n\t\t\t// or append it directly to the body\n\t\t} else {\n\t\t\tdocument.body.appendChild(dropdownWrapper);\n\t\t}\n\n\t\tthis.menuInstance = dropdownWrapper;\n\n\t\tthis.animationFrameSubscription = this.animationFrameService.tick.subscribe(() => {\n\t\t\tthis.positionDropdown(parentRef, dropdownWrapper);\n\t\t});\n\n\t\t// run one position in sync, so we're less likely to have the view \"jump\" as we focus\n\t\tthis.positionDropdown(parentRef, dropdownWrapper);\n\n\t\treturn dropdownWrapper;\n\t}\n\n\t/**\n\t * Reattach the dropdown menu to the parent container\n\t * @param hostRef container to append to\n\t */\n\tappendToDropdown(hostRef: HTMLElement): HTMLElement {\n\t\t// if the instance is already removed don't try and remove it again\n\t\tif (!this.menuInstance) { return; }\n\t\tconst instance = this.menuInstance;\n\t\tconst menu = instance.firstElementChild as HTMLElement;\n\t\t// clean up the instance\n\t\tthis.menuInstance = null;\n\t\tmenu.style.display = \"none\";\n\t\thostRef.appendChild(menu);\n\t\tthis.animationFrameSubscription.unsubscribe();\n\t\tif (this.placeholderService.hasPlaceholderRef() && this.placeholderService.hasElement(instance)) {\n\t\t\tthis.placeholderService.removeElement(instance);\n\t\t} else if (document.body.contains(instance)) {\n\t\t\tdocument.body.removeChild(instance);\n\t\t}\n\t\treturn instance;\n\t}\n\n\t/**\n\t * position an open dropdown relative to the given parentRef\n\t */\n\tupdatePosition(parentRef) {\n\t\tthis.positionDropdown(parentRef, this.menuInstance);\n\t}\n\n\tngOnDestroy() {\n\t\tthis.animationFrameSubscription.unsubscribe();\n\t}\n\n\tprotected positionDropdown(parentRef, menuRef) {\n\t\tif (!menuRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet leftOffset = 0;\n\n\t\tconst boxMenu = menuRef.querySelector(\".cds--list-box__menu\");\n\n\t\tif (boxMenu) {\n\t\t\t// If the parentRef and boxMenu are in a different left position relative to the\n\t\t\t// window, the the boxMenu position has already been flipped and a check needs to be done\n\t\t\t// to see if it needs to stay flipped.\n\t\t\tif (parentRef.getBoundingClientRect().left !== boxMenu.getBoundingClientRect().left) {\n\t\t\t\t// The getBoundingClientRect().right of the boxMenu if it were hypothetically flipped\n\t\t\t\t// back into the original position before the flip.\n\t\t\t\tconst testBoxMenuRightEdgePos =\n\t\t\t\t\tparentRef.getBoundingClientRect().left - boxMenu.getBoundingClientRect().left + boxMenu.getBoundingClientRect().right;\n\n\t\t\t\tif (testBoxMenuRightEdgePos > (window.innerWidth || document.documentElement.clientWidth)) {\n\t\t\t\t\tleftOffset = parentRef.offsetWidth - boxMenu.offsetWidth;\n\t\t\t\t}\n\t\t\t// If it has not already been flipped, check if it is necessary to flip, ie. if the\n\t\t\t// boxMenu is outside of the right viewPort.\n\t\t\t} else if (boxMenu.getBoundingClientRect().right > (window.innerWidth || document.documentElement.clientWidth)) {\n\t\t\t\tleftOffset = parentRef.offsetWidth - boxMenu.offsetWidth;\n\t\t\t}\n\t\t}\n\n\t\t// If cds-placeholder has a parent with a position(relative|fixed|absolute) account for the parent offset\n\t\tconst closestMenuWithPos = closestAttr(\"position\", [\"relative\", \"fixed\", \"absolute\"], menuRef.parentElement);\n\t\tconst topPos = closestMenuWithPos ? closestMenuWithPos.getBoundingClientRect().top * -1 : this.offset.top;\n\t\tconst leftPos = closestMenuWithPos ? closestMenuWithPos.getBoundingClientRect().left * -1 : this.offset.left + leftOffset;\n\n\t\tlet pos = position.findAbsolute(parentRef, menuRef, \"bottom\");\n\t\tpos = position.addOffset(pos, topPos, leftPos);\n\n\t\tposition.setElement(menuRef, pos);\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "placeholderService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "" }, { "name": "animationFrameService", "type": "AnimationFrameService", "deprecated": false, "deprecationMessage": "" } ], "line": 30, "jsdoctags": [ { "name": "placeholderService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "animationFrameService", "type": "AnimationFrameService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "accessors": { "offset": { "name": "offset", "setSignature": { "name": "offset", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "literal type", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 12, "jsdoctags": [ { "name": "value", "type": "literal type", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "offset", "type": "", "returnType": "", "line": 16 } } }, "extends": [], "type": "injectable" }, { "name": "ElementService", "id": "injectable-ElementService-1b04a64f0a3f7560a436c0d1b978f36d17f3e12e43dab989def9def69f4890ba21ed64849c1117aef5d406748f6ae65c84173533b6ad527a28978a0c22e406c8", "file": "src/utils/element.service.ts", "properties": [], "methods": [ { "name": "visibility", "args": [ { "name": "target", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" }, { "name": "parentElement", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "defaultValue": "target" } ], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 16, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "target", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "parentElement", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "defaultValue": "target", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "sourceCode": "import { Injectable } from \"@angular/core\";\nimport { Observable, from } from \"rxjs\";\nimport { map } from \"rxjs/operators\";\nimport { getScrollableParents, isVisibleInContainer } from \"./scroll\";\nimport { AnimationFrameServiceSingleton } from \"./animation-frame.service\";\nimport { ElementVisibilityEvent } from \"./element.types\";\n\n@Injectable()\nexport class ElementService {\n\tprotected tick: Observable;\n\n\tconstructor(protected singleton: AnimationFrameServiceSingleton) {\n\t\tthis.tick = from(this.singleton.tick);\n\t}\n\n\tvisibility(target: HTMLElement, parentElement: HTMLElement = target): Observable {\n\t\tconst scrollableParents = getScrollableParents(parentElement);\n\t\treturn this.tick.pipe(map(() => {\n\t\t\tfor (const parent of scrollableParents) {\n\t\t\t\tif (!isVisibleInContainer(target, parent)) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tvisible: false\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tvisible: true\n\t\t\t};\n\t\t}));\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "singleton", "type": "AnimationFrameServiceSingleton", "deprecated": false, "deprecationMessage": "" } ], "line": 10, "jsdoctags": [ { "name": "singleton", "type": "AnimationFrameServiceSingleton", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "type": "injectable" }, { "name": "EventService", "id": "injectable-EventService-a72e31e96dd61a61d9150424388b1ddc273507920077483d9a0a9c0953d6152e6e12ca7031fae05ada1168328001e330b70dd7ce7d8e3ef58bd6f9c955fb631e", "file": "src/utils/event.service.ts", "properties": [], "methods": [ { "name": "on", "args": [ { "name": "targetElement", "type": "HTMLElement | Element", "deprecated": false, "deprecationMessage": "" }, { "name": "eventType", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "callback", "type": "EventHandler", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 15, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "targetElement", "type": "HTMLElement | Element", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "eventType", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "callback", "type": "EventHandler", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onDocument", "args": [ { "name": "eventType", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "callback", "type": "EventHandler", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 30, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "eventType", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "callback", "type": "EventHandler", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "sourceCode": "import { Injectable, OnDestroy } from \"@angular/core\";\nimport { Observable, Subscription } from \"rxjs\";\nimport { DocumentService } from \"./document.service\";\nimport { EventHandler } from \"./types\";\nimport { getEventObservable } from \"./event-observable\";\n\n@Injectable()\nexport class EventService implements OnDestroy {\n\tprotected subscriptions = new Subscription();\n\n\tprotected targets = new WeakMap>>();\n\n\tconstructor(protected documentService: DocumentService) {}\n\n\ton(targetElement: HTMLElement | Element, eventType: string, callback: EventHandler) {\n\t\tif (!this.targets.has(targetElement)) {\n\t\t\tthis.targets.set(targetElement, new Map());\n\t\t}\n\n\t\tconst eventMap = this.targets.get(targetElement);\n\n\t\tif (!eventMap.has(eventType)) {\n\t\t\teventMap.set(eventType, getEventObservable(targetElement, eventType));\n\t\t}\n\n\t\tconst subscription = eventMap.get(eventType).subscribe(callback);\n\t\tthis.subscriptions.add(subscription);\n\t}\n\n\tonDocument(eventType: string, callback: EventHandler) {\n\t\tthis.documentService.handleEvent(eventType, callback);\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "documentService", "type": "DocumentService", "deprecated": false, "deprecationMessage": "" } ], "line": 11, "jsdoctags": [ { "name": "documentService", "type": "DocumentService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "type": "injectable" }, { "name": "ExperimentalService", "id": "injectable-ExperimentalService-82a0b5e260a0a5c514fbf5d0b4d0d9563d0ae9b88079eb7de33612da6cd6c4fff6fea8e240e5f363b9561f05c42868abfc6d6996341d705065246a5dfc477611", "file": "src/experimental/experimental.service.ts", "properties": [], "methods": [ { "name": "addExperiment", "args": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "options", "type": "Experiment", "deprecated": false, "deprecationMessage": "", "defaultValue": "{enabled: false}" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 21, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAdds an experiment if it doesn't exist.\n", "description": "

Adds an experiment if it doesn't exist.

\n", "jsdoctags": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "options", "type": "Experiment", "deprecated": false, "deprecationMessage": "", "defaultValue": "{enabled: false}", "tagName": { "text": "param" } } ] }, { "name": "disableExperiment", "args": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 40, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDisables an experiment by name\n", "description": "

Disables an experiment by name

\n", "jsdoctags": [ { "name": { "pos": 865, "end": 869, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "name" }, "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 859, "end": 864, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

name of the experiment to disable

\n" } ] }, { "name": "enableExperiment", "args": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 31, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEnables an experiment by name\n", "description": "

Enables an experiment by name

\n", "jsdoctags": [ { "name": { "pos": 657, "end": 661, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "name" }, "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 651, "end": 656, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

name of the experiment to enable

\n" } ] }, { "name": "getExperiment", "args": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "Experiment", "typeParameters": [], "line": 49, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nGet the options for an experiment by name\n", "description": "

Get the options for an experiment by name

\n", "jsdoctags": [ { "name": { "pos": 1087, "end": 1091, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "name" }, "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1081, "end": 1086, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

name of experiment to get

\n" } ] }, { "name": "getExperiments", "args": [], "optional": false, "returnType": "Array<>", "typeParameters": [], "line": 61, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nGet an array of tuples representing an experiment and it's options\n", "description": "

Get an array of tuples representing an experiment and it's options

\n" } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "sourceCode": "import { Injectable } from \"@angular/core\";\n\n/**\n * Represents options for an experiment. The only required property is `enabled`, however other options may be supplied.\n */\nexport interface Experiment {\n\tenabled: boolean;\n\t[key: string]: any;\n}\n\n@Injectable()\nexport class ExperimentalService {\n\t/**\n\t * Map to hold all our experiments\n\t */\n\tprivate experiments = new Map();\n\n\t/**\n\t * Adds an experiment if it doesn't exist.\n\t */\n\taddExperiment(name: string, options: Experiment = {enabled: false}) {\n\t\tif (!this.experiments.has(name)) {\n\t\t\tthis.experiments.set(name, options);\n\t\t}\n\t}\n\n\t/**\n\t * Enables an experiment by name\n\t * @param name name of the experiment to enable\n\t */\n\tenableExperiment(name: string) {\n\t\tconst experiment = this.getExperiment(name);\n\t\texperiment.enabled = true;\n\t}\n\n\t/**\n\t * Disables an experiment by name\n\t * @param name name of the experiment to disable\n\t */\n\tdisableExperiment(name: string) {\n\t\tconst experiment = this.getExperiment(name);\n\t\texperiment.enabled = false;\n\t}\n\n\t/**\n\t * Get the options for an experiment by name\n\t * @param name name of experiment to get\n\t */\n\tgetExperiment(name: string): Experiment {\n\t\tif (!this.experiments.has(name)) {\n\t\t\tthis.addExperiment(name);\n\t\t\treturn this.getExperiment(name);\n\t\t}\n\n\t\treturn this.experiments.get(name);\n\t}\n\n\t/**\n\t * Get an array of tuples representing an experiment and it's options\n\t */\n\tgetExperiments(): Array<[string, Experiment]> {\n\t\treturn Array.from(this.experiments.entries());\n\t}\n}\n", "extends": [], "type": "injectable" }, { "name": "GridService", "id": "injectable-GridService-1b16bb16aca41acab101557b82ab5d7b685621e1bfa30ece77e43ed59266bd00fe8c1220e17429303e411aec2d541bdfec97783e4da49fe359019217bb78316d", "file": "src/grid/grid.service.ts", "properties": [ { "name": "gridObservable", "deprecated": false, "deprecationMessage": "", "type": "Observable", "optional": false, "description": "", "line": 6, "modifierKind": [ 125 ] } ], "methods": [ { "name": "updateGridType", "args": [ { "name": "enableCssGrid", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 18, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nPing all subscribers to update to use Css Grid\n", "description": "

Ping all subscribers to update to use Css Grid

\n", "jsdoctags": [ { "name": { "pos": 426, "end": 439, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "enableCssGrid" }, "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 420, "end": 425, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "sourceCode": "import { Injectable } from \"@angular/core\";\nimport { BehaviorSubject, Observable } from \"rxjs\";\n\n@Injectable()\nexport class GridService {\n\tpublic gridObservable: Observable;\n\tprivate gridSubject = new BehaviorSubject(false);\n\tprivate cssGridEnabled = false;\n\n\tconstructor() {\n\t\tthis.gridObservable = this.gridSubject.asObservable();\n\t}\n\n\t/**\n\t * Ping all subscribers to update to use Css Grid\n\t * @param enableCssGrid\n\t */\n\tupdateGridType(enableCssGrid: boolean) {\n\t\tif (this.cssGridEnabled === enableCssGrid) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.cssGridEnabled = true;\n\t\tthis.gridSubject.next(enableCssGrid);\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 8 }, "extends": [], "type": "injectable" }, { "name": "I18n", "id": "injectable-I18n-a073c7aa0c9b4939b9c7d2146fdacc52cb742a2f57ff6cef45de0574281189a0bf2717642ade8570dfc5708c3899aaf1792310b82aac44f70aeab81af685f264", "file": "src/i18n/i18n.service.ts", "properties": [], "methods": [ { "name": "get", "args": [ { "name": "path", "type": "string", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 210, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nWhen a path is specified returns an observable that will resolve to the translation string value.\n\nReturns the full translations object if path is not specified.\n\n", "description": "

When a path is specified returns an observable that will resolve to the translation string value.

\n

Returns the full translations object if path is not specified.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 6333, "end": 6337, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "path" }, "type": "string", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "pos": 6327, "end": 6332, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

optional, looks like "NOTIFICATION.CLOSE_BUTTON"

\n" } ] }, { "name": "getLocale", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 178, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the current locale\n", "description": "

Returns the current locale

\n", "modifierKind": [ 125 ] }, { "name": "getLocaleObservable", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 185, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns an observable that resolves to the current locale, and will update when changed\n", "description": "

Returns an observable that resolves to the current locale, and will update when changed

\n", "modifierKind": [ 125 ] }, { "name": "getMultiple", "args": [ { "name": "partialPath", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "literal type", "typeParameters": [], "line": 222, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns all descendents of some path fragment as an object.\n\n", "description": "

Returns all descendents of some path fragment as an object.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 6602, "end": 6613, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "partialPath" }, "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 6596, "end": 6601, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

a path fragment, for example "NOTIFICATION"

\n" } ] }, { "name": "getOverridable", "args": [ { "name": "path", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "Overridable", "typeParameters": [], "line": 239, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns an instance of `Overridable` that can be used to optionally override the value provided by `I18n`\n", "description": "

Returns an instance of Overridable that can be used to optionally override the value provided by I18n

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 7207, "end": 7211, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "path" }, "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 7201, "end": 7206, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

looks like "NOTIFICATION.CLOSE_BUTTON"

\n" } ] }, { "name": "getValueFromPath", "args": [ { "name": "path", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "string | TranslationStrings", "typeParameters": [], "line": 269, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTrys to resolve a value from the provided path.\n\n", "description": "

Trys to resolve a value from the provided path.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 8000, "end": 8004, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "path" }, "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 7994, "end": 7999, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

looks like "NOTIFICATION.CLOSE_BUTTON"

\n" } ] }, { "name": "replace", "args": [ { "name": "subject", "type": "Observable", "deprecated": false, "deprecationMessage": "" }, { "name": "variables", "type": "literal type", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 260, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTakes the `Observable` returned from `i18n.get` and an object of variables to replace.\n\nThe keys specify the variable name in the string.\n\nExample:\n```\nservice.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n\nservice.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n```\n\nProduces: `\"test asdf\"`\n\n", "description": "

Takes the Observable returned from i18n.get and an object of variables to replace.

\n

The keys specify the variable name in the string.

\n

Example:

\nExample :
service.set({ "TEST": "{{foo}} {{bar}}" });\n\nservice.replace(service.get("TEST"), { foo: "test", bar: "asdf" })

Produces: "test asdf"

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 7696, "end": 7703, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "subject" }, "type": "Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 7690, "end": 7695, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the translation to replace variables on

\n" }, { "name": { "pos": 7755, "end": 7764, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "variables" }, "type": "literal type", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 7749, "end": 7754, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

object of variables to replace

\n" } ] }, { "name": "set", "args": [ { "name": "strings", "type": "TranslationStrings", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 194, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet/update the translations from an object. Also notifies all participating components of the update.\n\n", "description": "

Set/update the translations from an object. Also notifies all participating components of the update.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 5730, "end": 5737, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "strings" }, "type": "TranslationStrings", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 5724, "end": 5729, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

an object of strings, should follow the same format as src/i18n/en.json

\n" } ] }, { "name": "setLocale", "args": [ { "name": "language", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "strings", "type": "TranslationStrings", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 168, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the locale and optionally the translation strings. Locale is used by components that\nare already locale aware (datepicker for example) while the translation strings are used\nfor components that are not.\n\nLocales set here will override locales/languages set in components\n", "description": "

Sets the locale and optionally the translation strings. Locale is used by components that\nare already locale aware (datepicker for example) while the translation strings are used\nfor components that are not.

\n

Locales set here will override locales/languages set in components

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 5042, "end": 5050, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "language" }, "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 5036, "end": 5041, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

an ISO 639-1 language code - https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes

\n" }, { "name": { "pos": 5145, "end": 5152, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "strings" }, "type": "TranslationStrings", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "pos": 5139, "end": 5144, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

an object of strings, optional

\n" } ] } ], "deprecated": false, "deprecationMessage": "", "description": "

The I18n service is a minimal internal singleton service used to supply our components with translated strings.

\n

All the components that support I18n also support directly passed strings.\nUsage of I18n is optional, and it is not recommended for application use (libraries like ngx-translate\nare a better choice)

\n", "rawdescription": "\n\nThe I18n service is a minimal internal singleton service used to supply our components with translated strings.\n\nAll the components that support I18n also support directly passed strings.\nUsage of I18n is optional, and it is not recommended for application use (libraries like ngx-translate\nare a better choice)\n\n", "sourceCode": "import { Injectable } from \"@angular/core\";\nimport {\n\tBehaviorSubject,\n\tObservable,\n\tisObservable,\n\tiif,\n\tSubscription\n} from \"rxjs\";\nimport { map } from \"rxjs/operators\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nimport EN from \"./en\";\n\n/**\n * Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n *\n * The keys specify the variable name in the string.\n *\n * Example:\n * ```typescript\n * service.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n *\n * service.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n * ```\n *\n * Produces: `\"test asdf\"`\n *\n * @param subject the translation to replace variables on\n * @param variables object of variables to replace\n */\nexport const replace = (subject, variables) => subject.pipe(\n\tmap(str => {\n\t\tconst keys = Object.keys(variables);\n\t\tfor (const key of keys) {\n\t\t\tconst value = variables[key];\n\t\t\tstr = str.replace(new RegExp(`{{\\\\s*${key}\\\\s*}}`, \"g\"), value);\n\t\t}\n\t\treturn str;\n\t})\n);\n\n/**\n * Represents an \"overridable\" translation value.\n *\n * Largely an internal usecase. There are situations where we want an `Observable` that\n * can emit events from a centralized source **OR** an `Observable` that will emit events\n * from a component local source. The key example being on/off text in a `Toggle` - In some cases\n * we want the `Toggle` to use `I18n`s global translations, but in others we'd prefer to use a local\n * override. We don't ever need to return to a non-overridden state, but we do need the ability to\n * switch _to_ an overridden sate.\n */\nexport class Overridable {\n\t/**\n\t * The raw value of the translation. Defaults to the string value, but will return the value passed to `override`\n\t *\n\t * @readonly\n\t */\n\tpublic get value(): string | Observable {\n\t\treturn this._value;\n\t}\n\n\tpublic set value(v: string | Observable) {\n\t\tthis.override(v);\n\t}\n\n\t/**\n\t * The translation subject. Returns either a stream of overridden values, or our base translation values.\n\t *\n\t * @readonly\n\t */\n\tpublic get subject(): Observable {\n\t\t/**\n\t\t * since inputs are bound on template instantiation (and thusly will always have _some_ value)\n\t\t * We can use a simple boolean and the `iif` function to determine which subject to return on subscription\n\t\t */\n\t\treturn iif(() => this.isOverridden, this.$override, this.baseTranslation);\n\t}\n\n\t/**\n\t * Overridden value. Accessed by the readonly getter `value` and set through `override`\n\t */\n\tprotected _value: string | Observable;\n\t/**\n\t * Subject of overridden values. Initialized with our default value.\n\t */\n\tprotected $override: BehaviorSubject;\n\t/**\n\t * Our base non-overridden translation.\n\t */\n\tprotected baseTranslation: Observable = this.i18n.get(this.path);\n\n\t/**\n\t * Subscription to the observable provided as an override (if any)\n\t */\n\tprotected subscription: Subscription;\n\t/**\n\t * A boolean to flip between overridden and non-overridden states.\n\t */\n\tprotected isOverridden = false;\n\n\tconstructor(protected path: string, protected i18n: I18n) {\n\t\t/**\n\t\t * ensure `$override` is initialized with the correct default value\n\t\t * in some cases `_value` can get changed for an `Observable` before `$override` is created\n\t\t */\n\t\tconst value = this.i18n.getValueFromPath(this.path) as string;\n\t\tthis.$override = new BehaviorSubject(value);\n\t\tthis._value = value;\n\t}\n\t/**\n\t * Takes a string or an `Observable` that emits strings.\n\t * Overrides the value provided by the `I18n` service.\n\t */\n\toverride(value: string | Observable) {\n\t\tthis.isOverridden = true;\n\t\t// To ensure that there are not multiple subscriptions created for the same observable, we\n\t\t// unsubscribe if a subscription already exists for an observable before creating a new one.\n\t\tif (this.subscription) {\n\t\t\tthis.subscription.unsubscribe();\n\t\t\tthis.subscription = null;\n\t\t}\n\n\t\tthis._value = value;\n\n\t\tif (isObservable(value)) {\n\t\t\tthis.subscription = value.subscribe(v => {\n\t\t\t\tthis.$override.next(v);\n\t\t\t});\n\t\t} else {\n\t\t\tthis.$override.next(value);\n\t\t}\n\t}\n}\n\n/**\n * An object of strings, should follow the same format as src/i18n/en.json\n */\nexport type TranslationStrings = {\n\t[key: string]: string | TranslationStrings;\n};\n\n\n/**\n * The I18n service is a minimal internal singleton service used to supply our components with translated strings.\n *\n * All the components that support I18n also support directly passed strings.\n * Usage of I18n is optional, and it is not recommended for application use (libraries like ngx-translate\n * are a better choice)\n *\n */\n@Injectable()\nexport class I18n {\n\tprotected translationStrings: TranslationStrings = EN;\n\n\tprotected translations = new Map();\n\n\tprotected locale = new BehaviorSubject(\"en\");\n\n\t/**\n\t * Sets the locale and optionally the translation strings. Locale is used by components that\n\t * are already locale aware (datepicker for example) while the translation strings are used\n\t * for components that are not.\n\t *\n\t * Locales set here will override locales/languages set in components\n\t * @param language an ISO 639-1 language code - https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes\n\t * @param strings an object of strings, optional\n\t */\n\tpublic setLocale(language: string, strings?: TranslationStrings) {\n\t\tthis.locale.next(language);\n\t\tif (strings) {\n\t\t\tthis.set(strings);\n\t\t}\n\t}\n\n\t/**\n\t * Returns the current locale\n\t */\n\tpublic getLocale() {\n\t\treturn this.locale.value;\n\t}\n\n\t/**\n\t * Returns an observable that resolves to the current locale, and will update when changed\n\t */\n\tpublic getLocaleObservable() {\n\t\treturn this.locale.asObservable();\n\t}\n\n\t/**\n\t * Set/update the translations from an object. Also notifies all participating components of the update.\n\t *\n\t * @param strings an object of strings, should follow the same format as src/i18n/en.json\n\t */\n\tpublic set(strings: TranslationStrings) {\n\t\tthis.translationStrings = merge({}, EN, strings);\n\t\t// iterate over all our tracked translations and update each observable\n\t\tconst translations = Array.from(this.translations);\n\t\tfor (const [path, subject] of translations) {\n\t\t\tsubject.next(this.getValueFromPath(path));\n\t\t}\n\t}\n\n\t/**\n\t * When a path is specified returns an observable that will resolve to the translation string value.\n\t *\n\t * Returns the full translations object if path is not specified.\n\t *\n\t * @param path optional, looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic get(path?: string): any {\n\t\tif (!path) {\n\t\t\treturn this.translationStrings;\n\t\t}\n\t\treturn this.getSubject(path);\n\t}\n\n\t/**\n\t * Returns all descendents of some path fragment as an object.\n\t *\n\t * @param partialPath a path fragment, for example `\"NOTIFICATION\"`\n\t */\n\tpublic getMultiple(partialPath: string): { [key: string]: Observable } {\n\t\tconst values = this.getValueFromPath(partialPath);\n\t\tconst subjects = {};\n\t\tfor (const key of Object.keys(values)) {\n\t\t\tif (values[key] === Object(values[key])) {\n\t\t\t\tsubjects[key] = this.getMultiple(`${partialPath}.${key}`);\n\t\t\t} else {\n\t\t\t\tsubjects[key] = this.getSubject(`${partialPath}.${key}`);\n\t\t\t}\n\t\t}\n\t\treturn subjects;\n\t}\n\n\t/**\n\t * Returns an instance of `Overridable` that can be used to optionally override the value provided by `I18n`\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic getOverridable(path: string) {\n\t\treturn new Overridable(path, this);\n\t}\n\n\t/**\n\t * Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n\t *\n\t * The keys specify the variable name in the string.\n\t *\n\t * Example:\n\t * ```\n\t * service.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n\t *\n\t * service.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n\t * ```\n\t *\n\t * Produces: `\"test asdf\"`\n\t *\n\t * @param subject the translation to replace variables on\n\t * @param variables object of variables to replace\n\t */\n\tpublic replace(subject: Observable, variables: { [key: string]: string }) {\n\t\treturn replace(subject, variables);\n\t}\n\n\t/**\n\t * Trys to resolve a value from the provided path.\n\t *\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic getValueFromPath(path: string): string | TranslationStrings {\n\t\tlet value: string | TranslationStrings = this.translationStrings;\n\t\tfor (const segment of path.split(\".\")) {\n\t\t\tif (value[segment] !== undefined && value[segment] !== null) {\n\t\t\t\tvalue = value[segment];\n\t\t\t} else {\n\t\t\t\tthrow new Error(`no key ${segment} at ${path}`);\n\t\t\t}\n\t\t}\n\t\treturn value as any;\n\t}\n\n\t/**\n\t * Helper method that returns an observable from the internal cache based on the path\n\t *\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tprotected getSubject(path: string): Observable {\n\t\ttry {\n\t\t\t// we run this here to validate the path exists before adding it to the translation map\n\t\t\tconst value = this.getValueFromPath(path) as string;\n\t\t\tif (this.translations.has(path)) {\n\t\t\t\treturn this.translations.get(path);\n\t\t\t}\n\t\t\tconst translation = new BehaviorSubject(value);\n\t\t\tthis.translations.set(path, translation);\n\t\t\treturn translation;\n\t\t} catch (error) {\n\t\t\tconsole.error(error);\n\t\t}\n\t}\n}\n", "extends": [], "type": "injectable" }, { "name": "IconService", "id": "injectable-IconService-4f5767040e0cac9f7ec08605bb398f8cfffd46da2e75d08f25b0dd04c662da07862eb1690cb9795e5d981c319ed2eeac8870cf82792aef54320fa5e28dd35dea", "file": "src/icon/icon.service.ts", "properties": [], "methods": [ { "name": "configure", "args": [ { "name": "options", "type": "literal type", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 220, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nConfigure various service settings (caching strategy ...)\n", "description": "

Configure various service settings (caching strategy ...)

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "options", "type": "literal type", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "get", "args": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "IconDescriptor", "typeParameters": [], "line": 205, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nGets an icon, converts it to a string, and caches the result\n", "description": "

Gets an icon, converts it to a string, and caches the result

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "register", "args": [ { "name": "descriptor", "type": "object", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 189, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRegisters an icon based on the metadata provided by `@carbon/icons`\n", "description": "

Registers an icon based on the metadata provided by @carbon/icons

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "descriptor", "type": "object", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerAll", "args": [ { "name": "descriptors", "type": "object[]", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 182, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRegisters an array of icons based on the metadata provided by `@carbon/icons`\n", "description": "

Registers an array of icons based on the metadata provided by @carbon/icons

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "descriptors", "type": "object[]", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerAs", "args": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "descriptor", "type": "object", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 197, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRegisters an icon based on a uniqe name and metadata provided by `@carbon/icons`\n", "description": "

Registers an icon based on a uniqe name and metadata provided by @carbon/icons

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "descriptor", "type": "object", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "

The icon service is a singleton service responsible for registering and retriving icons from @carbon/icons.

\n

It's important to register icons before use. It's reccommended to register your icons early, likely in your app.component.

\n

To allow for improved tree shaking do not import all the icons from @carbon/icons and register them.\nInstead register only the icons in use by your application. If your application makes use of lazy loaded\nmodules you may also lazy load the icons used in that module by registering them early on in that module.

\n

ngOnInit should be sufficiantly early to register icons.

\n

Example:

\nExample :
import { Accessibility16 } from "@carbon/icons";\n\n// ...\n\nclass MyComponent implements OnInit {\n    constructor(protected iconService: IconService) {}\n\n    // ...\n\n    ngOnInit() {\n        this.iconService.register(Accessibility16);\n    }\n\n    // ...\n}

If needed it is possible to register an icon under a different name, via registerAs.

\n", "rawdescription": "\n\nThe icon service is a singleton service responsible for registering and retriving icons from `@carbon/icons`.\n\nIt's important to register icons before use. It's reccommended to register your icons early, likely in your app.component.\n\nTo allow for improved tree shaking _do not_ import all the icons from `@carbon/icons` and register them.\nInstead register only the icons in use by your application. If your application makes use of lazy loaded\nmodules you may also lazy load the icons used in that module by registering them early on in that module.\n\n`ngOnInit` should be sufficiantly early to register icons.\n\nExample:\n```\nimport { Accessibility16 } from \"@carbon/icons\";\n\n// ...\n\nclass MyComponent implements OnInit {\n\tconstructor(protected iconService: IconService) {}\n\n\t// ...\n\n\tngOnInit() {\n\t\tthis.iconService.register(Accessibility16);\n\t}\n\n\t// ...\n}\n```\n\nIf needed it is possible to register an icon under a different name, via `registerAs`.\n", "sourceCode": "import { Injectable } from \"@angular/core\";\nimport { toString } from \"@carbon/icon-helpers\";\n\n// icon imports\nimport {\n\tAdd16,\n\tCalendar16,\n\tCaretDown16,\n\tCaretLeft16,\n\tCaretRight16,\n\tCaretUp16,\n\tCheckmark16,\n\tCheckmarkFilled16,\n\tCheckmarkOutline16,\n\tChevronDown16,\n\tChevronRight16,\n\tClose16,\n\tCopy16,\n\tDownload16,\n\tErrorFilled16,\n\tInformationFilled16,\n\tMenu16,\n\tOverflowMenuVertical16,\n\tSave16,\n\tSettings16,\n\tTrashCan16,\n\tWarning16,\n\tWarningFilled16\n} from \"@carbon/icons\";\n\n/**\n * An object that represents a parsed icon\n */\nexport interface IconDescriptor {\n\t/**\n\t * The element to render. For the root this is `svg`\n\t */\n\telem: string;\n\t/**\n\t * An object of attributes to apply to the element.\n\t *\n\t * The type here is non-exhaustive.\n\t */\n\tattrs: {\n\t\txmlns: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\tviewBox: string,\n\t\tfill: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\twidth: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\theight: string,\n\t\t[x: string]: string\n\t};\n\t/**\n\t * The content (children) of the element as an array of `IconDescriptor`s\n\t * (usually without a few fields, namely `name` and `size`)\n\t */\n\tcontent: IconDescriptor[];\n\t/**\n\t * The name of the icon.\n\t *\n\t * Needed by the icon service.\n\t */\n\tname: string;\n\t/**\n\t * The size of the icon in pixels.\n\t *\n\t * Needed by the icon service.\n\t */\n\tsize: number;\n\t/**\n\t * Optional. A string representation of the compiled svg.\n\t * If missing the icon service will add this.\n\t */\n\tsvg?: string;\n}\n\n/**\n * Abstract class that represent a cache of icons.\n *\n * The actual caching mechanism will be implementation specific,\n * but it's likely a good idea to key by the icons name and/or size.\n * Icon name and size will always be strings, and they will be the two consistent\n * identifiers of an icon. For the purposes of storage additonal descriptor properties may\n * be used, but the name and size are the only ones guarenteed to be passed for lookup purposes.\n */\nexport abstract class IconCache {\n\t/**\n\t * Finds and returns an icon based on it's name and size\n\t */\n\tabstract get(name: string, size: string): object;\n\t/**\n\t * stores an icon descriptor to the cache\n\t */\n\tabstract set(name: string, size: string, descriptor: object): void;\n}\n\n/**\n * Custom error for when a name can't be found\n */\nexport class IconNameNotFoundError extends Error {\n\tconstructor(name: string) {\n\t\tsuper(`Icon ${name} not found`);\n\t}\n}\n\n/**\n * Custom error for when a specific size can't be found\n */\nexport class IconSizeNotFoundError extends Error {\n\tconstructor(size: string, name: string) {\n\t\tsuper(`Size ${size} for ${name} not found`);\n\t}\n}\n\n/**\n * Concrete implementation of `IconCache` as a simple in memory cache\n */\nexport class IconMemoryCache extends IconCache {\n\tprivate iconMap = new Map>();\n\n\tget(name: string, size: string) {\n\t\tif (!this.iconMap.has(name)) {\n\t\t\tthrow new IconNameNotFoundError(name);\n\t\t}\n\t\tconst sizeMap = this.iconMap.get(name);\n\t\tif (!sizeMap.has(size)) {\n\t\t\tthrow new IconSizeNotFoundError(size, name);\n\t\t}\n\t\treturn sizeMap.get(size);\n\t}\n\n\tset(name: string, size: string, descriptor: object) {\n\t\tif (!this.iconMap.has(name)) {\n\t\t\tthis.iconMap.set(name, new Map());\n\t\t}\n\t\tconst sizeMap = this.iconMap.get(name);\n\t\tsizeMap.set(size, descriptor);\n\t}\n}\n\n/**\n * The icon service is a singleton service responsible for registering and retriving icons from `@carbon/icons`.\n *\n * It's important to register icons before use. It's reccommended to register your icons early, likely in your app.component.\n *\n * To allow for improved tree shaking _do not_ import all the icons from `@carbon/icons` and register them.\n * Instead register only the icons in use by your application. If your application makes use of lazy loaded\n * modules you may also lazy load the icons used in that module by registering them early on in that module.\n *\n * `ngOnInit` should be sufficiantly early to register icons.\n *\n * Example:\n * ```\n * import { Accessibility16 } from \"@carbon/icons\";\n *\n * // ...\n *\n * class MyComponent implements OnInit {\n * \tconstructor(protected iconService: IconService) {}\n *\n * \t// ...\n *\n * \tngOnInit() {\n * \t\tthis.iconService.register(Accessibility16);\n * \t}\n *\n * \t// ...\n * }\n * ```\n *\n * If needed it is possible to register an icon under a different name, via `registerAs`.\n */\n@Injectable()\nexport class IconService {\n\tprivate iconCache: IconCache = new IconMemoryCache();\n\n\t/**\n\t * Registers an array of icons based on the metadata provided by `@carbon/icons`\n\t */\n\tpublic registerAll(descriptors: object[]) {\n\t\tdescriptors.forEach(icon => this.register(icon));\n\t}\n\n\t/**\n\t * Registers an icon based on the metadata provided by `@carbon/icons`\n\t */\n\tpublic register(descriptor: object) {\n\t\tconst { name } = descriptor as IconDescriptor;\n\t\tthis.registerAs(name, descriptor);\n\t}\n\n\t/**\n\t * Registers an icon based on a uniqe name and metadata provided by `@carbon/icons`\n\t */\n\tpublic registerAs(name: string, descriptor: object) {\n\t\tconst { size } = descriptor as IconDescriptor;\n\t\tthis.iconCache.set(name, size.toString(), descriptor);\n\t}\n\n\t/**\n\t * Gets an icon, converts it to a string, and caches the result\n\t */\n\tpublic get(name: string, size: string): IconDescriptor {\n\t\ttry {\n\t\t\tconst icon = this.iconCache.get(name, size.toString()) as IconDescriptor;\n\t\t\tif (!icon.svg) {\n\t\t\t\ticon.svg = toString(icon);\n\t\t\t}\n\t\t\treturn icon;\n\t\t} catch (e) {\n\t\t\tthrow e;\n\t\t}\n\t}\n\n\t/**\n\t * Configure various service settings (caching strategy ...)\n\t */\n\tpublic configure(options: { cache: IconCache }) {\n\t\tthis.iconCache = options.cache;\n\t}\n}\n", "extends": [], "type": "injectable" }, { "name": "ModalService", "id": "injectable-ModalService-7b333d7b53cc7a5bd3e8d9d14513a62f87b53e72ce1d9dfece3fd6f4d080196e5e1c684e2235f9ab5547bc6472910c491b98bf0e07f537aff4fd57377296da27", "file": "src/modal/modal.service.ts", "properties": [ { "name": "placeholderService", "deprecated": false, "deprecationMessage": "", "type": "PlaceholderService", "optional": false, "description": "", "line": 21, "modifierKind": [ 125 ], "inheritance": { "file": "BaseModalService" } } ], "methods": [ { "name": "show", "args": [ { "name": "data", "type": "AlertModalData", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 42, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates and renders a new alert modal component.\n`type` - \"default\" | \"danger\" = \"default\",\n`label` - a label shown over the title,\n`title` - modal's title,\n`content` - modal's content, could include HTML tags.\n`buttons` is an array of objects\n`close` custom close function\n```\n{\n\t\ttext: \"Button text\",\n\t\ttype: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger--primary\" = \"primary\",\n\t\tclick: clickFunction,\n}\n```\n", "description": "

Creates and renders a new alert modal component.\ntype - "default" | "danger" = "default",\nlabel - a label shown over the title,\ntitle - modal's title,\ncontent - modal's content, could include HTML tags.\nbuttons is an array of objects\nclose custom close function

\nExample :
{\n        text: "Button text",\n        type: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--primary" = "primary",\n        click: clickFunction,\n}
", "jsdoctags": [ { "name": { "pos": 1017, "end": 1021, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "data" }, "type": "AlertModalData", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1011, "end": 1016, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

You can pass in:\ntype - "default" | "danger" = "default",\nlabel - a label shown over the title,\ntitle - modal's title,\ncontent - modal's content, could include HTML tags.\nbuttons is an array of objects\nclose custom close function

\nExample :
{\ntext: "Button text",\ntype: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--primary" = "primary",\nclick: clickFunction,\n}
" } ] }, { "name": "create", "args": [ { "name": "data", "type": "literal type", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "ComponentRef", "typeParameters": [ "T" ], "line": 47, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates and renders the modal component that is passed in.\n`inputs` is an optional parameter of `data` that can be passed to the `Modal` component.\n", "description": "

Creates and renders the modal component that is passed in.\ninputs is an optional parameter of data that can be passed to the Modal component.

\n", "jsdoctags": [ { "name": "data", "type": "literal type", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "BaseModalService" } }, { "name": "destroy", "args": [ { "name": "index", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "-1" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 95, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDestroys the modal on the supplied index.\nWhen called without parameters it destroys the most recently created/top most modal.\n", "description": "

Destroys the modal on the supplied index.\nWhen called without parameters it destroys the most recently created/top most modal.

\n", "jsdoctags": [ { "name": "index", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "-1", "tagName": { "text": "param" } } ], "inheritance": { "file": "BaseModalService" } } ], "deprecated": false, "deprecationMessage": "", "description": "

Extends Base Modal Service to create Alert Modal with a function call. Placed in a seperate service\nto prevent remote scoping (NG3003) which has side effects. Hence, import cycles are not allowed when\ncompilationMode is set to partial.

\n

Modal service handles instantiating and destroying modal instances.\nUses PlaceholderService to track open instances, and for it's placeholder view reference.

\n", "rawdescription": "\n\nExtends Base Modal Service to create Alert Modal with a function call. Placed in a seperate service\nto prevent remote scoping (NG3003) which has side effects. Hence, import cycles are not allowed when\ncompilationMode is set to `partial`.\n\n\nModal service handles instantiating and destroying modal instances.\nUses PlaceholderService to track open instances, and for it's placeholder view reference.\n", "sourceCode": "import { Injectable, ViewContainerRef } from \"@angular/core\";\nimport { AlertModal } from \"./alert-modal.component\";\nimport { AlertModalData } from \"./alert-modal.interface\";\nimport { PlaceholderService } from \"carbon-components-angular/placeholder\";\nimport { BaseModalService } from \"./base-modal.service\";\n\n/**\n * Extends Base Modal Service to create Alert Modal with a function call. Placed in a seperate service\n * to prevent remote scoping (NG3003) which has side effects. Hence, import cycles are not allowed when\n * compilationMode is set to `partial`.\n *\n *\n * Modal service handles instantiating and destroying modal instances.\n * Uses PlaceholderService to track open instances, and for it's placeholder view reference.\n */\n@Injectable()\nexport class ModalService extends BaseModalService {\n\t/**\n\t * Creates an instance of `ModalService`.\n\t */\n\tconstructor(public placeholderService: PlaceholderService) {\n\t\tsuper(placeholderService);\n\t}\n\n\t/**\n\t * Creates and renders a new alert modal component.\n\t * @param data You can pass in:\n\t * `type` - \"default\" | \"danger\" = \"default\",\n\t * `label` - a label shown over the title,\n\t * `title` - modal's title,\n\t * `content` - modal's content, could include HTML tags.\n\t * `buttons` is an array of objects\n\t * `close` custom close function\n\t * ```\n\t * {\n\t * \t\ttext: \"Button text\",\n\t * \t\ttype: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger--primary\" = \"primary\",\n\t * \t\tclick: clickFunction,\n\t * }\n\t * ```\n\t */\n\tshow(data: AlertModalData) {\n\t\treturn this.create({\n\t\t\tcomponent: AlertModal,\n\t\t\tinputs: {\n\t\t\t\ttype: data.type,\n\t\t\t\tlabel: data.label,\n\t\t\t\ttitle: data.title,\n\t\t\t\tcontent: data.content,\n\t\t\t\thasScrollingContent: data.hasScrollingContent !== undefined ? data.hasScrollingContent : null,\n\t\t\t\tsize: data.size,\n\t\t\t\tbuttons: data.buttons || [],\n\t\t\t\tclose: data.close || (() => { }),\n\t\t\t\tshowCloseButton: data.showCloseButton\n\t\t\t}\n\t\t});\n\t}\n}\n\n", "constructorObj": { "name": "constructor", "description": "

Creates an instance of ModalService.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "placeholderService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "" } ], "line": 17, "rawdescription": "\n\nCreates an instance of `ModalService`.\n", "jsdoctags": [ { "name": "placeholderService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [ "BaseModalService" ], "type": "injectable" }, { "name": "NotificationDisplayService", "id": "injectable-NotificationDisplayService-d2babe3b023b4ecc6a778d0800131710dee02919e9d871c7d57bd405272063d56cb48984d54a208f911b248f53f3b0f7900623392d2e47ca55afb96f4d9f71e2", "file": "src/notification/notification-display.service.ts", "properties": [], "methods": [ { "name": "close", "args": [ { "name": "notificationRef", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 13, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nProgramatically closes notification based on `notificationRef`.\t *\n", "description": "

Programatically closes notification based on notificationRef.\t *

\n", "jsdoctags": [ { "name": "notificationRef", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "sourceCode": "import {\n\tInjectable,\n\tApplicationRef\n} from \"@angular/core\";\n\n@Injectable()\nexport class NotificationDisplayService {\n\tconstructor(protected applicationRef: ApplicationRef) {}\n\n\t/**\n\t * Programatically closes notification based on `notificationRef`.\t *\n\t */\n\tclose(notificationRef: any) {\n\t\tif (notificationRef.hostView) {\n\t\t\tsetTimeout( () => {\n\t\t\t\tthis.applicationRef.detachView(notificationRef.hostView);\n\t\t\t\tnotificationRef.destroy();\n\t\t\t}, 200);\n\t\t}\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "applicationRef", "type": "ApplicationRef", "deprecated": false, "deprecationMessage": "" } ], "line": 7, "jsdoctags": [ { "name": "applicationRef", "type": "ApplicationRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "type": "injectable" }, { "name": "NotificationService", "id": "injectable-NotificationService-122d585184bc7e3b2ef2bdd560a2221ecb223d00aff0b6ebc4b96c274411ad0b8252292d79214b9ccf358be61f4124d60d4e19e2b7da763b4f5ee88032a15f7c", "file": "src/notification/notification.service.ts", "properties": [ { "name": "notificationRefs", "defaultValue": "new Array>()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

An array containing ComponentRefs to all the notifications this service instance\nis responsible for.

\n", "line": 28, "rawdescription": "\n\nAn array containing `ComponentRef`s to all the notifications this service instance\nis responsible for.\n\n", "modifierKind": [ 125 ] }, { "name": "onClose", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "type": "EventEmitter", "optional": false, "description": "", "line": 29, "modifierKind": [ 125 ] } ], "methods": [ { "name": "close", "args": [ { "name": "notificationRef", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 144, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nProgramatically closes notification based on `notificationRef`.\n\n", "description": "

Programatically closes notification based on notificationRef.

\n", "jsdoctags": [ { "name": { "pos": 4538, "end": 4553, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "notificationRef" }, "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 4532, "end": 4537, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

ComponentRef of a notification or Notification component you wish to close

\n" } ] }, { "name": "getSmartTimeout", "args": [ { "name": "notificationObj", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 167, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalculates the amount of time user needs to read the message in the notification.\n\n\nIn addition to `type` and `message` members, use `duration` member to add\nsome extra time (in ms) to timeout if you need to.\n", "description": "

Calculates the amount of time user needs to read the message in the notification.

\n

In addition to type and message members, use duration member to add\nsome extra time (in ms) to timeout if you need to.

\n", "jsdoctags": [ { "name": { "pos": 5093, "end": 5108, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "notificationObj" }, "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 5087, "end": 5092, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

Same object used to instantiate notification.

\n

In addition to type and message members, use duration member to add\nsome extra time (in ms) to timeout if you need to.

\n" }, { "tagName": { "pos": 5297, "end": 5304, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "returns" }, "comment": "

calculated timeout (in ms) for smart notification

\n" } ] }, { "name": "showActionable", "args": [ { "name": "notificationObj", "type": "ActionableContent", "deprecated": false, "deprecationMessage": "" }, { "name": "notificationComp", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "ActionableNotification" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 135, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "notificationObj", "type": "ActionableContent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "notificationComp", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "ActionableNotification", "tagName": { "text": "param" } } ] }, { "name": "showNotification", "args": [ { "name": "notificationObj", "type": "NotificationContent | ToastContent | ActionableContent", "deprecated": false, "deprecationMessage": "" }, { "name": "notificationComp", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "Notification" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 70, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nShows the notification based on the `notificationObj`.\n\n\n**Members:**\n\n* `type` can be one of `\"info\"`, `\"warning\"`, `\"danger\"`, `\"success\"`\n* `message` is message for notification to display\n* `target` is css selector defining an element to append notification to. If not provided,\n`showNotification()` creates a place for the notification in `body`\n* `duration` is number of ms to close the notification after. If used in combination with `smart`,\nit's added to the calculated timeout\n* `smart`, set to `true` if you want to use smart notification.\n\n**Example:**\n```typescript\n// Info notification, saying \"Sample message.\" added to the element with id notification-container\n// uses smart timeout with added duration of 1 second.\n{\n\ttype: \"info\",\n\tmessage: \"Sample message.\",\n\ttarget: \"#notification-container\",\n\tduration: 1000,\n\tsmart: true\n}\n```\n\n", "description": "

Shows the notification based on the notificationObj.

\n

Members:

\n
    \n
  • type can be one of "info", "warning", "danger", "success"
    • \n
  • message is message for notification to display
    • \n
  • target is css selector defining an element to append notification to. If not provided,\nshowNotification() creates a place for the notification in body
    • \n
  • duration is number of ms to close the notification after. If used in combination with smart,\nit's added to the calculated timeout
    • \n
  • smart, set to true if you want to use smart notification.
    • \n
\n

Example:

\nExample :
// Info notification, saying "Sample message." added to the element with id notification-container\n// uses smart timeout with added duration of 1 second.\n{\n    type: "info",\n    message: "Sample message.",\n    target: "#notification-container",\n    duration: 1000,\n    smart: true\n}
", "jsdoctags": [ { "name": { "pos": 1131, "end": 1146, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "notificationObj" }, "type": "NotificationContent | ToastContent | ActionableContent", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1125, "end": 1130, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

Can have type, message, target, duration and smart members.

\n

Members:

\n
    \n
  • type can be one of "info", "warning", "danger", "success"
    • \n
  • message is message for notification to display
    • \n
  • target is css selector defining an element to append notification to. If not provided,\nshowNotification() creates a place for the notification in body
    • \n
  • duration is number of ms to close the notification after. If used in combination with smart,\nit's added to the calculated timeout
    • \n
  • smart, set to true if you want to use smart notification.
    • \n
\n

Example:

\nExample :
// Info notification, saying "Sample message." added to the element with id notification-container\n// uses smart timeout with added duration of 1 second.\n{\ntype: "info",\nmessage: "Sample message.",\ntarget: "#notification-container",\nduration: 1000,\nsmart: true\n}
" }, { "name": { "pos": 2112, "end": 2128, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "notificationComp" }, "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "Notification", "tagName": { "pos": 2105, "end": 2110, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

If provided, used to resolve component factory

\n" } ] }, { "name": "showToast", "args": [ { "name": "notificationObj", "type": "NotificationContent | ToastContent", "deprecated": false, "deprecationMessage": "" }, { "name": "notificationComp", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "Toast" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 131, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "notificationObj", "type": "NotificationContent | ToastContent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "notificationComp", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "Toast", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "

Provides a way to use the notification component.

\n

Notifications are displayed toward the top of the UI and do not interrupt the user’s work.

\n", "rawdescription": "\n\nProvides a way to use the notification component.\n\nNotifications are displayed toward the top of the UI and do not interrupt the user’s work.\n", "sourceCode": "import {\n\tComponentRef,\n\tEventEmitter,\n\tInjectable,\n\tOnDestroy,\n\tNgZone,\n\tViewContainerRef,\n\tInjector\n} from \"@angular/core\";\n\nimport { NotificationContent, ToastContent, ActionableContent } from \"./notification-content.interface\";\nimport { Notification } from \"./notification.component\";\nimport { Toast } from \"./toast.component\";\nimport { ActionableNotification } from \"./actionable-notification.component\";\n\n/**\n * Provides a way to use the notification component.\n *\n * Notifications are displayed toward the top of the UI and do not interrupt the user’s work.\n */\n@Injectable()\nexport class NotificationService implements OnDestroy {\n\t/**\n\t * An array containing `ComponentRef`s to all the notifications this service instance\n\t * is responsible for.\n\t *\n\t */\n\tpublic notificationRefs = new Array>();\n\tpublic onClose: EventEmitter = new EventEmitter();\n\n\t/**\n\t * Constructs Notification Service\n\t */\n\tconstructor(\n\t\tprotected injector: Injector,\n\t\tprotected viewContainer: ViewContainerRef,\n\t\tprotected ngZone: NgZone\n\t) {}\n\n\t/**\n\t * Shows the notification based on the `notificationObj`.\n\t *\n\t * @param notificationObj Can have `type`, `message`, `target`, `duration` and `smart` members.\n\t *\n\t * **Members:**\n\t *\n\t * * `type` can be one of `\"info\"`, `\"warning\"`, `\"danger\"`, `\"success\"`\n\t * * `message` is message for notification to display\n\t * * `target` is css selector defining an element to append notification to. If not provided,\n\t * `showNotification()` creates a place for the notification in `body`\n\t * * `duration` is number of ms to close the notification after. If used in combination with `smart`,\n\t * it's added to the calculated timeout\n\t * * `smart`, set to `true` if you want to use smart notification.\n\t *\n\t * **Example:**\n\t * ```typescript\n\t * // Info notification, saying \"Sample message.\" added to the element with id notification-container\n\t * // uses smart timeout with added duration of 1 second.\n\t * {\n\t *\ttype: \"info\",\n\t *\tmessage: \"Sample message.\",\n\t *\ttarget: \"#notification-container\",\n\t *\tduration: 1000,\n\t *\tsmart: true\n\t * }\n\t * ```\n\t *\n\t * @param [notificationComp=Notification] If provided, used to resolve component factory\n\t */\n\tshowNotification(\n\t\tnotificationObj: NotificationContent | ToastContent | ActionableContent,\n\t\tnotificationComp = Notification\n\t) {\n\t\tconst notificationRef = this.viewContainer.createComponent(notificationComp);\n\t\tnotificationRef.instance.notificationObj = notificationObj;\n\t\tthis.notificationRefs.push(notificationRef);\n\n\t\tthis.onClose = notificationRef.instance.close;\n\n\t\tif (notificationObj.target) {\n\t\t\tdocument.querySelector(notificationObj.target).appendChild(notificationRef.location.nativeElement);\n\t\t} else {\n\t\t\tlet body = document.querySelector(\"body\");\n\n\t\t\t// get or create a container for alert list\n\t\t\tlet notificationClassName = \"notification-overlay\";\n\t\t\tlet notificationList = body.querySelector(`.${notificationClassName}`);\n\t\t\tif (!notificationList) {\n\t\t\t\tnotificationList = document.createElement(\"div\");\n\t\t\t\tnotificationList.className = notificationClassName;\n\t\t\t\tbody.appendChild(notificationList);\n\t\t\t}\n\n\t\t\t// add the notification to the top of the list\n\t\t\tif (notificationList.firstChild) {\n\t\t\t\tnotificationList.insertBefore(notificationRef.location.nativeElement, notificationList.firstChild);\n\t\t\t} else {\n\t\t\t\tnotificationList.appendChild(notificationRef.location.nativeElement);\n\t\t\t}\n\t\t}\n\n\t\tif (notificationObj.duration && notificationObj.duration > 0) {\n\t\t\tthis.ngZone.runOutsideAngular(() => {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.ngZone.run(() => {\n\t\t\t\t\t\tthis.close(notificationRef);\n\t\t\t\t\t});\n\t\t\t\t}, notificationObj.duration);\n\t\t\t});\n\t\t}\n\n\t\tif (notificationObj.smart) {\n\t\t\tthis.ngZone.runOutsideAngular(() => {\n\t\t\t\t// let it disappear after calculated timeout\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.ngZone.run(() => {\n\t\t\t\t\t\tthis.close(notificationRef);\n\t\t\t\t\t});\n\t\t\t\t}, this.getSmartTimeout(notificationObj));\n\t\t\t});\n\t\t}\n\n\t\tthis.onClose.subscribe(() => {\n\t\t\tthis.close(notificationRef);\n\t\t});\n\n\t\tnotificationRef.instance.componentRef = notificationRef;\n\t\treturn notificationRef.instance;\n\t}\n\n\tshowToast(notificationObj: NotificationContent | ToastContent, notificationComp = Toast) {\n\t\treturn this.showNotification(notificationObj, notificationComp as any);\n\t}\n\n\tshowActionable(notificationObj: ActionableContent, notificationComp = ActionableNotification) {\n\t\treturn this.showNotification(notificationObj, notificationComp as any);\n\t}\n\n\t/**\n\t * Programatically closes notification based on `notificationRef`.\n\t *\n\t * @param notificationRef `ComponentRef` of a notification or `Notification` component you wish to close\n\t */\n\tclose(notificationRef: any) {\n\t\tif (notificationRef) {\n\t\t\tif (notificationRef instanceof Notification) {\n\t\t\t\tthis.close(notificationRef.componentRef);\n\t\t\t} else {\n\t\t\t\tnotificationRef.destroy();\n\t\t\t\tconst index = this.notificationRefs.indexOf(notificationRef);\n\t\t\t\tif (index !== -1) {\n\t\t\t\t\tthis.notificationRefs.splice(index, 1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Calculates the amount of time user needs to read the message in the notification.\n\t *\n\t * @param notificationObj Same object used to instantiate notification.\n\t *\n\t * In addition to `type` and `message` members, use `duration` member to add\n\t * some extra time (in ms) to timeout if you need to.\n\t * @returns calculated timeout (in ms) for smart notification\n\t */\n\tgetSmartTimeout(notificationObj): number {\n\t\t// calculate timeout\n\t\tlet timeout = 600; // start with reaction time\n\n\t\t// custom duration\n\t\ttimeout += notificationObj.duration || 0;\n\n\t\t// message type\n\t\tswitch (notificationObj.type) {\n\t\t\tcase \"info\":\n\t\t\tcase \"info-square\":\n\t\t\tcase \"success\":\n\t\t\tdefault: {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"danger\": {\n\t\t\t\ttimeout += 3000;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"warning\":\n\t\t\tcase \"warning-alt\": {\n\t\t\t\ttimeout += 1500;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t// message length\n\t\t// average reader reads around 200 words per minute, or it takes them ~0.3s per word\n\t\t// let's use 1.5 factor for below average speed readers and have 0.45s per word\n\t\tlet wordCount = notificationObj.message.trim().split(/\\s+/).length;\n\t\ttimeout += wordCount * 450;\n\n\t\treturn timeout;\n\t}\n\n\t/**\n\t * OnDestroy hook.\n\t *\n\t * Destroys all living notifications it is responsible for.\n\t *\n\t */\n\tngOnDestroy() {\n\t\tthis.notificationRefs.forEach((ref) => {\n\t\t\tref.destroy();\n\t\t});\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "

Constructs Notification Service

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "injector", "type": "Injector", "deprecated": false, "deprecationMessage": "" }, { "name": "viewContainer", "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "" }, { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "" } ], "line": 29, "rawdescription": "\n\nConstructs Notification Service\n", "jsdoctags": [ { "name": "injector", "type": "Injector", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "viewContainer", "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "type": "injectable" }, { "name": "PlaceholderService", "id": "injectable-PlaceholderService-5501c6b0c08f4c0e2875fe0393e2881b2980906ad90471ff40d43f195ca01e1449b0abe04440a043fd73fb7487ae30d3c4a06af825150f86001b28463769c271", "file": "src/placeholder/placeholder.service.ts", "properties": [], "methods": [ { "name": "appendElement", "args": [ { "name": "element", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" }, { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "HTMLElement", "typeParameters": [], "line": 83, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "element", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "text": "param" } } ] }, { "name": "createComponent", "args": [ { "name": "component", "type": "ComponentRef", "deprecated": false, "deprecationMessage": "" }, { "name": "injector", "type": "Injector", "deprecated": false, "deprecationMessage": "" }, { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true }, { "name": "environment", "type": "EnvironmentInjector", "deprecated": false, "deprecationMessage": "", "defaultValue": "undefined" } ], "optional": false, "returnType": "ComponentRef", "typeParameters": [], "line": 38, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates and returns component in the view.\n", "description": "

Creates and returns component in the view.

\n", "jsdoctags": [ { "name": "component", "type": "ComponentRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "injector", "type": "Injector", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "text": "param" } }, { "name": "environment", "type": "EnvironmentInjector", "deprecated": false, "deprecationMessage": "", "defaultValue": "undefined", "tagName": { "text": "param" } } ] }, { "name": "destroyComponent", "args": [ { "name": "component", "type": "ComponentRef", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 64, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "component", "type": "ComponentRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "hasComponentRef", "args": [ { "name": "component", "type": "ComponentRef", "deprecated": false, "deprecationMessage": "" }, { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 68, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "component", "type": "ComponentRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "text": "param" } } ] }, { "name": "hasElement", "args": [ { "name": "element", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" }, { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 97, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "element", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "text": "param" } } ] }, { "name": "hasPlaceholderRef", "args": [ { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 76, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "text": "param" } } ] }, { "name": "registerViewContainerRef", "args": [ { "name": "vcRef", "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "" }, { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 27, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed by `Placeholder` to register view-container reference.\n", "description": "

Used by Placeholder to register view-container reference.

\n", "jsdoctags": [ { "name": "vcRef", "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "text": "param" } } ] }, { "name": "removeElement", "args": [ { "name": "element", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" }, { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "HTMLElement", "typeParameters": [], "line": 90, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "element", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "id", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "description": "

Singleton service used to register the container for out-of-flow components to insert into.\nAlso used to insert/remove components from that view.

\n", "rawdescription": "\n\nSingleton service used to register the container for out-of-flow components to insert into.\nAlso used to insert/remove components from that view.\n", "sourceCode": "import {\n\tComponentRef,\n\tViewContainerRef,\n\tInjector,\n\tEnvironmentInjector,\n\tinject\n} from \"@angular/core\";\nimport { Injectable } from \"@angular/core\";\n\n/**\n * Singleton service used to register the container for out-of-flow components to insert into.\n * Also used to insert/remove components from that view.\n */\n@Injectable()\nexport class PlaceholderService {\n\t/**\n\t * Main `ViewContainerRef` to insert components into\n\t */\n\tprotected viewContainerRef: ViewContainerRef = null;\n\t/**\n\t * Map of id's to secondary `ViewContainerRef`s\n\t */\n\tprotected viewContainerMap: Map = new Map();\n\t/**\n\t * Used by `Placeholder` to register view-container reference.\n\t */\n\tregisterViewContainerRef(vcRef: ViewContainerRef, id?: any): void {\n\t\tif (id) {\n\t\t\tthis.viewContainerMap.set(id, vcRef);\n\t\t} else {\n\t\t\tthis.viewContainerRef = vcRef;\n\t\t}\n\t}\n\n\t/**\n\t * Creates and returns component in the view.\n\t */\n\tcreateComponent(\n\t\tcomponent: ComponentRef,\n\t\tinjector: Injector,\n\t\tid?: any,\n\t\tenvironment: EnvironmentInjector = undefined\n\t): ComponentRef {\n\t\tif (id) {\n\t\t\tif (!this.viewContainerMap.has(id)) {\n\t\t\t\tconsole.error(`No view container with id ${id} found`);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\treturn this.viewContainerMap.get(id).createComponent(component as any, { index: this.viewContainerMap.size, injector });\n\t\t}\n\t\tif (!this.viewContainerRef) {\n\t\t\tconsole.error(\"No view container defined! Likely due to a missing `cds-placeholder`\");\n\t\t\treturn;\n\t\t}\n\t\treturn this.viewContainerRef.createComponent(component as any,\n\t\t\t{\n\t\t\t\tindex: this.viewContainerRef.length,\n\t\t\t\tinjector,\n\t\t\t\tenvironmentInjector: environment\n\t\t\t}\n\t\t);\n\t}\n\n\tdestroyComponent(component: ComponentRef) {\n\t\tcomponent.destroy();\n\t}\n\n\thasComponentRef(component: ComponentRef, id?: any) {\n\t\tif (id) {\n\t\t\treturn !(this.viewContainerMap.get(id).indexOf(component.hostView) < 0);\n\t\t}\n\n\t\treturn !(this.viewContainerRef.indexOf(component.hostView) < 0);\n\t}\n\n\thasPlaceholderRef(id?: any) {\n\t\tif (id) {\n\t\t\treturn this.viewContainerMap.has(id);\n\t\t}\n\t\treturn !!this.viewContainerRef;\n\t}\n\n\tappendElement(element: HTMLElement, id?: any): HTMLElement {\n\t\tif (id) {\n\t\t\treturn this.viewContainerMap.get(id).element.nativeElement.appendChild(element);\n\t\t}\n\t\treturn this.viewContainerRef.element.nativeElement.appendChild(element);\n\t}\n\n\tremoveElement(element: HTMLElement, id?: any): HTMLElement {\n\t\tif (id) {\n\t\t\treturn this.viewContainerMap.get(id).element.nativeElement.removeChild(element);\n\t\t}\n\t\treturn this.viewContainerRef.element.nativeElement.removeChild(element);\n\t}\n\n\thasElement(element: HTMLElement, id?: any): boolean {\n\t\tif (id) {\n\t\t\treturn this.viewContainerMap.get(id).element.nativeElement.contains(element);\n\t\t}\n\t\treturn this.viewContainerRef.element.nativeElement.contains(element);\n\t}\n}\n", "extends": [], "type": "injectable" }, { "name": "TreeViewService", "id": "injectable-TreeViewService-7961c67119d92e5f11bd7238d28b1fe821afd43edcdafc1beabc0d3aa7929db2fc6618b13241a9898ba687859d101443a8e961ab46561220e82bb5162902fbf1", "file": "src/treeview/treeview.service.ts", "properties": [ { "name": "contentProjected", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Variable used across all nodes and wrapper to determine if we should allow content projection\nor generate the tree

\n

Value is updated by passing a value to tree input in wrapper component.

\n", "line": 15, "rawdescription": "\n\nVariable used across all nodes and wrapper to determine if we should allow content projection\nor generate the tree\n\nValue is updated by passing a value to `tree` input in wrapper component.\n" }, { "name": "focusNodeObservable", "deprecated": false, "deprecationMessage": "", "type": "Observable", "optional": false, "description": "", "line": 8 }, { "name": "isMultiSelect", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Experimental

\n", "line": 19, "rawdescription": "\n\n**Experimental**\n" }, { "name": "selectionObservable", "deprecated": false, "deprecationMessage": "", "type": "Observable", "optional": false, "description": "", "line": 7 } ], "methods": [ { "name": "deselectAllNodes", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 75, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRemoves all selected nodes from the map\n", "description": "

Removes all selected nodes from the map

\n" }, { "name": "deselectNode", "args": [ { "name": "node", "type": "Node", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 63, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRemoves selected node from the map\n", "description": "

Removes selected node from the map

\n", "jsdoctags": [ { "name": { "pos": 1435, "end": 1439, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "node" }, "type": "Node", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1429, "end": 1434, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

: Node

\n" } ] }, { "name": "focusNode", "args": [ { "name": "node", "type": "Node", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 38, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the focused node\n", "description": "

Emits the focused node

\n", "jsdoctags": [ { "name": { "pos": 983, "end": 987, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "node" }, "type": "Node", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 977, "end": 982, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

: Node

\n" } ] }, { "name": "selectNode", "args": [ { "name": "node", "type": "Node", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 46, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nStore selected node in map\n", "description": "

Store selected node in map

\n", "jsdoctags": [ { "name": { "pos": 1111, "end": 1115, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "node" }, "type": "Node", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1105, "end": 1110, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

: Node

\n" } ] } ], "deprecated": false, "deprecationMessage": "", "description": "", "rawdescription": "\n", "sourceCode": "import { Injectable } from \"@angular/core\";\nimport { Observable, ReplaySubject } from \"rxjs\";\nimport { Node } from \"./tree-node.types\";\n\n@Injectable()\nexport class TreeViewService {\n\tselectionObservable: Observable;\n\tfocusNodeObservable: Observable;\n\t/**\n\t * Variable used across all nodes and wrapper to determine if we should allow content projection\n\t * or generate the tree\n\t *\n\t * Value is updated by passing a value to `tree` input in wrapper component.\n\t */\n\tcontentProjected = true;\n\t/**\n\t * **Experimental**\n\t */\n\tisMultiSelect = false;\n\n\tprivate selectionSubject = new ReplaySubject>(1);\n\tprivate focusNodeSubject = new ReplaySubject(1);\n\n\t/**\n\t * Hold's list of selected nodes and preserves order\n\t */\n\tprivate value = new Map();\n\n\tconstructor() {\n\t\tthis.selectionObservable = this.selectionSubject.asObservable();\n\t\tthis.focusNodeObservable = this.focusNodeSubject.asObservable();\n\t}\n\n\t/**\n\t * Emits the focused node\n\t * @param node: Node\n\t */\n\tfocusNode(node: Node) {\n\t\tthis.focusNodeSubject.next(node);\n\t}\n\n\t/**\n\t * Store selected node in map\n\t * @param node: Node\n\t */\n\tselectNode(node: Node) {\n\t\tif (!node) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Since multiselect is not enabled, we clear existing map\n\t\tif (!this.isMultiSelect) {\n\t\t\tthis.value.clear();\n\t\t}\n\t\tthis.value.set(node.id, node);\n\t\tthis.selectionSubject.next(this.value);\n\t}\n\n\t/**\n\t * Removes selected node from the map\n\t * @param node: Node\n\t */\n\tdeselectNode(node: Node) {\n\t\tif (!node) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value.delete(node.id);\n\t\tthis.selectionSubject.next(this.value);\n\t}\n\n\t/**\n\t * Removes all selected nodes from the map\n\t */\n\tdeselectAllNodes() {\n\t\tthis.value.clear();\n\t\tthis.selectionSubject.next(this.value);\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 27 }, "extends": [], "type": "injectable" } ], "guards": [], "interceptors": [], "classes": [ { "name": "CheckboxExportedTests", "id": "class-CheckboxExportedTests-8affd6b64e31427d567ce5cccb33165a969637d1cc13fac2ac2a4f784ec79f065e254ab87629c3fff06f3492a5402c0b72dab3b809dcc985a6569f5cc5272ebb", "file": "src/checkbox/checkbox-exported-tests.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import { expect } from \"chai\";\nimport merge from \"lodash-es/merge\";\nimport ComponentTests from \"../exported-tests/component-tests\";\n\nconst defaults = {\n\tselectors: {\n\t\troot: \"cds-checkbox\",\n\t\tinput: \"input\"\n\t}\n};\n\nclass CheckboxExportedTests extends ComponentTests {\n\tconstructor(configs) {\n\t\tsuper(merge({}, defaults, configs));\n\t\tthis.tests = this.tests.concat(this.structure());\n\t}\n\n\tstructure() {\n\t\tconst tests = [\n\t\t\t{\n\t\t\t\tname: \"initially be unchecked, be checked on click\",\n\t\t\t\tgetActual: fragment =>\n\t\t\t\t\tnew Promise(resolve => {\n\t\t\t\t\t\tconst component = this.getComponent(\n\t\t\t\t\t\t\tfragment,\n\t\t\t\t\t\t\t`${this.settings.selectors.root} ${this.settings.selectors.input}`\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst initialState = component.checked;\n\t\t\t\t\t\tcomponent.click();\n\t\t\t\t\t\tconst afterClickState = component.checked;\n\t\t\t\t\t\tresolve({\n\t\t\t\t\t\t\tinitialState,\n\t\t\t\t\t\t\tafterClickState\n\t\t\t\t\t\t});\n\t\t\t\t\t}),\n\t\t\t\t\trunComparison: results => {\n\t\t\t\t\t// tslint:disable-next-line\n\t\t\t\t\texpect(results.initialState).to.be.false;\n\t\t\t\t\t// tslint:disable-next-line\n\t\t\t\t\texpect(results.afterClickState).to.be.true;\n\t\t\t\t}\n\t\t\t}\n\t\t];\n\t\treturn [{\n\t\t\tname: \"Basic checkbox tests\",\n\t\t\ttests: this.getTests(tests)\n\t\t}];\n\t}\n}\n\nexport default CheckboxExportedTests;\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "configs", "type": "", "deprecated": false, "deprecationMessage": "" } ], "line": 12, "jsdoctags": [ { "name": "configs", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "inputsClass": [], "outputsClass": [], "properties": [ { "name": "defaults", "defaultValue": "{\n\t\tselectors: {\n\t\t\troot: \"\"\n\t\t},\n\t\tclasses: {}\n\t}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "", "line": 11, "modifierKind": [ 126 ], "inheritance": { "file": "ComponentTests" } }, { "name": "settings", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "", "line": 17, "inheritance": { "file": "ComponentTests" } }, { "name": "tests", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "any[]", "optional": false, "description": "", "line": 18, "inheritance": { "file": "ComponentTests" } } ], "methods": [ { "name": "structure", "args": [], "optional": false, "returnType": "{}", "typeParameters": [], "line": 18, "deprecated": false, "deprecationMessage": "" }, { "name": "getComponent", "args": [ { "name": "fragment", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "selector", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 31, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "fragment", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "selector", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "ComponentTests" } }, { "name": "getTests", "args": [ { "name": "tests", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 24, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "tests", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "ComponentTests" } } ], "indexSignatures": [], "extends": [ "ComponentTests" ], "hostBindings": [], "hostListeners": [] }, { "name": "ComponentTests", "id": "class-ComponentTests-570443a7237adc3e663bcb3ca106de54f8e8cc0ebfcc230b0e3b5b7b379888a1916d9e4633ef24e1c9784c6da4ffe0c94b041f3768bd78ad27029c63a5fe0802", "file": "src/exported-tests/component-tests.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import merge from \"lodash-es/merge\";\n\nfunction isObject(val) {\n\tif (val === null) {\n\t\treturn false;\n\t}\n\treturn typeof val === \"function\" || typeof val === \"object\";\n}\n\nclass ComponentTests {\n\tstatic defaults = {\n\t\tselectors: {\n\t\t\troot: \"\"\n\t\t},\n\t\tclasses: {}\n\t};\n\tsettings: any = {};\n\ttests: any[] = [];\n\n\tconstructor(configs = {}) {\n\t\tthis.settings = merge({}, ComponentTests.defaults, configs);\n\t}\n\n\tgetTests(tests) {\n\t\tif (isObject(tests)) {\n\t\t\treturn Object.keys(tests).map(i => tests[i]);\n\t\t}\n\t\treturn tests;\n\t}\n\n\tgetComponent(fragment, selector) {\n\t\tconst root = fragment.querySelector(selector);\n\t\treturn root;\n\t}\n}\n\nexport default ComponentTests;\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "configs", "type": "object", "deprecated": false, "deprecationMessage": "", "defaultValue": "{}" } ], "line": 18, "jsdoctags": [ { "name": "configs", "type": "object", "deprecated": false, "deprecationMessage": "", "defaultValue": "{}", "tagName": { "text": "param" } } ] }, "inputsClass": [], "outputsClass": [], "properties": [ { "name": "defaults", "defaultValue": "{\n\t\tselectors: {\n\t\t\troot: \"\"\n\t\t},\n\t\tclasses: {}\n\t}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "", "line": 11, "modifierKind": [ 126 ] }, { "name": "settings", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "", "line": 17 }, { "name": "tests", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "any[]", "optional": false, "description": "", "line": 18 } ], "methods": [ { "name": "getComponent", "args": [ { "name": "fragment", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "selector", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 31, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "fragment", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "selector", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "getTests", "args": [ { "name": "tests", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 24, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "tests", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "indexSignatures": [], "extends": [], "hostBindings": [], "hostListeners": [] }, { "name": "CustomHeaderItem", "id": "class-CustomHeaderItem-43dec1fee39d015661af87a2e0758230b3fe81f583b813b9295a920fa61c1f02e93d480424afab37673e46ee64fddb53093c74715a7b4269e5e642504d5fa75b", "file": "src/table/stories/app-custom-table.component.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import {\n\tTemplateRef,\n\tComponent,\n\tViewChild,\n\tInput,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\nimport { clone } from \"../../utils/index\";\n\nexport class CustomHeaderItem extends TableHeaderItem {\n\t// used for custom sorting\n\tcompare(one: TableItem, two: TableItem) {\n\t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n\t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n\t\tif (stringOne > stringTwo) {\n\t\t\treturn 1;\n\t\t} else if (stringOne < stringTwo) {\n\t\t\treturn -1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n}\n\n@Component({\n\tselector: \"app-custom-table\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t{{data.name}} {{data.surname}}\n\t\t\n\t\t\n\t\t\t{{data.name}}\n\t\t\n\n\t\t\n\t\t\n\t`\n})\nexport class DynamicTableStory implements AfterViewInit {\n\t@Input() model = new TableModel();\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() striped = true;\n\t@Input() isDataGrid = false;\n\t@Input() sortable = true;\n\t@Input() stickyHeader = false;\n\t@Input() skeleton = false;\n\n\t@ViewChild(\"customHeaderTemplate\")\n\tprotected customHeaderTemplate: TemplateRef;\n\n\t@ViewChild(\"customTableItemTemplate\")\n\tprotected customTableItemTemplate: TemplateRef;\n\n\tngAfterViewInit() {\n\t\tthis.model.data = [\n\t\t\t[new TableItem({ data: \"Name 1\" }), new TableItem({ data: { name: \"Lessy\", link: \"#\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: \"swer\" })],\n\t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: { name: \"Alice\", surname: \"Bob\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 7\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 8\" }), new TableItem({ data: \"twer\" })]\n\t\t];\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({ data: \"Very long title indeed\" }),\n\t\t\tnew CustomHeaderItem({\n\t\t\t\tdata: { name: \"Custom header\", link: \"#\" },\n\t\t\t\ttemplate: this.customHeaderTemplate,\n\t\t\t\tariaSortLabel: \"Custom header\"\n\t\t\t})\n\t\t];\n\t}\n\n\tcustomSort(index: number) {\n\t\tthis.sort(this.model, index);\n\t}\n\n\tsort(model, index: number) {\n\t\tif (model.header[index].sorted) {\n\t\t\t// if already sorted flip sorting direction\n\t\t\tmodel.header[index].ascending = model.header[index].descending;\n\t\t}\n\t\tmodel.sort(index);\n\t}\n\n\taddRow() {\n\t\tconst lastRowCopy = clone(this.model.row(this.model.data.length - 1));\n\t\tthis.model.addRow(lastRowCopy);\n\t}\n\n\taddColumn() {\n\t\tlet column = Array(this.model.data.length).fill(null).map(() => new TableItem({ data: `Column ${this.model.row(0).length}` }));\n\t\tthis.model.addColumn(column);\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n}\n", "inputsClass": [], "outputsClass": [], "properties": [ { "name": "ariaSortLabel", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

The label for the sort button

\n", "line": 155, "rawdescription": "\n\nThe label for the sort button\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "className", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

Attach a class to the column, both the header and column cells.

\n", "line": 97, "rawdescription": "\n\nAttach a class to the column, both the header and column cells.\n\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "colSpan", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The number of columns to span

\n", "line": 91, "rawdescription": "\n\nThe number of columns to span\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "data", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "

Data for the header item.

\n", "line": 110, "rawdescription": "\n\nData for the header item.\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "filterCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

Number of applied filters.

\n

filter() should set it to appropriate number.

\n", "line": 80, "rawdescription": "\n\nNumber of applied filters.\n\n`filter()` should set it to appropriate number.\n\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "filterData", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "

This is where you store your data when applying filter.

\n

It is the actual object you have access to with let-filter="data" in your template.

\n

Make sure to store data in filter.data in your template, and you will have it\navailable in filterData.data in your extension of TableHeaderItem.

\n

Because angular and object references.

\n", "line": 226, "rawdescription": "\n\nThis is where you store your data when applying filter.\n\nIt is the actual object you have access to with `let-filter=\"data\"` in your template.\n\nMake sure to store data in `filter.data` in your template, and you will have it\navailable in `filterData.data` in your extension of `TableHeaderItem`.\n\nBecause angular and object references.\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "filterFooter", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "

Used along with filterTemplate to construct the filter popover

\n", "line": 214, "rawdescription": "\n\nUsed along with `filterTemplate` to construct the filter popover\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "filterTemplate", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "

Used as a template for popover filter.

\n

let-popover="popover" will give you access to popover component and allow you to\nmanipulate it if needed.

\n

let-filter="filter" will give you access to the "filter". The main takeaway is\nstore the data you need to filter.data. You will be able to access it as\nthis.filterData.data from your filter() function when you extend TableHeaderItem

\n

Example:

\nExample :
<ng-template #filter let-popover="popover">\n    <cds-label class="first-label">\n        Value\n        <input type="text" [(ngModel)]="filter1" class="input-field">\n    </cds-label>\n</ng-template>\n\n<ng-template #filterFooter let-popover="popover" let-filter="data">\n    <button class="btn--primary" (click)="filter.data = filter1; popover.onClose()">Apply</button>\n    <button class="btn--secondary" (click)="popover.onClose()">Cancel</button>\n</ng-template>

Set the template with, for example:

\nExample :
new FilterableHeaderItem({\n    filterTemplate: this.filter,\n    filterFooter: this.filterFooter\n})
Example :
class FilterableHeaderItem extends TableHeaderItem {\n    // custom filter function\n    filter(item: TableItem): boolean {\n        if (typeof item.data === "string" && item.data.indexOf(this.filterData.data) >= 0) {\n            this.filterCount = 1;\n            return false;\n        }\n        this.filterCount = 0;\n        return true;\n    }\n}
", "line": 209, "rawdescription": "\n\nUsed as a template for popover filter.\n\n`let-popover=\"popover\"` will give you access to popover component and allow you to\nmanipulate it if needed.\n\n`let-filter=\"filter\"` will give you access to the \"filter\". The main takeaway is\nstore the data you need to `filter.data`. You will be able to access it as\n`this.filterData.data` from your `filter()` function when you extend `TableHeaderItem`\n\nExample:\n```html\n\n\t\n\t\tValue\n\t\t\n\t\n\n\n\n\t\n\t\n\n```\n\nSet the template with, for example:\n```typescript\nnew FilterableHeaderItem({\n\tfilterTemplate: this.filter,\n\tfilterFooter: this.filterFooter\n})\n```\n\n```typescript\nclass FilterableHeaderItem extends TableHeaderItem {\n\t// custom filter function\n\tfilter(item: TableItem): boolean {\n\t\tif (typeof item.data === \"string\" && item.data.indexOf(this.filterData.data) >= 0) {\n\t\t\tthis.filterCount = 1;\n\t\t\treturn false;\n\t\t}\n\t\tthis.filterCount = 0;\n\t\treturn true;\n\t}\n}\n```\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "formatSortLabel", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": false, "description": "

A callback function to format the sort label. Will be heavily called.

\n", "line": 160, "rawdescription": "\n\nA callback function to format the sort label. Will be heavily called.\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "metadata", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "

Data for the header item for general usage in the controller.\nFor example, which field is this column related to.

\n", "line": 116, "rawdescription": "\n\nData for the header item for general usage in the controller.\nFor example, which `field` is this column related to.\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "rowSpan", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The number of rows to span\nNOTE: not supported by the default carbon table

\n", "line": 86, "rawdescription": "\n\nThe number of rows to span\n**NOTE:** not supported by the default carbon table\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Enables sorting on click by default.\nIf false then this column won't show a sorting arrow at all.

\n", "line": 72, "rawdescription": "\n\nEnables sorting on click by default.\nIf false then this column won't show a sorting arrow at all.\n\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "sortDirection", "defaultValue": "\"NONE\"", "deprecated": false, "deprecationMessage": "", "type": "SortType", "optional": false, "description": "", "line": 228, "inheritance": { "file": "TableHeaderItem" } }, { "name": "sorted", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Disables sorting by default.

\n", "line": 65, "rawdescription": "\n\nDisables sorting by default.\n\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "style", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "

Style for the column, applied to every element in the column.

\n

ngStyle-like format

\n", "line": 105, "rawdescription": "\n\nStyle for the column, applied to every element in the column.\n\nngStyle-like format\n\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "template", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "

Used to display data in a desired way.

\n

If not provided, displays data as a simple string.

\n

Usage:

\n

In a component where you're using the table create a template like:

\nExample :
<ng-template #customHeaderTemplate let-data="data">\n        <i><a [routerLink]="data.link">{{data.name}}</a></i>\n</ng-template>

where we assume your data contains link and name. let-data="data" is\nnecessary for you to be able to access item's data in the template.

\n

Create ViewChild property with:

\nExample :
(at)ViewChild("customHeaderTemplate")\nprotected customHeaderTemplate: TemplateRef<any>;

Set the template to the header item, for example:

\nExample :
this.model.header = [\n        new TableHeaderItem({data: {name: "Custom header", link: "/table"}, template: this.customHeaderTemplate})\n];
", "line": 150, "rawdescription": "\n\nUsed to display data in a desired way.\n\nIf not provided, displays data as a simple string.\n\nUsage:\n\nIn a component where you're using the table create a template like:\n\n```html\n\n\t\t{{data.name}}\n\n```\nwhere we assume your data contains `link` and `name`. `let-data=\"data\"` is\nnecessary for you to be able to access item's data in the template.\n\nCreate `ViewChild` property with:\n\n```typescript\n(at)ViewChild(\"customHeaderTemplate\")\nprotected customHeaderTemplate: TemplateRef;\n```\n\nSet the template to the header item, for example:\n\n```typescript\nthis.model.header = [\n\t\tnew TableHeaderItem({data: {name: \"Custom header\", link: \"/table\"}, template: this.customHeaderTemplate})\n];\n```\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "visible", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Defines if column under this TableHeaderItem should be displayed.

\n", "line": 59, "rawdescription": "\n\nDefines if column under this TableHeaderItem should be displayed.\n\n", "inheritance": { "file": "TableHeaderItem" } } ], "methods": [ { "name": "compare", "args": [ { "name": "one", "type": "TableItem", "deprecated": false, "deprecationMessage": "" }, { "name": "two", "type": "TableItem", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "0 | 1 | -1", "typeParameters": [], "line": 15, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "one", "type": "TableItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "two", "type": "TableItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "TableHeaderItem" } }, { "name": "filter", "args": [ { "name": "item", "type": "TableItem", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 293, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to filter rows in the table.\n\nOverride to make a custom filter.\n\nEven though there is just one filter function, there can be multiple filters.\nWhen implementing filter, set `filterCount` before returning.\n\n`true` to hide the row\n`false` to show the row\n", "description": "

Used to filter rows in the table.

\n

Override to make a custom filter.

\n

Even though there is just one filter function, there can be multiple filters.\nWhen implementing filter, set filterCount before returning.

\n

true to hide the row\nfalse to show the row

\n", "jsdoctags": [ { "name": "item", "type": "TableItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "TableHeaderItem" } } ], "indexSignatures": [], "extends": [ "TableHeaderItem" ], "hostBindings": [], "hostListeners": [] }, { "name": "CustomHeaderItem", "id": "class-CustomHeaderItem-d20442e134f01e6097b5e23512d1691f788ea184e02b786f8cb22254ae63e7ec7a5b81956ec8f361838c63ed0c9eb64d182ad838d446aec119a04b09f74bd4d2-1", "file": "src/table/stories/app-expansion-table.component.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import {\n\tTemplateRef,\n\tComponent,\n\tViewChild,\n\tInput,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\n\nclass CustomHeaderItem extends TableHeaderItem {\n\t// used for custom sorting\n\tcompare(one: TableItem, two: TableItem) {\n\t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n\t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n\t\tif (stringOne > stringTwo) {\n\t\t\treturn 1;\n\t\t} else if (stringOne < stringTwo) {\n\t\t\treturn -1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n}\n\n@Component({\n\tselector: \"app-expansion-table\",\n\ttemplate: `\n\t\t\n\t\t\t{{data.name}} {{data.surname}}\n\t\t\n\t\t\n\t\t\t{{data.name}}\n\t\t\n\n\t\t\n\t\t\n\n\t\t
\n\n\t\t\n\n\t\t\n\t`\n})\nexport class ExpansionTableStory implements AfterViewInit {\n\t@Input() model = new TableModel();\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() striped = true;\n\t@Input() isDataGrid = false;\n\t@Input() sortable = true;\n\t@Input() stickyHeader = false;\n\t@Input() skeleton = false;\n\t@Input() showExpandAllToggle = false;\n\n\t@ViewChild(\"customHeaderTemplate\")\n\tprotected customHeaderTemplate: TemplateRef;\n\t@ViewChild(\"customTableItemTemplate\")\n\tprotected customTableItemTemplate: TemplateRef;\n\n\tngAfterViewInit() {\n\t\tthis.model.data = [\n\t\t\t[\n\t\t\t\tnew TableItem({ data: \"Name 1\", expandedData: \"No template\" }),\n\t\t\t\tnew TableItem({ data: { name: \"Lessy\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t],\n\t\t\t[\n\t\t\t\tnew TableItem({\n\t\t\t\t\tdata: \"Name 3\",\n\t\t\t\t\texpandedData: { name: \"In\", surname: \"Template\" },\n\t\t\t\t\texpandedTemplate: this.customTableItemTemplate\n\t\t\t\t}),\n\t\t\t\tnew TableItem({ data: \"swer\" })\n\t\t\t],\n\t\t\t[\n\t\t\t\tnew TableItem({\n\t\t\t\t\tdata: \"Name 3.1\",\n\t\t\t\t\texpandedData: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tnew TableItem({ data: \"More names\", expandedData: \"No template\" }),\n\t\t\t\t\t\t\tnew TableItem({ data: { name: \"Morey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t\t\t],\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tnew TableItem({ data: \"Core names\", expandedData: \"No template\" }),\n\t\t\t\t\t\t\tnew TableItem({ data: { name: \"Corey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t\t\t]\n\t\t\t\t\t],\n\t\t\t\t\texpandAsTable: true\n\t\t\t\t}),\n\t\t\t\tnew TableItem({ data: \"swer\" })\n\t\t\t],\n\t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: { name: \"Alice\", surname: \"Bob\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 7\" }), new TableItem({data: \"twer\"})]\n\t\t];\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({ data: \"Very long title indeed\" }),\n\t\t\tnew CustomHeaderItem({\n\t\t\t\tdata: { name: \"Custom header\", link: \"#\" },\n\t\t\t\ttemplate: this.customHeaderTemplate\n\t\t\t})\n\t\t];\n\t}\n\n\tcustomSort(index: number) {\n\t\tthis.sort(this.model, index);\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n\n\tsort(model, index: number) {\n\t\tif (model.header[index].sorted) {\n\t\t\t// if already sorted flip sorting direction\n\t\t\tmodel.header[index].ascending = model.header[index].descending;\n\t\t}\n\t\tmodel.sort(index);\n\t}\n}\n", "inputsClass": [], "outputsClass": [], "properties": [ { "name": "ariaSortLabel", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

The label for the sort button

\n", "line": 155, "rawdescription": "\n\nThe label for the sort button\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "className", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

Attach a class to the column, both the header and column cells.

\n", "line": 97, "rawdescription": "\n\nAttach a class to the column, both the header and column cells.\n\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "colSpan", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The number of columns to span

\n", "line": 91, "rawdescription": "\n\nThe number of columns to span\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "data", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "

Data for the header item.

\n", "line": 110, "rawdescription": "\n\nData for the header item.\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "filterCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

Number of applied filters.

\n

filter() should set it to appropriate number.

\n", "line": 80, "rawdescription": "\n\nNumber of applied filters.\n\n`filter()` should set it to appropriate number.\n\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "filterData", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "

This is where you store your data when applying filter.

\n

It is the actual object you have access to with let-filter="data" in your template.

\n

Make sure to store data in filter.data in your template, and you will have it\navailable in filterData.data in your extension of TableHeaderItem.

\n

Because angular and object references.

\n", "line": 226, "rawdescription": "\n\nThis is where you store your data when applying filter.\n\nIt is the actual object you have access to with `let-filter=\"data\"` in your template.\n\nMake sure to store data in `filter.data` in your template, and you will have it\navailable in `filterData.data` in your extension of `TableHeaderItem`.\n\nBecause angular and object references.\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "filterFooter", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "

Used along with filterTemplate to construct the filter popover

\n", "line": 214, "rawdescription": "\n\nUsed along with `filterTemplate` to construct the filter popover\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "filterTemplate", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "

Used as a template for popover filter.

\n

let-popover="popover" will give you access to popover component and allow you to\nmanipulate it if needed.

\n

let-filter="filter" will give you access to the "filter". The main takeaway is\nstore the data you need to filter.data. You will be able to access it as\nthis.filterData.data from your filter() function when you extend TableHeaderItem

\n

Example:

\nExample :
<ng-template #filter let-popover="popover">\n    <cds-label class="first-label">\n        Value\n        <input type="text" [(ngModel)]="filter1" class="input-field">\n    </cds-label>\n</ng-template>\n\n<ng-template #filterFooter let-popover="popover" let-filter="data">\n    <button class="btn--primary" (click)="filter.data = filter1; popover.onClose()">Apply</button>\n    <button class="btn--secondary" (click)="popover.onClose()">Cancel</button>\n</ng-template>

Set the template with, for example:

\nExample :
new FilterableHeaderItem({\n    filterTemplate: this.filter,\n    filterFooter: this.filterFooter\n})
Example :
class FilterableHeaderItem extends TableHeaderItem {\n    // custom filter function\n    filter(item: TableItem): boolean {\n        if (typeof item.data === "string" && item.data.indexOf(this.filterData.data) >= 0) {\n            this.filterCount = 1;\n            return false;\n        }\n        this.filterCount = 0;\n        return true;\n    }\n}
", "line": 209, "rawdescription": "\n\nUsed as a template for popover filter.\n\n`let-popover=\"popover\"` will give you access to popover component and allow you to\nmanipulate it if needed.\n\n`let-filter=\"filter\"` will give you access to the \"filter\". The main takeaway is\nstore the data you need to `filter.data`. You will be able to access it as\n`this.filterData.data` from your `filter()` function when you extend `TableHeaderItem`\n\nExample:\n```html\n\n\t\n\t\tValue\n\t\t\n\t\n\n\n\n\t\n\t\n\n```\n\nSet the template with, for example:\n```typescript\nnew FilterableHeaderItem({\n\tfilterTemplate: this.filter,\n\tfilterFooter: this.filterFooter\n})\n```\n\n```typescript\nclass FilterableHeaderItem extends TableHeaderItem {\n\t// custom filter function\n\tfilter(item: TableItem): boolean {\n\t\tif (typeof item.data === \"string\" && item.data.indexOf(this.filterData.data) >= 0) {\n\t\t\tthis.filterCount = 1;\n\t\t\treturn false;\n\t\t}\n\t\tthis.filterCount = 0;\n\t\treturn true;\n\t}\n}\n```\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "formatSortLabel", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": false, "description": "

A callback function to format the sort label. Will be heavily called.

\n", "line": 160, "rawdescription": "\n\nA callback function to format the sort label. Will be heavily called.\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "metadata", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "

Data for the header item for general usage in the controller.\nFor example, which field is this column related to.

\n", "line": 116, "rawdescription": "\n\nData for the header item for general usage in the controller.\nFor example, which `field` is this column related to.\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "rowSpan", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The number of rows to span\nNOTE: not supported by the default carbon table

\n", "line": 86, "rawdescription": "\n\nThe number of rows to span\n**NOTE:** not supported by the default carbon table\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Enables sorting on click by default.\nIf false then this column won't show a sorting arrow at all.

\n", "line": 72, "rawdescription": "\n\nEnables sorting on click by default.\nIf false then this column won't show a sorting arrow at all.\n\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "sortDirection", "defaultValue": "\"NONE\"", "deprecated": false, "deprecationMessage": "", "type": "SortType", "optional": false, "description": "", "line": 228, "inheritance": { "file": "TableHeaderItem" } }, { "name": "sorted", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Disables sorting by default.

\n", "line": 65, "rawdescription": "\n\nDisables sorting by default.\n\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "style", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "

Style for the column, applied to every element in the column.

\n

ngStyle-like format

\n", "line": 105, "rawdescription": "\n\nStyle for the column, applied to every element in the column.\n\nngStyle-like format\n\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "template", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "

Used to display data in a desired way.

\n

If not provided, displays data as a simple string.

\n

Usage:

\n

In a component where you're using the table create a template like:

\nExample :
<ng-template #customHeaderTemplate let-data="data">\n        <i><a [routerLink]="data.link">{{data.name}}</a></i>\n</ng-template>

where we assume your data contains link and name. let-data="data" is\nnecessary for you to be able to access item's data in the template.

\n

Create ViewChild property with:

\nExample :
(at)ViewChild("customHeaderTemplate")\nprotected customHeaderTemplate: TemplateRef<any>;

Set the template to the header item, for example:

\nExample :
this.model.header = [\n        new TableHeaderItem({data: {name: "Custom header", link: "/table"}, template: this.customHeaderTemplate})\n];
", "line": 150, "rawdescription": "\n\nUsed to display data in a desired way.\n\nIf not provided, displays data as a simple string.\n\nUsage:\n\nIn a component where you're using the table create a template like:\n\n```html\n\n\t\t{{data.name}}\n\n```\nwhere we assume your data contains `link` and `name`. `let-data=\"data\"` is\nnecessary for you to be able to access item's data in the template.\n\nCreate `ViewChild` property with:\n\n```typescript\n(at)ViewChild(\"customHeaderTemplate\")\nprotected customHeaderTemplate: TemplateRef;\n```\n\nSet the template to the header item, for example:\n\n```typescript\nthis.model.header = [\n\t\tnew TableHeaderItem({data: {name: \"Custom header\", link: \"/table\"}, template: this.customHeaderTemplate})\n];\n```\n", "inheritance": { "file": "TableHeaderItem" } }, { "name": "visible", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Defines if column under this TableHeaderItem should be displayed.

\n", "line": 59, "rawdescription": "\n\nDefines if column under this TableHeaderItem should be displayed.\n\n", "inheritance": { "file": "TableHeaderItem" } } ], "methods": [ { "name": "compare", "args": [ { "name": "one", "type": "TableItem", "deprecated": false, "deprecationMessage": "" }, { "name": "two", "type": "TableItem", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "0 | 1 | -1", "typeParameters": [], "line": 14, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "one", "type": "TableItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "two", "type": "TableItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "TableHeaderItem" } }, { "name": "filter", "args": [ { "name": "item", "type": "TableItem", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 293, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to filter rows in the table.\n\nOverride to make a custom filter.\n\nEven though there is just one filter function, there can be multiple filters.\nWhen implementing filter, set `filterCount` before returning.\n\n`true` to hide the row\n`false` to show the row\n", "description": "

Used to filter rows in the table.

\n

Override to make a custom filter.

\n

Even though there is just one filter function, there can be multiple filters.\nWhen implementing filter, set filterCount before returning.

\n

true to hide the row\nfalse to show the row

\n", "jsdoctags": [ { "name": "item", "type": "TableItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "TableHeaderItem" } } ], "indexSignatures": [], "extends": [ "TableHeaderItem" ], "hostBindings": [], "hostListeners": [], "isDuplicate": true, "duplicateId": 1, "duplicateName": "CustomHeaderItem-1" }, { "name": "DataGridInteractionModel", "id": "class-DataGridInteractionModel-1a07e40000ad0a03c69bfa750d2a244b531aa250bce669da5c76033e397d939a6f0b83c8e636808892ee31e7b389748f2b48e5521973de9e6b9b1c2c05d2fabe", "file": "src/table/data-grid-interaction-model.class.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import {\n\tBehaviorSubject,\n\tObservable,\n\tcombineLatest\n} from \"rxjs\";\nimport { map } from \"rxjs/operators\";\nimport { TableAdapter } from \"./table-adapter.class\";\nimport { tabbableSelectorIgnoreTabIndex, getFocusElementList } from \"carbon-components-angular/common\";\n\n/**\n * The current and previous position in the grid.\n *\n * `current` and `previous` are tuples that follow the `[row, column]` convention.\n */\nexport interface DataGridPosition {\n\tcurrent: [number, number];\n\tprevious: [number, number];\n}\n\n/**\n * `DataGridInteractionModel` provides centralized control over arbitrary 2d grids, following the w3 specs.\n *\n * Refs:\n * - https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html\n * - https://www.w3.org/TR/wai-aria-practices/#grid\n *\n * Example usage (taken from `table.component`):\n```typescript\n// a standard HTML table\nconst table = this.elementRef.nativeElement.querySelector(\"table\") as HTMLTableElement;\n\n// `TableDomAdapter` implements `TableAdapter` and provides a consistent interface to query rows and columns in a table\nconst tableAdapter = new TableDomAdapter(table);\n\n// the keydown events that we'll use for keyboard navigation of the table\nconst keydownEventStream = fromEvent(table, \"keydown\");\n\n// the click events we'll use to ensure focus is updated correctly on click\nconst clickEventStream = fromEvent(table, \"click\");\n\n// the `DataGridInteractionModel` instance!\nthis.interactionModel = new DataGridInteractionModel(keydownEventStream, clickEventStream, tableAdapter);\n\n// subscribe to the combined position updates\nthis.interactionModel.position.subscribe(event => {\n\tconst [currentRow, currentColumn] = event.current;\n\tconst [previousRow, previousColumn] = event.previous;\n\n\t// query the TableAdapter for the cell at the current row and column ...\n\tconst currentElement = tableAdapter.getCell(currentRow, currentColumn);\n\t// ... and make it focusable it\n\tTable.setTabIndex(currentElement, 0);\n\n\t// if the model has just initialized don't focus or reset anything\n\tif (previousRow === -1 || previousColumn === -1) { return; }\n\n\t// query the TableAdapter for the cell at the previous row and column ...\n\tconst previousElement = tableAdapter.getCell(previousRow, previousColumn);\n\t// ... and make it unfocusable (now there is only a single focusable cell)\n\tTable.setTabIndex(previousElement, -1);\n\n\t// finally, focus the current cell (skipped during initilzation)\n\tTable.focus(currentElement);\n});\n```\n */\nexport class DataGridInteractionModel {\n\t/**\n\t * An Observable that provides an aggregated view of the `rowIndex` and `columnIndex` Observables\n\t */\n\treadonly position: Observable;\n\t/**\n\t * An Observable that provides the current and previous row indexes.\n\t */\n\treadonly rowIndex: Observable<{ current: number, previous: number }>;\n\t/**\n\t * An Observable that provides the current and previous column indexes.\n\t */\n\treadonly columnIndex: Observable<{ current: number, previous: number }>;\n\n\t/**\n\t * Internal subject to handle changes in row\n\t */\n\tprotected rowSubject = new BehaviorSubject({ current: 0, previous: -1 });\n\t/**\n\t * Internal subject to handle changes in column\n\t */\n\tprotected columnSubject = new BehaviorSubject({ current: 0, previous: -1 });\n\n\t/**\n\t * The latest value emitted by the rowSubject\n\t */\n\tprotected get currentRow() {\n\t\treturn this.rowSubject.getValue().current;\n\t}\n\n\t/**\n\t * The latest value emitted by the columnSubject\n\t */\n\tprotected get currentColumn() {\n\t\treturn this.columnSubject.getValue().current;\n\t}\n\n\t/**\n\t * The last column as reported by the adapter\n\t */\n\tprotected get lastColumn() {\n\t\treturn this.tableAdapter.lastColumnIndex;\n\t}\n\n\t/**\n\t * The last row as reported by the adapter\n\t */\n\tprotected get lastRow() {\n\t\treturn this.tableAdapter.lastRowIndex;\n\t}\n\n\t/**\n\t * `DataGridInteractionModel` requires knowledge of events, and a representation of your table/grid to be useful.\n\t *\n\t * @param keyboardEventStream an Observable of KeyboardEvents. Should be scoped to the table container.\n\t * @param clickEventStream an Observable of ClickEvents. should only include clicks that take action on items known by the TableAdapter\n\t * @param tableAdapter an instance of a concrete class that implements TableAdapter. The standard carbon table uses TableDomAdapter\n\t */\n\tconstructor(\n\t\tprotected keyboardEventStream: Observable,\n\t\tprotected clickEventStream: Observable,\n\t\tprotected tableAdapter: TableAdapter\n\t) {\n\t\tthis.rowIndex = this.rowSubject.asObservable();\n\t\tthis.columnIndex = this.columnSubject.asObservable();\n\t\tthis.position = combineLatest(this.rowIndex, this.columnIndex).pipe(map(positions => {\n\t\t\tconst [row, column] = positions;\n\t\t\treturn {\n\t\t\t\tcurrent: [row.current, column.current],\n\t\t\t\tprevious: [row.previous, column.previous]\n\t\t\t};\n\t\t})) as Observable;\n\t\tthis.keyboardEventStream.subscribe(this.handleKeyboardEvent.bind(this));\n\t\tthis.clickEventStream.subscribe(this.handleClickEvent.bind(this));\n\t}\n\n\t/**\n\t * Handles moving the position according to the w3 datagrid navigation specs\n\t *\n\t * Refs:\n\t * - https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html\n\t * - https://www.w3.org/TR/wai-aria-practices/#grid\n\t *\n\t * @param event the KeyboardEvent to handle\n\t */\n\thandleKeyboardEvent(event: KeyboardEvent) {\n\t\tconst currentCell = this.tableAdapter.getCell(this.currentRow, this.currentColumn);\n\t\tlet currentColumn = this.tableAdapter.findColumnIndex(currentCell);\n\t\tlet currentRow = this.tableAdapter.findRowIndex(currentCell);\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowRight\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\t// add the colspan since findColumnIndex will return the\n\t\t\t\t// first column containing the cell (of N columns it may span)\n\t\t\t\t// and we want to navigate to the next \"real\" column\n\t\t\t\tthis.goToColumn(currentColumn + currentCell.colSpan);\n\t\t\t\tbreak;\n\t\t\tcase \"ArrowLeft\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\t// we only ever need to subtract 1 from the column, since findColumnIndex returns the\n\t\t\t\t// first of N columns containing the cell\n\t\t\t\tthis.goToColumn(currentColumn - 1);\n\t\t\t\tbreak;\n\t\t\tcase \"ArrowDown\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.goToRow(currentRow + currentCell.rowSpan);\n\t\t\t\tbreak;\n\t\t\tcase \"ArrowUp\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.goToRow(currentRow - 1);\n\t\t\t\tbreak;\n\t\t\tcase \"Home\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (event.ctrlKey) {\n\t\t\t\t\tthis.goTo({row: 0, column: 0});\n\t\t\t\t} else {\n\t\t\t\t\tthis.goToColumn(0);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase \"End\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (event.ctrlKey) {\n\t\t\t\t\tthis.goTo({ row: this.lastRow, column: this.lastColumn });\n\t\t\t\t} else {\n\t\t\t\t\tthis.goToColumn(this.lastColumn);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Handles moving the position to the clicked cell\n\t *\n\t * @param event the MouseEvent to handle\n\t */\n\thandleClickEvent(event: MouseEvent) {\n\t\tconst cell = (event.target as HTMLElement).closest(\"td, th\") as HTMLTableCellElement;\n\t\tconst [rowIndex, cellIndex] = this.tableAdapter.findIndex(cell);\n\t\tthis.goTo({ row: rowIndex, column: cellIndex });\n\t}\n\n\t/**\n\t * Jump to a specific column without changing the row\n\t *\n\t * @param index column to jump to\n\t */\n\tgoToColumn(index: number) {\n\t\tif (index > this.lastColumn || index < 0) { return; }\n\t\tthis.goTo({ row: this.currentRow, column: index});\n\t}\n\n\t/**\n\t * Jump to a specific row without changing the column\n\t *\n\t * @param index row to jump to\n\t */\n\tgoToRow(index: number) {\n\t\tif (index > this.lastRow || index < 0) { return; }\n\t\tthis.goTo({row: index, column: this.currentColumn});\n\t}\n\n\t/**\n\t * Jump to the specified row and column\n\t *\n\t * @param param0 an object that contains `row` and `column` properties\n\t */\n\tgoTo({row, column}) {\n\t\tthis.rowSubject.next({ current: row, previous: this.currentRow });\n\t\tthis.columnSubject.next({ current: column, previous: this.currentColumn });\n\t}\n\n\t/**\n\t * Convenience method to reset the tab indexes on a standard carbon table.\n\t * For custom tables you may want to reset the indexes manually and simply call `.reset()`\n\t */\n\tresetTabIndexes(newTabIndex = -1) {\n\t\tfor (let i = 0; i < this.tableAdapter.lastRowIndex; i++) {\n\t\t\tconst row = this.tableAdapter.getRow(i) as HTMLTableRowElement;\n\t\t\tfor (const cell of Array.from(row.cells)) {\n\t\t\t\tconst tabbableElements = getFocusElementList(cell, tabbableSelectorIgnoreTabIndex);\n\t\t\t\ttabbableElements.forEach((node: HTMLElement) => node.tabIndex = newTabIndex);\n\t\t\t\tcell.tabIndex = newTabIndex;\n\t\t\t}\n\t\t}\n\n\t\tthis.reset();\n\t}\n\n\t/**\n\t * Resets the models focus position\n\t */\n\treset() {\n\t\tthis.rowSubject.next({ current: 0, previous: -1 });\n\t\tthis.columnSubject.next({ current: 0, previous: -1 });\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "

DataGridInteractionModel requires knowledge of events, and a representation of your table/grid to be useful.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "keyboardEventStream", "type": "Observable", "deprecated": false, "deprecationMessage": "" }, { "name": "clickEventStream", "type": "Observable", "deprecated": false, "deprecationMessage": "" }, { "name": "tableAdapter", "type": "TableAdapter", "deprecated": false, "deprecationMessage": "" } ], "line": 116, "rawdescription": "\n\n`DataGridInteractionModel` requires knowledge of events, and a representation of your table/grid to be useful.\n\n", "jsdoctags": [ { "name": { "pos": 3936, "end": 3955, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "keyboardEventStream" }, "type": "Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3930, "end": 3935, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

an Observable of KeyboardEvents. Should be scoped to the table container.

\n" }, { "name": { "pos": 4041, "end": 4057, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "clickEventStream" }, "type": "Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 4035, "end": 4040, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

an Observable of ClickEvents. should only include clicks that take action on items known by the TableAdapter

\n" }, { "name": { "pos": 4178, "end": 4190, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "tableAdapter" }, "type": "TableAdapter", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 4172, "end": 4177, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

an instance of a concrete class that implements TableAdapter. The standard carbon table uses TableDomAdapter

\n" } ] }, "inputsClass": [], "outputsClass": [], "properties": [ { "name": "columnIndex", "deprecated": false, "deprecationMessage": "", "type": "Observable", "optional": false, "description": "

An Observable that provides the current and previous column indexes.

\n", "line": 79, "rawdescription": "\n\nAn Observable that provides the current and previous column indexes.\n", "modifierKind": [ 148 ] }, { "name": "position", "deprecated": false, "deprecationMessage": "", "type": "Observable", "optional": false, "description": "

An Observable that provides an aggregated view of the rowIndex and columnIndex Observables

\n", "line": 71, "rawdescription": "\n\nAn Observable that provides an aggregated view of the `rowIndex` and `columnIndex` Observables\n", "modifierKind": [ 148 ] }, { "name": "rowIndex", "deprecated": false, "deprecationMessage": "", "type": "Observable", "optional": false, "description": "

An Observable that provides the current and previous row indexes.

\n", "line": 75, "rawdescription": "\n\nAn Observable that provides the current and previous row indexes.\n", "modifierKind": [ 148 ] } ], "description": "

DataGridInteractionModel provides centralized control over arbitrary 2d grids, following the w3 specs.

\n

Refs:

\n\n

Example usage (taken from table.component):

\nExample :
// a standard HTML table\nconst table = this.elementRef.nativeElement.querySelector("table") as HTMLTableElement;\n\n// `TableDomAdapter` implements `TableAdapter` and provides a consistent interface to query rows and columns in a table\nconst tableAdapter = new TableDomAdapter(table);\n\n// the keydown events that we'll use for keyboard navigation of the table\nconst keydownEventStream = fromEvent<KeyboardEvent>(table, "keydown");\n\n// the click events we'll use to ensure focus is updated correctly on click\nconst clickEventStream = fromEvent<MouseEvent>(table, "click");\n\n// the `DataGridInteractionModel` instance!\nthis.interactionModel = new DataGridInteractionModel(keydownEventStream, clickEventStream, tableAdapter);\n\n// subscribe to the combined position updates\nthis.interactionModel.position.subscribe(event => {\nconst [currentRow, currentColumn] = event.current;\nconst [previousRow, previousColumn] = event.previous;\n\n// query the TableAdapter for the cell at the current row and column ...\nconst currentElement = tableAdapter.getCell(currentRow, currentColumn);\n// ... and make it focusable it\nTable.setTabIndex(currentElement, 0);\n\n// if the model has just initialized don't focus or reset anything\nif (previousRow === -1 || previousColumn === -1) { return; }\n\n// query the TableAdapter for the cell at the previous row and column ...\nconst previousElement = tableAdapter.getCell(previousRow, previousColumn);\n// ... and make it unfocusable (now there is only a single focusable cell)\nTable.setTabIndex(previousElement, -1);\n\n// finally, focus the current cell (skipped during initilzation)\nTable.focus(currentElement);\n});
", "rawdescription": "\n\n`DataGridInteractionModel` provides centralized control over arbitrary 2d grids, following the w3 specs.\n\nRefs:\n - https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html\n - https://www.w3.org/TR/wai-aria-practices/#grid\n\nExample usage (taken from `table.component`):\n```typescript\n// a standard HTML table\nconst table = this.elementRef.nativeElement.querySelector(\"table\") as HTMLTableElement;\n\n// `TableDomAdapter` implements `TableAdapter` and provides a consistent interface to query rows and columns in a table\nconst tableAdapter = new TableDomAdapter(table);\n\n// the keydown events that we'll use for keyboard navigation of the table\nconst keydownEventStream = fromEvent(table, \"keydown\");\n\n// the click events we'll use to ensure focus is updated correctly on click\nconst clickEventStream = fromEvent(table, \"click\");\n\n// the `DataGridInteractionModel` instance!\nthis.interactionModel = new DataGridInteractionModel(keydownEventStream, clickEventStream, tableAdapter);\n\n// subscribe to the combined position updates\nthis.interactionModel.position.subscribe(event => {\nconst [currentRow, currentColumn] = event.current;\nconst [previousRow, previousColumn] = event.previous;\n\n// query the TableAdapter for the cell at the current row and column ...\nconst currentElement = tableAdapter.getCell(currentRow, currentColumn);\n// ... and make it focusable it\nTable.setTabIndex(currentElement, 0);\n\n// if the model has just initialized don't focus or reset anything\nif (previousRow === -1 || previousColumn === -1) { return; }\n\n// query the TableAdapter for the cell at the previous row and column ...\nconst previousElement = tableAdapter.getCell(previousRow, previousColumn);\n// ... and make it unfocusable (now there is only a single focusable cell)\nTable.setTabIndex(previousElement, -1);\n\n// finally, focus the current cell (skipped during initilzation)\nTable.focus(currentElement);\n});\n```\n", "methods": [ { "name": "goTo", "args": [ { "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 234, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nJump to the specified row and column\n\n", "description": "

Jump to the specified row and column

\n", "jsdoctags": [ { "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "goToColumn", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 214, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nJump to a specific column without changing the row\n\n", "description": "

Jump to a specific column without changing the row

\n", "jsdoctags": [ { "name": { "pos": 7120, "end": 7125, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 7114, "end": 7119, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

column to jump to

\n" } ] }, { "name": "goToRow", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 224, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nJump to a specific row without changing the column\n\n", "description": "

Jump to a specific row without changing the column

\n", "jsdoctags": [ { "name": { "pos": 7366, "end": 7371, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 7360, "end": 7365, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

row to jump to

\n" } ] }, { "name": "handleClickEvent", "args": [ { "name": "event", "type": "MouseEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 203, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles moving the position to the clicked cell\n\n", "description": "

Handles moving the position to the clicked cell

\n", "jsdoctags": [ { "name": { "pos": 6760, "end": 6765, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "type": "MouseEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 6754, "end": 6759, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the MouseEvent to handle

\n" } ] }, { "name": "handleKeyboardEvent", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 152, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles moving the position according to the w3 datagrid navigation specs\n\nRefs:\n - https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html\n - https://www.w3.org/TR/wai-aria-practices/#grid\n\n", "description": "

Handles moving the position according to the w3 datagrid navigation specs

\n

Refs:

\n\n", "jsdoctags": [ { "name": { "pos": 5246, "end": 5251, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 5240, "end": 5245, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the KeyboardEvent to handle

\n" } ] }, { "name": "reset", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 259, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nResets the models focus position\n", "description": "

Resets the models focus position

\n" }, { "name": "resetTabIndexes", "args": [ { "name": "newTabIndex", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "-1" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 243, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nConvenience method to reset the tab indexes on a standard carbon table.\nFor custom tables you may want to reset the indexes manually and simply call `.reset()`\n", "description": "

Convenience method to reset the tab indexes on a standard carbon table.\nFor custom tables you may want to reset the indexes manually and simply call .reset()

\n", "jsdoctags": [ { "name": "newTabIndex", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "-1", "tagName": { "text": "param" } } ] } ], "indexSignatures": [], "extends": [], "hostBindings": [], "hostListeners": [] }, { "name": "IconCache", "id": "class-IconCache-4f5767040e0cac9f7ec08605bb398f8cfffd46da2e75d08f25b0dd04c662da07862eb1690cb9795e5d981c319ed2eeac8870cf82792aef54320fa5e28dd35dea", "file": "src/icon/icon.service.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import { Injectable } from \"@angular/core\";\nimport { toString } from \"@carbon/icon-helpers\";\n\n// icon imports\nimport {\n\tAdd16,\n\tCalendar16,\n\tCaretDown16,\n\tCaretLeft16,\n\tCaretRight16,\n\tCaretUp16,\n\tCheckmark16,\n\tCheckmarkFilled16,\n\tCheckmarkOutline16,\n\tChevronDown16,\n\tChevronRight16,\n\tClose16,\n\tCopy16,\n\tDownload16,\n\tErrorFilled16,\n\tInformationFilled16,\n\tMenu16,\n\tOverflowMenuVertical16,\n\tSave16,\n\tSettings16,\n\tTrashCan16,\n\tWarning16,\n\tWarningFilled16\n} from \"@carbon/icons\";\n\n/**\n * An object that represents a parsed icon\n */\nexport interface IconDescriptor {\n\t/**\n\t * The element to render. For the root this is `svg`\n\t */\n\telem: string;\n\t/**\n\t * An object of attributes to apply to the element.\n\t *\n\t * The type here is non-exhaustive.\n\t */\n\tattrs: {\n\t\txmlns: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\tviewBox: string,\n\t\tfill: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\twidth: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\theight: string,\n\t\t[x: string]: string\n\t};\n\t/**\n\t * The content (children) of the element as an array of `IconDescriptor`s\n\t * (usually without a few fields, namely `name` and `size`)\n\t */\n\tcontent: IconDescriptor[];\n\t/**\n\t * The name of the icon.\n\t *\n\t * Needed by the icon service.\n\t */\n\tname: string;\n\t/**\n\t * The size of the icon in pixels.\n\t *\n\t * Needed by the icon service.\n\t */\n\tsize: number;\n\t/**\n\t * Optional. A string representation of the compiled svg.\n\t * If missing the icon service will add this.\n\t */\n\tsvg?: string;\n}\n\n/**\n * Abstract class that represent a cache of icons.\n *\n * The actual caching mechanism will be implementation specific,\n * but it's likely a good idea to key by the icons name and/or size.\n * Icon name and size will always be strings, and they will be the two consistent\n * identifiers of an icon. For the purposes of storage additonal descriptor properties may\n * be used, but the name and size are the only ones guarenteed to be passed for lookup purposes.\n */\nexport abstract class IconCache {\n\t/**\n\t * Finds and returns an icon based on it's name and size\n\t */\n\tabstract get(name: string, size: string): object;\n\t/**\n\t * stores an icon descriptor to the cache\n\t */\n\tabstract set(name: string, size: string, descriptor: object): void;\n}\n\n/**\n * Custom error for when a name can't be found\n */\nexport class IconNameNotFoundError extends Error {\n\tconstructor(name: string) {\n\t\tsuper(`Icon ${name} not found`);\n\t}\n}\n\n/**\n * Custom error for when a specific size can't be found\n */\nexport class IconSizeNotFoundError extends Error {\n\tconstructor(size: string, name: string) {\n\t\tsuper(`Size ${size} for ${name} not found`);\n\t}\n}\n\n/**\n * Concrete implementation of `IconCache` as a simple in memory cache\n */\nexport class IconMemoryCache extends IconCache {\n\tprivate iconMap = new Map>();\n\n\tget(name: string, size: string) {\n\t\tif (!this.iconMap.has(name)) {\n\t\t\tthrow new IconNameNotFoundError(name);\n\t\t}\n\t\tconst sizeMap = this.iconMap.get(name);\n\t\tif (!sizeMap.has(size)) {\n\t\t\tthrow new IconSizeNotFoundError(size, name);\n\t\t}\n\t\treturn sizeMap.get(size);\n\t}\n\n\tset(name: string, size: string, descriptor: object) {\n\t\tif (!this.iconMap.has(name)) {\n\t\t\tthis.iconMap.set(name, new Map());\n\t\t}\n\t\tconst sizeMap = this.iconMap.get(name);\n\t\tsizeMap.set(size, descriptor);\n\t}\n}\n\n/**\n * The icon service is a singleton service responsible for registering and retriving icons from `@carbon/icons`.\n *\n * It's important to register icons before use. It's reccommended to register your icons early, likely in your app.component.\n *\n * To allow for improved tree shaking _do not_ import all the icons from `@carbon/icons` and register them.\n * Instead register only the icons in use by your application. If your application makes use of lazy loaded\n * modules you may also lazy load the icons used in that module by registering them early on in that module.\n *\n * `ngOnInit` should be sufficiantly early to register icons.\n *\n * Example:\n * ```\n * import { Accessibility16 } from \"@carbon/icons\";\n *\n * // ...\n *\n * class MyComponent implements OnInit {\n * \tconstructor(protected iconService: IconService) {}\n *\n * \t// ...\n *\n * \tngOnInit() {\n * \t\tthis.iconService.register(Accessibility16);\n * \t}\n *\n * \t// ...\n * }\n * ```\n *\n * If needed it is possible to register an icon under a different name, via `registerAs`.\n */\n@Injectable()\nexport class IconService {\n\tprivate iconCache: IconCache = new IconMemoryCache();\n\n\t/**\n\t * Registers an array of icons based on the metadata provided by `@carbon/icons`\n\t */\n\tpublic registerAll(descriptors: object[]) {\n\t\tdescriptors.forEach(icon => this.register(icon));\n\t}\n\n\t/**\n\t * Registers an icon based on the metadata provided by `@carbon/icons`\n\t */\n\tpublic register(descriptor: object) {\n\t\tconst { name } = descriptor as IconDescriptor;\n\t\tthis.registerAs(name, descriptor);\n\t}\n\n\t/**\n\t * Registers an icon based on a uniqe name and metadata provided by `@carbon/icons`\n\t */\n\tpublic registerAs(name: string, descriptor: object) {\n\t\tconst { size } = descriptor as IconDescriptor;\n\t\tthis.iconCache.set(name, size.toString(), descriptor);\n\t}\n\n\t/**\n\t * Gets an icon, converts it to a string, and caches the result\n\t */\n\tpublic get(name: string, size: string): IconDescriptor {\n\t\ttry {\n\t\t\tconst icon = this.iconCache.get(name, size.toString()) as IconDescriptor;\n\t\t\tif (!icon.svg) {\n\t\t\t\ticon.svg = toString(icon);\n\t\t\t}\n\t\t\treturn icon;\n\t\t} catch (e) {\n\t\t\tthrow e;\n\t\t}\n\t}\n\n\t/**\n\t * Configure various service settings (caching strategy ...)\n\t */\n\tpublic configure(options: { cache: IconCache }) {\n\t\tthis.iconCache = options.cache;\n\t}\n}\n", "inputsClass": [], "outputsClass": [], "properties": [], "description": "

Abstract class that represent a cache of icons.

\n

The actual caching mechanism will be implementation specific,\nbut it's likely a good idea to key by the icons name and/or size.\nIcon name and size will always be strings, and they will be the two consistent\nidentifiers of an icon. For the purposes of storage additonal descriptor properties may\nbe used, but the name and size are the only ones guarenteed to be passed for lookup purposes.

\n", "rawdescription": "\n\nAbstract class that represent a cache of icons.\n\nThe actual caching mechanism will be implementation specific,\nbut it's likely a good idea to key by the icons name and/or size.\nIcon name and size will always be strings, and they will be the two consistent\nidentifiers of an icon. For the purposes of storage additonal descriptor properties may\nbe used, but the name and size are the only ones guarenteed to be passed for lookup purposes.\n", "methods": [ { "name": "get", "args": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "object", "typeParameters": [], "line": 92, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFinds and returns an icon based on it's name and size\n", "description": "

Finds and returns an icon based on it's name and size

\n", "modifierKind": [ 128 ], "jsdoctags": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "set", "args": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "descriptor", "type": "object", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 96, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nstores an icon descriptor to the cache\n", "description": "

stores an icon descriptor to the cache

\n", "modifierKind": [ 128 ], "jsdoctags": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "descriptor", "type": "object", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "indexSignatures": [], "extends": [], "hostBindings": [], "hostListeners": [] }, { "name": "IconMemoryCache", "id": "class-IconMemoryCache-4f5767040e0cac9f7ec08605bb398f8cfffd46da2e75d08f25b0dd04c662da07862eb1690cb9795e5d981c319ed2eeac8870cf82792aef54320fa5e28dd35dea", "file": "src/icon/icon.service.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import { Injectable } from \"@angular/core\";\nimport { toString } from \"@carbon/icon-helpers\";\n\n// icon imports\nimport {\n\tAdd16,\n\tCalendar16,\n\tCaretDown16,\n\tCaretLeft16,\n\tCaretRight16,\n\tCaretUp16,\n\tCheckmark16,\n\tCheckmarkFilled16,\n\tCheckmarkOutline16,\n\tChevronDown16,\n\tChevronRight16,\n\tClose16,\n\tCopy16,\n\tDownload16,\n\tErrorFilled16,\n\tInformationFilled16,\n\tMenu16,\n\tOverflowMenuVertical16,\n\tSave16,\n\tSettings16,\n\tTrashCan16,\n\tWarning16,\n\tWarningFilled16\n} from \"@carbon/icons\";\n\n/**\n * An object that represents a parsed icon\n */\nexport interface IconDescriptor {\n\t/**\n\t * The element to render. For the root this is `svg`\n\t */\n\telem: string;\n\t/**\n\t * An object of attributes to apply to the element.\n\t *\n\t * The type here is non-exhaustive.\n\t */\n\tattrs: {\n\t\txmlns: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\tviewBox: string,\n\t\tfill: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\twidth: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\theight: string,\n\t\t[x: string]: string\n\t};\n\t/**\n\t * The content (children) of the element as an array of `IconDescriptor`s\n\t * (usually without a few fields, namely `name` and `size`)\n\t */\n\tcontent: IconDescriptor[];\n\t/**\n\t * The name of the icon.\n\t *\n\t * Needed by the icon service.\n\t */\n\tname: string;\n\t/**\n\t * The size of the icon in pixels.\n\t *\n\t * Needed by the icon service.\n\t */\n\tsize: number;\n\t/**\n\t * Optional. A string representation of the compiled svg.\n\t * If missing the icon service will add this.\n\t */\n\tsvg?: string;\n}\n\n/**\n * Abstract class that represent a cache of icons.\n *\n * The actual caching mechanism will be implementation specific,\n * but it's likely a good idea to key by the icons name and/or size.\n * Icon name and size will always be strings, and they will be the two consistent\n * identifiers of an icon. For the purposes of storage additonal descriptor properties may\n * be used, but the name and size are the only ones guarenteed to be passed for lookup purposes.\n */\nexport abstract class IconCache {\n\t/**\n\t * Finds and returns an icon based on it's name and size\n\t */\n\tabstract get(name: string, size: string): object;\n\t/**\n\t * stores an icon descriptor to the cache\n\t */\n\tabstract set(name: string, size: string, descriptor: object): void;\n}\n\n/**\n * Custom error for when a name can't be found\n */\nexport class IconNameNotFoundError extends Error {\n\tconstructor(name: string) {\n\t\tsuper(`Icon ${name} not found`);\n\t}\n}\n\n/**\n * Custom error for when a specific size can't be found\n */\nexport class IconSizeNotFoundError extends Error {\n\tconstructor(size: string, name: string) {\n\t\tsuper(`Size ${size} for ${name} not found`);\n\t}\n}\n\n/**\n * Concrete implementation of `IconCache` as a simple in memory cache\n */\nexport class IconMemoryCache extends IconCache {\n\tprivate iconMap = new Map>();\n\n\tget(name: string, size: string) {\n\t\tif (!this.iconMap.has(name)) {\n\t\t\tthrow new IconNameNotFoundError(name);\n\t\t}\n\t\tconst sizeMap = this.iconMap.get(name);\n\t\tif (!sizeMap.has(size)) {\n\t\t\tthrow new IconSizeNotFoundError(size, name);\n\t\t}\n\t\treturn sizeMap.get(size);\n\t}\n\n\tset(name: string, size: string, descriptor: object) {\n\t\tif (!this.iconMap.has(name)) {\n\t\t\tthis.iconMap.set(name, new Map());\n\t\t}\n\t\tconst sizeMap = this.iconMap.get(name);\n\t\tsizeMap.set(size, descriptor);\n\t}\n}\n\n/**\n * The icon service is a singleton service responsible for registering and retriving icons from `@carbon/icons`.\n *\n * It's important to register icons before use. It's reccommended to register your icons early, likely in your app.component.\n *\n * To allow for improved tree shaking _do not_ import all the icons from `@carbon/icons` and register them.\n * Instead register only the icons in use by your application. If your application makes use of lazy loaded\n * modules you may also lazy load the icons used in that module by registering them early on in that module.\n *\n * `ngOnInit` should be sufficiantly early to register icons.\n *\n * Example:\n * ```\n * import { Accessibility16 } from \"@carbon/icons\";\n *\n * // ...\n *\n * class MyComponent implements OnInit {\n * \tconstructor(protected iconService: IconService) {}\n *\n * \t// ...\n *\n * \tngOnInit() {\n * \t\tthis.iconService.register(Accessibility16);\n * \t}\n *\n * \t// ...\n * }\n * ```\n *\n * If needed it is possible to register an icon under a different name, via `registerAs`.\n */\n@Injectable()\nexport class IconService {\n\tprivate iconCache: IconCache = new IconMemoryCache();\n\n\t/**\n\t * Registers an array of icons based on the metadata provided by `@carbon/icons`\n\t */\n\tpublic registerAll(descriptors: object[]) {\n\t\tdescriptors.forEach(icon => this.register(icon));\n\t}\n\n\t/**\n\t * Registers an icon based on the metadata provided by `@carbon/icons`\n\t */\n\tpublic register(descriptor: object) {\n\t\tconst { name } = descriptor as IconDescriptor;\n\t\tthis.registerAs(name, descriptor);\n\t}\n\n\t/**\n\t * Registers an icon based on a uniqe name and metadata provided by `@carbon/icons`\n\t */\n\tpublic registerAs(name: string, descriptor: object) {\n\t\tconst { size } = descriptor as IconDescriptor;\n\t\tthis.iconCache.set(name, size.toString(), descriptor);\n\t}\n\n\t/**\n\t * Gets an icon, converts it to a string, and caches the result\n\t */\n\tpublic get(name: string, size: string): IconDescriptor {\n\t\ttry {\n\t\t\tconst icon = this.iconCache.get(name, size.toString()) as IconDescriptor;\n\t\t\tif (!icon.svg) {\n\t\t\t\ticon.svg = toString(icon);\n\t\t\t}\n\t\t\treturn icon;\n\t\t} catch (e) {\n\t\t\tthrow e;\n\t\t}\n\t}\n\n\t/**\n\t * Configure various service settings (caching strategy ...)\n\t */\n\tpublic configure(options: { cache: IconCache }) {\n\t\tthis.iconCache = options.cache;\n\t}\n}\n", "inputsClass": [], "outputsClass": [], "properties": [], "description": "

Concrete implementation of IconCache as a simple in memory cache

\n", "rawdescription": "\n\nConcrete implementation of `IconCache` as a simple in memory cache\n", "methods": [ { "name": "get", "args": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 123, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "IconCache" } }, { "name": "set", "args": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "descriptor", "type": "object", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 134, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "descriptor", "type": "object", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "IconCache" } } ], "indexSignatures": [], "extends": [ "IconCache" ], "hostBindings": [], "hostListeners": [] }, { "name": "IconNameNotFoundError", "id": "class-IconNameNotFoundError-4f5767040e0cac9f7ec08605bb398f8cfffd46da2e75d08f25b0dd04c662da07862eb1690cb9795e5d981c319ed2eeac8870cf82792aef54320fa5e28dd35dea", "file": "src/icon/icon.service.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import { Injectable } from \"@angular/core\";\nimport { toString } from \"@carbon/icon-helpers\";\n\n// icon imports\nimport {\n\tAdd16,\n\tCalendar16,\n\tCaretDown16,\n\tCaretLeft16,\n\tCaretRight16,\n\tCaretUp16,\n\tCheckmark16,\n\tCheckmarkFilled16,\n\tCheckmarkOutline16,\n\tChevronDown16,\n\tChevronRight16,\n\tClose16,\n\tCopy16,\n\tDownload16,\n\tErrorFilled16,\n\tInformationFilled16,\n\tMenu16,\n\tOverflowMenuVertical16,\n\tSave16,\n\tSettings16,\n\tTrashCan16,\n\tWarning16,\n\tWarningFilled16\n} from \"@carbon/icons\";\n\n/**\n * An object that represents a parsed icon\n */\nexport interface IconDescriptor {\n\t/**\n\t * The element to render. For the root this is `svg`\n\t */\n\telem: string;\n\t/**\n\t * An object of attributes to apply to the element.\n\t *\n\t * The type here is non-exhaustive.\n\t */\n\tattrs: {\n\t\txmlns: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\tviewBox: string,\n\t\tfill: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\twidth: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\theight: string,\n\t\t[x: string]: string\n\t};\n\t/**\n\t * The content (children) of the element as an array of `IconDescriptor`s\n\t * (usually without a few fields, namely `name` and `size`)\n\t */\n\tcontent: IconDescriptor[];\n\t/**\n\t * The name of the icon.\n\t *\n\t * Needed by the icon service.\n\t */\n\tname: string;\n\t/**\n\t * The size of the icon in pixels.\n\t *\n\t * Needed by the icon service.\n\t */\n\tsize: number;\n\t/**\n\t * Optional. A string representation of the compiled svg.\n\t * If missing the icon service will add this.\n\t */\n\tsvg?: string;\n}\n\n/**\n * Abstract class that represent a cache of icons.\n *\n * The actual caching mechanism will be implementation specific,\n * but it's likely a good idea to key by the icons name and/or size.\n * Icon name and size will always be strings, and they will be the two consistent\n * identifiers of an icon. For the purposes of storage additonal descriptor properties may\n * be used, but the name and size are the only ones guarenteed to be passed for lookup purposes.\n */\nexport abstract class IconCache {\n\t/**\n\t * Finds and returns an icon based on it's name and size\n\t */\n\tabstract get(name: string, size: string): object;\n\t/**\n\t * stores an icon descriptor to the cache\n\t */\n\tabstract set(name: string, size: string, descriptor: object): void;\n}\n\n/**\n * Custom error for when a name can't be found\n */\nexport class IconNameNotFoundError extends Error {\n\tconstructor(name: string) {\n\t\tsuper(`Icon ${name} not found`);\n\t}\n}\n\n/**\n * Custom error for when a specific size can't be found\n */\nexport class IconSizeNotFoundError extends Error {\n\tconstructor(size: string, name: string) {\n\t\tsuper(`Size ${size} for ${name} not found`);\n\t}\n}\n\n/**\n * Concrete implementation of `IconCache` as a simple in memory cache\n */\nexport class IconMemoryCache extends IconCache {\n\tprivate iconMap = new Map>();\n\n\tget(name: string, size: string) {\n\t\tif (!this.iconMap.has(name)) {\n\t\t\tthrow new IconNameNotFoundError(name);\n\t\t}\n\t\tconst sizeMap = this.iconMap.get(name);\n\t\tif (!sizeMap.has(size)) {\n\t\t\tthrow new IconSizeNotFoundError(size, name);\n\t\t}\n\t\treturn sizeMap.get(size);\n\t}\n\n\tset(name: string, size: string, descriptor: object) {\n\t\tif (!this.iconMap.has(name)) {\n\t\t\tthis.iconMap.set(name, new Map());\n\t\t}\n\t\tconst sizeMap = this.iconMap.get(name);\n\t\tsizeMap.set(size, descriptor);\n\t}\n}\n\n/**\n * The icon service is a singleton service responsible for registering and retriving icons from `@carbon/icons`.\n *\n * It's important to register icons before use. It's reccommended to register your icons early, likely in your app.component.\n *\n * To allow for improved tree shaking _do not_ import all the icons from `@carbon/icons` and register them.\n * Instead register only the icons in use by your application. If your application makes use of lazy loaded\n * modules you may also lazy load the icons used in that module by registering them early on in that module.\n *\n * `ngOnInit` should be sufficiantly early to register icons.\n *\n * Example:\n * ```\n * import { Accessibility16 } from \"@carbon/icons\";\n *\n * // ...\n *\n * class MyComponent implements OnInit {\n * \tconstructor(protected iconService: IconService) {}\n *\n * \t// ...\n *\n * \tngOnInit() {\n * \t\tthis.iconService.register(Accessibility16);\n * \t}\n *\n * \t// ...\n * }\n * ```\n *\n * If needed it is possible to register an icon under a different name, via `registerAs`.\n */\n@Injectable()\nexport class IconService {\n\tprivate iconCache: IconCache = new IconMemoryCache();\n\n\t/**\n\t * Registers an array of icons based on the metadata provided by `@carbon/icons`\n\t */\n\tpublic registerAll(descriptors: object[]) {\n\t\tdescriptors.forEach(icon => this.register(icon));\n\t}\n\n\t/**\n\t * Registers an icon based on the metadata provided by `@carbon/icons`\n\t */\n\tpublic register(descriptor: object) {\n\t\tconst { name } = descriptor as IconDescriptor;\n\t\tthis.registerAs(name, descriptor);\n\t}\n\n\t/**\n\t * Registers an icon based on a uniqe name and metadata provided by `@carbon/icons`\n\t */\n\tpublic registerAs(name: string, descriptor: object) {\n\t\tconst { size } = descriptor as IconDescriptor;\n\t\tthis.iconCache.set(name, size.toString(), descriptor);\n\t}\n\n\t/**\n\t * Gets an icon, converts it to a string, and caches the result\n\t */\n\tpublic get(name: string, size: string): IconDescriptor {\n\t\ttry {\n\t\t\tconst icon = this.iconCache.get(name, size.toString()) as IconDescriptor;\n\t\t\tif (!icon.svg) {\n\t\t\t\ticon.svg = toString(icon);\n\t\t\t}\n\t\t\treturn icon;\n\t\t} catch (e) {\n\t\t\tthrow e;\n\t\t}\n\t}\n\n\t/**\n\t * Configure various service settings (caching strategy ...)\n\t */\n\tpublic configure(options: { cache: IconCache }) {\n\t\tthis.iconCache = options.cache;\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "line": 102, "jsdoctags": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "inputsClass": [], "outputsClass": [], "properties": [], "description": "

Custom error for when a name can't be found

\n", "rawdescription": "\n\nCustom error for when a name can't be found\n", "methods": [], "indexSignatures": [], "extends": [ "Error" ], "hostBindings": [], "hostListeners": [] }, { "name": "IconSizeNotFoundError", "id": "class-IconSizeNotFoundError-4f5767040e0cac9f7ec08605bb398f8cfffd46da2e75d08f25b0dd04c662da07862eb1690cb9795e5d981c319ed2eeac8870cf82792aef54320fa5e28dd35dea", "file": "src/icon/icon.service.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import { Injectable } from \"@angular/core\";\nimport { toString } from \"@carbon/icon-helpers\";\n\n// icon imports\nimport {\n\tAdd16,\n\tCalendar16,\n\tCaretDown16,\n\tCaretLeft16,\n\tCaretRight16,\n\tCaretUp16,\n\tCheckmark16,\n\tCheckmarkFilled16,\n\tCheckmarkOutline16,\n\tChevronDown16,\n\tChevronRight16,\n\tClose16,\n\tCopy16,\n\tDownload16,\n\tErrorFilled16,\n\tInformationFilled16,\n\tMenu16,\n\tOverflowMenuVertical16,\n\tSave16,\n\tSettings16,\n\tTrashCan16,\n\tWarning16,\n\tWarningFilled16\n} from \"@carbon/icons\";\n\n/**\n * An object that represents a parsed icon\n */\nexport interface IconDescriptor {\n\t/**\n\t * The element to render. For the root this is `svg`\n\t */\n\telem: string;\n\t/**\n\t * An object of attributes to apply to the element.\n\t *\n\t * The type here is non-exhaustive.\n\t */\n\tattrs: {\n\t\txmlns: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\tviewBox: string,\n\t\tfill: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\twidth: string,\n\t\t// needed by the icon directive to determine other attributes\n\t\theight: string,\n\t\t[x: string]: string\n\t};\n\t/**\n\t * The content (children) of the element as an array of `IconDescriptor`s\n\t * (usually without a few fields, namely `name` and `size`)\n\t */\n\tcontent: IconDescriptor[];\n\t/**\n\t * The name of the icon.\n\t *\n\t * Needed by the icon service.\n\t */\n\tname: string;\n\t/**\n\t * The size of the icon in pixels.\n\t *\n\t * Needed by the icon service.\n\t */\n\tsize: number;\n\t/**\n\t * Optional. A string representation of the compiled svg.\n\t * If missing the icon service will add this.\n\t */\n\tsvg?: string;\n}\n\n/**\n * Abstract class that represent a cache of icons.\n *\n * The actual caching mechanism will be implementation specific,\n * but it's likely a good idea to key by the icons name and/or size.\n * Icon name and size will always be strings, and they will be the two consistent\n * identifiers of an icon. For the purposes of storage additonal descriptor properties may\n * be used, but the name and size are the only ones guarenteed to be passed for lookup purposes.\n */\nexport abstract class IconCache {\n\t/**\n\t * Finds and returns an icon based on it's name and size\n\t */\n\tabstract get(name: string, size: string): object;\n\t/**\n\t * stores an icon descriptor to the cache\n\t */\n\tabstract set(name: string, size: string, descriptor: object): void;\n}\n\n/**\n * Custom error for when a name can't be found\n */\nexport class IconNameNotFoundError extends Error {\n\tconstructor(name: string) {\n\t\tsuper(`Icon ${name} not found`);\n\t}\n}\n\n/**\n * Custom error for when a specific size can't be found\n */\nexport class IconSizeNotFoundError extends Error {\n\tconstructor(size: string, name: string) {\n\t\tsuper(`Size ${size} for ${name} not found`);\n\t}\n}\n\n/**\n * Concrete implementation of `IconCache` as a simple in memory cache\n */\nexport class IconMemoryCache extends IconCache {\n\tprivate iconMap = new Map>();\n\n\tget(name: string, size: string) {\n\t\tif (!this.iconMap.has(name)) {\n\t\t\tthrow new IconNameNotFoundError(name);\n\t\t}\n\t\tconst sizeMap = this.iconMap.get(name);\n\t\tif (!sizeMap.has(size)) {\n\t\t\tthrow new IconSizeNotFoundError(size, name);\n\t\t}\n\t\treturn sizeMap.get(size);\n\t}\n\n\tset(name: string, size: string, descriptor: object) {\n\t\tif (!this.iconMap.has(name)) {\n\t\t\tthis.iconMap.set(name, new Map());\n\t\t}\n\t\tconst sizeMap = this.iconMap.get(name);\n\t\tsizeMap.set(size, descriptor);\n\t}\n}\n\n/**\n * The icon service is a singleton service responsible for registering and retriving icons from `@carbon/icons`.\n *\n * It's important to register icons before use. It's reccommended to register your icons early, likely in your app.component.\n *\n * To allow for improved tree shaking _do not_ import all the icons from `@carbon/icons` and register them.\n * Instead register only the icons in use by your application. If your application makes use of lazy loaded\n * modules you may also lazy load the icons used in that module by registering them early on in that module.\n *\n * `ngOnInit` should be sufficiantly early to register icons.\n *\n * Example:\n * ```\n * import { Accessibility16 } from \"@carbon/icons\";\n *\n * // ...\n *\n * class MyComponent implements OnInit {\n * \tconstructor(protected iconService: IconService) {}\n *\n * \t// ...\n *\n * \tngOnInit() {\n * \t\tthis.iconService.register(Accessibility16);\n * \t}\n *\n * \t// ...\n * }\n * ```\n *\n * If needed it is possible to register an icon under a different name, via `registerAs`.\n */\n@Injectable()\nexport class IconService {\n\tprivate iconCache: IconCache = new IconMemoryCache();\n\n\t/**\n\t * Registers an array of icons based on the metadata provided by `@carbon/icons`\n\t */\n\tpublic registerAll(descriptors: object[]) {\n\t\tdescriptors.forEach(icon => this.register(icon));\n\t}\n\n\t/**\n\t * Registers an icon based on the metadata provided by `@carbon/icons`\n\t */\n\tpublic register(descriptor: object) {\n\t\tconst { name } = descriptor as IconDescriptor;\n\t\tthis.registerAs(name, descriptor);\n\t}\n\n\t/**\n\t * Registers an icon based on a uniqe name and metadata provided by `@carbon/icons`\n\t */\n\tpublic registerAs(name: string, descriptor: object) {\n\t\tconst { size } = descriptor as IconDescriptor;\n\t\tthis.iconCache.set(name, size.toString(), descriptor);\n\t}\n\n\t/**\n\t * Gets an icon, converts it to a string, and caches the result\n\t */\n\tpublic get(name: string, size: string): IconDescriptor {\n\t\ttry {\n\t\t\tconst icon = this.iconCache.get(name, size.toString()) as IconDescriptor;\n\t\t\tif (!icon.svg) {\n\t\t\t\ticon.svg = toString(icon);\n\t\t\t}\n\t\t\treturn icon;\n\t\t} catch (e) {\n\t\t\tthrow e;\n\t\t}\n\t}\n\n\t/**\n\t * Configure various service settings (caching strategy ...)\n\t */\n\tpublic configure(options: { cache: IconCache }) {\n\t\tthis.iconCache = options.cache;\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "line": 111, "jsdoctags": [ { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "inputsClass": [], "outputsClass": [], "properties": [], "description": "

Custom error for when a specific size can't be found

\n", "rawdescription": "\n\nCustom error for when a specific size can't be found\n", "methods": [], "indexSignatures": [], "extends": [ "Error" ], "hostBindings": [], "hostListeners": [] }, { "name": "NumberChange", "id": "class-NumberChange-fe20fe65939c8d249815e7b930825da7d9229c32f54dbd3496ec81d6605b4b2f291e5ea9d9ed648e5d850c504af01a335a7caf96b73baaad8c4717ab91830c1f", "file": "src/number-input/number.component.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t{{label}}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\t{{helperText}}\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t{{invalidText}}\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t{{warnText}}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() @HostBinding(\"class.cds--number--readonly\") readonly = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef;\n\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--number-input--fluid\") @Input() fluid = false;\n\n\t@HostBinding(\"class.cds--number-input--fluid--invalid\") get fluidInvalid() {\n\t\treturn this.fluid && this.invalid;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--disabled\") get fluidDisabled() {\n\t\treturn this.fluid && this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--focus\") get fluidFocus() {\n\t\treturn this.fluid && this._isFocused;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeleton() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\tprotected _isFocused = false;\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\t// if max is set and value + step is greater than max, set value to max\n\t\t// example: max = 100, step = 10, value = 95 , value + step = 105, value will be set to 100 (max) instead of 105\n\t\tif (this.max !== null && this.value + this.step > this.max) {\n\t\t\tthis.value = this.max;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if min is set and value + step is less than min, set value to min\n\t\t// example: min = 5, step = 2, value = 0, value + step = 2, value will be set to 5 (min) instead of 2\n\t\tif (this.min !== null && this.value + this.step < this.min) {\n\t\t\tthis.value = this.min;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if max is not set or value + step is less than max, increment value by step\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\t// if max is set and value - step is greater than max, set value to max\n\t\t// example: max = 15, step = 2, value = 20, value - step = 18, value will be set to 15 (max) instead of 18\n\t\tif (this.max !== null && this.value - this.step > this.max) {\n\t\t\tthis.value = this.max;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if min is set and value - step is less than min, set value to min\n\t\t// example: min = 5, step = 2, value = 6, value - step = 4, value will be set to 5 (min) instead of 4\n\t\tif (this.min !== null && this.value - this.step < this.min) {\n\t\t\tthis.value = this.min;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if min is not set or value - step is greater than min, decrement value by step\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tif (\"type\" in event.target && (event.target).type === \"button\") {\n\t\t\tthis._isFocused = false;\n\t\t} else {\n\t\t\tthis._isFocused = event.type === \"focus\";\n\t\t}\n\t}\n}\nexport { NumberComponent as Number };\n", "inputsClass": [], "outputsClass": [], "properties": [ { "name": "source", "deprecated": false, "deprecationMessage": "", "type": "NumberComponent", "optional": false, "description": "

Contains the Number that has been changed.

\n", "line": 22, "rawdescription": "\n\nContains the `Number` that has been changed.\n" }, { "name": "value", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The value of the Number field encompassed in the NumberChange class.

\n", "line": 26, "rawdescription": "\n\nThe value of the `Number` field encompassed in the `NumberChange` class.\n" } ], "description": "

Used to emit changes performed on number input components.

\n", "rawdescription": "\n\nUsed to emit changes performed on number input components.\n", "methods": [], "indexSignatures": [], "extends": [], "hostBindings": [], "hostListeners": [] }, { "name": "Overridable", "id": "class-Overridable-a073c7aa0c9b4939b9c7d2146fdacc52cb742a2f57ff6cef45de0574281189a0bf2717642ade8570dfc5708c3899aaf1792310b82aac44f70aeab81af685f264", "file": "src/i18n/i18n.service.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import { Injectable } from \"@angular/core\";\nimport {\n\tBehaviorSubject,\n\tObservable,\n\tisObservable,\n\tiif,\n\tSubscription\n} from \"rxjs\";\nimport { map } from \"rxjs/operators\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nimport EN from \"./en\";\n\n/**\n * Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n *\n * The keys specify the variable name in the string.\n *\n * Example:\n * ```typescript\n * service.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n *\n * service.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n * ```\n *\n * Produces: `\"test asdf\"`\n *\n * @param subject the translation to replace variables on\n * @param variables object of variables to replace\n */\nexport const replace = (subject, variables) => subject.pipe(\n\tmap(str => {\n\t\tconst keys = Object.keys(variables);\n\t\tfor (const key of keys) {\n\t\t\tconst value = variables[key];\n\t\t\tstr = str.replace(new RegExp(`{{\\\\s*${key}\\\\s*}}`, \"g\"), value);\n\t\t}\n\t\treturn str;\n\t})\n);\n\n/**\n * Represents an \"overridable\" translation value.\n *\n * Largely an internal usecase. There are situations where we want an `Observable` that\n * can emit events from a centralized source **OR** an `Observable` that will emit events\n * from a component local source. The key example being on/off text in a `Toggle` - In some cases\n * we want the `Toggle` to use `I18n`s global translations, but in others we'd prefer to use a local\n * override. We don't ever need to return to a non-overridden state, but we do need the ability to\n * switch _to_ an overridden sate.\n */\nexport class Overridable {\n\t/**\n\t * The raw value of the translation. Defaults to the string value, but will return the value passed to `override`\n\t *\n\t * @readonly\n\t */\n\tpublic get value(): string | Observable {\n\t\treturn this._value;\n\t}\n\n\tpublic set value(v: string | Observable) {\n\t\tthis.override(v);\n\t}\n\n\t/**\n\t * The translation subject. Returns either a stream of overridden values, or our base translation values.\n\t *\n\t * @readonly\n\t */\n\tpublic get subject(): Observable {\n\t\t/**\n\t\t * since inputs are bound on template instantiation (and thusly will always have _some_ value)\n\t\t * We can use a simple boolean and the `iif` function to determine which subject to return on subscription\n\t\t */\n\t\treturn iif(() => this.isOverridden, this.$override, this.baseTranslation);\n\t}\n\n\t/**\n\t * Overridden value. Accessed by the readonly getter `value` and set through `override`\n\t */\n\tprotected _value: string | Observable;\n\t/**\n\t * Subject of overridden values. Initialized with our default value.\n\t */\n\tprotected $override: BehaviorSubject;\n\t/**\n\t * Our base non-overridden translation.\n\t */\n\tprotected baseTranslation: Observable = this.i18n.get(this.path);\n\n\t/**\n\t * Subscription to the observable provided as an override (if any)\n\t */\n\tprotected subscription: Subscription;\n\t/**\n\t * A boolean to flip between overridden and non-overridden states.\n\t */\n\tprotected isOverridden = false;\n\n\tconstructor(protected path: string, protected i18n: I18n) {\n\t\t/**\n\t\t * ensure `$override` is initialized with the correct default value\n\t\t * in some cases `_value` can get changed for an `Observable` before `$override` is created\n\t\t */\n\t\tconst value = this.i18n.getValueFromPath(this.path) as string;\n\t\tthis.$override = new BehaviorSubject(value);\n\t\tthis._value = value;\n\t}\n\t/**\n\t * Takes a string or an `Observable` that emits strings.\n\t * Overrides the value provided by the `I18n` service.\n\t */\n\toverride(value: string | Observable) {\n\t\tthis.isOverridden = true;\n\t\t// To ensure that there are not multiple subscriptions created for the same observable, we\n\t\t// unsubscribe if a subscription already exists for an observable before creating a new one.\n\t\tif (this.subscription) {\n\t\t\tthis.subscription.unsubscribe();\n\t\t\tthis.subscription = null;\n\t\t}\n\n\t\tthis._value = value;\n\n\t\tif (isObservable(value)) {\n\t\t\tthis.subscription = value.subscribe(v => {\n\t\t\t\tthis.$override.next(v);\n\t\t\t});\n\t\t} else {\n\t\t\tthis.$override.next(value);\n\t\t}\n\t}\n}\n\n/**\n * An object of strings, should follow the same format as src/i18n/en.json\n */\nexport type TranslationStrings = {\n\t[key: string]: string | TranslationStrings;\n};\n\n\n/**\n * The I18n service is a minimal internal singleton service used to supply our components with translated strings.\n *\n * All the components that support I18n also support directly passed strings.\n * Usage of I18n is optional, and it is not recommended for application use (libraries like ngx-translate\n * are a better choice)\n *\n */\n@Injectable()\nexport class I18n {\n\tprotected translationStrings: TranslationStrings = EN;\n\n\tprotected translations = new Map();\n\n\tprotected locale = new BehaviorSubject(\"en\");\n\n\t/**\n\t * Sets the locale and optionally the translation strings. Locale is used by components that\n\t * are already locale aware (datepicker for example) while the translation strings are used\n\t * for components that are not.\n\t *\n\t * Locales set here will override locales/languages set in components\n\t * @param language an ISO 639-1 language code - https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes\n\t * @param strings an object of strings, optional\n\t */\n\tpublic setLocale(language: string, strings?: TranslationStrings) {\n\t\tthis.locale.next(language);\n\t\tif (strings) {\n\t\t\tthis.set(strings);\n\t\t}\n\t}\n\n\t/**\n\t * Returns the current locale\n\t */\n\tpublic getLocale() {\n\t\treturn this.locale.value;\n\t}\n\n\t/**\n\t * Returns an observable that resolves to the current locale, and will update when changed\n\t */\n\tpublic getLocaleObservable() {\n\t\treturn this.locale.asObservable();\n\t}\n\n\t/**\n\t * Set/update the translations from an object. Also notifies all participating components of the update.\n\t *\n\t * @param strings an object of strings, should follow the same format as src/i18n/en.json\n\t */\n\tpublic set(strings: TranslationStrings) {\n\t\tthis.translationStrings = merge({}, EN, strings);\n\t\t// iterate over all our tracked translations and update each observable\n\t\tconst translations = Array.from(this.translations);\n\t\tfor (const [path, subject] of translations) {\n\t\t\tsubject.next(this.getValueFromPath(path));\n\t\t}\n\t}\n\n\t/**\n\t * When a path is specified returns an observable that will resolve to the translation string value.\n\t *\n\t * Returns the full translations object if path is not specified.\n\t *\n\t * @param path optional, looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic get(path?: string): any {\n\t\tif (!path) {\n\t\t\treturn this.translationStrings;\n\t\t}\n\t\treturn this.getSubject(path);\n\t}\n\n\t/**\n\t * Returns all descendents of some path fragment as an object.\n\t *\n\t * @param partialPath a path fragment, for example `\"NOTIFICATION\"`\n\t */\n\tpublic getMultiple(partialPath: string): { [key: string]: Observable } {\n\t\tconst values = this.getValueFromPath(partialPath);\n\t\tconst subjects = {};\n\t\tfor (const key of Object.keys(values)) {\n\t\t\tif (values[key] === Object(values[key])) {\n\t\t\t\tsubjects[key] = this.getMultiple(`${partialPath}.${key}`);\n\t\t\t} else {\n\t\t\t\tsubjects[key] = this.getSubject(`${partialPath}.${key}`);\n\t\t\t}\n\t\t}\n\t\treturn subjects;\n\t}\n\n\t/**\n\t * Returns an instance of `Overridable` that can be used to optionally override the value provided by `I18n`\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic getOverridable(path: string) {\n\t\treturn new Overridable(path, this);\n\t}\n\n\t/**\n\t * Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n\t *\n\t * The keys specify the variable name in the string.\n\t *\n\t * Example:\n\t * ```\n\t * service.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n\t *\n\t * service.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n\t * ```\n\t *\n\t * Produces: `\"test asdf\"`\n\t *\n\t * @param subject the translation to replace variables on\n\t * @param variables object of variables to replace\n\t */\n\tpublic replace(subject: Observable, variables: { [key: string]: string }) {\n\t\treturn replace(subject, variables);\n\t}\n\n\t/**\n\t * Trys to resolve a value from the provided path.\n\t *\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic getValueFromPath(path: string): string | TranslationStrings {\n\t\tlet value: string | TranslationStrings = this.translationStrings;\n\t\tfor (const segment of path.split(\".\")) {\n\t\t\tif (value[segment] !== undefined && value[segment] !== null) {\n\t\t\t\tvalue = value[segment];\n\t\t\t} else {\n\t\t\t\tthrow new Error(`no key ${segment} at ${path}`);\n\t\t\t}\n\t\t}\n\t\treturn value as any;\n\t}\n\n\t/**\n\t * Helper method that returns an observable from the internal cache based on the path\n\t *\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tprotected getSubject(path: string): Observable {\n\t\ttry {\n\t\t\t// we run this here to validate the path exists before adding it to the translation map\n\t\t\tconst value = this.getValueFromPath(path) as string;\n\t\t\tif (this.translations.has(path)) {\n\t\t\t\treturn this.translations.get(path);\n\t\t\t}\n\t\t\tconst translation = new BehaviorSubject(value);\n\t\t\tthis.translations.set(path, translation);\n\t\t\treturn translation;\n\t\t} catch (error) {\n\t\t\tconsole.error(error);\n\t\t}\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "path", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 99, "jsdoctags": [ { "name": "path", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "inputsClass": [], "outputsClass": [], "properties": [], "description": "

Represents an "overridable" translation value.

\n

Largely an internal usecase. There are situations where we want an Observable that\ncan emit events from a centralized source OR an Observable that will emit events\nfrom a component local source. The key example being on/off text in a Toggle - In some cases\nwe want the Toggle to use I18ns global translations, but in others we'd prefer to use a local\noverride. We don't ever need to return to a non-overridden state, but we do need the ability to\nswitch to an overridden sate.

\n", "rawdescription": "\n\nRepresents an \"overridable\" translation value.\n\nLargely an internal usecase. There are situations where we want an `Observable` that\ncan emit events from a centralized source **OR** an `Observable` that will emit events\nfrom a component local source. The key example being on/off text in a `Toggle` - In some cases\nwe want the `Toggle` to use `I18n`s global translations, but in others we'd prefer to use a local\noverride. We don't ever need to return to a non-overridden state, but we do need the ability to\nswitch _to_ an overridden sate.\n", "methods": [ { "name": "override", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 114, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTakes a string or an `Observable` that emits strings.\nOverrides the value provided by the `I18n` service.\n", "description": "

Takes a string or an Observable that emits strings.\nOverrides the value provided by the I18n service.

\n", "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "indexSignatures": [], "extends": [], "accessors": { "value": { "name": "value", "setSignature": { "name": "value", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 62, "jsdoctags": [ { "name": "v", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "value", "type": "", "returnType": "string | Observable", "line": 58, "rawdescription": "\n\nThe raw value of the translation. Defaults to the string value, but will return the value passed to `override`\n\n", "description": "

The raw value of the translation. Defaults to the string value, but will return the value passed to override

\n", "jsdoctags": [ { "pos": 1719, "end": 1731, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 343, "tagName": { "pos": 1720, "end": 1728, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "readonly" }, "comment": "" } ] } }, "subject": { "name": "subject", "getSignature": { "name": "subject", "type": "", "returnType": "Observable", "line": 71, "rawdescription": "\n\nThe translation subject. Returns either a stream of overridden values, or our base translation values.\n\n", "description": "

The translation subject. Returns either a stream of overridden values, or our base translation values.

\n", "jsdoctags": [ { "pos": 2007, "end": 2019, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 343, "tagName": { "pos": 2008, "end": 2016, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "readonly" }, "comment": "" } ] } } }, "hostBindings": [], "hostListeners": [] }, { "name": "PaginationModel", "id": "class-PaginationModel-60c09a502e9151f915df907b48ac9b1ae82c5daebc79d737d7a18209e9538e8c03ac7472880375ef4a5890e62886bf53dd7ae0cbc1e4650c49e095c2ac4941e1", "file": "src/pagination/pagination-model.class.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "export class PaginationModel {\n\t/**\n\t * Tracks the current page.\n\t */\n\tcurrentPage = 1;\n\n\t/**\n\t * Length of page.\n\t */\n\t/* tslint:disable-next-line*/\n\tpageLength? = 10;\n\n\t/**\n\t * Absolute total number of items needed to paginate.\n\t */\n\ttotalDataLength = 0;\n}\n", "inputsClass": [], "outputsClass": [], "properties": [ { "name": "currentPage", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

Tracks the current page.

\n", "line": 5, "rawdescription": "\n\nTracks the current page.\n" }, { "name": "pageLength", "defaultValue": "10", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": true, "description": "

Length of page.

\n", "line": 11, "rawdescription": "\n\nLength of page.\n" }, { "name": "totalDataLength", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

Absolute total number of items needed to paginate.

\n", "line": 16, "rawdescription": "\n\nAbsolute total number of items needed to paginate.\n" } ], "methods": [], "indexSignatures": [], "extends": [], "hostBindings": [], "hostListeners": [] }, { "name": "RadioChange", "id": "class-RadioChange-b8cb9390ecd65d8f7408ad93ab58065f2e8f055d100ef2e86add0aa11f9588d507ed8b61622a1b97c6ca18f75f5f282ff7fe8ce69510dcd6e0b173b4a54b327f", "file": "src/radio/radio-change.class.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import { Radio } from \"./radio.component\";\n\n/**\n * Used to emit changes performed on a `Radio`.\n */\nexport class RadioChange {\n\t/**\n\t * Contains the `Radio` that has been changed.\n\t */\n\tsource: Radio | null;\n\t/**\n\t * The value of the `Radio` encompassed in the `RadioChange` class.\n\t */\n\tvalue: string;\n\n\tconstructor(source: Radio, value: string) {\n\t\tthis.source = source;\n\t\tthis.value = value;\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "source", "type": "Radio", "deprecated": false, "deprecationMessage": "" }, { "name": "value", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "line": 14, "jsdoctags": [ { "name": "source", "type": "Radio", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "value", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "inputsClass": [], "outputsClass": [], "properties": [ { "name": "source", "deprecated": false, "deprecationMessage": "", "type": "Radio | null", "optional": false, "description": "

Contains the Radio that has been changed.

\n", "line": 10, "rawdescription": "\n\nContains the `Radio` that has been changed.\n" }, { "name": "value", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

The value of the Radio encompassed in the RadioChange class.

\n", "line": 14, "rawdescription": "\n\nThe value of the `Radio` encompassed in the `RadioChange` class.\n" } ], "description": "

Used to emit changes performed on a Radio.

\n", "rawdescription": "\n\nUsed to emit changes performed on a `Radio`.\n", "methods": [], "indexSignatures": [], "extends": [], "hostBindings": [], "hostListeners": [] }, { "name": "TableAdapter", "id": "class-TableAdapter-255aa3d55b8577a1a700556d4d87e6b1c6ff653654b19775d484c85d046f477974ad65c5bcc92d63658ba1325a15b4edf6849df6061618c61a05d193f7bf5406", "file": "src/table/table-adapter.class.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "export abstract class TableCellAdapter {\n\t/**\n\t * The index of the cell in the table\n\t */\n\tcellIndex: number;\n\t/**\n\t * The number of columns spanned by this cell\n\t */\n\tcolSpan: number;\n\t/**\n\t * The number of rows spanned by this cell\n\t */\n\trowSpan: number;\n}\n\n/**\n * An abstract class that represents a row in a table\n */\nexport abstract class TableRowAdapter {\n\t/**\n\t * The index of the row in the table\n\t */\n\trowIndex: number;\n\t/**\n\t * An array (or `HTMLCollection`) of `TableCellAdapter`s\n\t */\n\tcells: HTMLCollection | TableCellAdapter[];\n}\n\n/**\n * An abstract representation of a table that provides\n * a standard interface to query 2d tables for cell and row information.\n */\nexport abstract class TableAdapter {\n\t/**\n\t * The last accessible column in the table\n\t */\n\tpublic get lastColumnIndex(): number { return; }\n\n\t/**\n\t * The last accessible row in the table\n\t */\n\tpublic get lastRowIndex(): number { return; }\n\n\t/**\n\t * Returns a cell from the table\n\t *\n\t * @param row index of the row\n\t * @param column index of the column\n\t */\n\tgetCell(row: number, column: number): TableCellAdapter { return; }\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param column index of the column\n\t */\n\tgetColumn(column: number): TableCellAdapter[] { return; }\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param row index of the row\n\t */\n\tgetRow(row: number): TableRowAdapter { return; }\n\n\t/**\n\t * Finds the column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindColumnIndex(cell: TableCellAdapter): number { return; }\n\n\t/**\n\t * Finds the row index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindRowIndex(cell: TableCellAdapter): number { return; }\n\n\t/**\n\t * Finds the row and column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t * @returns a tuple that follows the `[row, column]` convention\n\t */\n\tfindIndex(cell: TableCellAdapter): [number, number] { return; }\n}\n\nenum TableDomSpanDirection {\n\tcolSpan = \"colSpan\",\n\trowSpan = \"rowSpan\"\n}\n\n/**\n * A concrete implementation of `TableAdapter`\n *\n * Provides standard and consistent access to table cells and rows\n */\nexport class TableDomAdapter implements TableAdapter {\n\t/**\n\t * The last accessible column in the table\n\t */\n\tpublic get lastColumnIndex() {\n\t\treturn this.getRealRowLength(this.tableElement.rows[0]);\n\t}\n\n\t/**\n\t * The last accessible row in the table\n\t */\n\tpublic get lastRowIndex() {\n\t\treturn this.tableElement.rows.length - 1;\n\t}\n\n\t/**\n\t * `TableDomAdapter` works on a normal HTML table structure.\n\t * Custom tables that don't follow the standard structure should use a custom implementation of `TableAdapter`.\n\t *\n\t * The standard structure allows us to directly query rows for cells and indexes - though we do have to handle colspans specially.\n\t *\n\t * @param tableElement the root HTML table element.\n\t */\n\tconstructor(public tableElement: HTMLTableElement) { }\n\n\t/**\n\t * Returns a cell from the table taking colspans in to account.\n\t *\n\t * @param row index of the row\n\t * @param column index of the column\n\t */\n\tgetCell(row: number, column: number): HTMLTableCellElement {\n\t\tconst col = this.getColumn(column);\n\n\t\treturn this.findCellInColumn(col, row).cell;\n\t}\n\n\t/**\n\t * Returns a column from the table, using the `id` and `headers` attributes\n\t *\n\t * See here for more detail these attributes: https://www.w3.org/TR/WCAG20-TECHS/H43.html\n\t *\n\t * @param column the index of the column\n\t */\n\tgetColumn(column: number): HTMLTableCellElement[] {\n\t\tconst firstHeader = Array.from(this.tableElement.rows[0].cells);\n\n\t\tconst { cell: header, realIndex: realColumnIndex } = this.findCellInRow(firstHeader, column);\n\n\t\tconst linkedCells: HTMLTableCellElement[] = [];\n\n\t\tfor (let i = 1; i < this.tableElement.rows.length; i++) {\n\t\t\tconst row = this.tableElement.rows[i];\n\t\t\t// query for any cells that are linked to the given header id\n\t\t\t// `~=` matches values in space separated lists - so `[headers~='foo']` would match `headers=\"foo bar\"` and `headers=\"foo\"`\n\t\t\t// but not `headers=\"bar\"` or `headers=\"bar baz\"`\n\t\t\tconst linkedRowCells: NodeListOf = row.querySelectorAll(`[headers~='${header.id}']`);\n\t\t\t// if we have more than one cell, get the one that is closest to the column\n\t\t\tif (linkedRowCells.length > 1) {\n\t\t\t\tconst { cell } = this.findCellInRow(Array.from(linkedRowCells), column - realColumnIndex);\n\t\t\t\tlinkedCells.push(cell);\n\t\t\t} else if (linkedRowCells[0]) {\n\t\t\t\tlinkedCells.push(linkedRowCells[0]);\n\t\t\t}\n\t\t}\n\n\t\t// return an empty array if we can't find any linked cells\n\t\t// returning anything else would be a lie\n\t\tif (!linkedCells) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn [header, ...linkedCells];\n\t}\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param row index of the row\n\t */\n\tgetRow(row: number): HTMLTableRowElement {\n\t\treturn this.tableElement.rows[row];\n\t}\n\n\t/**\n\t * Finds the column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindColumnIndex(cell: HTMLTableCellElement): number {\n\t\tconst row = this.getRow(this.findRowIndex(cell));\n\t\tif (!row) {\n\t\t\treturn;\n\t\t}\n\t\t// if the cell has linked headers we can do a more accurate lookup\n\t\tif (cell && cell.headers) {\n\t\t\tconst ids = cell.headers.split(\" \");\n\t\t\tconst headerRows = Array.from(this.tableElement.tHead.rows);\n\t\t\tconst indexes = [];\n\n\t\t\t// start from the last row and work up\n\t\t\tfor (const headerRow of headerRows.reverse()) {\n\t\t\t\tconst headerCells = Array.from(headerRow.cells);\n\t\t\t\tconst header = headerCells.find(headerCell => ids.includes(headerCell.id));\n\t\t\t\t// if we have a matching header, find it's index (adjusting for colspans)\n\t\t\t\tif (header) {\n\t\t\t\t\t// this is borrowed from below\n\t\t\t\t\tlet cellIndex = 0;\n\t\t\t\t\tfor (const c of headerCells) {\n\t\t\t\t\t\tif (c === header) { break; }\n\t\t\t\t\t\tcellIndex += c.colSpan;\n\t\t\t\t\t}\n\t\t\t\t\tindexes.push(cellIndex);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// sort the indexes largest to smallest to find the closest matching header index\n\t\t\tconst firstIndex = indexes.sort((a, b) => b - a)[0];\n\n\t\t\t// search the row for cells that share the header\n\t\t\tlet similarCells = [];\n\t\t\tfor (const id of ids) {\n\t\t\t\t// there's no selector that will match two space separated lists,\n\t\t\t\t// so we have to iterate through the ids and query the row for each\n\t\t\t\tconst rowCells = Array.from(row.querySelectorAll(`[headers~='${id}']`));\n\t\t\t\tfor (const rowCell of rowCells) {\n\t\t\t\t\t// only keep one set of cells\n\t\t\t\t\tif (!similarCells.includes(rowCell)) {\n\t\t\t\t\t\tsimilarCells.push(rowCell);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// DOM order is not preserved, so we have to sort the row\n\t\t\tsimilarCells = similarCells.sort((a: HTMLTableCellElement, b: HTMLTableCellElement) => a.cellIndex - b.cellIndex);\n\n\t\t\t// return the header index plus any adjustment within that headers column\n\t\t\treturn firstIndex + similarCells.indexOf(cell);\n\t\t}\n\n\t\t// fallback if the cell isn't linked to any headers\n\t\tlet cellIndex = 0;\n\t\tfor (const c of Array.from(row.cells)) {\n\t\t\tif (c === cell) { break; }\n\t\t\tcellIndex += c.colSpan;\n\t\t}\n\t\treturn cellIndex;\n\t}\n\n\t/**\n\t * Finds the row index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindRowIndex(cell: HTMLTableCellElement): number {\n\t\tfor (const row of Array.from(this.tableElement.rows)) {\n\t\t\tif (row.contains(cell)) {\n\t\t\t\treturn row.rowIndex;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Finds the row and column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t * @returns a tuple that follows the `[row, column]` convention\n\t */\n\tfindIndex(cell: HTMLTableCellElement): [number, number] {\n\t\treturn [this.findRowIndex(cell), this.findColumnIndex(cell)];\n\t}\n\n\t/**\n\t * Helper function that returns the \"real\" length of a row.\n\t * Only accurate with regard to colspans (though that's sufficient for it's uses here)\n\t *\n\t * TODO: Take rowSpan into account\n\t *\n\t * @param row the row to get the length of\n\t */\n\tprotected getRealRowLength(row: HTMLTableRowElement): number {\n\t\t// start at -1 since the colspans will sum to 1 index greater than the total\n\t\treturn Array.from(row.cells).reduce((count, cell) => count + cell.colSpan, -1);\n\t}\n\n\t/**\n\t * Finds a cell and it's real index given an array of cells, a target index, and the spanning direction\n\t *\n\t * @param cells An array of cells to search\n\t * @param targetIndex The index we think the cell is located at\n\t * @param spanDirection The direction of the cell spans. Should be `\"colSpan\"` for a row and `\"rowSpan\"` for a column\n\t */\n\tprotected findCell(cells: HTMLTableCellElement[], targetIndex: number, spanDirection: TableDomSpanDirection) {\n\t\t// rows/cols can have fewer total cells than the actual table\n\t\t// the model pretends all rows/cols behave the same (with col/row spans > 1 being N cells long)\n\t\t// this maps that view to the HTML view (col/row spans > 1 are one element, so the array is shorter)\n\t\tlet realIndex = 0;\n\t\t// i is only used for iterating the cells\n\t\tfor (let i = 0; i < targetIndex;) {\n\t\t\t// skip the next N cells\n\t\t\ti += cells[realIndex][spanDirection];\n\t\t\t// don't bump realIndex if i now exceeds the cell we're shooting for\n\t\t\tif (i > targetIndex) { break; }\n\t\t\t// finally, increment realIndex (to keep it generally in step with i)\n\t\t\trealIndex++;\n\t\t}\n\n\t\treturn {\n\t\t\tcell: cells[realIndex],\n\t\t\trealIndex\n\t\t};\n\t}\n\n\t/**\n\t * Helper method around `findCell`, searches based on a row of cells\n\t *\n\t * @param row the row of elements to search\n\t * @param index the index of the element\n\t */\n\tprotected findCellInRow(row: HTMLTableCellElement[], index: number) {\n\t\treturn this.findCell(row, index, TableDomSpanDirection.colSpan);\n\t}\n\n\t/**\n\t * Helper method around `findCell`, searches based on a column of cells\n\t *\n\t * @param col the column of elements to search\n\t * @param index the index of the element\n\t */\n\tprotected findCellInColumn(col: HTMLTableCellElement[], index: number) {\n\t\treturn this.findCell(col, index, TableDomSpanDirection.rowSpan);\n\t}\n}\n", "inputsClass": [], "outputsClass": [], "properties": [], "description": "

An abstract representation of a table that provides\na standard interface to query 2d tables for cell and row information.

\n", "rawdescription": "\n\nAn abstract representation of a table that provides\na standard interface to query 2d tables for cell and row information.\n", "methods": [ { "name": "findColumnIndex", "args": [ { "name": "cell", "type": "TableCellAdapter", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 75, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFinds the column index of a given cell\n\n", "description": "

Finds the column index of a given cell

\n", "jsdoctags": [ { "name": { "pos": 1510, "end": 1514, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "cell" }, "type": "TableCellAdapter", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1504, "end": 1509, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the cell to search for

\n" } ] }, { "name": "findIndex", "args": [ { "name": "cell", "type": "TableCellAdapter", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "", "typeParameters": [], "line": 90, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFinds the row and column index of a given cell\n\n", "description": "

Finds the row and column index of a given cell

\n", "jsdoctags": [ { "name": { "pos": 1828, "end": 1832, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "cell" }, "type": "TableCellAdapter", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1822, "end": 1827, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the cell to search for

\n" }, { "tagName": { "pos": 1861, "end": 1868, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "returns" }, "comment": "

a tuple that follows the [row, column] convention

\n" } ] }, { "name": "findRowIndex", "args": [ { "name": "cell", "type": "TableCellAdapter", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 82, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFinds the row index of a given cell\n\n", "description": "

Finds the row index of a given cell

\n", "jsdoctags": [ { "name": { "pos": 1665, "end": 1669, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "cell" }, "type": "TableCellAdapter", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1659, "end": 1664, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the cell to search for

\n" } ] }, { "name": "getCell", "args": [ { "name": "row", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "column", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "TableCellAdapter", "typeParameters": [], "line": 54, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns a cell from the table\n\n", "description": "

Returns a cell from the table

\n", "jsdoctags": [ { "name": { "pos": 1039, "end": 1042, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "row" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1033, "end": 1038, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

index of the row

\n" }, { "name": { "pos": 1071, "end": 1077, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "column" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1065, "end": 1070, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

index of the column

\n" } ] }, { "name": "getColumn", "args": [ { "name": "column", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "TableCellAdapter[]", "typeParameters": [], "line": 61, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns a row from the table\n\n", "description": "

Returns a row from the table

\n", "jsdoctags": [ { "name": { "pos": 1225, "end": 1231, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "column" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1219, "end": 1224, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

index of the column

\n" } ] }, { "name": "getRow", "args": [ { "name": "row", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "TableRowAdapter", "typeParameters": [], "line": 68, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns a row from the table\n\n", "description": "

Returns a row from the table

\n", "jsdoctags": [ { "name": { "pos": 1370, "end": 1373, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "row" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1364, "end": 1369, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

index of the row

\n" } ] } ], "indexSignatures": [], "extends": [], "accessors": { "lastColumnIndex": { "name": "lastColumnIndex", "getSignature": { "name": "lastColumnIndex", "type": "number", "returnType": "number", "line": 41, "rawdescription": "\n\nThe last accessible column in the table\n", "description": "

The last accessible column in the table

\n" } }, "lastRowIndex": { "name": "lastRowIndex", "getSignature": { "name": "lastRowIndex", "type": "number", "returnType": "number", "line": 46, "rawdescription": "\n\nThe last accessible row in the table\n", "description": "

The last accessible row in the table

\n" } } }, "hostBindings": [], "hostListeners": [] }, { "name": "TableCellAdapter", "id": "class-TableCellAdapter-255aa3d55b8577a1a700556d4d87e6b1c6ff653654b19775d484c85d046f477974ad65c5bcc92d63658ba1325a15b4edf6849df6061618c61a05d193f7bf5406", "file": "src/table/table-adapter.class.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "export abstract class TableCellAdapter {\n\t/**\n\t * The index of the cell in the table\n\t */\n\tcellIndex: number;\n\t/**\n\t * The number of columns spanned by this cell\n\t */\n\tcolSpan: number;\n\t/**\n\t * The number of rows spanned by this cell\n\t */\n\trowSpan: number;\n}\n\n/**\n * An abstract class that represents a row in a table\n */\nexport abstract class TableRowAdapter {\n\t/**\n\t * The index of the row in the table\n\t */\n\trowIndex: number;\n\t/**\n\t * An array (or `HTMLCollection`) of `TableCellAdapter`s\n\t */\n\tcells: HTMLCollection | TableCellAdapter[];\n}\n\n/**\n * An abstract representation of a table that provides\n * a standard interface to query 2d tables for cell and row information.\n */\nexport abstract class TableAdapter {\n\t/**\n\t * The last accessible column in the table\n\t */\n\tpublic get lastColumnIndex(): number { return; }\n\n\t/**\n\t * The last accessible row in the table\n\t */\n\tpublic get lastRowIndex(): number { return; }\n\n\t/**\n\t * Returns a cell from the table\n\t *\n\t * @param row index of the row\n\t * @param column index of the column\n\t */\n\tgetCell(row: number, column: number): TableCellAdapter { return; }\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param column index of the column\n\t */\n\tgetColumn(column: number): TableCellAdapter[] { return; }\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param row index of the row\n\t */\n\tgetRow(row: number): TableRowAdapter { return; }\n\n\t/**\n\t * Finds the column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindColumnIndex(cell: TableCellAdapter): number { return; }\n\n\t/**\n\t * Finds the row index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindRowIndex(cell: TableCellAdapter): number { return; }\n\n\t/**\n\t * Finds the row and column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t * @returns a tuple that follows the `[row, column]` convention\n\t */\n\tfindIndex(cell: TableCellAdapter): [number, number] { return; }\n}\n\nenum TableDomSpanDirection {\n\tcolSpan = \"colSpan\",\n\trowSpan = \"rowSpan\"\n}\n\n/**\n * A concrete implementation of `TableAdapter`\n *\n * Provides standard and consistent access to table cells and rows\n */\nexport class TableDomAdapter implements TableAdapter {\n\t/**\n\t * The last accessible column in the table\n\t */\n\tpublic get lastColumnIndex() {\n\t\treturn this.getRealRowLength(this.tableElement.rows[0]);\n\t}\n\n\t/**\n\t * The last accessible row in the table\n\t */\n\tpublic get lastRowIndex() {\n\t\treturn this.tableElement.rows.length - 1;\n\t}\n\n\t/**\n\t * `TableDomAdapter` works on a normal HTML table structure.\n\t * Custom tables that don't follow the standard structure should use a custom implementation of `TableAdapter`.\n\t *\n\t * The standard structure allows us to directly query rows for cells and indexes - though we do have to handle colspans specially.\n\t *\n\t * @param tableElement the root HTML table element.\n\t */\n\tconstructor(public tableElement: HTMLTableElement) { }\n\n\t/**\n\t * Returns a cell from the table taking colspans in to account.\n\t *\n\t * @param row index of the row\n\t * @param column index of the column\n\t */\n\tgetCell(row: number, column: number): HTMLTableCellElement {\n\t\tconst col = this.getColumn(column);\n\n\t\treturn this.findCellInColumn(col, row).cell;\n\t}\n\n\t/**\n\t * Returns a column from the table, using the `id` and `headers` attributes\n\t *\n\t * See here for more detail these attributes: https://www.w3.org/TR/WCAG20-TECHS/H43.html\n\t *\n\t * @param column the index of the column\n\t */\n\tgetColumn(column: number): HTMLTableCellElement[] {\n\t\tconst firstHeader = Array.from(this.tableElement.rows[0].cells);\n\n\t\tconst { cell: header, realIndex: realColumnIndex } = this.findCellInRow(firstHeader, column);\n\n\t\tconst linkedCells: HTMLTableCellElement[] = [];\n\n\t\tfor (let i = 1; i < this.tableElement.rows.length; i++) {\n\t\t\tconst row = this.tableElement.rows[i];\n\t\t\t// query for any cells that are linked to the given header id\n\t\t\t// `~=` matches values in space separated lists - so `[headers~='foo']` would match `headers=\"foo bar\"` and `headers=\"foo\"`\n\t\t\t// but not `headers=\"bar\"` or `headers=\"bar baz\"`\n\t\t\tconst linkedRowCells: NodeListOf = row.querySelectorAll(`[headers~='${header.id}']`);\n\t\t\t// if we have more than one cell, get the one that is closest to the column\n\t\t\tif (linkedRowCells.length > 1) {\n\t\t\t\tconst { cell } = this.findCellInRow(Array.from(linkedRowCells), column - realColumnIndex);\n\t\t\t\tlinkedCells.push(cell);\n\t\t\t} else if (linkedRowCells[0]) {\n\t\t\t\tlinkedCells.push(linkedRowCells[0]);\n\t\t\t}\n\t\t}\n\n\t\t// return an empty array if we can't find any linked cells\n\t\t// returning anything else would be a lie\n\t\tif (!linkedCells) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn [header, ...linkedCells];\n\t}\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param row index of the row\n\t */\n\tgetRow(row: number): HTMLTableRowElement {\n\t\treturn this.tableElement.rows[row];\n\t}\n\n\t/**\n\t * Finds the column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindColumnIndex(cell: HTMLTableCellElement): number {\n\t\tconst row = this.getRow(this.findRowIndex(cell));\n\t\tif (!row) {\n\t\t\treturn;\n\t\t}\n\t\t// if the cell has linked headers we can do a more accurate lookup\n\t\tif (cell && cell.headers) {\n\t\t\tconst ids = cell.headers.split(\" \");\n\t\t\tconst headerRows = Array.from(this.tableElement.tHead.rows);\n\t\t\tconst indexes = [];\n\n\t\t\t// start from the last row and work up\n\t\t\tfor (const headerRow of headerRows.reverse()) {\n\t\t\t\tconst headerCells = Array.from(headerRow.cells);\n\t\t\t\tconst header = headerCells.find(headerCell => ids.includes(headerCell.id));\n\t\t\t\t// if we have a matching header, find it's index (adjusting for colspans)\n\t\t\t\tif (header) {\n\t\t\t\t\t// this is borrowed from below\n\t\t\t\t\tlet cellIndex = 0;\n\t\t\t\t\tfor (const c of headerCells) {\n\t\t\t\t\t\tif (c === header) { break; }\n\t\t\t\t\t\tcellIndex += c.colSpan;\n\t\t\t\t\t}\n\t\t\t\t\tindexes.push(cellIndex);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// sort the indexes largest to smallest to find the closest matching header index\n\t\t\tconst firstIndex = indexes.sort((a, b) => b - a)[0];\n\n\t\t\t// search the row for cells that share the header\n\t\t\tlet similarCells = [];\n\t\t\tfor (const id of ids) {\n\t\t\t\t// there's no selector that will match two space separated lists,\n\t\t\t\t// so we have to iterate through the ids and query the row for each\n\t\t\t\tconst rowCells = Array.from(row.querySelectorAll(`[headers~='${id}']`));\n\t\t\t\tfor (const rowCell of rowCells) {\n\t\t\t\t\t// only keep one set of cells\n\t\t\t\t\tif (!similarCells.includes(rowCell)) {\n\t\t\t\t\t\tsimilarCells.push(rowCell);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// DOM order is not preserved, so we have to sort the row\n\t\t\tsimilarCells = similarCells.sort((a: HTMLTableCellElement, b: HTMLTableCellElement) => a.cellIndex - b.cellIndex);\n\n\t\t\t// return the header index plus any adjustment within that headers column\n\t\t\treturn firstIndex + similarCells.indexOf(cell);\n\t\t}\n\n\t\t// fallback if the cell isn't linked to any headers\n\t\tlet cellIndex = 0;\n\t\tfor (const c of Array.from(row.cells)) {\n\t\t\tif (c === cell) { break; }\n\t\t\tcellIndex += c.colSpan;\n\t\t}\n\t\treturn cellIndex;\n\t}\n\n\t/**\n\t * Finds the row index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindRowIndex(cell: HTMLTableCellElement): number {\n\t\tfor (const row of Array.from(this.tableElement.rows)) {\n\t\t\tif (row.contains(cell)) {\n\t\t\t\treturn row.rowIndex;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Finds the row and column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t * @returns a tuple that follows the `[row, column]` convention\n\t */\n\tfindIndex(cell: HTMLTableCellElement): [number, number] {\n\t\treturn [this.findRowIndex(cell), this.findColumnIndex(cell)];\n\t}\n\n\t/**\n\t * Helper function that returns the \"real\" length of a row.\n\t * Only accurate with regard to colspans (though that's sufficient for it's uses here)\n\t *\n\t * TODO: Take rowSpan into account\n\t *\n\t * @param row the row to get the length of\n\t */\n\tprotected getRealRowLength(row: HTMLTableRowElement): number {\n\t\t// start at -1 since the colspans will sum to 1 index greater than the total\n\t\treturn Array.from(row.cells).reduce((count, cell) => count + cell.colSpan, -1);\n\t}\n\n\t/**\n\t * Finds a cell and it's real index given an array of cells, a target index, and the spanning direction\n\t *\n\t * @param cells An array of cells to search\n\t * @param targetIndex The index we think the cell is located at\n\t * @param spanDirection The direction of the cell spans. Should be `\"colSpan\"` for a row and `\"rowSpan\"` for a column\n\t */\n\tprotected findCell(cells: HTMLTableCellElement[], targetIndex: number, spanDirection: TableDomSpanDirection) {\n\t\t// rows/cols can have fewer total cells than the actual table\n\t\t// the model pretends all rows/cols behave the same (with col/row spans > 1 being N cells long)\n\t\t// this maps that view to the HTML view (col/row spans > 1 are one element, so the array is shorter)\n\t\tlet realIndex = 0;\n\t\t// i is only used for iterating the cells\n\t\tfor (let i = 0; i < targetIndex;) {\n\t\t\t// skip the next N cells\n\t\t\ti += cells[realIndex][spanDirection];\n\t\t\t// don't bump realIndex if i now exceeds the cell we're shooting for\n\t\t\tif (i > targetIndex) { break; }\n\t\t\t// finally, increment realIndex (to keep it generally in step with i)\n\t\t\trealIndex++;\n\t\t}\n\n\t\treturn {\n\t\t\tcell: cells[realIndex],\n\t\t\trealIndex\n\t\t};\n\t}\n\n\t/**\n\t * Helper method around `findCell`, searches based on a row of cells\n\t *\n\t * @param row the row of elements to search\n\t * @param index the index of the element\n\t */\n\tprotected findCellInRow(row: HTMLTableCellElement[], index: number) {\n\t\treturn this.findCell(row, index, TableDomSpanDirection.colSpan);\n\t}\n\n\t/**\n\t * Helper method around `findCell`, searches based on a column of cells\n\t *\n\t * @param col the column of elements to search\n\t * @param index the index of the element\n\t */\n\tprotected findCellInColumn(col: HTMLTableCellElement[], index: number) {\n\t\treturn this.findCell(col, index, TableDomSpanDirection.rowSpan);\n\t}\n}\n", "inputsClass": [], "outputsClass": [], "properties": [ { "name": "cellIndex", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The index of the cell in the table

\n", "line": 8, "rawdescription": "\n\nThe index of the cell in the table\n" }, { "name": "colSpan", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The number of columns spanned by this cell

\n", "line": 12, "rawdescription": "\n\nThe number of columns spanned by this cell\n" }, { "name": "rowSpan", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The number of rows spanned by this cell

\n", "line": 16, "rawdescription": "\n\nThe number of rows spanned by this cell\n" } ], "description": "

An abstract class that represents a cell in a table

\n", "rawdescription": "\n\nAn abstract class that represents a cell in a table\n", "methods": [], "indexSignatures": [], "extends": [], "hostBindings": [], "hostListeners": [] }, { "name": "TableDomAdapter", "id": "class-TableDomAdapter-255aa3d55b8577a1a700556d4d87e6b1c6ff653654b19775d484c85d046f477974ad65c5bcc92d63658ba1325a15b4edf6849df6061618c61a05d193f7bf5406", "file": "src/table/table-adapter.class.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "export abstract class TableCellAdapter {\n\t/**\n\t * The index of the cell in the table\n\t */\n\tcellIndex: number;\n\t/**\n\t * The number of columns spanned by this cell\n\t */\n\tcolSpan: number;\n\t/**\n\t * The number of rows spanned by this cell\n\t */\n\trowSpan: number;\n}\n\n/**\n * An abstract class that represents a row in a table\n */\nexport abstract class TableRowAdapter {\n\t/**\n\t * The index of the row in the table\n\t */\n\trowIndex: number;\n\t/**\n\t * An array (or `HTMLCollection`) of `TableCellAdapter`s\n\t */\n\tcells: HTMLCollection | TableCellAdapter[];\n}\n\n/**\n * An abstract representation of a table that provides\n * a standard interface to query 2d tables for cell and row information.\n */\nexport abstract class TableAdapter {\n\t/**\n\t * The last accessible column in the table\n\t */\n\tpublic get lastColumnIndex(): number { return; }\n\n\t/**\n\t * The last accessible row in the table\n\t */\n\tpublic get lastRowIndex(): number { return; }\n\n\t/**\n\t * Returns a cell from the table\n\t *\n\t * @param row index of the row\n\t * @param column index of the column\n\t */\n\tgetCell(row: number, column: number): TableCellAdapter { return; }\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param column index of the column\n\t */\n\tgetColumn(column: number): TableCellAdapter[] { return; }\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param row index of the row\n\t */\n\tgetRow(row: number): TableRowAdapter { return; }\n\n\t/**\n\t * Finds the column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindColumnIndex(cell: TableCellAdapter): number { return; }\n\n\t/**\n\t * Finds the row index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindRowIndex(cell: TableCellAdapter): number { return; }\n\n\t/**\n\t * Finds the row and column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t * @returns a tuple that follows the `[row, column]` convention\n\t */\n\tfindIndex(cell: TableCellAdapter): [number, number] { return; }\n}\n\nenum TableDomSpanDirection {\n\tcolSpan = \"colSpan\",\n\trowSpan = \"rowSpan\"\n}\n\n/**\n * A concrete implementation of `TableAdapter`\n *\n * Provides standard and consistent access to table cells and rows\n */\nexport class TableDomAdapter implements TableAdapter {\n\t/**\n\t * The last accessible column in the table\n\t */\n\tpublic get lastColumnIndex() {\n\t\treturn this.getRealRowLength(this.tableElement.rows[0]);\n\t}\n\n\t/**\n\t * The last accessible row in the table\n\t */\n\tpublic get lastRowIndex() {\n\t\treturn this.tableElement.rows.length - 1;\n\t}\n\n\t/**\n\t * `TableDomAdapter` works on a normal HTML table structure.\n\t * Custom tables that don't follow the standard structure should use a custom implementation of `TableAdapter`.\n\t *\n\t * The standard structure allows us to directly query rows for cells and indexes - though we do have to handle colspans specially.\n\t *\n\t * @param tableElement the root HTML table element.\n\t */\n\tconstructor(public tableElement: HTMLTableElement) { }\n\n\t/**\n\t * Returns a cell from the table taking colspans in to account.\n\t *\n\t * @param row index of the row\n\t * @param column index of the column\n\t */\n\tgetCell(row: number, column: number): HTMLTableCellElement {\n\t\tconst col = this.getColumn(column);\n\n\t\treturn this.findCellInColumn(col, row).cell;\n\t}\n\n\t/**\n\t * Returns a column from the table, using the `id` and `headers` attributes\n\t *\n\t * See here for more detail these attributes: https://www.w3.org/TR/WCAG20-TECHS/H43.html\n\t *\n\t * @param column the index of the column\n\t */\n\tgetColumn(column: number): HTMLTableCellElement[] {\n\t\tconst firstHeader = Array.from(this.tableElement.rows[0].cells);\n\n\t\tconst { cell: header, realIndex: realColumnIndex } = this.findCellInRow(firstHeader, column);\n\n\t\tconst linkedCells: HTMLTableCellElement[] = [];\n\n\t\tfor (let i = 1; i < this.tableElement.rows.length; i++) {\n\t\t\tconst row = this.tableElement.rows[i];\n\t\t\t// query for any cells that are linked to the given header id\n\t\t\t// `~=` matches values in space separated lists - so `[headers~='foo']` would match `headers=\"foo bar\"` and `headers=\"foo\"`\n\t\t\t// but not `headers=\"bar\"` or `headers=\"bar baz\"`\n\t\t\tconst linkedRowCells: NodeListOf = row.querySelectorAll(`[headers~='${header.id}']`);\n\t\t\t// if we have more than one cell, get the one that is closest to the column\n\t\t\tif (linkedRowCells.length > 1) {\n\t\t\t\tconst { cell } = this.findCellInRow(Array.from(linkedRowCells), column - realColumnIndex);\n\t\t\t\tlinkedCells.push(cell);\n\t\t\t} else if (linkedRowCells[0]) {\n\t\t\t\tlinkedCells.push(linkedRowCells[0]);\n\t\t\t}\n\t\t}\n\n\t\t// return an empty array if we can't find any linked cells\n\t\t// returning anything else would be a lie\n\t\tif (!linkedCells) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn [header, ...linkedCells];\n\t}\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param row index of the row\n\t */\n\tgetRow(row: number): HTMLTableRowElement {\n\t\treturn this.tableElement.rows[row];\n\t}\n\n\t/**\n\t * Finds the column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindColumnIndex(cell: HTMLTableCellElement): number {\n\t\tconst row = this.getRow(this.findRowIndex(cell));\n\t\tif (!row) {\n\t\t\treturn;\n\t\t}\n\t\t// if the cell has linked headers we can do a more accurate lookup\n\t\tif (cell && cell.headers) {\n\t\t\tconst ids = cell.headers.split(\" \");\n\t\t\tconst headerRows = Array.from(this.tableElement.tHead.rows);\n\t\t\tconst indexes = [];\n\n\t\t\t// start from the last row and work up\n\t\t\tfor (const headerRow of headerRows.reverse()) {\n\t\t\t\tconst headerCells = Array.from(headerRow.cells);\n\t\t\t\tconst header = headerCells.find(headerCell => ids.includes(headerCell.id));\n\t\t\t\t// if we have a matching header, find it's index (adjusting for colspans)\n\t\t\t\tif (header) {\n\t\t\t\t\t// this is borrowed from below\n\t\t\t\t\tlet cellIndex = 0;\n\t\t\t\t\tfor (const c of headerCells) {\n\t\t\t\t\t\tif (c === header) { break; }\n\t\t\t\t\t\tcellIndex += c.colSpan;\n\t\t\t\t\t}\n\t\t\t\t\tindexes.push(cellIndex);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// sort the indexes largest to smallest to find the closest matching header index\n\t\t\tconst firstIndex = indexes.sort((a, b) => b - a)[0];\n\n\t\t\t// search the row for cells that share the header\n\t\t\tlet similarCells = [];\n\t\t\tfor (const id of ids) {\n\t\t\t\t// there's no selector that will match two space separated lists,\n\t\t\t\t// so we have to iterate through the ids and query the row for each\n\t\t\t\tconst rowCells = Array.from(row.querySelectorAll(`[headers~='${id}']`));\n\t\t\t\tfor (const rowCell of rowCells) {\n\t\t\t\t\t// only keep one set of cells\n\t\t\t\t\tif (!similarCells.includes(rowCell)) {\n\t\t\t\t\t\tsimilarCells.push(rowCell);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// DOM order is not preserved, so we have to sort the row\n\t\t\tsimilarCells = similarCells.sort((a: HTMLTableCellElement, b: HTMLTableCellElement) => a.cellIndex - b.cellIndex);\n\n\t\t\t// return the header index plus any adjustment within that headers column\n\t\t\treturn firstIndex + similarCells.indexOf(cell);\n\t\t}\n\n\t\t// fallback if the cell isn't linked to any headers\n\t\tlet cellIndex = 0;\n\t\tfor (const c of Array.from(row.cells)) {\n\t\t\tif (c === cell) { break; }\n\t\t\tcellIndex += c.colSpan;\n\t\t}\n\t\treturn cellIndex;\n\t}\n\n\t/**\n\t * Finds the row index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindRowIndex(cell: HTMLTableCellElement): number {\n\t\tfor (const row of Array.from(this.tableElement.rows)) {\n\t\t\tif (row.contains(cell)) {\n\t\t\t\treturn row.rowIndex;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Finds the row and column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t * @returns a tuple that follows the `[row, column]` convention\n\t */\n\tfindIndex(cell: HTMLTableCellElement): [number, number] {\n\t\treturn [this.findRowIndex(cell), this.findColumnIndex(cell)];\n\t}\n\n\t/**\n\t * Helper function that returns the \"real\" length of a row.\n\t * Only accurate with regard to colspans (though that's sufficient for it's uses here)\n\t *\n\t * TODO: Take rowSpan into account\n\t *\n\t * @param row the row to get the length of\n\t */\n\tprotected getRealRowLength(row: HTMLTableRowElement): number {\n\t\t// start at -1 since the colspans will sum to 1 index greater than the total\n\t\treturn Array.from(row.cells).reduce((count, cell) => count + cell.colSpan, -1);\n\t}\n\n\t/**\n\t * Finds a cell and it's real index given an array of cells, a target index, and the spanning direction\n\t *\n\t * @param cells An array of cells to search\n\t * @param targetIndex The index we think the cell is located at\n\t * @param spanDirection The direction of the cell spans. Should be `\"colSpan\"` for a row and `\"rowSpan\"` for a column\n\t */\n\tprotected findCell(cells: HTMLTableCellElement[], targetIndex: number, spanDirection: TableDomSpanDirection) {\n\t\t// rows/cols can have fewer total cells than the actual table\n\t\t// the model pretends all rows/cols behave the same (with col/row spans > 1 being N cells long)\n\t\t// this maps that view to the HTML view (col/row spans > 1 are one element, so the array is shorter)\n\t\tlet realIndex = 0;\n\t\t// i is only used for iterating the cells\n\t\tfor (let i = 0; i < targetIndex;) {\n\t\t\t// skip the next N cells\n\t\t\ti += cells[realIndex][spanDirection];\n\t\t\t// don't bump realIndex if i now exceeds the cell we're shooting for\n\t\t\tif (i > targetIndex) { break; }\n\t\t\t// finally, increment realIndex (to keep it generally in step with i)\n\t\t\trealIndex++;\n\t\t}\n\n\t\treturn {\n\t\t\tcell: cells[realIndex],\n\t\t\trealIndex\n\t\t};\n\t}\n\n\t/**\n\t * Helper method around `findCell`, searches based on a row of cells\n\t *\n\t * @param row the row of elements to search\n\t * @param index the index of the element\n\t */\n\tprotected findCellInRow(row: HTMLTableCellElement[], index: number) {\n\t\treturn this.findCell(row, index, TableDomSpanDirection.colSpan);\n\t}\n\n\t/**\n\t * Helper method around `findCell`, searches based on a column of cells\n\t *\n\t * @param col the column of elements to search\n\t * @param index the index of the element\n\t */\n\tprotected findCellInColumn(col: HTMLTableCellElement[], index: number) {\n\t\treturn this.findCell(col, index, TableDomSpanDirection.rowSpan);\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "

TableDomAdapter works on a normal HTML table structure.\nCustom tables that don't follow the standard structure should use a custom implementation of TableAdapter.

\n

The standard structure allows us to directly query rows for cells and indexes - though we do have to handle colspans specially.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "tableElement", "type": "HTMLTableElement", "deprecated": false, "deprecationMessage": "" } ], "line": 116, "rawdescription": "\n\n`TableDomAdapter` works on a normal HTML table structure.\nCustom tables that don't follow the standard structure should use a custom implementation of `TableAdapter`.\n\nThe standard structure allows us to directly query rows for cells and indexes - though we do have to handle colspans specially.\n\n", "jsdoctags": [ { "name": { "pos": 2857, "end": 2869, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "tableElement" }, "type": "HTMLTableElement", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 2851, "end": 2856, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the root HTML table element.

\n" } ] }, "inputsClass": [], "outputsClass": [], "properties": [ { "name": "tableElement", "deprecated": false, "deprecationMessage": "", "type": "HTMLTableElement", "optional": false, "description": "the root HTML table element.", "line": 126, "modifierKind": [ 125 ] } ], "description": "

A concrete implementation of TableAdapter

\n

Provides standard and consistent access to table cells and rows

\n", "rawdescription": "\n\nA concrete implementation of `TableAdapter`\n\nProvides standard and consistent access to table cells and rows\n", "methods": [ { "name": "findColumnIndex", "args": [ { "name": "cell", "type": "HTMLTableCellElement", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 192, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFinds the column index of a given cell\n\n", "description": "

Finds the column index of a given cell

\n", "jsdoctags": [ { "name": { "pos": 4954, "end": 4958, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "cell" }, "type": "HTMLTableCellElement", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 4948, "end": 4953, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the cell to search for

\n" } ] }, { "name": "findIndex", "args": [ { "name": "cell", "type": "HTMLTableCellElement", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "", "typeParameters": [], "line": 271, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFinds the row and column index of a given cell\n\n", "description": "

Finds the row and column index of a given cell

\n", "jsdoctags": [ { "name": { "pos": 7376, "end": 7380, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "cell" }, "type": "HTMLTableCellElement", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 7370, "end": 7375, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the cell to search for

\n" }, { "tagName": { "pos": 7409, "end": 7416, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "returns" }, "comment": "

a tuple that follows the [row, column] convention

\n" } ] }, { "name": "findRowIndex", "args": [ { "name": "cell", "type": "HTMLTableCellElement", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 257, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFinds the row index of a given cell\n\n", "description": "

Finds the row index of a given cell

\n", "jsdoctags": [ { "name": { "pos": 7095, "end": 7099, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "cell" }, "type": "HTMLTableCellElement", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 7089, "end": 7094, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the cell to search for

\n" } ] }, { "name": "getCell", "args": [ { "name": "row", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "column", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "HTMLTableCellElement", "typeParameters": [], "line": 134, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns a cell from the table taking colspans in to account.\n\n", "description": "

Returns a cell from the table taking colspans in to account.

\n", "jsdoctags": [ { "name": { "pos": 3046, "end": 3049, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "row" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3040, "end": 3045, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

index of the row

\n" }, { "name": { "pos": 3078, "end": 3084, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "column" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3072, "end": 3077, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

index of the column

\n" } ] }, { "name": "getColumn", "args": [ { "name": "column", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "HTMLTableCellElement[]", "typeParameters": [], "line": 147, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns a column from the table, using the `id` and `headers` attributes\n\nSee here for more detail these attributes: https://www.w3.org/TR/WCAG20-TECHS/H43.html\n\n", "description": "

Returns a column from the table, using the id and headers attributes

\n

See here for more detail these attributes: https://www.w3.org/TR/WCAG20-TECHS/H43.html

\n", "jsdoctags": [ { "name": { "pos": 3454, "end": 3460, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "column" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3448, "end": 3453, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the index of the column

\n" } ] }, { "name": "getRow", "args": [ { "name": "row", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "HTMLTableRowElement", "typeParameters": [], "line": 183, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns a row from the table\n\n", "description": "

Returns a row from the table

\n", "jsdoctags": [ { "name": { "pos": 4779, "end": 4782, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "row" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 4773, "end": 4778, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

index of the row

\n" } ] } ], "indexSignatures": [], "extends": [], "accessors": { "lastColumnIndex": { "name": "lastColumnIndex", "getSignature": { "name": "lastColumnIndex", "type": "", "returnType": "", "line": 107, "rawdescription": "\n\nThe last accessible column in the table\n", "description": "

The last accessible column in the table

\n" } }, "lastRowIndex": { "name": "lastRowIndex", "getSignature": { "name": "lastRowIndex", "type": "", "returnType": "", "line": 114, "rawdescription": "\n\nThe last accessible row in the table\n", "description": "

The last accessible row in the table

\n" } } }, "hostBindings": [], "hostListeners": [], "implements": [ "TableAdapter" ] }, { "name": "TableHeaderItem", "id": "class-TableHeaderItem-8546e7b6b9613f5bd626bf443294a91a5a2a559aa93d484ad79b8ba6baef091eda70f907cd76d84f7f32c7f4af93d85425765c1731fa9fe41e786c1b07020b27", "file": "src/table/table-header-item.class.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import { TableItem } from \"./table-item.class\";\nimport { TemplateRef } from \"@angular/core\";\n\nexport type SortType = \"ASCENDING\" | \"DESCENDING\" | \"NONE\";\nexport class TableHeaderItem {\n\t/**\n\t * If true, sort is set to ascending, if false descending will be true.\n\t *\n\t */\n\tset ascending(asc: boolean) {\n\t\tthis.sortDirection = asc ? \"ASCENDING\" : \"DESCENDING\";\n\t}\n\tget ascending() {\n\t\treturn this.sortDirection === \"ASCENDING\";\n\t}\n\n\t/**\n\t * If true, sort is set to descending, if false ascending will be true.\n\t *\n\t */\n\tset descending(desc: boolean) {\n\t\tthis.sortDirection = desc ? \"DESCENDING\" : \"ASCENDING\";\n\t}\n\tget descending() {\n\t\treturn this.sortDirection === \"DESCENDING\";\n\t}\n\n\tget title() {\n\t\tif (this._title) {\n\t\t\treturn this._title;\n\t\t}\n\n\t\tif (!this.data) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tif (typeof this.data === \"string\") {\n\t\t\treturn this.data;\n\t\t}\n\n\t\tif (\n\t\t\tthis.data.toString &&\n\t\t\tthis.data.constructor !== ({}).constructor\n\t\t) {\n\t\t\treturn this.data.toString();\n\t\t}\n\n\t\t// data can’t be reasonably converted to an end user readable string\n\t\treturn \"\";\n\t}\n\n\tset title(title) {\n\t\tthis._title = title;\n\t}\n\t/**\n\t * Defines if column under this TableHeaderItem should be displayed.\n\t *\n\t */\n\tvisible = true;\n\n\t/**\n\t * Disables sorting by default.\n\t *\n\t */\n\tsorted = false;\n\n\t/**\n\t * Enables sorting on click by default.\n\t * If false then this column won't show a sorting arrow at all.\n\t *\n\t */\n\tsortable = true;\n\n\t/**\n\t * Number of applied filters.\n\t *\n\t * `filter()` should set it to appropriate number.\n\t *\n\t */\n\tfilterCount = 0;\n\n\t/**\n\t * The number of rows to span\n\t * **NOTE:** not supported by the default carbon table\n\t */\n\trowSpan = 1;\n\n\t/**\n\t * The number of columns to span\n\t */\n\tcolSpan = 1;\n\n\t/**\n\t * Attach a class to the column, both the header and column cells.\n\t *\n\t */\n\tclassName: string;\n\n\t/**\n\t * Style for the column, applied to every element in the column.\n\t *\n\t * ngStyle-like format\n\t *\n\t */\n\tstyle = {};\n\n\t/**\n\t * Data for the header item.\n\t */\n\tdata: any;\n\n\t/**\n\t * Data for the header item for general usage in the controller.\n\t * For example, which `field` is this column related to.\n\t */\n\tmetadata: any;\n\n\t/**\n\t * Used to display data in a desired way.\n\t *\n\t * If not provided, displays data as a simple string.\n\t *\n\t * Usage:\n\t *\n\t * In a component where you're using the table create a template like:\n\t *\n\t * ```html\n\t * \n\t * \t\t{{data.name}}\n\t * \n\t * ```\n\t * where we assume your data contains `link` and `name`. `let-data=\"data\"` is\n\t * necessary for you to be able to access item's data in the template.\n\t *\n\t * Create `ViewChild` property with:\n\t *\n\t * ```typescript\n\t * (at)ViewChild(\"customHeaderTemplate\")\n\t * protected customHeaderTemplate: TemplateRef;\n\t * ```\n\t *\n\t * Set the template to the header item, for example:\n\t *\n\t * ```typescript\n\t * this.model.header = [\n\t * \t\tnew TableHeaderItem({data: {name: \"Custom header\", link: \"/table\"}, template: this.customHeaderTemplate})\n\t * ];\n\t * ```\n\t */\n\ttemplate: TemplateRef;\n\n\t/**\n\t * The label for the sort button\n\t */\n\tariaSortLabel: string;\n\n\t/**\n\t * A callback function to format the sort label. Will be heavily called.\n\t */\n\tformatSortLabel: (label: string, staticLabel?: string) => string;\n\n\t/**\n\t * Used as a template for popover filter.\n\t *\n\t * `let-popover=\"popover\"` will give you access to popover component and allow you to\n\t * manipulate it if needed.\n\t *\n\t * `let-filter=\"filter\"` will give you access to the \"filter\". The main takeaway is\n\t * store the data you need to `filter.data`. You will be able to access it as\n\t * `this.filterData.data` from your `filter()` function when you extend `TableHeaderItem`\n\t *\n\t * Example:\n\t * ```html\n\t * \n\t * \t\n\t * \t\tValue\n\t * \t\t\n\t * \t\n\t * \n\t *\n\t * \n\t * \t\n\t * \t\n\t * \n\t * ```\n\t *\n\t * Set the template with, for example:\n\t * ```typescript\n\t * new FilterableHeaderItem({\n\t * \tfilterTemplate: this.filter,\n\t *\tfilterFooter: this.filterFooter\n\t * })\n\t * ```\n\t *\n\t * ```typescript\n\t * class FilterableHeaderItem extends TableHeaderItem {\n\t * \t// custom filter function\n\t * \tfilter(item: TableItem): boolean {\n\t * \t\tif (typeof item.data === \"string\" && item.data.indexOf(this.filterData.data) >= 0) {\n\t * \t\t\tthis.filterCount = 1;\n\t * \t\t\treturn false;\n\t * \t\t}\n\t * \t\tthis.filterCount = 0;\n\t * \t\treturn true;\n\t * \t}\n\t * }\n\t * ```\n\t */\n\tfilterTemplate: TemplateRef;\n\n\t/**\n\t * Used along with `filterTemplate` to construct the filter popover\n\t */\n\tfilterFooter: TemplateRef;\n\n\t/**\n\t * This is where you store your data when applying filter.\n\t *\n\t * It is the actual object you have access to with `let-filter=\"data\"` in your template.\n\t *\n\t * Make sure to store data in `filter.data` in your template, and you will have it\n\t * available in `filterData.data` in your extension of `TableHeaderItem`.\n\t *\n\t * Because angular and object references.\n\t */\n\tfilterData: any;\n\n\tsortDirection: SortType = \"NONE\";\n\n\n\n\tprivate _title: string;\n\n\t/**\n\t * Creates an instance of TableHeaderItem.\n\t */\n\tconstructor(rawData?: any) {\n\t\t// defaults so we dont leave things empty\n\t\tconst defaults = {\n\t\t\tdata: \"\",\n\t\t\tvisible: this.visible,\n\t\t\tstyle: this.style,\n\t\t\tfilterCount: this.filterCount,\n\t\t\tfilterData: {data: \"\"}\n\t\t};\n\t\t// fill our object with provided props, and fallback to defaults\n\t\tconst data = Object.assign({}, defaults, rawData);\n\t\tfor (let property of Object.getOwnPropertyNames(data)) {\n\t\t\tif (data.hasOwnProperty(property)) {\n\t\t\t\tthis[property] = data[property];\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Used for sorting rows of the table.\n\t *\n\t * Override to enable different sorting.\n\t *\n\t * < 0 if `one` should go before `two`\n\t * > 0 if `one` should go after `two`\n\t * 0 if it doesn't matter (they are the same)\n\t */\n\tcompare(one: TableItem, two: TableItem): number {\n\t\tif (!one || !two) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tif (typeof one.data === \"string\") {\n\t\t\treturn one.data.localeCompare(two.data);\n\t\t}\n\n\t\tif (one.data < two.data) {\n\t\t\treturn -1;\n\t\t} else if (one.data > two.data) {\n\t\t\treturn 1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n\n\t/**\n\t * Used to filter rows in the table.\n\t *\n\t * Override to make a custom filter.\n\t *\n\t * Even though there is just one filter function, there can be multiple filters.\n\t * When implementing filter, set `filterCount` before returning.\n\t *\n\t * `true` to hide the row\n\t * `false` to show the row\n\t */\n\tfilter(item: TableItem): boolean {\n\t\tthis.filterCount = 0;\n\t\treturn false;\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "

Creates an instance of TableHeaderItem.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "rawData", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true } ], "line": 232, "rawdescription": "\n\nCreates an instance of TableHeaderItem.\n", "jsdoctags": [ { "name": "rawData", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "text": "param" } } ] }, "inputsClass": [], "outputsClass": [], "properties": [ { "name": "ariaSortLabel", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

The label for the sort button

\n", "line": 155, "rawdescription": "\n\nThe label for the sort button\n" }, { "name": "className", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

Attach a class to the column, both the header and column cells.

\n", "line": 97, "rawdescription": "\n\nAttach a class to the column, both the header and column cells.\n\n" }, { "name": "colSpan", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The number of columns to span

\n", "line": 91, "rawdescription": "\n\nThe number of columns to span\n" }, { "name": "data", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "

Data for the header item.

\n", "line": 110, "rawdescription": "\n\nData for the header item.\n" }, { "name": "filterCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

Number of applied filters.

\n

filter() should set it to appropriate number.

\n", "line": 80, "rawdescription": "\n\nNumber of applied filters.\n\n`filter()` should set it to appropriate number.\n\n" }, { "name": "filterData", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "

This is where you store your data when applying filter.

\n

It is the actual object you have access to with let-filter="data" in your template.

\n

Make sure to store data in filter.data in your template, and you will have it\navailable in filterData.data in your extension of TableHeaderItem.

\n

Because angular and object references.

\n", "line": 226, "rawdescription": "\n\nThis is where you store your data when applying filter.\n\nIt is the actual object you have access to with `let-filter=\"data\"` in your template.\n\nMake sure to store data in `filter.data` in your template, and you will have it\navailable in `filterData.data` in your extension of `TableHeaderItem`.\n\nBecause angular and object references.\n" }, { "name": "filterFooter", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "

Used along with filterTemplate to construct the filter popover

\n", "line": 214, "rawdescription": "\n\nUsed along with `filterTemplate` to construct the filter popover\n" }, { "name": "filterTemplate", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "

Used as a template for popover filter.

\n

let-popover="popover" will give you access to popover component and allow you to\nmanipulate it if needed.

\n

let-filter="filter" will give you access to the "filter". The main takeaway is\nstore the data you need to filter.data. You will be able to access it as\nthis.filterData.data from your filter() function when you extend TableHeaderItem

\n

Example:

\nExample :
<ng-template #filter let-popover="popover">\n    <cds-label class="first-label">\n        Value\n        <input type="text" [(ngModel)]="filter1" class="input-field">\n    </cds-label>\n</ng-template>\n\n<ng-template #filterFooter let-popover="popover" let-filter="data">\n    <button class="btn--primary" (click)="filter.data = filter1; popover.onClose()">Apply</button>\n    <button class="btn--secondary" (click)="popover.onClose()">Cancel</button>\n</ng-template>

Set the template with, for example:

\nExample :
new FilterableHeaderItem({\n    filterTemplate: this.filter,\n    filterFooter: this.filterFooter\n})
Example :
class FilterableHeaderItem extends TableHeaderItem {\n    // custom filter function\n    filter(item: TableItem): boolean {\n        if (typeof item.data === "string" && item.data.indexOf(this.filterData.data) >= 0) {\n            this.filterCount = 1;\n            return false;\n        }\n        this.filterCount = 0;\n        return true;\n    }\n}
", "line": 209, "rawdescription": "\n\nUsed as a template for popover filter.\n\n`let-popover=\"popover\"` will give you access to popover component and allow you to\nmanipulate it if needed.\n\n`let-filter=\"filter\"` will give you access to the \"filter\". The main takeaway is\nstore the data you need to `filter.data`. You will be able to access it as\n`this.filterData.data` from your `filter()` function when you extend `TableHeaderItem`\n\nExample:\n```html\n\n\t\n\t\tValue\n\t\t\n\t\n\n\n\n\t\n\t\n\n```\n\nSet the template with, for example:\n```typescript\nnew FilterableHeaderItem({\n\tfilterTemplate: this.filter,\n\tfilterFooter: this.filterFooter\n})\n```\n\n```typescript\nclass FilterableHeaderItem extends TableHeaderItem {\n\t// custom filter function\n\tfilter(item: TableItem): boolean {\n\t\tif (typeof item.data === \"string\" && item.data.indexOf(this.filterData.data) >= 0) {\n\t\t\tthis.filterCount = 1;\n\t\t\treturn false;\n\t\t}\n\t\tthis.filterCount = 0;\n\t\treturn true;\n\t}\n}\n```\n" }, { "name": "formatSortLabel", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": false, "description": "

A callback function to format the sort label. Will be heavily called.

\n", "line": 160, "rawdescription": "\n\nA callback function to format the sort label. Will be heavily called.\n" }, { "name": "metadata", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "

Data for the header item for general usage in the controller.\nFor example, which field is this column related to.

\n", "line": 116, "rawdescription": "\n\nData for the header item for general usage in the controller.\nFor example, which `field` is this column related to.\n" }, { "name": "rowSpan", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The number of rows to span\nNOTE: not supported by the default carbon table

\n", "line": 86, "rawdescription": "\n\nThe number of rows to span\n**NOTE:** not supported by the default carbon table\n" }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Enables sorting on click by default.\nIf false then this column won't show a sorting arrow at all.

\n", "line": 72, "rawdescription": "\n\nEnables sorting on click by default.\nIf false then this column won't show a sorting arrow at all.\n\n" }, { "name": "sortDirection", "defaultValue": "\"NONE\"", "deprecated": false, "deprecationMessage": "", "type": "SortType", "optional": false, "description": "", "line": 228 }, { "name": "sorted", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Disables sorting by default.

\n", "line": 65, "rawdescription": "\n\nDisables sorting by default.\n\n" }, { "name": "style", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "

Style for the column, applied to every element in the column.

\n

ngStyle-like format

\n", "line": 105, "rawdescription": "\n\nStyle for the column, applied to every element in the column.\n\nngStyle-like format\n\n" }, { "name": "template", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "

Used to display data in a desired way.

\n

If not provided, displays data as a simple string.

\n

Usage:

\n

In a component where you're using the table create a template like:

\nExample :
<ng-template #customHeaderTemplate let-data="data">\n        <i><a [routerLink]="data.link">{{data.name}}</a></i>\n</ng-template>

where we assume your data contains link and name. let-data="data" is\nnecessary for you to be able to access item's data in the template.

\n

Create ViewChild property with:

\nExample :
(at)ViewChild("customHeaderTemplate")\nprotected customHeaderTemplate: TemplateRef<any>;

Set the template to the header item, for example:

\nExample :
this.model.header = [\n        new TableHeaderItem({data: {name: "Custom header", link: "/table"}, template: this.customHeaderTemplate})\n];
", "line": 150, "rawdescription": "\n\nUsed to display data in a desired way.\n\nIf not provided, displays data as a simple string.\n\nUsage:\n\nIn a component where you're using the table create a template like:\n\n```html\n\n\t\t{{data.name}}\n\n```\nwhere we assume your data contains `link` and `name`. `let-data=\"data\"` is\nnecessary for you to be able to access item's data in the template.\n\nCreate `ViewChild` property with:\n\n```typescript\n(at)ViewChild(\"customHeaderTemplate\")\nprotected customHeaderTemplate: TemplateRef;\n```\n\nSet the template to the header item, for example:\n\n```typescript\nthis.model.header = [\n\t\tnew TableHeaderItem({data: {name: \"Custom header\", link: \"/table\"}, template: this.customHeaderTemplate})\n];\n```\n" }, { "name": "visible", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Defines if column under this TableHeaderItem should be displayed.

\n", "line": 59, "rawdescription": "\n\nDefines if column under this TableHeaderItem should be displayed.\n\n" } ], "methods": [ { "name": "compare", "args": [ { "name": "one", "type": "TableItem", "deprecated": false, "deprecationMessage": "" }, { "name": "two", "type": "TableItem", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 264, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed for sorting rows of the table.\n\nOverride to enable different sorting.\n\n< 0 if `one` should go before `two`\n> 0 if `one` should go after `two`\n0 if it doesn't matter (they are the same)\n", "description": "

Used for sorting rows of the table.

\n

Override to enable different sorting.

\n

< 0 if one should go before two

\n
\n

0 if one should go after two\n0 if it doesn't matter (they are the same)

\n
\n", "jsdoctags": [ { "name": "one", "type": "TableItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "two", "type": "TableItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "filter", "args": [ { "name": "item", "type": "TableItem", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 293, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to filter rows in the table.\n\nOverride to make a custom filter.\n\nEven though there is just one filter function, there can be multiple filters.\nWhen implementing filter, set `filterCount` before returning.\n\n`true` to hide the row\n`false` to show the row\n", "description": "

Used to filter rows in the table.

\n

Override to make a custom filter.

\n

Even though there is just one filter function, there can be multiple filters.\nWhen implementing filter, set filterCount before returning.

\n

true to hide the row\nfalse to show the row

\n", "jsdoctags": [ { "name": "item", "type": "TableItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "indexSignatures": [], "extends": [], "accessors": { "ascending": { "name": "ascending", "setSignature": { "name": "ascending", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "asc", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 10, "rawdescription": "\n\nIf true, sort is set to ascending, if false descending will be true.\n\n", "description": "

If true, sort is set to ascending, if false descending will be true.

\n", "jsdoctags": [ { "name": "asc", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "ascending", "type": "", "returnType": "", "line": 13 } }, "descending": { "name": "descending", "setSignature": { "name": "descending", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "desc", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 21, "rawdescription": "\n\nIf true, sort is set to descending, if false ascending will be true.\n\n", "description": "

If true, sort is set to descending, if false ascending will be true.

\n", "jsdoctags": [ { "name": "desc", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "descending", "type": "", "returnType": "", "line": 24 } }, "title": { "name": "title", "setSignature": { "name": "title", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "title", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 52, "jsdoctags": [ { "name": "title", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "title", "type": "", "returnType": "", "line": 28 } } }, "hostBindings": [], "hostListeners": [] }, { "name": "TableItem", "id": "class-TableItem-7ee87088b7616edfd6b7ee5435d18faec6f34242783afe36a19a3a80c6c1d13a59985852c01b807d4482fedaf3b2c3c73755fd2576fbccd611d9c4e9398cd640", "file": "src/table/table-item.class.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import {\n\tTemplateRef\n} from \"@angular/core\";\n\nexport class TableItem {\n\t/**\n\t * Data for the table item.\n\t */\n\tdata: any;\n\n\t/**\n\t * Data for the expanded part of the row.\n\t *\n\t * You only need to set it for the first item in the row.\n\t *\n\t * See `expandAsTable` documentation if you need to the table to expand to additional\n\t * table rows.\n\t */\n\texpandedData: any;\n\n\t/**\n\t * Used to display data in a desired way.\n\t *\n\t * If not provided, displays data as a simple string.\n\t *\n\t * Usage:\n\t *\n\t * In a component where you're using the table create a template like:\n\t *\n\t * ```html\n\t * \n\t * \t{{data.name}}\n\t * \n\t * ```\n\t * where we assume your data contains `link` and `name`. `let-data=\"data\"` is\n\t * necessary for you to be able to access item's data in the template.\n\t *\n\t * Create `ViewChild` property with:\n\t *\n\t * ```typescript\n\t * (at)ViewChild(\"customItemTemplate\")\n\t * protected customItemTemplate: TemplateRef;\n\t * ```\n\t *\n\t * Set the template to the table item, for example:\n\t *\n\t * ```typescript\n\t * this.model.data = [\n\t * \t[new TableItem({data: {name: \"Custom item\", link: \"/table\"}, template: this.customItemTemplate})]\n\t * ];\n\t * ```\n\t */\n\ttemplate: TemplateRef;\n\n\t/**\n\t * Template for rendering `expandedData`\n\t *\n\t * You only need to set it for the first item in the row.\n\t *\n\t */\n\texpandedTemplate: TemplateRef;\n\n\t/**\n\t * Setting this to `true` makes table interpret `expandedData` as additional rows to insert in place\n\t * for expanded data. `expandedTemplate` is then ignored.\n\t *\n\t * You can apply the template for individual cells as usual.\n\t *\n\t * Example model data:\n\t *\n\t * ```typescript\n\t * this.model.data = [\n\t * \t[new TableItem({ data: \"Name 4\" }), new TableItem({ data: \"twer\" })], // regular row\n\t * \t[\n\t * \t\tnew TableItem({\n\t * \t\t\tdata: \"Name 3.1\",\n\t * \t\t\t// `expandedData` mimics the format of the rest of the table\n\t * \t\t\texpandedData: [\n\t * \t\t\t\t[\n\t * \t\t\t\t\tnew TableItem({ data: \"More names\", expandedData: \"No template\" }),\n\t * \t\t\t\t\tnew TableItem({ data: { name: \"Morey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t * \t\t\t\t],\n\t * \t\t\t\t[\n\t * \t\t\t\t\tnew TableItem({ data: \"Core names\", expandedData: \"No template\" }),\n\t * \t\t\t\t\tnew TableItem({ data: { name: \"Corey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t * \t\t\t\t]\n\t * \t\t\t],\n\t * \t\t\t// `expandAsTable` tells the table to interpret `expandedData` as table data\n\t * \t\t\texpandAsTable: true\n\t * \t\t}),\n\t * \t\tnew TableItem({ data: \"swer\" })\n\t * \t],\n\t * \t[new TableItem({ data: \"Name 7\" }), new TableItem({data: \"twer\"})] // regular row\n\t * ];\n\t * ```\n\t */\n\texpandAsTable: false;\n\n\t/**\n\t * The number of rows to span\n\t */\n\trowSpan = 1;\n\n\t/**\n\t * The number of columns to span\n\t */\n\tcolSpan = 1;\n\n\tget title() {\n\t\tif (typeof this._title === \"string\") {\n\t\t\treturn this._title;\n\t\t}\n\n\t\tif (!this.data) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tif (typeof this.data === \"string\") {\n\t\t\treturn this.data;\n\t\t}\n\n\t\tif (\n\t\t\tthis.data.toString &&\n\t\t\tthis.data.constructor !== ({}).constructor\n\t\t) {\n\t\t\treturn this.data.toString();\n\t\t}\n\n\t\t// data can’t be reasonably converted to an end user readable string\n\t\treturn \"\";\n\t}\n\n\tset title(title) {\n\t\tthis._title = title;\n\t}\n\n\tprivate _title: string;\n\n\t/**\n\t * Creates an instance of TableItem.\n\t */\n\tconstructor(rawData?: any) {\n\t\t// defaults so we dont leave things empty\n\t\tconst defaults = {\n\t\t\tdata: \"\"\n\t\t};\n\t\t// fill our object with provided props, and fallback to defaults\n\t\tconst data = Object.assign({}, defaults, rawData);\n\t\tfor (const property of Object.getOwnPropertyNames(data)) {\n\t\t\tif (data.hasOwnProperty(property)) {\n\t\t\t\tthis[property] = data[property];\n\t\t\t}\n\t\t}\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "

Creates an instance of TableItem.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "rawData", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true } ], "line": 137, "rawdescription": "\n\nCreates an instance of TableItem.\n", "jsdoctags": [ { "name": "rawData", "type": "any", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "text": "param" } } ] }, "inputsClass": [], "outputsClass": [], "properties": [ { "name": "colSpan", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The number of columns to span

\n", "line": 107, "rawdescription": "\n\nThe number of columns to span\n" }, { "name": "data", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "

Data for the table item.

\n", "line": 9, "rawdescription": "\n\nData for the table item.\n" }, { "name": "expandAsTable", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Setting this to true makes table interpret expandedData as additional rows to insert in place\nfor expanded data. expandedTemplate is then ignored.

\n

You can apply the template for individual cells as usual.

\n

Example model data:

\nExample :
this.model.data = [\n    [new TableItem({ data: "Name 4" }), new TableItem({ data: "twer" })], // regular row\n    [\n        new TableItem({\n            data: "Name 3.1",\n            // `expandedData` mimics the format of the rest of the table\n            expandedData: [\n                [\n                    new TableItem({ data: "More names", expandedData: "No template" }),\n                    new TableItem({ data: { name: "Morey", link: "#" }, template: this.customTableItemTemplate })\n                ],\n                [\n                    new TableItem({ data: "Core names", expandedData: "No template" }),\n                    new TableItem({ data: { name: "Corey", link: "#" }, template: this.customTableItemTemplate })\n                ]\n            ],\n            // `expandAsTable` tells the table to interpret `expandedData` as table data\n            expandAsTable: true\n        }),\n        new TableItem({ data: "swer" })\n    ],\n    [new TableItem({ data: "Name 7" }), new TableItem({data: "twer"})] // regular row\n];
", "line": 97, "rawdescription": "\n\nSetting this to `true` makes table interpret `expandedData` as additional rows to insert in place\nfor expanded data. `expandedTemplate` is then ignored.\n\nYou can apply the template for individual cells as usual.\n\nExample model data:\n\n```typescript\nthis.model.data = [\n\t[new TableItem({ data: \"Name 4\" }), new TableItem({ data: \"twer\" })], // regular row\n\t[\n\t\tnew TableItem({\n\t\t\tdata: \"Name 3.1\",\n\t\t\t// `expandedData` mimics the format of the rest of the table\n\t\t\texpandedData: [\n\t\t\t\t[\n\t\t\t\t\tnew TableItem({ data: \"More names\", expandedData: \"No template\" }),\n\t\t\t\t\tnew TableItem({ data: { name: \"Morey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t],\n\t\t\t\t[\n\t\t\t\t\tnew TableItem({ data: \"Core names\", expandedData: \"No template\" }),\n\t\t\t\t\tnew TableItem({ data: { name: \"Corey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t]\n\t\t\t],\n\t\t\t// `expandAsTable` tells the table to interpret `expandedData` as table data\n\t\t\texpandAsTable: true\n\t\t}),\n\t\tnew TableItem({ data: \"swer\" })\n\t],\n\t[new TableItem({ data: \"Name 7\" }), new TableItem({data: \"twer\"})] // regular row\n];\n```\n" }, { "name": "expandedData", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "

Data for the expanded part of the row.

\n

You only need to set it for the first item in the row.

\n

See expandAsTable documentation if you need to the table to expand to additional\ntable rows.

\n", "line": 19, "rawdescription": "\n\nData for the expanded part of the row.\n\nYou only need to set it for the first item in the row.\n\nSee `expandAsTable` documentation if you need to the table to expand to additional\ntable rows.\n" }, { "name": "expandedTemplate", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "

Template for rendering expandedData

\n

You only need to set it for the first item in the row.

\n", "line": 61, "rawdescription": "\n\nTemplate for rendering `expandedData`\n\nYou only need to set it for the first item in the row.\n\n" }, { "name": "rowSpan", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The number of rows to span

\n", "line": 102, "rawdescription": "\n\nThe number of rows to span\n" }, { "name": "template", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "

Used to display data in a desired way.

\n

If not provided, displays data as a simple string.

\n

Usage:

\n

In a component where you're using the table create a template like:

\nExample :
<ng-template #customItemTemplate let-data="data">\n    <i><a [routerLink]="data.link">{{data.name}}</a></i>\n</ng-template>

where we assume your data contains link and name. let-data="data" is\nnecessary for you to be able to access item's data in the template.

\n

Create ViewChild property with:

\nExample :
(at)ViewChild("customItemTemplate")\nprotected customItemTemplate: TemplateRef<any>;

Set the template to the table item, for example:

\nExample :
this.model.data = [\n    [new TableItem({data: {name: "Custom item", link: "/table"}, template: this.customItemTemplate})]\n];
", "line": 53, "rawdescription": "\n\nUsed to display data in a desired way.\n\nIf not provided, displays data as a simple string.\n\nUsage:\n\nIn a component where you're using the table create a template like:\n\n```html\n\n\t{{data.name}}\n\n```\nwhere we assume your data contains `link` and `name`. `let-data=\"data\"` is\nnecessary for you to be able to access item's data in the template.\n\nCreate `ViewChild` property with:\n\n```typescript\n(at)ViewChild(\"customItemTemplate\")\nprotected customItemTemplate: TemplateRef;\n```\n\nSet the template to the table item, for example:\n\n```typescript\nthis.model.data = [\n\t[new TableItem({data: {name: \"Custom item\", link: \"/table\"}, template: this.customItemTemplate})]\n];\n```\n" } ], "methods": [], "indexSignatures": [], "extends": [], "accessors": { "title": { "name": "title", "setSignature": { "name": "title", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "title", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 133, "jsdoctags": [ { "name": "title", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "title", "type": "", "returnType": "", "line": 109 } } }, "hostBindings": [], "hostListeners": [] }, { "name": "TableModel", "id": "class-TableModel-417cd399ce3d14280d41dd6a40ddf6ffb12e530e359140f60ed3e3496df0e388876da9761e82bbc8aca3270ab8c578877479632ca51ce8652f809dbaec5d09bc", "file": "src/table/table-model.class.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import { EventEmitter } from \"@angular/core\";\n\nimport { PaginationModel } from \"carbon-components-angular/pagination\";\nimport { TableHeaderItem } from \"./table-header-item.class\";\nimport { TableItem } from \"./table-item.class\";\nimport { TableRow } from \"./table-row.class\";\nimport { Subject } from \"rxjs\";\n\nexport type HeaderType = number | \"select\" | \"expand\";\n\n/**\n * TableModel represents a data model for two-dimensional data. It's used for all things table\n * (table component, table toolbar, pagination, etc)\n *\n * TableModel manages its internal data integrity very well if you use the provided helper\n * functions for modifying rows and columns and assigning header and data in that order.\n *\n * It also provides direct access to the data so you can read and modify it.\n * If you change the structure of the data (by directly pushing into the arrays or otherwise),\n * keep in mind to keep the data structure intact.\n *\n * Header length and length of every line in the data should be equal.\n *\n * If they are not consistent, unexpected things will happen.\n *\n * Use the provided functions when in doubt.\n */\nexport class TableModel implements PaginationModel {\n\t/**\n\t * The number of models instantiated, used for (among other things) unique id generation\n\t */\n\tprotected static COUNT = 0;\n\n\t/**\n\t * Sets data of the table.\n\t *\n\t * Make sure all rows are the same length to keep the column count accurate.\n\t */\n\tset data(newData: TableItem[][]) {\n\t\tif (!newData || (Array.isArray(newData) && newData.length === 0)) {\n\t\t\tnewData = [[]];\n\t\t}\n\n\t\tthis._data = newData;\n\n\t\t// init rowsSelected\n\t\tthis.rowsSelected = new Array(this._data.length).fill(false);\n\t\tthis.rowsExpanded = new Array(this._data.length).fill(false);\n\t\t// init rows indices\n\t\tthis.rowsIndices = [...Array(this._data.length).keys()];\n\t\t// init rowsContext\n\t\tthis.rowsContext = new Array(this._data.length);\n\n\t\t// init rowsClass\n\t\tthis.rowsClass = new Array(this._data.length);\n\n\t\t// only create a fresh header if necessary (header doesn't exist or differs in length)\n\t\tif (this.header == null || (this.header.length !== this._data[0].length && this._data[0].length > 0)) {\n\t\t\tlet header = new Array();\n\t\t\tfor (let i = 0; i < this._data[0].length; i++) {\n\t\t\t\theader.push(new TableHeaderItem());\n\t\t\t}\n\t\t\tthis.header = header;\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\tdataChange = new EventEmitter();\n\trowsSelectedChange = new EventEmitter();\n\trowsExpandedChange = new EventEmitter();\n\trowsExpandedAllChange = new EventEmitter();\n\trowsCollapsedAllChange = new EventEmitter();\n\t/**\n\t * Gets emitted when `selectAll` is called. Emits false if all rows are deselected and true if\n\t * all rows are selected.\n\t */\n\tselectAllChange = new Subject();\n\n\t/**\n\t * Gets the full data.\n\t *\n\t * You can use it to alter individual `TableItem`s but if you need to change\n\t * table structure, use `addRow()` and/or `addColumn()`\n\t */\n\tget data() {\n\t\treturn this._data;\n\t}\n\n\t/**\n\t * Contains information about selection state of rows in the table.\n\t */\n\trowsSelected: boolean[] = [];\n\n\t/**\n\t * Contains information about expanded state of rows in the table.\n\t */\n\trowsExpanded: boolean[] = [];\n\n\t/**\n\t * Contains information about initial index of rows in the table\n\t */\n\trowsIndices: number[] = [];\n\n\t/**\n\t * Contains information about the context of the row.\n\t *\n\t * It affects styling of the row to reflect the context.\n\t *\n\t * string can be one of `\"success\" | \"warning\" | \"info\" | \"error\" | \"\"` and it's\n\t * empty or undefined by default\n\t */\n\trowsContext: string[] = [];\n\n\t/**\n\t * Contains class name(s) of the row.\n\t *\n\t * It affects styling of the row to reflect the appended class name(s).\n\t *\n\t * It's empty or undefined by default\n\t */\n\trowsClass: string[] = [];\n\n\t/**\n\t * Contains information about the header cells of the table.\n\t */\n\theader: TableHeaderItem[] = [];\n\n\t/**\n\t * Tracks the current page.\n\t */\n\tcurrentPage = 1;\n\n\t/**\n\t * Length of page.\n\t */\n\tpageLength = 10;\n\n\t/**\n\t * Set to true when there is no more data to load in the table\n\t */\n\tisEnd = false;\n\n\t/**\n\t * Set to true when lazy loading to show loading indicator\n\t */\n\tisLoading = false;\n\n\t/**\n\t * Absolute total number of rows of the table.\n\t */\n\tprotected _totalDataLength: number;\n\n\t/**\n\t * Manually set data length in case the data in the table doesn't\n\t * correctly reflect all the data that table is to display.\n\t *\n\t * Example: if you have multiple pages of data that table will display\n\t * but you're loading one at a time.\n\t *\n\t * Set to `null` to reset to default behavior.\n\t */\n\tset totalDataLength(length: number) {\n\t\t// if this function is called without a parameter we need to set to null to avoid having undefined != null\n\t\tthis._totalDataLength = isNaN(length) ? null : length;\n\t}\n\n\t/**\n\t * Total length of data that table has access to, or the amount manually set\n\t */\n\tget totalDataLength() {\n\t\t// if manually set data length\n\t\tif (this._totalDataLength !== null && this._totalDataLength >= 0) {\n\t\t\treturn this._totalDataLength;\n\t\t}\n\n\t\t// if empty dataset\n\t\tif (this.data && this.data.length === 1 && this.data[0].length === 0) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn this.data.length;\n\t}\n\n\t/**\n\t * Used in `data`\n\t */\n\tprotected _data: TableItem[][] = [[]];\n\n\t/**\n\t * The number of models instantiated, this is to make sure each table has a different\n\t * model count for unique id generation.\n\t */\n\tprotected tableModelCount = 0;\n\n\tconstructor() {\n\t\tthis.tableModelCount = TableModel.COUNT++;\n\t}\n\n\t/**\n\t * Returns an id for the given column\n\t *\n\t * @param column the column to generate an id for\n\t * @param row the row of the header to generate an id for\n\t */\n\tgetId(column: HeaderType, row = 0): string {\n\t\treturn `table-header-${row}-${column}-${this.tableModelCount}`;\n\t}\n\n\t/**\n\t * Returns the id of the header. Used to link the cells with headers (or headers with headers)\n\t *\n\t * @param column the column to start getting headers for\n\t * @param colSpan the number of columns to get headers for (defaults to 1)\n\t */\n\tgetHeaderId(column: HeaderType, colSpan = 1): string {\n\t\tif (column === \"select\" || column === \"expand\") {\n\t\t\treturn this.getId(column);\n\t\t}\n\n\t\tlet ids = [];\n\t\tfor (let i = column; i >= 0; i--) {\n\t\t\tif (this.header[i]) {\n\t\t\t\tfor (let j = 0; j < colSpan; j++) {\n\t\t\t\t\tids.push(this.getId(i + j));\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\treturn ids.join(\" \");\n\t}\n\n\t/**\n\t * Finds closest header by trying the `column` and then working its way to the left\n\t *\n\t * @param column the target column\n\t */\n\tgetHeader(column: number): TableHeaderItem {\n\t\tif (!this.header) {\n\t\t\treturn null;\n\t\t}\n\n\t\tfor (let i = column; i >= 0; i--) {\n\t\t\tconst headerCell = this.header[i];\n\t\t\tif (headerCell) {\n\t\t\t\treturn headerCell;\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t}\n\n\t/**\n\t * Returns how many rows is currently selected\n\t */\n\tselectedRowsCount(): number {\n\t\tlet count = 0;\n\t\tif (this.rowsSelected) {\n\t\t\tthis.rowsSelected.forEach(rowSelected => {\n\t\t\t\tif (rowSelected) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns how many rows is currently expanded\n\t */\n\texpandedRowsCount(): number {\n\t\tlet count = 0;\n\t\tif (this.rowsExpanded) {\n\t\t\tthis.rowsExpanded.forEach(rowExpanded => {\n\t\t\t\tif (rowExpanded) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns `index`th row of the table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\trow(index: number): TableItem[] {\n\t\treturn this.data[this.realRowIndex(index)];\n\t}\n\n\t/**\n\t * Adds a row to the `index`th row or appends to table if index not provided.\n\t *\n\t * If row is shorter than other rows or not provided, it will be padded with\n\t * empty `TableItem` elements.\n\t *\n\t * If row is longer than other rows, others will be extended to match so no data is lost.\n\t *\n\t * If called on an empty table with no parameters, it creates a 1x1 table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param [row]\n\t * @param [index]\n\t */\n\taddRow(row?: TableItem[], index?: number) {\n\t\t// if table empty create table with row\n\t\tif (!this.data || this.data.length === 0 || this.data[0].length === 0) {\n\t\t\tlet newData = new Array>();\n\t\t\tnewData.push(row ? row : [new TableItem()]); // row or one empty one column row\n\t\t\tthis.data = newData;\n\n\t\t\treturn;\n\t\t}\n\n\t\tlet realRow = row;\n\t\tconst columnCount = this.data[0].length;\n\n\t\tif (row == null) {\n\t\t\trealRow = new Array();\n\t\t\tfor (let i = 0; i < columnCount; i++) {\n\t\t\t\trealRow.push(new TableItem());\n\t\t\t}\n\t\t}\n\n\t\tif (realRow.length < columnCount) {\n\t\t\t// extend the length of realRow\n\t\t\tconst difference = columnCount - realRow.length;\n\t\t\tfor (let i = 0; i < difference; i++) {\n\t\t\t\trealRow.push(new TableItem());\n\t\t\t}\n\t\t} else if (realRow.length > columnCount) {\n\t\t\t// extend the length of header\n\t\t\tlet difference = realRow.length - this.header.length;\n\t\t\tfor (let j = 0; j < difference; j++) {\n\t\t\t\tthis.header.push(new TableHeaderItem());\n\t\t\t}\n\t\t\t// extend the length of every other row\n\t\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\t\tlet currentRow = this.data[i];\n\t\t\t\tdifference = realRow.length - currentRow.length;\n\t\t\t\tfor (let j = 0; j < difference; j++) {\n\t\t\t\t\tcurrentRow.push(new TableItem());\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (index == null) {\n\t\t\tthis.data.push(realRow);\n\n\t\t\t// update rowsSelected property for length\n\t\t\tthis.rowsSelected.push(false);\n\n\t\t\t// update rowsExpanded property for length\n\t\t\tthis.rowsExpanded.push(false);\n\n\t\t\t// update rowsContext property for length\n\t\t\tthis.rowsContext.push(undefined);\n\n\t\t\t// update rowsClass property for length\n\t\t\tthis.rowsClass.push(undefined);\n\n\t\t\t// update rowsIndices property for length\n\t\t\tthis.rowsIndices.push(this.data.length - 1);\n\t\t} else {\n\t\t\tconst ri = this.realRowIndex(index);\n\t\t\tthis.data.splice(ri, 0, realRow);\n\n\t\t\t// update rowsSelected property for length\n\t\t\tthis.rowsSelected.splice(ri, 0, false);\n\n\t\t\t// update rowsExpanded property for length\n\t\t\tthis.rowsExpanded.splice(ri, 0, false);\n\n\t\t\t// update rowsContext property for length\n\t\t\tthis.rowsContext.splice(ri, 0, undefined);\n\n\t\t\t// update rowsClass property for length\n\t\t\tthis.rowsClass.splice(ri, 0, undefined);\n\n\t\t\t// update rowsIndices property for length\n\t\t\tthis.rowsIndices.splice(ri, 0, this.data.length - 1);\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes `index`th row.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tdeleteRow(index: number) {\n\t\tconst rri = this.realRowIndex(index);\n\t\tthis.data.splice(rri, 1);\n\t\tthis.rowsSelected.splice(rri, 1);\n\t\tthis.rowsExpanded.splice(rri, 1);\n\t\tthis.rowsContext.splice(rri, 1);\n\t\tthis.rowsClass.splice(rri, 1);\n\n\t\tconst rowIndex = this.rowsIndices[rri];\n\t\tthis.rowsIndices.splice(rri, 1);\n\t\tthis.rowsIndices = this.rowsIndices.map((value) => (value > rowIndex) ? --value : value);\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes all rows.\n\t */\n\tdeleteAllRows() {\n\t\tthis.data = [];\n\t}\n\n\thasExpandableRows() {\n\t\treturn this.data.some(data => data.some(d => d && d.expandedData)); // checking for some in 2D array\n\t}\n\n\t/**\n\t * Number of rows that can be expanded.\n\t *\n\t * @returns number\n\t */\n\texpandableRowsCount() {\n\t\treturn this.data.reduce((counter, _, index) => {\n\t\t\tcounter = (this.isRowExpandable(index)) ? counter + 1 : counter;\n\t\t\treturn counter;\n\t\t}, 0);\n\t}\n\n\tisRowExpandable(index: number) {\n\t\treturn this.data[index].some(d => d && d.expandedData);\n\t}\n\n\tisRowExpanded(index: number) {\n\t\treturn this.rowsExpanded[index];\n\t}\n\n\tgetRowContext(index: number) {\n\t\treturn this.rowsContext[index];\n\t}\n\n\t/**\n\t * Returns `index`th column of the table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tcolumn(index: number): TableItem[] {\n\t\tlet column = new Array();\n\t\tconst ri = this.realColumnIndex(index);\n\t\tconst rc = this.data.length;\n\n\t\tfor (let i = 0; i < rc; i++) {\n\t\t\tconst row = this.data[i];\n\t\t\tcolumn.push(row[ri]);\n\t\t}\n\n\t\treturn column;\n\t}\n\n\t/**\n\t * Adds a column to the `index`th column or appends to table if index not provided.\n\t *\n\t * If column is shorter than other columns or not provided, it will be padded with\n\t * empty `TableItem` elements.\n\t *\n\t * If column is longer than other columns, others will be extended to match so no data is lost.\n\t *\n\t * If called on an empty table with no parameters, it creates a 1x1 table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param [column]\n\t * @param [index]\n\t */\n\taddColumn(column?: TableItem[], index?: number) {\n\t\t// if table empty create table with row\n\t\tif (!this.data || this.data.length === 0 || this.data[0].length === 0) {\n\t\t\tlet newData = new Array>();\n\t\t\tif (column == null) {\n\t\t\t\tnewData.push([new TableItem()]);\n\t\t\t} else {\n\t\t\t\tfor (let i = 0; i < column.length; i++) {\n\t\t\t\t\tlet item = column[i];\n\t\t\t\t\tnewData.push([item]);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.data = newData;\n\n\t\t\treturn;\n\t\t}\n\n\t\tlet rc = this.data.length; // row count\n\t\tlet ci = this.realColumnIndex(index);\n\n\t\t// append missing rows\n\t\tfor (let i = 0; column != null && i < column.length - rc; i++) {\n\t\t\tthis.addRow();\n\t\t}\n\t\trc = this.data.length;\n\t\tif (index == null) {\n\t\t\t// append to end\n\t\t\tfor (let i = 0; i < rc; i++) {\n\t\t\t\tlet row = this.data[i];\n\t\t\t\trow.push(column == null || column[i] == null ? new TableItem() : column[i]);\n\t\t\t}\n\t\t\t// update header if not already set by user\n\t\t\tif (this.header.length < this.data[0].length) {\n\t\t\t\tthis.header.push(new TableHeaderItem());\n\t\t\t}\n\t\t} else {\n\t\t\tif (index >= this.data[0].length) {\n\t\t\t\t// if trying to append\n\t\t\t\tci++;\n\t\t\t}\n\t\t\t// insert\n\t\t\tfor (let i = 0; i < rc; i++) {\n\t\t\t\tlet row = this.data[i];\n\t\t\t\trow.splice(ci, 0, column == null || column[i] == null ? new TableItem() : column[i]);\n\t\t\t}\n\t\t\t// update header if not already set by user\n\t\t\tif (this.header.length < this.data[0].length) {\n\t\t\t\tthis.header.splice(ci, 0, new TableHeaderItem());\n\t\t\t}\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes `index`th column.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tdeleteColumn(index: number) {\n\t\tconst rci = this.realColumnIndex(index);\n\t\tconst rowCount = this.data.length;\n\t\tfor (let i = 0; i < rowCount; i++) {\n\t\t\tthis.data[i].splice(rci, 1);\n\t\t}\n\t\t// update header if not already set by user\n\t\tif (this.header.length > this.data[0].length) {\n\t\t\tthis.header.splice(rci, 1);\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\tmoveColumn(indexFrom: number, indexTo: number) {\n\t\tconst headerFrom = this.header[indexFrom];\n\n\t\tthis.addColumn(this.column(indexFrom), indexTo);\n\t\tthis.deleteColumn(indexFrom + (indexTo < indexFrom ? 1 : 0));\n\n\t\tthis.header[indexTo + (indexTo > indexFrom ? -1 : 0)] = headerFrom;\n\t}\n\n\t/**\n\t * cycle through the three sort states\n\t * @param index\n\t */\n\tcycleSortState(index: number) {\n\t\t// no sort provided so do the simple sort\n\t\tswitch (this.header[index].sortDirection) {\n\t\t\tcase \"ASCENDING\":\n\t\t\t\tthis.header[index].sortDirection = \"DESCENDING\";\n\t\t\t\tbreak;\n\t\t\tcase \"DESCENDING\":\n\t\t\t\tthis.header[index].sortDirection = \"NONE\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tthis.header[index].sortDirection = \"ASCENDING\";\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Sorts the data currently present in the model based on `compare()`\n\t *\n\t * Direction is set by `ascending` and `descending` properties of `TableHeaderItem`\n\t * in `index`th column.\n\t *\n\t * @param index The column based on which it's sorting\n\t */\n\tsort(index: number) {\n\t\tthis.pushRowStateToModelData();\n\t\tconst headerSorted = this.header[index].sorted;\n\t\t// We only allow sorting by a single column, so reset sort state for all columns before specifying new sort state\n\t\tthis.header.forEach(column => column.sorted = false);\n\t\tif (this.header[index].sortDirection === \"NONE\" && headerSorted) {\n\t\t\t// Restore initial order of rows\n\t\t\tconst oldData = this._data;\n\t\t\tthis._data = [];\n\t\t\tfor (let i = 0; i < this.rowsIndices.length; i++) {\n\t\t\t\tconst ri = this.rowsIndices[i];\n\t\t\t\tthis._data[ri] = oldData[i];\n\t\t\t}\n\t\t} else {\n\t\t\tconst descending = this.header[index].sortDirection === \"DESCENDING\" ? -1 : 1;\n\t\t\tthis.data.sort((a, b) => {\n\t\t\t\treturn descending * this.header[index].compare(a[index], b[index]);\n\t\t\t});\n\t\t\tthis.header[index].sorted = true;\n\t\t}\n\t\tthis.popRowStateFromModelData();\n\t}\n\n\t/**\n\t * Appends `rowsSelected` and `rowsExpanded` info to model data.\n\t *\n\t * When sorting rows, do this first so information about row selection\n\t * gets sorted with the other row info.\n\t *\n\t * Call `popRowSelectionFromModelData()` after sorting to make everything\n\t * right with the world again.\n\t */\n\tpushRowStateToModelData() {\n\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\tconst rowSelectedMark = new TableItem();\n\t\t\trowSelectedMark.data = this.rowsSelected[i];\n\t\t\tthis.data[i].push(rowSelectedMark);\n\n\t\t\tconst rowExpandedMark = new TableItem();\n\t\t\trowExpandedMark.data = this.rowsExpanded[i];\n\t\t\tthis.data[i].push(rowExpandedMark);\n\n\t\t\tconst rowContext = new TableItem();\n\t\t\trowContext.data = this.rowsContext[i];\n\t\t\tthis.data[i].push(rowContext);\n\n\t\t\tconst rowClass = new TableItem();\n\t\t\trowClass.data = this.rowsClass[i];\n\t\t\tthis.data[i].push(rowClass);\n\n\t\t\tconst rowIndex = new TableItem();\n\t\t\trowIndex.data = this.rowsIndices[i];\n\t\t\tthis.data[i].push(rowIndex);\n\t\t}\n\t}\n\n\t/**\n\t * Restores `rowsSelected` from data pushed by `pushRowSelectionToModelData()`\n\t *\n\t * Call after sorting data (if you previously pushed to maintain selection order)\n\t * to make everything right with the world again.\n\t */\n\tpopRowStateFromModelData() {\n\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\tthis.rowsIndices[i] = this.data[i].pop().data;\n\t\t\tthis.rowsClass[i] = this.data[i].pop().data;\n\t\t\tthis.rowsContext[i] = this.data[i].pop().data;\n\t\t\tthis.rowsExpanded[i] = !!this.data[i].pop().data;\n\t\t\tthis.rowsSelected[i] = !!this.data[i].pop().data;\n\t\t}\n\t}\n\n\t/**\n\t * Checks if row is filtered out.\n\t *\n\t * @param index\n\t * @returns true if any of the filters in header filters out the `index`th row\n\t */\n\tisRowFiltered(index: number): boolean {\n\t\tconst realIndex = this.realRowIndex(index);\n\t\treturn this.header.some((item, i) => item && item.filter(this.row(realIndex)[i]));\n\t}\n\n\t/**\n\t * Select/deselect `index`th row based on value\n\t *\n\t * @param index index of the row to select\n\t * @param value state to set the row to. Defaults to `true`\n\t */\n\tselectRow(index: number, value = true) {\n\t\tif (this.isRowDisabled(index)) {\n\t\t\treturn;\n\t\t}\n\t\tthis.rowsSelected[index] = value;\n\t\tthis.rowsSelectedChange.emit(index);\n\t}\n\n\t/**\n\t * Selects or deselects all rows in the model\n\t *\n\t * @param value state to set all rows to. Defaults to `true`\n\t */\n\tselectAll(value = true) {\n\t\tif (this.data.length >= 1 && this.data[0].length >= 1) {\n\t\t\tfor (let i = 0; i < this.rowsSelected.length; i++) {\n\t\t\t\tthis.selectRow(i, value);\n\t\t\t}\n\t\t}\n\t\tthis.selectAllChange.next(value);\n\t}\n\n\tisRowSelected(index: number) {\n\t\treturn this.rowsSelected[index];\n\t}\n\n\t/**\n\t * Checks if row is disabled or not.\n\t */\n\tisRowDisabled(index: number) {\n\t\tconst row = this.data[index] as TableRow;\n\t\treturn !!row.disabled;\n\t}\n\n\t/**\n\t * Expands/Collapses `index`th row based on value\n\t *\n\t * @param index index of the row to expand or collapse\n\t * @param value expanded state of the row. `true` is expanded and `false` is collapsed\n\t */\n\texpandRow(index: number, value = true) {\n\t\tthis.rowsExpanded[index] = value;\n\t\tthis.rowsExpandedChange.emit(index);\n\t}\n\n\t/**\n\t * Expands / collapses all rows\n\t *\n\t * @param value expanded state of the rows. `true` is expanded and `false` is collapsed\n\t */\n\texpandAllRows(value = true) {\n\t\tif (this.data.length > 0) {\n\t\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\t\tif (this.isRowExpandable(i)) {\n\t\t\t\t\tthis.rowsExpanded[i] = value;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (value) {\n\t\t\t\tthis.rowsExpandedAllChange.emit();\n\t\t\t} else {\n\t\t\t\tthis.rowsCollapsedAllChange.emit();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Gets the true index of a row based on it's relative position.\n\t * Like in Python, positive numbers start from the top and\n\t * negative numbers start from the bottom.\n\t *\n\t * @param index\n\t */\n\tprotected realRowIndex(index: number): number {\n\t\treturn this.realIndex(index, this.data.length);\n\t}\n\n\t/**\n\t * Gets the true index of a column based on it's relative position.\n\t * Like in Python, positive numbers start from the top and\n\t * negative numbers start from the bottom.\n\t *\n\t * @param index\n\t */\n\tprotected realColumnIndex(index: number): number {\n\t\treturn this.realIndex(index, this.data[0].length);\n\t}\n\n\t/**\n\t * Generic function to calculate the real index of something.\n\t * Used by `realRowIndex()` and `realColumnIndex()`\n\t *\n\t * @param index\n\t * @param length\n\t */\n\tprotected realIndex(index: number, length: number): number {\n\t\tif (index == null) {\n\t\t\treturn length - 1;\n\t\t} else if (index >= 0) {\n\t\t\treturn index >= length ? length - 1 : index;\n\t\t} else {\n\t\t\treturn -index >= length ? 0 : length + index;\n\t\t}\n\t}\n}\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 194 }, "inputsClass": [], "outputsClass": [], "properties": [ { "name": "currentPage", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

Tracks the current page.

\n", "line": 132, "rawdescription": "\n\nTracks the current page.\n" }, { "name": "dataChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 69 }, { "name": "header", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "TableHeaderItem[]", "optional": false, "description": "

Contains information about the header cells of the table.

\n", "line": 127, "rawdescription": "\n\nContains information about the header cells of the table.\n" }, { "name": "isEnd", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Set to true when there is no more data to load in the table

\n", "line": 142, "rawdescription": "\n\nSet to true when there is no more data to load in the table\n" }, { "name": "isLoading", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Set to true when lazy loading to show loading indicator

\n", "line": 147, "rawdescription": "\n\nSet to true when lazy loading to show loading indicator\n" }, { "name": "pageLength", "defaultValue": "10", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

Length of page.

\n", "line": 137, "rawdescription": "\n\nLength of page.\n" }, { "name": "rowsClass", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "string[]", "optional": false, "description": "

Contains class name(s) of the row.

\n

It affects styling of the row to reflect the appended class name(s).

\n

It's empty or undefined by default

\n", "line": 122, "rawdescription": "\n\nContains class name(s) of the row.\n\nIt affects styling of the row to reflect the appended class name(s).\n\nIt's empty or undefined by default\n" }, { "name": "rowsCollapsedAllChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 73 }, { "name": "rowsContext", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "string[]", "optional": false, "description": "

Contains information about the context of the row.

\n

It affects styling of the row to reflect the context.

\n

string can be one of "success" | "warning" | "info" | "error" | "" and it's\nempty or undefined by default

\n", "line": 113, "rawdescription": "\n\nContains information about the context of the row.\n\nIt affects styling of the row to reflect the context.\n\nstring can be one of `\"success\" | \"warning\" | \"info\" | \"error\" | \"\"` and it's\nempty or undefined by default\n" }, { "name": "rowsExpanded", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "boolean[]", "optional": false, "description": "

Contains information about expanded state of rows in the table.

\n", "line": 98, "rawdescription": "\n\nContains information about expanded state of rows in the table.\n" }, { "name": "rowsExpandedAllChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 72 }, { "name": "rowsExpandedChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 71 }, { "name": "rowsIndices", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "number[]", "optional": false, "description": "

Contains information about initial index of rows in the table

\n", "line": 103, "rawdescription": "\n\nContains information about initial index of rows in the table\n" }, { "name": "rowsSelected", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "boolean[]", "optional": false, "description": "

Contains information about selection state of rows in the table.

\n", "line": 93, "rawdescription": "\n\nContains information about selection state of rows in the table.\n" }, { "name": "rowsSelectedChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 70 }, { "name": "selectAllChange", "defaultValue": "new Subject()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Gets emitted when selectAll is called. Emits false if all rows are deselected and true if\nall rows are selected.

\n", "line": 78, "rawdescription": "\n\nGets emitted when `selectAll` is called. Emits false if all rows are deselected and true if\nall rows are selected.\n" } ], "description": "

TableModel represents a data model for two-dimensional data. It's used for all things table\n(table component, table toolbar, pagination, etc)

\n

TableModel manages its internal data integrity very well if you use the provided helper\nfunctions for modifying rows and columns and assigning header and data in that order.

\n

It also provides direct access to the data so you can read and modify it.\nIf you change the structure of the data (by directly pushing into the arrays or otherwise),\nkeep in mind to keep the data structure intact.

\n

Header length and length of every line in the data should be equal.

\n

If they are not consistent, unexpected things will happen.

\n

Use the provided functions when in doubt.

\n", "rawdescription": "\n\nTableModel represents a data model for two-dimensional data. It's used for all things table\n(table component, table toolbar, pagination, etc)\n\nTableModel manages its internal data integrity very well if you use the provided helper\nfunctions for modifying rows and columns and assigning header and data in that order.\n\nIt also provides direct access to the data so you can read and modify it.\nIf you change the structure of the data (by directly pushing into the arrays or otherwise),\nkeep in mind to keep the data structure intact.\n\nHeader length and length of every line in the data should be equal.\n\nIf they are not consistent, unexpected things will happen.\n\nUse the provided functions when in doubt.\n", "methods": [ { "name": "addColumn", "args": [ { "name": "column", "type": "TableItem[]", "deprecated": false, "deprecationMessage": "", "optional": true }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 484, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAdds a column to the `index`th column or appends to table if index not provided.\n\nIf column is shorter than other columns or not provided, it will be padded with\nempty `TableItem` elements.\n\nIf column is longer than other columns, others will be extended to match so no data is lost.\n\nIf called on an empty table with no parameters, it creates a 1x1 table.\n\nNegative index starts from the end. -1 being the last element.\n\n", "description": "

Adds a column to the indexth column or appends to table if index not provided.

\n

If column is shorter than other columns or not provided, it will be padded with\nempty TableItem elements.

\n

If column is longer than other columns, others will be extended to match so no data is lost.

\n

If called on an empty table with no parameters, it creates a 1x1 table.

\n

Negative index starts from the end. -1 being the last element.

\n", "jsdoctags": [ { "name": { "pos": 12434, "end": 12440, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "column" }, "type": "TableItem[]", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "pos": 12427, "end": 12432, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" }, { "name": { "pos": 12454, "end": 12459, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "pos": 12447, "end": 12452, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, { "name": "addRow", "args": [ { "name": "row", "type": "TableItem[]", "deprecated": false, "deprecationMessage": "", "optional": true }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 310, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAdds a row to the `index`th row or appends to table if index not provided.\n\nIf row is shorter than other rows or not provided, it will be padded with\nempty `TableItem` elements.\n\nIf row is longer than other rows, others will be extended to match so no data is lost.\n\nIf called on an empty table with no parameters, it creates a 1x1 table.\n\nNegative index starts from the end. -1 being the last element.\n\n", "description": "

Adds a row to the indexth row or appends to table if index not provided.

\n

If row is shorter than other rows or not provided, it will be padded with\nempty TableItem elements.

\n

If row is longer than other rows, others will be extended to match so no data is lost.

\n

If called on an empty table with no parameters, it creates a 1x1 table.

\n

Negative index starts from the end. -1 being the last element.

\n", "jsdoctags": [ { "name": { "pos": 7948, "end": 7951, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "row" }, "type": "TableItem[]", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "pos": 7941, "end": 7946, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" }, { "name": { "pos": 7965, "end": 7970, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "pos": 7958, "end": 7963, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, { "name": "column", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "TableItem[]", "typeParameters": [], "line": 456, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns `index`th column of the table.\n\nNegative index starts from the end. -1 being the last element.\n\n", "description": "

Returns indexth column of the table.

\n

Negative index starts from the end. -1 being the last element.

\n", "jsdoctags": [ { "name": { "pos": 11681, "end": 11686, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 11675, "end": 11680, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, { "name": "cycleSortState", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 572, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\ncycle through the three sort states\n", "description": "

cycle through the three sort states

\n", "jsdoctags": [ { "name": { "pos": 14746, "end": 14751, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 14740, "end": 14745, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, { "name": "deleteAllRows", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 417, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDeletes all rows.\n", "description": "

Deletes all rows.

\n" }, { "name": "deleteColumn", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 545, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDeletes `index`th column.\n\nNegative index starts from the end. -1 being the last element.\n\n", "description": "

Deletes indexth column.

\n

Negative index starts from the end. -1 being the last element.

\n", "jsdoctags": [ { "name": { "pos": 14045, "end": 14050, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 14039, "end": 14044, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, { "name": "deleteRow", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 399, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDeletes `index`th row.\n\nNegative index starts from the end. -1 being the last element.\n\n", "description": "

Deletes indexth row.

\n

Negative index starts from the end. -1 being the last element.

\n", "jsdoctags": [ { "name": { "pos": 10408, "end": 10413, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 10402, "end": 10407, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, { "name": "expandableRowsCount", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 430, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nNumber of rows that can be expanded.\n\n", "description": "

Number of rows that can be expanded.

\n", "jsdoctags": [ { "tagName": { "pos": 11114, "end": 11121, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "returns" }, "comment": "

number

\n" } ] }, { "name": "expandAllRows", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 734, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExpands / collapses all rows\n\n", "description": "

Expands / collapses all rows

\n", "jsdoctags": [ { "name": { "pos": 19393, "end": 19398, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "value" }, "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true", "tagName": { "pos": 19387, "end": 19392, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

expanded state of the rows. true is expanded and false is collapsed

\n" } ] }, { "name": "expandedRowsCount", "args": [], "optional": false, "returnType": "number", "typeParameters": [], "line": 272, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns how many rows is currently expanded\n", "description": "

Returns how many rows is currently expanded

\n" }, { "name": "expandRow", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 724, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExpands/Collapses `index`th row based on value\n\n", "description": "

Expands/Collapses indexth row based on value

\n", "jsdoctags": [ { "name": { "pos": 19081, "end": 19086, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 19075, "end": 19080, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

index of the row to expand or collapse

\n" }, { "name": { "pos": 19137, "end": 19142, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "value" }, "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true", "tagName": { "pos": 19131, "end": 19136, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

expanded state of the row. true is expanded and false is collapsed

\n" } ] }, { "name": "getHeader", "args": [ { "name": "column", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "TableHeaderItem", "typeParameters": [], "line": 239, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFinds closest header by trying the `column` and then working its way to the left\n\n", "description": "

Finds closest header by trying the column and then working its way to the left

\n", "jsdoctags": [ { "name": { "pos": 6487, "end": 6493, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "column" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 6481, "end": 6486, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the target column

\n" } ] }, { "name": "getHeaderId", "args": [ { "name": "column", "type": "HeaderType", "deprecated": false, "deprecationMessage": "" }, { "name": "colSpan", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "1" } ], "optional": false, "returnType": "string", "typeParameters": [], "line": 216, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the id of the header. Used to link the cells with headers (or headers with headers)\n\n", "description": "

Returns the id of the header. Used to link the cells with headers (or headers with headers)

\n", "jsdoctags": [ { "name": { "pos": 5903, "end": 5909, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "column" }, "type": "HeaderType", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 5897, "end": 5902, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the column to start getting headers for

\n" }, { "name": { "pos": 5961, "end": 5968, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "colSpan" }, "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "1", "tagName": { "pos": 5955, "end": 5960, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the number of columns to get headers for (defaults to 1)

\n" } ] }, { "name": "getId", "args": [ { "name": "column", "type": "HeaderType", "deprecated": false, "deprecationMessage": "" }, { "name": "row", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0" } ], "optional": false, "returnType": "string", "typeParameters": [], "line": 206, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns an id for the given column\n\n", "description": "

Returns an id for the given column

\n", "jsdoctags": [ { "name": { "pos": 5567, "end": 5573, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "column" }, "type": "HeaderType", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 5561, "end": 5566, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the column to generate an id for

\n" }, { "name": { "pos": 5618, "end": 5621, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "row" }, "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0", "tagName": { "pos": 5612, "end": 5617, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

the row of the header to generate an id for

\n" } ] }, { "name": "getRowContext", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 445, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "hasExpandableRows", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 421, "deprecated": false, "deprecationMessage": "" }, { "name": "isRowDisabled", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 713, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nChecks if row is disabled or not.\n", "description": "

Checks if row is disabled or not.

\n", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isRowExpandable", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 437, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isRowExpanded", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 441, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isRowFiltered", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 673, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nChecks if row is filtered out.\n\n", "description": "

Checks if row is filtered out.

\n", "jsdoctags": [ { "name": { "pos": 17836, "end": 17841, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 17830, "end": 17835, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" }, { "tagName": { "pos": 17847, "end": 17854, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "returns" }, "comment": "

true if any of the filters in header filters out the indexth row

\n" } ] }, { "name": "isRowSelected", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 706, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "moveColumn", "args": [ { "name": "indexFrom", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "indexTo", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 559, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "indexFrom", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "indexTo", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "popRowStateFromModelData", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 657, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRestores `rowsSelected` from data pushed by `pushRowSelectionToModelData()`\n\nCall after sorting data (if you previously pushed to maintain selection order)\nto make everything right with the world again.\n", "description": "

Restores rowsSelected from data pushed by pushRowSelectionToModelData()

\n

Call after sorting data (if you previously pushed to maintain selection order)\nto make everything right with the world again.

\n" }, { "name": "pushRowStateToModelData", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 627, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAppends `rowsSelected` and `rowsExpanded` info to model data.\n\nWhen sorting rows, do this first so information about row selection\ngets sorted with the other row info.\n\nCall `popRowSelectionFromModelData()` after sorting to make everything\nright with the world again.\n", "description": "

Appends rowsSelected and rowsExpanded info to model data.

\n

When sorting rows, do this first so information about row selection\ngets sorted with the other row info.

\n

Call popRowSelectionFromModelData() after sorting to make everything\nright with the world again.

\n" }, { "name": "row", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "TableItem[]", "typeParameters": [], "line": 291, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns `index`th row of the table.\n\nNegative index starts from the end. -1 being the last element.\n\n", "description": "

Returns indexth row of the table.

\n

Negative index starts from the end. -1 being the last element.

\n", "jsdoctags": [ { "name": { "pos": 7392, "end": 7397, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 7386, "end": 7391, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, { "name": "selectAll", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 697, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSelects or deselects all rows in the model\n\n", "description": "

Selects or deselects all rows in the model

\n", "jsdoctags": [ { "name": { "pos": 18509, "end": 18514, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "value" }, "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true", "tagName": { "pos": 18503, "end": 18508, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

state to set all rows to. Defaults to true

\n" } ] }, { "name": "selectedRowsCount", "args": [], "optional": false, "returnType": "number", "typeParameters": [], "line": 257, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns how many rows is currently selected\n", "description": "

Returns how many rows is currently selected

\n" }, { "name": "selectRow", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 684, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSelect/deselect `index`th row based on value\n\n", "description": "

Select/deselect indexth row based on value

\n", "jsdoctags": [ { "name": { "pos": 18172, "end": 18177, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 18166, "end": 18171, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

index of the row to select

\n" }, { "name": { "pos": 18216, "end": 18221, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "value" }, "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true", "tagName": { "pos": 18210, "end": 18215, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

state to set the row to. Defaults to true

\n" } ] }, { "name": "sort", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 595, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSorts the data currently present in the model based on `compare()`\n\nDirection is set by `ascending` and `descending` properties of `TableHeaderItem`\nin `index`th column.\n\n", "description": "

Sorts the data currently present in the model based on compare()

\n

Direction is set by ascending and descending properties of TableHeaderItem\nin indexth column.

\n", "jsdoctags": [ { "name": { "pos": 15333, "end": 15338, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 15327, "end": 15332, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

The column based on which it's sorting

\n" } ] } ], "indexSignatures": [], "extends": [], "accessors": { "data": { "name": "data", "setSignature": { "name": "data", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "newData", "type": "TableItem[][]", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 39, "rawdescription": "\n\nSets data of the table.\n\nMake sure all rows are the same length to keep the column count accurate.\n", "description": "

Sets data of the table.

\n

Make sure all rows are the same length to keep the column count accurate.

\n", "jsdoctags": [ { "name": "newData", "type": "TableItem[][]", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "data", "type": "", "returnType": "", "line": 86, "rawdescription": "\n\nGets the full data.\n\nYou can use it to alter individual `TableItem`s but if you need to change\ntable structure, use `addRow()` and/or `addColumn()`\n", "description": "

Gets the full data.

\n

You can use it to alter individual TableItems but if you need to change\ntable structure, use addRow() and/or addColumn()

\n" } }, "totalDataLength": { "name": "totalDataLength", "setSignature": { "name": "totalDataLength", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "length", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 163, "rawdescription": "\n\nManually set data length in case the data in the table doesn't\ncorrectly reflect all the data that table is to display.\n\nExample: if you have multiple pages of data that table will display\nbut you're loading one at a time.\n\nSet to `null` to reset to default behavior.\n", "description": "

Manually set data length in case the data in the table doesn't\ncorrectly reflect all the data that table is to display.

\n

Example: if you have multiple pages of data that table will display\nbut you're loading one at a time.

\n

Set to null to reset to default behavior.

\n", "jsdoctags": [ { "name": "length", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "totalDataLength", "type": "", "returnType": "", "line": 171, "rawdescription": "\n\nTotal length of data that table has access to, or the amount manually set\n", "description": "

Total length of data that table has access to, or the amount manually set

\n" } } }, "hostBindings": [], "hostListeners": [], "implements": [ "PaginationModel" ] }, { "name": "TableRow", "id": "class-TableRow-6d754191c9c7d50a9fe751bb6f972c5914ea795139bd868a57c89044a7f99e4939ed66f2f328d8acbe4a45a5b30652d4521fb80ebda1d74d3067477ff5f4ebfe", "file": "src/table/table-row.class.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "import { TableItem } from \"./table-item.class\";\n\n/**\n * Represents a table row, which is essentially an array of TableItem.\n */\nexport class TableRow extends Array {\n\t/**\n\t * Whether row is disabled or not.\n\t */\n\tdisabled = false;\n}\n", "inputsClass": [], "outputsClass": [], "properties": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Whether row is disabled or not.

\n", "line": 10, "rawdescription": "\n\nWhether row is disabled or not.\n" } ], "description": "

Represents a table row, which is essentially an array of TableItem.

\n", "rawdescription": "\n\nRepresents a table row, which is essentially an array of TableItem.\n", "methods": [], "indexSignatures": [], "extends": [ "Array" ], "hostBindings": [], "hostListeners": [] }, { "name": "TableRowAdapter", "id": "class-TableRowAdapter-255aa3d55b8577a1a700556d4d87e6b1c6ff653654b19775d484c85d046f477974ad65c5bcc92d63658ba1325a15b4edf6849df6061618c61a05d193f7bf5406", "file": "src/table/table-adapter.class.ts", "deprecated": false, "deprecationMessage": "", "type": "class", "sourceCode": "export abstract class TableCellAdapter {\n\t/**\n\t * The index of the cell in the table\n\t */\n\tcellIndex: number;\n\t/**\n\t * The number of columns spanned by this cell\n\t */\n\tcolSpan: number;\n\t/**\n\t * The number of rows spanned by this cell\n\t */\n\trowSpan: number;\n}\n\n/**\n * An abstract class that represents a row in a table\n */\nexport abstract class TableRowAdapter {\n\t/**\n\t * The index of the row in the table\n\t */\n\trowIndex: number;\n\t/**\n\t * An array (or `HTMLCollection`) of `TableCellAdapter`s\n\t */\n\tcells: HTMLCollection | TableCellAdapter[];\n}\n\n/**\n * An abstract representation of a table that provides\n * a standard interface to query 2d tables for cell and row information.\n */\nexport abstract class TableAdapter {\n\t/**\n\t * The last accessible column in the table\n\t */\n\tpublic get lastColumnIndex(): number { return; }\n\n\t/**\n\t * The last accessible row in the table\n\t */\n\tpublic get lastRowIndex(): number { return; }\n\n\t/**\n\t * Returns a cell from the table\n\t *\n\t * @param row index of the row\n\t * @param column index of the column\n\t */\n\tgetCell(row: number, column: number): TableCellAdapter { return; }\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param column index of the column\n\t */\n\tgetColumn(column: number): TableCellAdapter[] { return; }\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param row index of the row\n\t */\n\tgetRow(row: number): TableRowAdapter { return; }\n\n\t/**\n\t * Finds the column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindColumnIndex(cell: TableCellAdapter): number { return; }\n\n\t/**\n\t * Finds the row index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindRowIndex(cell: TableCellAdapter): number { return; }\n\n\t/**\n\t * Finds the row and column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t * @returns a tuple that follows the `[row, column]` convention\n\t */\n\tfindIndex(cell: TableCellAdapter): [number, number] { return; }\n}\n\nenum TableDomSpanDirection {\n\tcolSpan = \"colSpan\",\n\trowSpan = \"rowSpan\"\n}\n\n/**\n * A concrete implementation of `TableAdapter`\n *\n * Provides standard and consistent access to table cells and rows\n */\nexport class TableDomAdapter implements TableAdapter {\n\t/**\n\t * The last accessible column in the table\n\t */\n\tpublic get lastColumnIndex() {\n\t\treturn this.getRealRowLength(this.tableElement.rows[0]);\n\t}\n\n\t/**\n\t * The last accessible row in the table\n\t */\n\tpublic get lastRowIndex() {\n\t\treturn this.tableElement.rows.length - 1;\n\t}\n\n\t/**\n\t * `TableDomAdapter` works on a normal HTML table structure.\n\t * Custom tables that don't follow the standard structure should use a custom implementation of `TableAdapter`.\n\t *\n\t * The standard structure allows us to directly query rows for cells and indexes - though we do have to handle colspans specially.\n\t *\n\t * @param tableElement the root HTML table element.\n\t */\n\tconstructor(public tableElement: HTMLTableElement) { }\n\n\t/**\n\t * Returns a cell from the table taking colspans in to account.\n\t *\n\t * @param row index of the row\n\t * @param column index of the column\n\t */\n\tgetCell(row: number, column: number): HTMLTableCellElement {\n\t\tconst col = this.getColumn(column);\n\n\t\treturn this.findCellInColumn(col, row).cell;\n\t}\n\n\t/**\n\t * Returns a column from the table, using the `id` and `headers` attributes\n\t *\n\t * See here for more detail these attributes: https://www.w3.org/TR/WCAG20-TECHS/H43.html\n\t *\n\t * @param column the index of the column\n\t */\n\tgetColumn(column: number): HTMLTableCellElement[] {\n\t\tconst firstHeader = Array.from(this.tableElement.rows[0].cells);\n\n\t\tconst { cell: header, realIndex: realColumnIndex } = this.findCellInRow(firstHeader, column);\n\n\t\tconst linkedCells: HTMLTableCellElement[] = [];\n\n\t\tfor (let i = 1; i < this.tableElement.rows.length; i++) {\n\t\t\tconst row = this.tableElement.rows[i];\n\t\t\t// query for any cells that are linked to the given header id\n\t\t\t// `~=` matches values in space separated lists - so `[headers~='foo']` would match `headers=\"foo bar\"` and `headers=\"foo\"`\n\t\t\t// but not `headers=\"bar\"` or `headers=\"bar baz\"`\n\t\t\tconst linkedRowCells: NodeListOf = row.querySelectorAll(`[headers~='${header.id}']`);\n\t\t\t// if we have more than one cell, get the one that is closest to the column\n\t\t\tif (linkedRowCells.length > 1) {\n\t\t\t\tconst { cell } = this.findCellInRow(Array.from(linkedRowCells), column - realColumnIndex);\n\t\t\t\tlinkedCells.push(cell);\n\t\t\t} else if (linkedRowCells[0]) {\n\t\t\t\tlinkedCells.push(linkedRowCells[0]);\n\t\t\t}\n\t\t}\n\n\t\t// return an empty array if we can't find any linked cells\n\t\t// returning anything else would be a lie\n\t\tif (!linkedCells) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn [header, ...linkedCells];\n\t}\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param row index of the row\n\t */\n\tgetRow(row: number): HTMLTableRowElement {\n\t\treturn this.tableElement.rows[row];\n\t}\n\n\t/**\n\t * Finds the column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindColumnIndex(cell: HTMLTableCellElement): number {\n\t\tconst row = this.getRow(this.findRowIndex(cell));\n\t\tif (!row) {\n\t\t\treturn;\n\t\t}\n\t\t// if the cell has linked headers we can do a more accurate lookup\n\t\tif (cell && cell.headers) {\n\t\t\tconst ids = cell.headers.split(\" \");\n\t\t\tconst headerRows = Array.from(this.tableElement.tHead.rows);\n\t\t\tconst indexes = [];\n\n\t\t\t// start from the last row and work up\n\t\t\tfor (const headerRow of headerRows.reverse()) {\n\t\t\t\tconst headerCells = Array.from(headerRow.cells);\n\t\t\t\tconst header = headerCells.find(headerCell => ids.includes(headerCell.id));\n\t\t\t\t// if we have a matching header, find it's index (adjusting for colspans)\n\t\t\t\tif (header) {\n\t\t\t\t\t// this is borrowed from below\n\t\t\t\t\tlet cellIndex = 0;\n\t\t\t\t\tfor (const c of headerCells) {\n\t\t\t\t\t\tif (c === header) { break; }\n\t\t\t\t\t\tcellIndex += c.colSpan;\n\t\t\t\t\t}\n\t\t\t\t\tindexes.push(cellIndex);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// sort the indexes largest to smallest to find the closest matching header index\n\t\t\tconst firstIndex = indexes.sort((a, b) => b - a)[0];\n\n\t\t\t// search the row for cells that share the header\n\t\t\tlet similarCells = [];\n\t\t\tfor (const id of ids) {\n\t\t\t\t// there's no selector that will match two space separated lists,\n\t\t\t\t// so we have to iterate through the ids and query the row for each\n\t\t\t\tconst rowCells = Array.from(row.querySelectorAll(`[headers~='${id}']`));\n\t\t\t\tfor (const rowCell of rowCells) {\n\t\t\t\t\t// only keep one set of cells\n\t\t\t\t\tif (!similarCells.includes(rowCell)) {\n\t\t\t\t\t\tsimilarCells.push(rowCell);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// DOM order is not preserved, so we have to sort the row\n\t\t\tsimilarCells = similarCells.sort((a: HTMLTableCellElement, b: HTMLTableCellElement) => a.cellIndex - b.cellIndex);\n\n\t\t\t// return the header index plus any adjustment within that headers column\n\t\t\treturn firstIndex + similarCells.indexOf(cell);\n\t\t}\n\n\t\t// fallback if the cell isn't linked to any headers\n\t\tlet cellIndex = 0;\n\t\tfor (const c of Array.from(row.cells)) {\n\t\t\tif (c === cell) { break; }\n\t\t\tcellIndex += c.colSpan;\n\t\t}\n\t\treturn cellIndex;\n\t}\n\n\t/**\n\t * Finds the row index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindRowIndex(cell: HTMLTableCellElement): number {\n\t\tfor (const row of Array.from(this.tableElement.rows)) {\n\t\t\tif (row.contains(cell)) {\n\t\t\t\treturn row.rowIndex;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Finds the row and column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t * @returns a tuple that follows the `[row, column]` convention\n\t */\n\tfindIndex(cell: HTMLTableCellElement): [number, number] {\n\t\treturn [this.findRowIndex(cell), this.findColumnIndex(cell)];\n\t}\n\n\t/**\n\t * Helper function that returns the \"real\" length of a row.\n\t * Only accurate with regard to colspans (though that's sufficient for it's uses here)\n\t *\n\t * TODO: Take rowSpan into account\n\t *\n\t * @param row the row to get the length of\n\t */\n\tprotected getRealRowLength(row: HTMLTableRowElement): number {\n\t\t// start at -1 since the colspans will sum to 1 index greater than the total\n\t\treturn Array.from(row.cells).reduce((count, cell) => count + cell.colSpan, -1);\n\t}\n\n\t/**\n\t * Finds a cell and it's real index given an array of cells, a target index, and the spanning direction\n\t *\n\t * @param cells An array of cells to search\n\t * @param targetIndex The index we think the cell is located at\n\t * @param spanDirection The direction of the cell spans. Should be `\"colSpan\"` for a row and `\"rowSpan\"` for a column\n\t */\n\tprotected findCell(cells: HTMLTableCellElement[], targetIndex: number, spanDirection: TableDomSpanDirection) {\n\t\t// rows/cols can have fewer total cells than the actual table\n\t\t// the model pretends all rows/cols behave the same (with col/row spans > 1 being N cells long)\n\t\t// this maps that view to the HTML view (col/row spans > 1 are one element, so the array is shorter)\n\t\tlet realIndex = 0;\n\t\t// i is only used for iterating the cells\n\t\tfor (let i = 0; i < targetIndex;) {\n\t\t\t// skip the next N cells\n\t\t\ti += cells[realIndex][spanDirection];\n\t\t\t// don't bump realIndex if i now exceeds the cell we're shooting for\n\t\t\tif (i > targetIndex) { break; }\n\t\t\t// finally, increment realIndex (to keep it generally in step with i)\n\t\t\trealIndex++;\n\t\t}\n\n\t\treturn {\n\t\t\tcell: cells[realIndex],\n\t\t\trealIndex\n\t\t};\n\t}\n\n\t/**\n\t * Helper method around `findCell`, searches based on a row of cells\n\t *\n\t * @param row the row of elements to search\n\t * @param index the index of the element\n\t */\n\tprotected findCellInRow(row: HTMLTableCellElement[], index: number) {\n\t\treturn this.findCell(row, index, TableDomSpanDirection.colSpan);\n\t}\n\n\t/**\n\t * Helper method around `findCell`, searches based on a column of cells\n\t *\n\t * @param col the column of elements to search\n\t * @param index the index of the element\n\t */\n\tprotected findCellInColumn(col: HTMLTableCellElement[], index: number) {\n\t\treturn this.findCell(col, index, TableDomSpanDirection.rowSpan);\n\t}\n}\n", "inputsClass": [], "outputsClass": [], "properties": [ { "name": "cells", "deprecated": false, "deprecationMessage": "", "type": "HTMLCollection | TableCellAdapter[]", "optional": false, "description": "

An array (or HTMLCollection) of TableCellAdapters

\n", "line": 30, "rawdescription": "\n\nAn array (or `HTMLCollection`) of `TableCellAdapter`s\n" }, { "name": "rowIndex", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

The index of the row in the table

\n", "line": 26, "rawdescription": "\n\nThe index of the row in the table\n" } ], "description": "

An abstract class that represents a row in a table

\n", "rawdescription": "\n\nAn abstract class that represents a row in a table\n", "methods": [], "indexSignatures": [], "extends": [], "hostBindings": [], "hostListeners": [] } ], "directives": [ { "name": "AbstractDropdownView", "id": "directive-AbstractDropdownView-affd7abca9ae76ab371edd38d430135265b0ce843569e13517d5b7c2fd7b6bcebb5f93efacf903e20c8f37fa3829f23bed1f15d9a909ac2793aa5f2b3e649515", "file": "src/dropdown/abstract-dropdown-view.class.ts", "type": "directive", "description": "

A component that intends to be used within Dropdown must provide an implementation that extends this base class.\nIt also must provide the base class in the @Component meta-data.\nex: providers: [{provide: AbstractDropdownView, useExisting: forwardRef(() => MyDropdownView)}]

\n", "rawdescription": "\n\nA component that intends to be used within `Dropdown` must provide an implementation that extends this base class.\nIt also must provide the base class in the `@Component` meta-data.\nex: `providers: [{provide: AbstractDropdownView, useExisting: forwardRef(() => MyDropdownView)}]`\n", "sourceCode": "import {\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tDirective\n} from \"@angular/core\";\nimport { ListItem } from \"./list-item.interface\";\nimport { Observable } from \"rxjs\";\n\n\n/**\n * A component that intends to be used within `Dropdown` must provide an implementation that extends this base class.\n * It also must provide the base class in the `@Component` meta-data.\n * ex: `providers: [{provide: AbstractDropdownView, useExisting: forwardRef(() => MyDropdownView)}]`\n */\n@Directive({\n\tselector: \"[cdsAbstractDropdownView], [ibmAbstractDropdownView]\"\n})\nexport class AbstractDropdownView {\n\t/**\n\t * The items to be displayed in the list within the `AbstractDropDownView`.\n\t */\n\t@Input() set items(value: Array | Observable>) { }\n\n\tget items(): Array | Observable> { return; }\n\t/**\n\t * Emits selection events to controlling classes\n\t */\n\t@Output() select: EventEmitter<{item: ListItem } | ListItem[]>;\n\t/**\n\t * Event to suggest a blur on the view.\n\t * Emits _after_ the first/last item has been focused.\n\t * ex.\n\t * ArrowUp -> focus first item\n\t * ArrowUp -> emit event\n\t *\n\t * It's recommended that the implementing view include a specific type union of possible blurs\n\t * ex. `@Output() blurIntent = new EventEmitter<\"top\" | \"bottom\">();`\n\t */\n\t@Output() blurIntent: EventEmitter;\n\t/**\n\t * Specifies whether or not the `DropdownList` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\tpublic type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Specifies the render size of the items within the `AbstractDropdownView`.\n\t */\n\tpublic size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\tpublic listId?: string;\n\t/**\n\t * Returns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n\t */\n\tgetNextItem(): ListItem { return; }\n\t/**\n\t * Returns a boolean if the currently selected item is preceded by another\n\t */\n\thasNextElement(): boolean { return; }\n\t/**\n\t * Returns the `HTMLElement` for the item that is subsequent to the selected item.\n\t */\n\tgetNextElement(): HTMLElement { return; }\n\t/**\n\t * Returns the `ListItem` that precedes the selected item within `DropdownList`.\n\t */\n\tgetPrevItem(): ListItem { return; }\n\t/**\n\t * Returns a boolean if the currently selected item is followed by another\n\t */\n\thasPrevElement(): boolean { return; }\n\t/**\n\t * Returns the `HTMLElement` for the item that precedes the selected item.\n\t */\n\tgetPrevElement(): HTMLElement { return; }\n\t/**\n\t * Returns the selected leaf level item(s) within the `DropdownList`.\n\t */\n\tgetSelected(): ListItem[] { return; }\n\t/**\n\t * Returns the `ListItem` that is selected within `DropdownList`.\n\t */\n\tgetCurrentItem(): ListItem { return; }\n\t/**\n\t * Returns the `HTMLElement` for the item that is selected within the `DropdownList`.\n\t */\n\tgetCurrentElement(): HTMLElement { return; }\n\t/**\n\t * Guaranteed to return the current items as an Array.\n\t */\n\tgetListItems(): Array { return; }\n\t/**\n\t * Transforms array input list of items to the correct state by updating the selected item(s).\n\t */\n\tpropagateSelected(value: Array): void {}\n\t/**\n\t *\n\t * @param value value to filter the list by\n\t */\n\tfilterBy(value: string): void {}\n\t/**\n\t * Initializes focus in the list\n\t * In most cases this just calls `getCurrentElement().focus()`\n\t */\n\tinitFocus(): void {}\n\t/**\n\t * Subscribe the function passed to an internal observable that will resolve once the items are ready\n\t */\n\tonItemsReady(subcription: () => void): void {}\n\t/**\n\t * Reorder selected items bringing them to the top of the list\n\t */\n\treorderSelected(moveFocus?: boolean): void {}\n}\n", "selector": "[cdsAbstractDropdownView], [ibmAbstractDropdownView]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "items", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe items to be displayed in the list within the `AbstractDropDownView`.\n", "description": "

The items to be displayed in the list within the AbstractDropDownView.

\n", "line": 23, "type": "Array | Observable", "decorators": [] } ], "outputsClass": [ { "name": "blurIntent", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEvent to suggest a blur on the view.\nEmits _after_ the first/last item has been focused.\nex.\nArrowUp -> focus first item\nArrowUp -> emit event\n\nIt's recommended that the implementing view include a specific type union of possible blurs\nex. `@Output() blurIntent = new EventEmitter<\"top\" | \"bottom\">();`\n", "description": "

Event to suggest a blur on the view.\nEmits after the first/last item has been focused.\nex.\nArrowUp -> focus first item\nArrowUp -> emit event

\n

It's recommended that the implementing view include a specific type union of possible blurs\nex. @Output() blurIntent = new EventEmitter<"top" | "bottom">();

\n", "line": 40, "type": "EventEmitter" }, { "name": "select", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits selection events to controlling classes\n", "description": "

Emits selection events to controlling classes

\n", "line": 29, "type": "EventEmitter" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "propertiesClass": [ { "name": "listId", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": true, "description": "", "line": 50, "modifierKind": [ 125 ] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "type": "\"sm\" | \"md\" | \"lg\"", "optional": false, "description": "

Specifies the render size of the items within the AbstractDropdownView.

\n", "line": 49, "rawdescription": "\n\nSpecifies the render size of the items within the `AbstractDropdownView`.\n", "modifierKind": [ 125 ] }, { "name": "type", "defaultValue": "\"single\"", "deprecated": false, "deprecationMessage": "", "type": "\"single\" | \"multi\"", "optional": false, "description": "

Specifies whether or not the DropdownList supports selecting multiple items as opposed to single\nitem selection.

\n", "line": 45, "rawdescription": "\n\nSpecifies whether or not the `DropdownList` supports selecting multiple items as opposed to single\nitem selection.\n", "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "filterBy", "args": [ { "name": "value", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 99, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n\n", "description": "", "jsdoctags": [ { "name": { "pos": 3110, "end": 3115, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "value" }, "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3104, "end": 3109, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

value to filter the list by

\n" } ] }, { "name": "getCurrentElement", "args": [], "optional": false, "returnType": "HTMLElement", "typeParameters": [], "line": 86, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the `HTMLElement` for the item that is selected within the `DropdownList`.\n", "description": "

Returns the HTMLElement for the item that is selected within the DropdownList.

\n" }, { "name": "getCurrentItem", "args": [], "optional": false, "returnType": "ListItem", "typeParameters": [], "line": 82, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the `ListItem` that is selected within `DropdownList`.\n", "description": "

Returns the ListItem that is selected within DropdownList.

\n" }, { "name": "getListItems", "args": [], "optional": false, "returnType": "Array", "typeParameters": [], "line": 90, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nGuaranteed to return the current items as an Array.\n", "description": "

Guaranteed to return the current items as an Array.

\n" }, { "name": "getNextElement", "args": [], "optional": false, "returnType": "HTMLElement", "typeParameters": [], "line": 62, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the `HTMLElement` for the item that is subsequent to the selected item.\n", "description": "

Returns the HTMLElement for the item that is subsequent to the selected item.

\n" }, { "name": "getNextItem", "args": [], "optional": false, "returnType": "ListItem", "typeParameters": [], "line": 54, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n", "description": "

Returns the ListItem that is subsequent to the selected item in the DropdownList.

\n" }, { "name": "getPrevElement", "args": [], "optional": false, "returnType": "HTMLElement", "typeParameters": [], "line": 74, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the `HTMLElement` for the item that precedes the selected item.\n", "description": "

Returns the HTMLElement for the item that precedes the selected item.

\n" }, { "name": "getPrevItem", "args": [], "optional": false, "returnType": "ListItem", "typeParameters": [], "line": 66, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the `ListItem` that precedes the selected item within `DropdownList`.\n", "description": "

Returns the ListItem that precedes the selected item within DropdownList.

\n" }, { "name": "getSelected", "args": [], "optional": false, "returnType": "ListItem[]", "typeParameters": [], "line": 78, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the selected leaf level item(s) within the `DropdownList`.\n", "description": "

Returns the selected leaf level item(s) within the DropdownList.

\n" }, { "name": "hasNextElement", "args": [], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 58, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns a boolean if the currently selected item is preceded by another\n", "description": "

Returns a boolean if the currently selected item is preceded by another

\n" }, { "name": "hasPrevElement", "args": [], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 70, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns a boolean if the currently selected item is followed by another\n", "description": "

Returns a boolean if the currently selected item is followed by another

\n" }, { "name": "initFocus", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 104, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nInitializes focus in the list\nIn most cases this just calls `getCurrentElement().focus()`\n", "description": "

Initializes focus in the list\nIn most cases this just calls getCurrentElement().focus()

\n" }, { "name": "onItemsReady", "args": [ { "name": "subcription", "type": "function", "deprecated": false, "deprecationMessage": "", "function": [] } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 108, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSubscribe the function passed to an internal observable that will resolve once the items are ready\n", "description": "

Subscribe the function passed to an internal observable that will resolve once the items are ready

\n", "jsdoctags": [ { "name": "subcription", "type": "function", "deprecated": false, "deprecationMessage": "", "function": [], "tagName": { "text": "param" } } ] }, { "name": "propagateSelected", "args": [ { "name": "value", "type": "Array", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 94, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTransforms array input list of items to the correct state by updating the selected item(s).\n", "description": "

Transforms array input list of items to the correct state by updating the selected item(s).

\n", "jsdoctags": [ { "name": "value", "type": "Array", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "reorderSelected", "args": [ { "name": "moveFocus", "type": "boolean", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 112, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReorder selected items bringing them to the top of the list\n", "description": "

Reorder selected items bringing them to the top of the list

\n", "jsdoctags": [ { "name": "moveFocus", "type": "boolean", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "text": "param" } } ] } ], "extends": [], "accessors": { "items": { "name": "items", "setSignature": { "name": "items", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "Array | Observable>", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 23, "rawdescription": "\n\nThe items to be displayed in the list within the `AbstractDropDownView`.\n", "description": "

The items to be displayed in the list within the AbstractDropDownView.

\n", "jsdoctags": [ { "name": "value", "type": "Array | Observable>", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "items", "type": "", "returnType": "Array | Observable", "line": 25 } } } }, { "name": "ActionableButton", "id": "directive-ActionableButton-49faaaf9cac539b07c3aa64264a078a9692cae93b9bbe9872b1f6770e5b5cdffa266b6d65e969d0e73029478a4ededfef6eacafa81722afaa6eb8c50d0d5a984", "file": "src/notification/actionable-button.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsActionableButton], [ibmActionableButton]\"\n})\nexport class ActionableButton {\n\t@HostBinding(\"class.cds--actionable-notification__action-button\") actionableButton = true;\n\t@HostBinding(\"attr.type\") type = \"button\";\n}\n", "selector": "[cdsActionableButton], [ibmActionableButton]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.type", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "line": 8, "type": "string", "decorators": [] }, { "name": "class.cds--actionable-notification__action-button", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "actionableButton", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--actionable-notification__action-button'" } ], "modifierKind": [ 170 ] }, { "name": "type", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 8, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.type'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ActionableSubtitle", "id": "directive-ActionableSubtitle-00f683b63f22e58ad51e1d72169711a5081e79e2a8d09bb7a4d16c4b44aae6203c0dff5974d6061deda04eebb914a45d36bcd776b776a48d3eb12cffe2ea23a0", "file": "src/notification/actionable-subtitle.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsActionableSubtitle], [ibmActionableSubtitle]\"\n})\nexport class ActionableSubtitle {\n\t@HostBinding(\"class.cds--actionable-notification__subtitle\") baseClass = true;\n}\n", "selector": "[cdsActionableSubtitle], [ibmActionableSubtitle]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--actionable-notification__subtitle", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "baseClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--actionable-notification__subtitle'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ActionableTitle", "id": "directive-ActionableTitle-124b12969470a5a88a72cfb39e5e1ea1fe7705522f3239ba7c04f493e26c122a6ac0e2b8a3587471eaae31e72d6e15c38f6ba381faaa31ee1da4c9c93f0582a8", "file": "src/notification/actionable-title.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsActionableTitle], [ibmActionableTitle]\"\n})\nexport class ActionableTitle {\n\t@HostBinding(\"class.cds--actionable-notification__title\") baseClass = true;\n}\n", "selector": "[cdsActionableTitle], [ibmActionableTitle]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--actionable-notification__title", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "baseClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--actionable-notification__title'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "BaseModal", "id": "directive-BaseModal-d8347362b4c8b2a962c04c43075c574d038768020fb11f313178a7199c25760bc83538501c0834382307a5b30cecce3ec90d5e468ad58291de23571ba48cbac5", "file": "src/modal/base-modal.class.ts", "type": "directive", "description": "

Extend BaseModal in your custom modal implementations to ensure consistent close behavior.

\n

ModalService depends on the close event to correctly clean up the component.

\n", "rawdescription": "\n\nExtend `BaseModal` in your custom modal implementations to ensure consistent close behavior.\n\n`ModalService` depends on the `close` event to correctly clean up the component.\n", "sourceCode": "import {\n\tOutput,\n\tEventEmitter,\n\tInput,\n\tDirective\n} from \"@angular/core\";\n\n/**\n * Extend `BaseModal` in your custom modal implementations to ensure consistent close behavior.\n *\n * `ModalService` depends on the `close` event to correctly clean up the component.\n */\n@Directive({\n\tselector: \"[cdsBaseModal], [ibmBaseModal]\"\n})\nexport class BaseModal {\n\t/**\n\t * Base event emitter to propagate close events\n\t */\n\t@Output() close = new EventEmitter();\n\n\t/**\n\t * Controls the open state of the modal\n\t */\n\t@Input() open = false;\n\n\t/**\n\t * Default method to handle closing the modal\n\t */\n\tcloseModal(): void {\n\t\tthis.close.emit();\n\t}\n}\n", "selector": "[cdsBaseModal], [ibmBaseModal]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the open state of the modal\n", "description": "

Controls the open state of the modal

\n", "line": 25, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nBase event emitter to propagate close events\n", "description": "

Base event emitter to propagate close events

\n", "line": 20, "type": "EventEmitter" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "propertiesClass": [], "methodsClass": [ { "name": "closeModal", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 30, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefault method to handle closing the modal\n", "description": "

Default method to handle closing the modal

\n" } ], "extends": [] }, { "name": "Button", "id": "directive-Button-e585dd419d2fc1db53d2420f6fa77a9fd1e503e59d435660efa0b6f20bd08dd836ecf8c465672d5f781cf3243045d85a42f5fe45ca3da0e53800322a3c4afad5", "file": "src/button/button.directive.ts", "type": "directive", "description": "

A convenience directive for applying styling to a button. Get started with importing the module:

\nExample :
import { ButtonModule } from 'carbon-components-angular';

Example:

\nExample :
<button cdsButton>A button</button>\n<button cdsButton="secondary">A secondary button</button>

See the vanilla carbon docs for more detail.

\n

See demo

\n", "rawdescription": "\n\nA convenience directive for applying styling to a button. Get started with importing the module:\n\n```typescript\nimport { ButtonModule } from 'carbon-components-angular';\n```\n\nExample:\n\n```html\n\n\n```\n\nSee the [vanilla carbon docs](http://www.carbondesignsystem.com/components/button/code) for more detail.\n\n[See demo](../../?path=/story/components-button--basic)\n", "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\nimport { ButtonSize, ButtonType } from \"./button.types\";\n\n/**\n * A convenience directive for applying styling to a button. Get started with importing the module:\n *\n * ```typescript\n * import { ButtonModule } from 'carbon-components-angular';\n * ```\n *\n * Example:\n *\n * ```html\n * \n * \n * ```\n *\n * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/button/code) for more detail.\n *\n * [See demo](../../?path=/story/components-button--basic)\n */\n@Directive({\n\tselector: \"[cdsButton], [ibmButton]\"\n})\nexport class Button {\n\t/**\n\t * @deprecated as of v5 - Use `cdsButton` input property instead\n\t */\n\t@Input() set ibmButton(type: ButtonType) {\n\t\tthis.cdsButton = type;\n\t}\n\t/**\n\t * Sets the button type\n\t * Accepts `ButtonType` or nothing (empty string which is equivalent to \"primary\")\n\t * Empty string has been added as an option for Angular 16+ to resolve type errors\n\t */\n\t@Input() cdsButton: ButtonType | \"\" = \"primary\";\n\t/**\n\t * Specify the size of the button\n\t */\n\t@Input() size: ButtonSize;\n\t/**\n\t * Set to `true` for a skeleton state button\n\t */\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\t/**\n\t * Set to `true` if the button contains only an icon\n\t * This should only be used for creating custom icon buttons, otherwise use\n\t * `` component\n\t */\n\t@HostBinding(\"class.cds--btn--icon-only\") @Input() iconOnly = false;\n\n\t/**\n\t * Set to `true` for a \"expressive\" style button\n\t */\n\t@HostBinding(\"class.cds--btn--expressive\") @Input() isExpressive = false;\n\n\t// a whole lot of HostBindings ... this way we don't have to touch the elementRef directly\n\t@HostBinding(\"class.cds--btn\") baseClass = true;\n\t@HostBinding(\"class.cds--btn--primary\") get primaryButton() {\n\t\treturn this.cdsButton === \"primary\" || !this.cdsButton;\n\t}\n\t@HostBinding(\"class.cds--btn--secondary\") get secondaryButton() {\n\t\treturn this.cdsButton === \"secondary\";\n\t}\n\t@HostBinding(\"class.cds--btn--tertiary\") get tertiaryButton() {\n\t\treturn this.cdsButton === \"tertiary\";\n\t}\n\t@HostBinding(\"class.cds--btn--ghost\") get ghostButton() {\n\t\treturn this.cdsButton === \"ghost\";\n\t}\n\t@HostBinding(\"class.cds--btn--danger\") get dangerButton() {\n\t\treturn this.cdsButton === \"danger\" || this.cdsButton === \"danger--primary\";\n\t}\n\t@HostBinding(\"class.cds--btn--danger--tertiary\") get dangerTertiary() {\n\t\treturn this.cdsButton === \"danger--tertiary\";\n\t}\n\t@HostBinding(\"class.cds--btn--danger--ghost\") get dangerGhost() {\n\t\treturn this.cdsButton === \"danger--ghost\";\n\t}\n\t/**\n\t * @todo remove `cds--btn--${size}` classes in v12\n\t */\n\t@HostBinding(\"class.cds--btn--sm\") get smallSize() {\n\t\treturn this.size === \"sm\" && !this.isExpressive;\n\t}\n\t@HostBinding(\"class.cds--btn--md\") get mediumSize() {\n\t\treturn this.size === \"md\" && !this.isExpressive;\n\t}\n\t@HostBinding(\"class.cds--btn--lg\") get largeSize() {\n\t\treturn this.size === \"lg\";\n\t}\n\t@HostBinding(\"class.cds--btn--xl\") get extraLargeSize() {\n\t\treturn this.size === \"xl\";\n\t}\n\t@HostBinding(\"class.cds--btn--2xl\") get twoExtraLargeSize() {\n\t\treturn this.size === \"2xl\";\n\t}\n\n\t// Size classes\n\t@HostBinding(\"class.cds--layout--size-sm\") get smallLayoutSize() {\n\t\treturn this.size === \"sm\" && !this.isExpressive;\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get mediumLayoutSize() {\n\t\treturn this.size === \"md\" && !this.isExpressive;\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get largeLayoutSize() {\n\t\treturn this.size === \"lg\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-xl\") get extraLargeLayoutSize() {\n\t\treturn this.size === \"xl\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-2xl\") get twoExtraLargeLayoutSize() {\n\t\treturn this.size === \"2xl\";\n\t}\n\n\n}\n", "selector": "[cdsButton], [ibmButton]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "cdsButton", "defaultValue": "\"primary\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the button type\nAccepts `ButtonType` or nothing (empty string which is equivalent to \"primary\")\nEmpty string has been added as an option for Angular 16+ to resolve type errors\n", "description": "

Sets the button type\nAccepts ButtonType or nothing (empty string which is equivalent to "primary")\nEmpty string has been added as an option for Angular 16+ to resolve type errors

\n", "line": 41, "type": "ButtonType | string", "decorators": [] }, { "name": "ibmButton", "deprecated": true, "deprecationMessage": "as of v5 - Use `cdsButton` input property instead", "jsdoctags": [ { "pos": 714, "end": 778, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 715, "end": 725, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

as of v5 - Use cdsButton input property instead

\n" } ], "line": 33, "type": "ButtonType", "decorators": [] }, { "name": "iconOnly", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` if the button contains only an icon\nThis should only be used for creating custom icon buttons, otherwise use\n`` component\n", "description": "

Set to true if the button contains only an icon\nThis should only be used for creating custom icon buttons, otherwise use\n<cds-icon-button></cds-icon-button> component

\n", "line": 55, "type": "boolean", "decorators": [] }, { "name": "isExpressive", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a \"expressive\" style button\n", "description": "

Set to true for a "expressive" style button

\n", "line": 60, "type": "boolean", "decorators": [] }, { "name": "size", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the size of the button\n", "description": "

Specify the size of the button

\n", "line": 45, "type": "ButtonSize", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a skeleton state button\n", "description": "

Set to true for a skeleton state button

\n", "line": 49, "type": "boolean", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--btn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 63, "type": "boolean", "decorators": [] }, { "name": "class.cds--btn--2xl", "deprecated": false, "deprecationMessage": "", "line": 100, "type": "boolean", "decorators": [] }, { "name": "class.cds--btn--danger", "deprecated": false, "deprecationMessage": "", "line": 76, "type": "boolean", "decorators": [] }, { "name": "class.cds--btn--danger--ghost", "deprecated": false, "deprecationMessage": "", "line": 82, "type": "boolean", "decorators": [] }, { "name": "class.cds--btn--danger--tertiary", "deprecated": false, "deprecationMessage": "", "line": 79, "type": "boolean", "decorators": [] }, { "name": "class.cds--btn--ghost", "deprecated": false, "deprecationMessage": "", "line": 73, "type": "boolean", "decorators": [] }, { "name": "class.cds--btn--lg", "deprecated": false, "deprecationMessage": "", "line": 94, "type": "boolean", "decorators": [] }, { "name": "class.cds--btn--md", "deprecated": false, "deprecationMessage": "", "line": 91, "type": "boolean", "decorators": [] }, { "name": "class.cds--btn--primary", "deprecated": false, "deprecationMessage": "", "line": 64, "type": "boolean", "decorators": [] }, { "name": "class.cds--btn--secondary", "deprecated": false, "deprecationMessage": "", "line": 67, "type": "boolean", "decorators": [] }, { "name": "class.cds--btn--sm", "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "pos": 2673, "end": 2723, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 2674, "end": 2678, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "

remove cds--btn--${size} classes in v12

\n" } ], "line": 88, "type": "boolean", "decorators": [] }, { "name": "class.cds--btn--tertiary", "deprecated": false, "deprecationMessage": "", "line": 70, "type": "boolean", "decorators": [] }, { "name": "class.cds--btn--xl", "deprecated": false, "deprecationMessage": "", "line": 97, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-2xl", "deprecated": false, "deprecationMessage": "", "line": 117, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-lg", "deprecated": false, "deprecationMessage": "", "line": 111, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-md", "deprecated": false, "deprecationMessage": "", "line": 108, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-sm", "deprecated": false, "deprecationMessage": "", "line": 105, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-xl", "deprecated": false, "deprecationMessage": "", "line": 114, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "baseClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 63, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--btn'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [], "accessors": { "ibmButton": { "name": "ibmButton", "setSignature": { "name": "ibmButton", "type": "void", "deprecated": true, "deprecationMessage": "

as of v5 - Use cdsButton input property instead

\n", "args": [ { "name": "type", "type": "ButtonType", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 33, "rawdescription": "\n\n", "description": "", "jsdoctags": [ { "name": "type", "type": "ButtonType", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "primaryButton": { "name": "primaryButton", "getSignature": { "name": "primaryButton", "type": "", "returnType": "", "line": 64 } }, "secondaryButton": { "name": "secondaryButton", "getSignature": { "name": "secondaryButton", "type": "", "returnType": "", "line": 67 } }, "tertiaryButton": { "name": "tertiaryButton", "getSignature": { "name": "tertiaryButton", "type": "", "returnType": "", "line": 70 } }, "ghostButton": { "name": "ghostButton", "getSignature": { "name": "ghostButton", "type": "", "returnType": "", "line": 73 } }, "dangerButton": { "name": "dangerButton", "getSignature": { "name": "dangerButton", "type": "", "returnType": "", "line": 76 } }, "dangerTertiary": { "name": "dangerTertiary", "getSignature": { "name": "dangerTertiary", "type": "", "returnType": "", "line": 79 } }, "dangerGhost": { "name": "dangerGhost", "getSignature": { "name": "dangerGhost", "type": "", "returnType": "", "line": 82 } }, "smallSize": { "name": "smallSize", "getSignature": { "name": "smallSize", "type": "", "returnType": "", "line": 88, "rawdescription": "\n\n", "description": "", "jsdoctags": [ { "pos": 2673, "end": 2723, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 2674, "end": 2678, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "

remove cds--btn--${size} classes in v12

\n" } ] } }, "mediumSize": { "name": "mediumSize", "getSignature": { "name": "mediumSize", "type": "", "returnType": "", "line": 91 } }, "largeSize": { "name": "largeSize", "getSignature": { "name": "largeSize", "type": "", "returnType": "", "line": 94 } }, "extraLargeSize": { "name": "extraLargeSize", "getSignature": { "name": "extraLargeSize", "type": "", "returnType": "", "line": 97 } }, "twoExtraLargeSize": { "name": "twoExtraLargeSize", "getSignature": { "name": "twoExtraLargeSize", "type": "", "returnType": "", "line": 100 } }, "smallLayoutSize": { "name": "smallLayoutSize", "getSignature": { "name": "smallLayoutSize", "type": "", "returnType": "", "line": 105 } }, "mediumLayoutSize": { "name": "mediumLayoutSize", "getSignature": { "name": "mediumLayoutSize", "type": "", "returnType": "", "line": 108 } }, "largeLayoutSize": { "name": "largeLayoutSize", "getSignature": { "name": "largeLayoutSize", "type": "", "returnType": "", "line": 111 } }, "extraLargeLayoutSize": { "name": "extraLargeLayoutSize", "getSignature": { "name": "extraLargeLayoutSize", "type": "", "returnType": "", "line": 114 } }, "twoExtraLargeLayoutSize": { "name": "twoExtraLargeLayoutSize", "getSignature": { "name": "twoExtraLargeLayoutSize", "type": "", "returnType": "", "line": 117 } } } }, { "name": "ClickableTileIconDirective", "id": "directive-ClickableTileIconDirective-fa5916c0819be0532c4ac5cdb691ae98ed64330482b5f926e8908d4553bac142acceaf5aa1433441ad004b6a3f3f95ca0086fb12bd39e0ec0c6b7b698190883c", "file": "src/tiles/clickable-tile-icon.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsClickableTileIcon], [ibmClickableTileIcon]\"\n})\nexport class ClickableTileIconDirective {\n\t@HostBinding(\"class.cds--tile--icon\") icon = true;\n}\n", "selector": "[cdsClickableTileIcon], [ibmClickableTileIcon]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--tile--icon", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "icon", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--tile--icon'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ColumnDirective", "id": "directive-ColumnDirective-16fe516e9b51bd48ec634b2af4811ab3d25003cf401d48dd723538b3d00d673c939688b9109e099ab2fc8c0271c9b5acdae62fb614c2d1eab7c24d65341dde38", "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 *
\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 *
\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", "selector": "[cdsCol], [ibmCol]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "class", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 25, "type": "string", "decorators": [] }, { "name": "columnHang", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to use css grid column hang class\nThis will only work when `isCss` property is set to true\n\nUseful when trying to align content across css grid/subgrid\n", "description": "

Set to true to use css grid column hang class\nThis will only work when isCss property is set to true

\n

Useful when trying to align content across css grid/subgrid

\n", "line": 57, "type": "boolean", "decorators": [] }, { "name": "columnNumbers", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefines columns width for specified breakpoint\nAccepts the following formats:\n- {[breakpoint]: number}\n- {[breakpoint]: \"auto\"} - css only\n- {[breakpoint]: {[start|end]: number}} - css only\n\nExample:\n
\n", "description": "

Defines columns width for specified breakpoint\nAccepts the following formats:

\n
    \n
  • {[breakpoint]: number}
    • \n
  • {[breakpoint]: "auto"} - css only
    • \n
  • {[breakpoint]: {[start|end]: number}} - css only
    • \n
\n

Example:

\n
\n", "line": 37, "type": "{}", "decorators": [] }, { "name": "offsets", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefines columns offset, which increases the left margin of the column.\nThis field will only work with flexbox grid.\n\nAccepts the following formats:\n- {[breakpoint]: number}\n\nExample:\n
\n", "description": "

Defines columns offset, which increases the left margin of the column.\nThis field will only work with flexbox grid.

\n

Accepts the following formats:

\n
    \n
  • {[breakpoint]: number}
    • \n
\n

Example:

\n
\n", "line": 49, "type": "{}", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class", "deprecated": false, "deprecationMessage": "", "line": 18, "type": "string", "decorators": [] } ], "hostListeners": [], "propertiesClass": [], "methodsClass": [], "extends": [], "implements": [ "OnInit", "OnChanges", "OnDestroy" ], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "gridService", "type": "GridService", "deprecated": false, "deprecationMessage": "" } ], "line": 62, "jsdoctags": [ { "name": "gridService", "type": "GridService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "accessors": { "columnClasses": { "name": "columnClasses", "setSignature": { "name": "columnClasses", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "classes", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 21, "jsdoctags": [ { "name": "classes", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "columnClasses", "type": "string", "returnType": "string", "line": 18 } } } }, { "name": "ContentSwitcherOption", "id": "directive-ContentSwitcherOption-2a8d3eceb394c9f5c1bd41013951ab99bb40b6acba8c8ff542c63e4aadceae61cbfb6d77279ccc49d35de5fe5afeca5a6ac8f119a8f328c94c758899b302bf96", "file": "src/content-switcher/content-switcher-option.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput,\n\tHostListener,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tOnInit,\n\tRenderer2\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsContentOption], [ibmContentOption]\"\n})\nexport class ContentSwitcherOption implements OnInit {\n\t/**\n\t * Used to activate the option. Only one option may be `active` at a time\n\t */\n\t@Input() set active (value: boolean) {\n\t\tthis._active = value;\n\t\tthis.selectedClass = value;\n\t\tthis.ariaSelected = value;\n\t\tthis.tabindex = value ? \"0\" : \"-1\";\n\t}\n\n\tget active() {\n\t\treturn this._active;\n\t}\n\n\t/**\n\t * Internal name for the option.\n\t * Should be something that identifies the option to the application.\n\t * Accessible from the `ContentSwitcher` `selected` emitter\n\t */\n\t@Input() name = \"option\";\n\n\t/**\n\t * Emits when the option is selected.\n\t */\n\t@Output() selected = new EventEmitter();\n\n\t@Output() onClick = new EventEmitter();\n\n\t@Output() onFocus = new EventEmitter();\n\n\t@HostBinding(\"class\") switcherClass = \"cds--content-switcher-btn\";\n\t@HostBinding(\"class.cds--content-switcher--selected\") selectedClass = false;\n\t@HostBinding(\"attr.role\") role = \"tab\";\n\t@HostBinding(\"attr.aria-selected\") ariaSelected = false;\n\t@HostBinding(\"attr.tabIndex\") tabindex = \"-1\";\n\n\tprotected _active = false;\n\n\tconstructor(private renderer: Renderer2, private hostElement: ElementRef) {}\n\n\t@HostListener(\"click\", [\"$event\"])\n\thostClick(event: MouseEvent) {\n\t\tthis.onClick.emit(event);\n\t\t// skip setting and emitting if the option is already active\n\t\tif (this.active) { return; }\n\t\tthis.active = true;\n\t\tthis.selected.emit(true);\n\t}\n\n\t@HostListener(\"focus\", [\"$event\"])\n\tdoFocus(event: FocusEvent) {\n\t\tthis.onFocus.emit(event);\n\t\t// skip setting and emitting if the option is already active\n\t\tif (this.active) { return; }\n\t\tthis.active = true;\n\t\tthis.selected.emit(true);\n\t}\n\n\t/*\n\t* encapsulating the content in a span with cds--content-switcher__label class\n\t* to mimic what is done in the react version\n\t*/\n\tngOnInit(): void {\n\t\tconst hostNativeElement = (this.hostElement.nativeElement as HTMLElement);\n\t\tconst spanWrapper = this.renderer.createElement(\"span\");\n\t\tthis.renderer.addClass(spanWrapper, \"cds--content-switcher__label\");\n\t\tconst hostChildren: ChildNode[] = [];\n\t\thostNativeElement.childNodes.forEach(node => hostChildren.push(node));\n\t\thostChildren.forEach(node => {\n\t\t\tthis.renderer.removeChild(hostNativeElement, node);\n\t\t\tthis.renderer.appendChild(spanWrapper, node);\n\t\t});\n\t\tthis.renderer.appendChild(hostNativeElement, spanWrapper);\n\t}\n}\n", "selector": "[cdsContentOption], [ibmContentOption]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "active", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to activate the option. Only one option may be `active` at a time\n", "description": "

Used to activate the option. Only one option may be active at a time

\n", "line": 20, "type": "boolean", "decorators": [] }, { "name": "name", "defaultValue": "\"option\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nInternal name for the option.\nShould be something that identifies the option to the application.\nAccessible from the `ContentSwitcher` `selected` emitter\n", "description": "

Internal name for the option.\nShould be something that identifies the option to the application.\nAccessible from the ContentSwitcher selected emitter

\n", "line": 36, "type": "string", "decorators": [] } ], "outputsClass": [ { "name": "onClick", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 43, "type": "EventEmitter" }, { "name": "onFocus", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 45, "type": "EventEmitter" }, { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits when the option is selected.\n", "description": "

Emits when the option is selected.

\n", "line": 41, "type": "EventEmitter" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.aria-selected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 50, "type": "boolean", "decorators": [] }, { "name": "attr.role", "defaultValue": "\"tab\"", "deprecated": false, "deprecationMessage": "", "line": 49, "type": "string", "decorators": [] }, { "name": "attr.tabIndex", "defaultValue": "\"-1\"", "deprecated": false, "deprecationMessage": "", "line": 51, "type": "string", "decorators": [] }, { "name": "class", "defaultValue": "\"cds--content-switcher-btn\"", "deprecated": false, "deprecationMessage": "", "line": 47, "type": "string", "decorators": [] }, { "name": "class.cds--content-switcher--selected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 48, "type": "boolean", "decorators": [] } ], "hostListeners": [ { "name": "click", "args": [ { "name": "event", "type": "MouseEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 58 }, { "name": "focus", "args": [ { "name": "event", "type": "FocusEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 67 } ], "propertiesClass": [ { "name": "ariaSelected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 50, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.aria-selected'" } ], "modifierKind": [ 170 ] }, { "name": "role", "defaultValue": "\"tab\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 49, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] }, { "name": "selectedClass", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 48, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--content-switcher--selected'" } ], "modifierKind": [ 170 ] }, { "name": "switcherClass", "defaultValue": "\"cds--content-switcher-btn\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 47, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class'" } ], "modifierKind": [ 170 ] }, { "name": "tabindex", "defaultValue": "\"-1\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 51, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.tabIndex'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "doFocus", "args": [ { "name": "event", "type": "FocusEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 67, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focus', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "FocusEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "hostClick", "args": [ { "name": "event", "type": "MouseEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 58, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'click', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "MouseEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "extends": [], "implements": [ "OnInit" ], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "" }, { "name": "hostElement", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" } ], "line": 53, "jsdoctags": [ { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "hostElement", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "accessors": { "active": { "name": "active", "setSignature": { "name": "active", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 20, "rawdescription": "\n\nUsed to activate the option. Only one option may be `active` at a time\n", "description": "

Used to activate the option. Only one option may be active at a time

\n", "jsdoctags": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "active", "type": "", "returnType": "", "line": 27 } } } }, { "name": "DialogDirective", "id": "directive-DialogDirective-9733e0f9500f8c227fc032635cd13de407f125af9d9133f37666db039b0550f3b5b128565a53418059f9a8f0364cf7981d92d2098f776b7f9efe384ecd0ecfd2", "file": "src/dialog/dialog.directive.ts", "type": "directive", "description": "

A generic directive that can be inherited from to create dialogs (for example, a tooltip or popover)

\n

This class contains the relevant initialization code, specific templates, options, and additional inputs\nshould be specified in the derived class.

\n

NOTE: All child classes should add DialogService as a provider, otherwise they will lose context that\nthe service relies on.

\n", "rawdescription": "\n\nA generic directive that can be inherited from to create dialogs (for example, a tooltip or popover)\n\nThis class contains the relevant initialization code, specific templates, options, and additional inputs\nshould be specified in the derived class.\n\nNOTE: All child classes should add `DialogService` as a provider, otherwise they will lose context that\nthe service relies on.\n", "sourceCode": "import {\n\tDirective,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tOnInit,\n\tOnDestroy,\n\tElementRef,\n\tTemplateRef,\n\tViewContainerRef,\n\tOnChanges,\n\tHostBinding,\n\tSimpleChanges,\n\tComponentRef\n} from \"@angular/core\";\nimport { DialogService } from \"./dialog.service\";\nimport { CloseMeta, CloseReasons, DialogConfig } from \"./dialog-config.interface\";\nimport { EventService } from \"carbon-components-angular/utils\";\nimport { Dialog } from \"./dialog.component\";\nimport { fromEvent, Subscription } from \"rxjs\";\n\n/**\n * A generic directive that can be inherited from to create dialogs (for example, a tooltip or popover)\n *\n * This class contains the relevant initialization code, specific templates, options, and additional inputs\n * should be specified in the derived class.\n *\n * NOTE: All child classes should add `DialogService` as a provider, otherwise they will lose context that\n * the service relies on.\n */\n@Directive({\n\tselector: \"[cdsDialog], [ibmDialog]\",\n\texportAs: \"dialog\",\n\tproviders: [\n\t\tDialogService\n\t]\n})\nexport class DialogDirective implements OnInit, OnDestroy, OnChanges {\n\tstatic dialogCounter = 0;\n\t/**\n\t * Title for the dialog\n\t */\n\t@Input() title = \"\";\n\t/**\n\t * @deprecated as of v5, use `cdsDialog` instead\n\t * Dialog body content.\n\t */\n\t@Input() set ibmDialog(body: string | TemplateRef) {\n\t\tthis.cdsDialog = body;\n\t}\n\n\t@Input() cdsDialog: string | TemplateRef;\n\t/**\n\t * Defines how the Dialog is triggered.(Hover and click behave the same on mobile - both respond to a single tap).\n\t * Do not add focusable elements if trigger is `hover` or `mouseenter`.\n\t */\n\t@Input() trigger: \"click\" | \"hover\" | \"mouseenter\" = \"click\";\n\t/**\n\t * Defines how the Dialog close event is triggered.\n\t *\n\t * [See here](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event)\n\t * for more on the difference between `mouseleave` and `mouseout`.\n\t *\n\t * Defaults to `click` when `trigger` is set to `click`.\n\t */\n\t@Input() closeTrigger: \"mouseout\" | \"mouseleave\" = \"mouseleave\";\n\t/**\n\t * Placement of the dialog, usually relative to the element the directive is on.\n\t */\n\t@Input() placement = \"left\";\n\t/**\n\t * This specifies any vertical and horizontal offset for the position of the dialog\n\t */\n\t@Input() offset: { x: number, y: number };\n\t/**\n\t * Classes to add to the dialog container\n\t */\n\t@Input() wrapperClass: string;\n\t/**\n\t * Spacing between the dialog and it's triggering element\n\t */\n\t@Input() gap = 0;\n\t/**\n\t * Set to `true` to open the dialog next to the triggering component\n\t */\n\t@Input() appendInline = false;\n\t/**\n\t * Optional data for templates\n\t */\n\t@Input() data = {};\n\n\t@Input() @HostBinding(\"attr.aria-expanded\") isOpen = false;\n\t/**\n\t * This prevents the dialog from being toggled\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * This input allows explicit control over how the dialog should close\n\t */\n\t@Input() shouldClose: (meta: CloseMeta) => boolean;\n\t/**\n\t * Config object passed to the rendered component\n\t */\n\tdialogConfig: DialogConfig;\n\t/**\n\t * Emits an event when the dialog is closed\n\t */\n\t@Output() onClose: EventEmitter = new EventEmitter();\n\t/**\n\t * Emits an event when the dialog is opened\n\t */\n\t@Output() onOpen: EventEmitter = new EventEmitter();\n\t/**\n\t * Emits an event when the state of `isOpen` changes. Allows `isOpen` to be double bound\n\t */\n\t@Output() isOpenChange = new EventEmitter();\n\n\t@HostBinding(\"attr.role\") role = \"button\";\n\t@HostBinding(\"attr.aria-haspopup\") hasPopup = true;\n\t@HostBinding(\"attr.aria-owns\") get ariaOwns(): string {\n\t\treturn this.isOpen ? this.dialogConfig.compID : null;\n\t}\n\n\t/**\n\t * Keeps a reference to the currently opened dialog\n\t */\n\tprotected dialogRef: ComponentRef;\n\n\tprivate subscriptions: Subscription[] = [];\n\n\t/**\n\t * Creates an instance of DialogDirective.\n\t * @param elementRef\n\t * @param viewContainerRef\n\t * @param dialogService\n\t * @param eventService\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected viewContainerRef: ViewContainerRef,\n\t\tprotected dialogService: DialogService,\n\t\t/**\n\t\t * Deprecated as of v5\n\t\t */\n\t\tprotected eventService: EventService\n\t) {}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// set the config object (this can [and should!] be added to in child classes depending on what they need)\n\t\tthis.dialogConfig = {\n\t\t\ttitle: this.title,\n\t\t\tcontent: this.cdsDialog,\n\t\t\tplacement: this.placement,\n\t\t\tparentRef: this.elementRef,\n\t\t\tgap: this.gap,\n\t\t\ttrigger: this.trigger,\n\t\t\tcloseTrigger: this.closeTrigger,\n\t\t\tshouldClose: this.shouldClose || (() => true),\n\t\t\tappendInline: this.appendInline,\n\t\t\twrapperClass: this.wrapperClass,\n\t\t\tdata: this.data,\n\t\t\toffset: this.offset,\n\t\t\tdisabled: this.disabled\n\t\t};\n\n\t\tif (changes.isOpen) {\n\t\t\tif (changes.isOpen.currentValue) {\n\t\t\t\tthis.open();\n\t\t\t} else if (!changes.isOpen.firstChange) {\n\t\t\t\tthis.close({\n\t\t\t\t\treason: CloseReasons.programmatic\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\n\t\t// Run any code a child class may need.\n\t\tthis.onDialogChanges(changes);\n\t\tthis.updateConfig();\n\t}\n\n\t/**\n\t * Sets the config object and binds events for hovering or clicking before\n\t * running code from child class.\n\t */\n\tngOnInit() {\n\t\t// fix for safari hijacking clicks\n\t\tthis.dialogService.singletonClickListen();\n\n\t\tconst element: HTMLElement = this.elementRef.nativeElement;\n\n\t\tthis.subscriptions.push(\n\t\t\tfromEvent(element, \"keydown\").subscribe((event: KeyboardEvent) => {\n\t\t\t\tif (event.target === this.dialogConfig.parentRef.nativeElement &&\n\t\t\t\t\t(event.key === \"Tab\" || event.key === \"Tab\" && event.shiftKey) ||\n\t\t\t\t\tevent.key === \"Escape\") {\n\t\t\t\t\tthis.close({\n\t\t\t\t\t\treason: CloseReasons.interaction,\n\t\t\t\t\t\ttarget: event.target\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t})\n\t\t);\n\n\t\t// bind events for hovering or clicking the host\n\t\tif (this.trigger === \"hover\" || this.trigger === \"mouseenter\") {\n\t\t\tthis.subscriptions.push(\n\t\t\t\tfromEvent(element, \"mouseenter\").subscribe(() => this.open()),\n\t\t\t\tfromEvent(element, this.closeTrigger).subscribe((event) => {\n\t\t\t\t\tthis.close({\n\t\t\t\t\t\treason: CloseReasons.interaction,\n\t\t\t\t\t\ttarget: event.target\n\t\t\t\t\t});\n\t\t\t\t}),\n\t\t\t\tfromEvent(element, \"focus\").subscribe(() => this.open()),\n\t\t\t\tfromEvent(element, \"blur\").subscribe((event) => {\n\t\t\t\t\tthis.close({\n\t\t\t\t\t\treason: CloseReasons.interaction,\n\t\t\t\t\t\ttarget: event.target\n\t\t\t\t\t});\n\t\t\t\t})\n\t\t\t);\n\t\t} else {\n\t\t\tthis.subscriptions.push(\n\t\t\t\tfromEvent(element, \"click\").subscribe((event) => {\n\t\t\t\t\tthis.toggle({\n\t\t\t\t\t\treason: CloseReasons.interaction,\n\t\t\t\t\t\ttarget: event.target\n\t\t\t\t\t});\n\t\t\t\t}),\n\t\t\t\tfromEvent(element, \"keydown\").subscribe((event: KeyboardEvent) => {\n\t\t\t\t\tif (event.key === \"Enter\" || event.key === \" \") {\n\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\tthis.open();\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\n\t\tDialogDirective.dialogCounter++;\n\t\tthis.dialogConfig.compID = \"dialog-\" + DialogDirective.dialogCounter;\n\n\t\t// run any code a child class may need\n\t\tthis.onDialogInit();\n\t\tthis.updateConfig();\n\t}\n\n\t/**\n\t * When the host dies, kill the popover.\n\t * - Useful for use in a modal or similar.\n\t */\n\tngOnDestroy() {\n\t\tthis.close({\n\t\t\treason: CloseReasons.destroyed\n\t\t});\n\t\tthis.subscriptions.forEach((subscription) => subscription.unsubscribe());\n\t}\n\n\t/**\n\t * Helper method to call dialogService 'open'.\n\t * - Enforce accessibility by updating an aria attr for nativeElement.\n\t */\n\topen(component?) {\n\t\t// don't allow dialogs to be opened if they're already open\n\t\tif (this.dialogRef || this.disabled) { return; }\n\n\t\t// actually open the dialog, emit events, and set the open state\n\t\tthis.dialogRef = this.dialogService.open(this.viewContainerRef, this.dialogConfig, component);\n\t\tthis.isOpen = true;\n\t\tthis.onOpen.emit();\n\t\tthis.isOpenChange.emit(true);\n\n\t\t// Handles emitting all the close events to clean everything up\n\t\t// Also enforce accessibility on close by updating an aria attr on the nativeElement.\n\t\tconst subscription = this.dialogRef.instance.close.subscribe((meta: CloseMeta) => {\n\t\t\tif (!this.dialogRef) { return; }\n\t\t\tif (this.dialogConfig.shouldClose && this.dialogConfig.shouldClose(meta)) {\n\t\t\t\t// close the dialog, emit events, and clear out the open states\n\t\t\t\tthis.dialogService.close(this.dialogRef);\n\t\t\t\tthis.dialogRef = null;\n\t\t\t\tthis.isOpen = false;\n\t\t\t\tthis.onClose.emit();\n\t\t\t\tthis.isOpenChange.emit(false);\n\t\t\t\tsubscription.unsubscribe();\n\t\t\t}\n\t\t});\n\n\t\treturn this.dialogRef;\n\t}\n\n\t/**\n\t * Helper method to toggle the open state of the dialog\n\t */\n\ttoggle(meta: CloseMeta = { reason: CloseReasons.interaction }) {\n\t\tif (!this.isOpen) {\n\t\t\tthis.open();\n\t\t} else {\n\t\t\tthis.close(meta);\n\t\t}\n\t}\n\n\t/**\n\t * Helper method to close the dialogRef.\n\t */\n\tclose(meta: CloseMeta = { reason: CloseReasons.interaction }) {\n\t\tif (this.dialogRef) {\n\t\t\tthis.dialogRef.instance.doClose(meta);\n\t\t}\n\t}\n\n\t/**\n\t * Empty method for child classes to override and specify additional init steps.\n\t * Run after DialogDirective completes it's ngOnInit.\n\t */\n\tprotected onDialogInit() {}\n\n\t/**\n\t * Empty method for child to override and specify additional on changes steps.\n\t * run after DialogDirective completes it's ngOnChanges.\n\t */\n\tprotected onDialogChanges(_changes: SimpleChanges) {}\n\n\tprotected updateConfig() {}\n}\n", "selector": "[cdsDialog], [ibmDialog]", "providers": [ { "name": "DialogService", "type": "injectable" } ], "exportAs": "dialog", "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "appendInline", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to open the dialog next to the triggering component\n", "description": "

Set to true to open the dialog next to the triggering component

\n", "line": 86, "type": "boolean", "decorators": [] }, { "name": "cdsDialog", "deprecated": false, "deprecationMessage": "", "line": 52, "type": "string | TemplateRef", "decorators": [] }, { "name": "closeTrigger", "defaultValue": "\"mouseleave\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefines how the Dialog close event is triggered.\n\n[See here](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event)\nfor more on the difference between `mouseleave` and `mouseout`.\n\nDefaults to `click` when `trigger` is set to `click`.\n", "description": "

Defines how the Dialog close event is triggered.

\n

See here\nfor more on the difference between mouseleave and mouseout.

\n

Defaults to click when trigger is set to click.

\n", "line": 66, "type": "\"mouseout\" | \"mouseleave\"", "decorators": [] }, { "name": "data", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional data for templates\n", "description": "

Optional data for templates

\n", "line": 90, "type": "{}", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThis prevents the dialog from being toggled\n", "description": "

This prevents the dialog from being toggled

\n", "line": 96, "type": "boolean", "decorators": [] }, { "name": "gap", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpacing between the dialog and it's triggering element\n", "description": "

Spacing between the dialog and it's triggering element

\n", "line": 82, "type": "number", "decorators": [] }, { "name": "ibmDialog", "deprecated": true, "deprecationMessage": "as of v5, use `cdsDialog` instead\nDialog body content.", "jsdoctags": [ { "pos": 1168, "end": 1241, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 1169, "end": 1179, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

as of v5, use cdsDialog instead\nDialog body content.

\n" } ], "line": 48, "type": "string | TemplateRef", "decorators": [] }, { "name": "isOpen", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 92, "type": "boolean", "decorators": [] }, { "name": "offset", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThis specifies any vertical and horizontal offset for the position of the dialog\n", "description": "

This specifies any vertical and horizontal offset for the position of the dialog

\n", "line": 74, "type": "literal type", "decorators": [] }, { "name": "placement", "defaultValue": "\"left\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nPlacement of the dialog, usually relative to the element the directive is on.\n", "description": "

Placement of the dialog, usually relative to the element the directive is on.

\n", "line": 70, "type": "string", "decorators": [] }, { "name": "shouldClose", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThis input allows explicit control over how the dialog should close\n", "description": "

This input allows explicit control over how the dialog should close

\n", "line": 100, "type": "function", "decorators": [] }, { "name": "title", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTitle for the dialog\n", "description": "

Title for the dialog

\n", "line": 43, "type": "string", "decorators": [] }, { "name": "trigger", "defaultValue": "\"click\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefines how the Dialog is triggered.(Hover and click behave the same on mobile - both respond to a single tap).\nDo not add focusable elements if trigger is `hover` or `mouseenter`.\n", "description": "

Defines how the Dialog is triggered.(Hover and click behave the same on mobile - both respond to a single tap).\nDo not add focusable elements if trigger is hover or mouseenter.

\n", "line": 57, "type": "\"click\" | \"hover\" | \"mouseenter\"", "decorators": [] }, { "name": "wrapperClass", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nClasses to add to the dialog container\n", "description": "

Classes to add to the dialog container

\n", "line": 78, "type": "string", "decorators": [] } ], "outputsClass": [ { "name": "isOpenChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the state of `isOpen` changes. Allows `isOpen` to be double bound\n", "description": "

Emits an event when the state of isOpen changes. Allows isOpen to be double bound

\n", "line": 116, "type": "EventEmitter" }, { "name": "onClose", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the dialog is closed\n", "description": "

Emits an event when the dialog is closed

\n", "line": 108, "type": "EventEmitter" }, { "name": "onOpen", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the dialog is opened\n", "description": "

Emits an event when the dialog is opened

\n", "line": 112, "type": "EventEmitter" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.aria-haspopup", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 119, "type": "boolean", "decorators": [] }, { "name": "attr.aria-owns", "deprecated": false, "deprecationMessage": "", "line": 120, "type": "string", "decorators": [] }, { "name": "attr.role", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "line": 118, "type": "string", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "dialogConfig", "deprecated": false, "deprecationMessage": "", "type": "DialogConfig", "optional": false, "description": "

Config object passed to the rendered component

\n", "line": 104, "rawdescription": "\n\nConfig object passed to the rendered component\n" }, { "name": "dialogCounter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 39, "modifierKind": [ 126 ] }, { "name": "hasPopup", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 119, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.aria-haspopup'" } ], "modifierKind": [ 170 ] }, { "name": "role", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 118, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "close", "args": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 305, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHelper method to close the dialogRef.\n", "description": "

Helper method to close the dialogRef.

\n", "jsdoctags": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }", "tagName": { "text": "param" } } ] }, { "name": "open", "args": [ { "name": "component", "type": "", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "ComponentRef", "typeParameters": [], "line": 263, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHelper method to call dialogService 'open'.\n- Enforce accessibility by updating an aria attr for nativeElement.\n", "description": "

Helper method to call dialogService 'open'.

\n
    \n
  • Enforce accessibility by updating an aria attr for nativeElement.
    • \n
\n", "jsdoctags": [ { "name": "component", "type": "", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "text": "param" } } ] }, { "name": "toggle", "args": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 294, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHelper method to toggle the open state of the dialog\n", "description": "

Helper method to toggle the open state of the dialog

\n", "jsdoctags": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }", "tagName": { "text": "param" } } ] } ], "extends": [], "implements": [ "OnInit", "OnDestroy", "OnChanges" ], "constructorObj": { "name": "constructor", "description": "

Creates an instance of DialogDirective.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "viewContainerRef", "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "" }, { "name": "dialogService", "type": "DialogService", "deprecated": false, "deprecationMessage": "" }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "" } ], "line": 129, "rawdescription": "\n\nCreates an instance of DialogDirective.\n", "jsdoctags": [ { "name": { "pos": 3790, "end": 3800, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "elementRef" }, "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3784, "end": 3789, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" }, { "name": { "pos": 3812, "end": 3828, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "viewContainerRef" }, "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3806, "end": 3811, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" }, { "name": { "pos": 3840, "end": 3853, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "dialogService" }, "type": "DialogService", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3834, "end": 3839, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" }, { "name": { "pos": 3865, "end": 3877, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "eventService" }, "type": "EventService", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3859, "end": 3864, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, "accessors": { "ibmDialog": { "name": "ibmDialog", "setSignature": { "name": "ibmDialog", "type": "void", "deprecated": true, "deprecationMessage": "

as of v5, use cdsDialog instead\nDialog body content.

\n", "args": [ { "name": "body", "type": "string | TemplateRef", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 48, "rawdescription": "\n\nDialog body content.\n", "description": "

Dialog body content.

\n", "jsdoctags": [ { "name": "body", "type": "string | TemplateRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "ariaOwns": { "name": "ariaOwns", "getSignature": { "name": "ariaOwns", "type": "string", "returnType": "string", "line": 120 } } } }, { "name": "ExpandableTileAboveFoldDirective", "id": "directive-ExpandableTileAboveFoldDirective-76488cf603d86a274d230956261957c5ade24f39fe79710271ef84172215ad9b4fcbd290e42a8ff0a04c927bd994b9a2d3531af6f42737a692c9d21f090a0c47", "file": "src/tiles/expandable-tile-above.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsAboveFold], [ibmAboveFold]\"\n})\nexport class ExpandableTileAboveFoldDirective {\n\t@HostBinding(\"class.cds--tile-content__above-the-fold\") aboveFold = true;\n}\n", "selector": "[cdsAboveFold], [ibmAboveFold]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--tile-content__above-the-fold", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "aboveFold", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--tile-content__above-the-fold'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ExpandableTileBelowFoldDirective", "id": "directive-ExpandableTileBelowFoldDirective-81506a53ba66ad095f5c4cb4df7affed7fe9043b071b744e8949d287403b6c804ff161e77d551327bccfb6604accd20f1667b46b8e4cbb7b02f1dc9a14ec86b2", "file": "src/tiles/expandable-tile-below.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsBelowFold], [ibmBelowFold]\"\n})\nexport class ExpandableTileBelowFoldDirective {\n\t@HostBinding(\"class.cds--tile-content__below-the-fold\") belowFold = true;\n}\n", "selector": "[cdsBelowFold], [ibmBelowFold]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--tile-content__below-the-fold", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "belowFold", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--tile-content__below-the-fold'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ExpandedRowHover", "id": "directive-ExpandedRowHover-6c74402214f5db85133454ab0679f5aaf513b970abac4baf4355258b3a0853ac623287e099bed45dc35a51bbc957f278da8dae9167fda32e0b31f1b5582cb1bf", "file": "src/table/expanded-row-hover.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import {\n\tDirective,\n\tHostListener\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsExpandedRowHover], [ibmExpandedRowHover]\"\n})\nexport class ExpandedRowHover {\n\t@HostListener(\"mouseenter\", [\"$event\"])\n\taddHoverClass(event) {\n\t\tevent.target.previousElementSibling.classList.add(\"cds--expandable-row--hover\");\n\t}\n\n\t@HostListener(\"mouseleave\", [\"$event\"])\n\tremoveHoverClass(event) {\n\t\tevent.target.previousElementSibling.classList.remove(\"cds--expandable-row--hover\");\n\t}\n}\n", "selector": "[cdsExpandedRowHover], [ibmExpandedRowHover]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "mouseenter", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 11 }, { "name": "mouseleave", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 16 } ], "propertiesClass": [], "methodsClass": [ { "name": "addHoverClass", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 11, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'mouseenter', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "removeHoverClass", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 16, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'mouseleave', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "extends": [] }, { "name": "GridDirective", "id": "directive-GridDirective-dc9680dc9be1d8e3b60e96ecda6ac622de39751192fa756ec2cc2de6dea65beba233d02f460960db675fa6ea63f017d32777f089fae18e630911c1b9cf1e165c", "file": "src/grid/grid.directive.ts", "type": "directive", "description": "

Get started with importing the module:

\nExample :
import { GridModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { GridModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-grid--basic)\n", "sourceCode": "import {\n\tContentChildren,\n\tDirective,\n\tHostBinding,\n\tInput,\n\tOnDestroy,\n\tOnInit,\n\tOptional,\n\tQueryList,\n\tSkipSelf\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { GridService } from \"./grid.service\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { GridModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-grid--basic)\n */\n@Directive({\n\tselector: \"[cdsGrid], [ibmGrid]\",\n\tproviders: [\n\t\t{\n\t\t\tprovide: GridService,\n\t\t\tdeps: [[new Optional(), new SkipSelf(), GridService]],\n\t\t\tuseFactory: (parentService: GridService) => {\n\t\t\t\treturn parentService || new GridService();\n\t\t\t}\n\t\t}\n\t]\n})\nexport class GridDirective implements OnInit, OnDestroy {\n\t/**\n\t * Set to `true` to condense the grid\n\t */\n\t@Input() condensed = false;\n\t/**\n\t * Set to `true` to use narrow grid\n\t */\n\t@Input() narrow = false;\n\t/**\n\t * Set to `true` to use the full width\n\t */\n\t@Input() fullWidth = false;\n\t/**\n\t * Set to `true` to use css grid\n\t */\n\t@Input() set useCssGrid(enable: boolean) {\n\t\tthis.cssGridEnabled = enable;\n\t\tthis.gridService.updateGridType(enable);\n\t}\n\n\tprivate cssGridEnabled = false;\n\tprivate isSubgrid = false;\n\tprivate subscription = new Subscription();\n\n\t// Flex grid\n\t@HostBinding(\"class.cds--grid\") get flexGrid() {\n\t\treturn !this.cssGridEnabled;\n\t}\n\t@HostBinding(\"class.cds--grid--condensed\") get flexCondensed() {\n\t\treturn !this.cssGridEnabled && this.condensed;\n\t}\n\t@HostBinding(\"class.cds--grid--narrow\") get flexNarrow() {\n\t\treturn !this.cssGridEnabled && this.narrow;\n\t}\n\t@HostBinding(\"class.cds--grid--full-width\") get flexFullWidth() {\n\t\treturn !this.cssGridEnabled && this.fullWidth;\n\t}\n\n\t// CSS Grid\n\t@HostBinding(\"class.cds--css-grid\") get ccsGrid() {\n\t\treturn this.cssGridEnabled && !this.isSubgrid;\n\t}\n\t@HostBinding(\"class.cds--css-grid--condensed\") get ccsCondensed() {\n\t\treturn this.cssGridEnabled && !this.isSubgrid && this.condensed;\n\t}\n\t@HostBinding(\"class.cds--css-grid--narrow\") get ccsNarrow() {\n\t\treturn this.cssGridEnabled && !this.isSubgrid && this.narrow;\n\t}\n\t@HostBinding(\"class.cds--css-grid--full-width\") get ccsFullWidth() {\n\t\treturn this.cssGridEnabled && !this.isSubgrid && this.fullWidth;\n\t}\n\n\t// CSS Sub Grid\n\t@HostBinding(\"class.cds--subgrid\") get subGrid() {\n\t\treturn this.cssGridEnabled && this.isSubgrid;\n\t}\n\t@HostBinding(\"class.cds--subgrid--condensed\") get subCondensed() {\n\t\treturn this.cssGridEnabled && this.isSubgrid && this.condensed;\n\t}\n\t@HostBinding(\"class.cds--subgrid--narrow\") get subNarrow() {\n\t\treturn this.cssGridEnabled && this.isSubgrid && this.narrow;\n\t}\n\t@HostBinding(\"class.cds--subgrid--wide\") get subFullWidth() {\n\t\treturn this.cssGridEnabled && this.isSubgrid && this.fullWidth;\n\t}\n\n\tconstructor(private gridService: GridService) {}\n\n\tngOnInit() {\n\t\tthis.subscription = this.gridService.gridObservable.subscribe((isCssGrid: boolean) => {\n\t\t\tthis.cssGridEnabled = isCssGrid;\n\t\t});\n\t}\n\n\t// Make all children grids a sub grid\n\t@ContentChildren(GridDirective, { descendants: true }) set cssGridChildren(list: QueryList) {\n\t\tif (this.cssGridEnabled) {\n\t\t\tlist.forEach((grid) => {\n\t\t\t\t// Prevents initial (parent) grid element from being turned into a subgrid\n\t\t\t\tif (grid === this) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tgrid.isSubgrid = true;\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Unsubscribe from Grid Service subscription\n\t */\n\tngOnDestroy() {\n\t\tthis.subscription.unsubscribe();\n\t}\n}\n", "selector": "[cdsGrid], [ibmGrid]", "providers": [ { "name": "{\n provide: GridService, deps: [[new Optional(), new SkipSelf(), GridService]], useFactory: (parentService: GridService) => {\n return parentService || new GridService();\n }\n}", "type": "injectable" } ], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "condensed", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to condense the grid\n", "description": "

Set to true to condense the grid

\n", "line": 40, "type": "boolean", "decorators": [] }, { "name": "fullWidth", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to use the full width\n", "description": "

Set to true to use the full width

\n", "line": 48, "type": "boolean", "decorators": [] }, { "name": "narrow", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to use narrow grid\n", "description": "

Set to true to use narrow grid

\n", "line": 44, "type": "boolean", "decorators": [] }, { "name": "useCssGrid", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to use css grid\n", "description": "

Set to true to use css grid

\n", "line": 52, "type": "boolean", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--css-grid", "deprecated": false, "deprecationMessage": "", "line": 76, "type": "boolean", "decorators": [] }, { "name": "class.cds--css-grid--condensed", "deprecated": false, "deprecationMessage": "", "line": 79, "type": "boolean", "decorators": [] }, { "name": "class.cds--css-grid--full-width", "deprecated": false, "deprecationMessage": "", "line": 85, "type": "boolean", "decorators": [] }, { "name": "class.cds--css-grid--narrow", "deprecated": false, "deprecationMessage": "", "line": 82, "type": "boolean", "decorators": [] }, { "name": "class.cds--grid", "deprecated": false, "deprecationMessage": "", "line": 62, "type": "boolean", "decorators": [] }, { "name": "class.cds--grid--condensed", "deprecated": false, "deprecationMessage": "", "line": 65, "type": "boolean", "decorators": [] }, { "name": "class.cds--grid--full-width", "deprecated": false, "deprecationMessage": "", "line": 71, "type": "boolean", "decorators": [] }, { "name": "class.cds--grid--narrow", "deprecated": false, "deprecationMessage": "", "line": 68, "type": "boolean", "decorators": [] }, { "name": "class.cds--subgrid", "deprecated": false, "deprecationMessage": "", "line": 90, "type": "boolean", "decorators": [] }, { "name": "class.cds--subgrid--condensed", "deprecated": false, "deprecationMessage": "", "line": 93, "type": "boolean", "decorators": [] }, { "name": "class.cds--subgrid--narrow", "deprecated": false, "deprecationMessage": "", "line": 96, "type": "boolean", "decorators": [] }, { "name": "class.cds--subgrid--wide", "deprecated": false, "deprecationMessage": "", "line": 99, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [], "methodsClass": [], "extends": [], "implements": [ "OnInit", "OnDestroy" ], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "gridService", "type": "GridService", "deprecated": false, "deprecationMessage": "" } ], "line": 101, "jsdoctags": [ { "name": "gridService", "type": "GridService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "accessors": { "useCssGrid": { "name": "useCssGrid", "setSignature": { "name": "useCssGrid", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "enable", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 52, "rawdescription": "\n\nSet to `true` to use css grid\n", "description": "

Set to true to use css grid

\n", "jsdoctags": [ { "name": "enable", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "flexGrid": { "name": "flexGrid", "getSignature": { "name": "flexGrid", "type": "", "returnType": "", "line": 62 } }, "flexCondensed": { "name": "flexCondensed", "getSignature": { "name": "flexCondensed", "type": "", "returnType": "", "line": 65 } }, "flexNarrow": { "name": "flexNarrow", "getSignature": { "name": "flexNarrow", "type": "", "returnType": "", "line": 68 } }, "flexFullWidth": { "name": "flexFullWidth", "getSignature": { "name": "flexFullWidth", "type": "", "returnType": "", "line": 71 } }, "ccsGrid": { "name": "ccsGrid", "getSignature": { "name": "ccsGrid", "type": "", "returnType": "", "line": 76 } }, "ccsCondensed": { "name": "ccsCondensed", "getSignature": { "name": "ccsCondensed", "type": "", "returnType": "", "line": 79 } }, "ccsNarrow": { "name": "ccsNarrow", "getSignature": { "name": "ccsNarrow", "type": "", "returnType": "", "line": 82 } }, "ccsFullWidth": { "name": "ccsFullWidth", "getSignature": { "name": "ccsFullWidth", "type": "", "returnType": "", "line": 85 } }, "subGrid": { "name": "subGrid", "getSignature": { "name": "subGrid", "type": "", "returnType": "", "line": 90 } }, "subCondensed": { "name": "subCondensed", "getSignature": { "name": "subCondensed", "type": "", "returnType": "", "line": 93 } }, "subNarrow": { "name": "subNarrow", "getSignature": { "name": "subNarrow", "type": "", "returnType": "", "line": 96 } }, "subFullWidth": { "name": "subFullWidth", "getSignature": { "name": "subFullWidth", "type": "", "returnType": "", "line": 99 } }, "cssGridChildren": { "name": "cssGridChildren", "setSignature": { "name": "cssGridChildren", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "list", "type": "QueryList", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 112, "jsdoctags": [ { "name": "list", "type": "QueryList", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } } } }, { "name": "IconDirective", "id": "directive-IconDirective-b9f31345d6c00474eaa5b36d5b3498a8e06003d02bc7b2714a6f5ca052260287aa960f00228b243879607b08699b28ba3635e3001bb2c1c1c468777ec26eed6e", "file": "src/icon/icon.directive.ts", "type": "directive", "description": "

A directive for populating a svg element based on the provided carbon icon name.

\n

Get started with importing the module:

\nExample :
import { IconModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nA directive for populating a svg element based on the provided carbon icon name.\n\nGet started with importing the module:\n\n```typescript\nimport { IconModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-icon--basic)\n", "sourceCode": "import {\n\tAfterViewInit,\n\tDirective,\n\tElementRef,\n\tInput,\n\tOnChanges,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { IconService } from \"./icon.service\";\nimport { getAttributes } from \"@carbon/icon-helpers\";\n\n/**\n * A directive for populating a svg element based on the provided carbon icon name.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { IconModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-icon--basic)\n */\n@Directive({\n\tselector: \"[cdsIcon], [ibmIcon]\"\n})\nexport class IconDirective implements AfterViewInit, OnChanges {\n\n\t/**\n\t * @deprecated since v5 - Use `cdsIcon` input property instead\n\t */\n\t@Input() set ibmIcon(iconName: string) {\n\t\tthis.cdsIcon = iconName;\n\t}\n\n\tstatic titleIdCounter = 0;\n\n\t@Input() cdsIcon = \"\";\n\n\t@Input() size = \"16\";\n\n\t@Input() title = \"\";\n\n\t@Input() ariaLabel = \"\";\n\n\t@Input() ariaLabelledBy = \"\";\n\n\t@Input() ariaHidden = \"\";\n\n\t@Input() isFocusable = false;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected iconService: IconService\n\t) {}\n\n\trenderIcon(iconName: string) {\n\t\tconst root = this.elementRef.nativeElement as HTMLElement;\n\n\t\tlet icon;\n\t\ttry {\n\t\t\ticon = this.iconService.get(iconName, this.size.toString());\n\t\t} catch (error) {\n\t\t\tconsole.warn(error);\n\t\t\t// bail out\n\t\t\treturn;\n\t\t}\n\n\t\tconst domParser = new DOMParser();\n\t\tconst rawSVG = icon.svg;\n\t\tconst svgElement = domParser.parseFromString(rawSVG, \"image/svg+xml\").documentElement;\n\n\t\tlet node: ChildNode = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : svgElement.firstChild;\n\t\troot.innerHTML = \"\"; // Clear root element\n\t\twhile (node) {\n\t\t\t// importNode makes a clone of the node\n\t\t\t// this ensures we keep looping over the nodes in the parsed document\n\t\t\troot.appendChild(root.ownerDocument.importNode(node, true));\n\t\t\t// type the node because the angular compiler freaks out if it\n\t\t\t// ends up thinking it's a `Node` instead of a `ChildNode`\n\t\t\tnode = node.nextSibling as ChildNode;\n\t\t}\n\n\t\tconst svg = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : root;\n\t\tconst xmlns = \"http://www.w3.org/2000/svg\";\n\t\tsvg.setAttribute(\"xmlns\", xmlns);\n\n\t\tconst attributes = getAttributes({\n\t\t\twidth: icon.attrs.width,\n\t\t\theight: icon.attrs.height,\n\t\t\tviewBox: icon.attrs.viewBox,\n\t\t\ttitle: this.title,\n\t\t\t\"aria-label\": this.ariaLabel,\n\t\t\t\"aria-labelledby\": this.ariaLabelledBy,\n\t\t\t\"aria-hidden\": this.ariaHidden,\n\t\t\tfocusable: this.isFocusable.toString(),\n\t\t\tfill: icon.attrs.fill\n\t\t});\n\n\t\tconst attrKeys = Object.keys(attributes);\n\t\tfor (let i = 0; i < attrKeys.length; i++) {\n\t\t\tconst key = attrKeys[i];\n\t\t\tconst value = attributes[key];\n\n\t\t\tif (key === \"title\") {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (value) {\n\t\t\t\tsvg.setAttribute(key, value);\n\t\t\t}\n\t\t}\n\n\t\tif (attributes[\"title\"]) {\n\t\t\tconst title = document.createElementNS(xmlns, \"title\");\n\t\t\ttitle.textContent = attributes.title;\n\t\t\tIconDirective.titleIdCounter++;\n\t\t\ttitle.setAttribute(\"id\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t\t// title must be first for screen readers\n\t\t\tsvg.insertBefore(title, svg.firstElementChild);\n\t\t\tsvg.setAttribute(\"aria-labelledby\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.renderIcon(this.cdsIcon);\n\t}\n\n\tngOnChanges({ cdsIcon }: SimpleChanges) {\n\t\t// We want to ignore first change to let the icon register\n\t\t// and add only after view has been initialized\n\t\tif (cdsIcon && !cdsIcon.isFirstChange()) {\n\t\t\tthis.renderIcon(this.cdsIcon);\n\t\t}\n\t}\n}\n", "selector": "[cdsIcon], [ibmIcon]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "ariaHidden", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 47, "type": "string", "decorators": [] }, { "name": "ariaLabel", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 43, "type": "string", "decorators": [] }, { "name": "ariaLabelledBy", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 45, "type": "string", "decorators": [] }, { "name": "cdsIcon", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 37, "type": "string", "decorators": [] }, { "name": "ibmIcon", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsIcon` input property instead", "jsdoctags": [ { "pos": 618, "end": 680, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 619, "end": 629, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5 - Use cdsIcon input property instead

\n" } ], "line": 31, "type": "string", "decorators": [] }, { "name": "isFocusable", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 49, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"16\"", "deprecated": false, "deprecationMessage": "", "line": 39, "type": "string", "decorators": [] }, { "name": "title", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 41, "type": "string", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "propertiesClass": [ { "name": "titleIdCounter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 35, "modifierKind": [ 126 ] } ], "methodsClass": [ { "name": "renderIcon", "args": [ { "name": "iconName", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 56, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "iconName", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "extends": [], "implements": [ "AfterViewInit", "OnChanges" ], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "iconService", "type": "IconService", "deprecated": false, "deprecationMessage": "" } ], "line": 49, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "iconService", "type": "IconService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "accessors": { "ibmIcon": { "name": "ibmIcon", "setSignature": { "name": "ibmIcon", "type": "void", "deprecated": true, "deprecationMessage": "

since v5 - Use cdsIcon input property instead

\n", "args": [ { "name": "iconName", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 31, "rawdescription": "\n\n", "description": "", "jsdoctags": [ { "name": "iconName", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } } } }, { "name": "LayerDirective", "id": "directive-LayerDirective-e25652d07fe17520e9292a381a17db742089eeb264cbba111bf32e1392ec25fafa38ff3dc38a2ad720d5a877ca5a5279b895097a919ef4be6f0de26b15a12a81", "file": "src/layer/layer.directive.ts", "type": "directive", "description": "

Applies layering styles to the div container it is applied to. Get started with importing the module:

\nExample :
import { LayerModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nApplies layering styles to the div container it is applied to. Get started with importing the module:\n\n```typescript\nimport { LayerModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-layer--basic)\n", "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit\n} from \"@angular/core\";\n\nconst MAX_LEVEL = 2;\n\n/**\n * Applies layering styles to the div container it is applied to. Get started with importing the module:\n *\n * ```typescript\n * import { LayerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-layer--basic)\n */\n@Directive({\n\tselector: \"[cdsLayer], [ibmLayer]\",\n\texportAs: \"layer\"\n})\nexport class LayerDirective implements AfterContentInit {\n\n\t/**\n\t * @deprecated as of v5 - Use `cdsLayer` input property instead\n\t */\n\t@Input() set ibmLayer(level: 0 | 1 | 2 | \"\") {\n\t\tthis.cdsLayer = level;\n\t}\n\n\t/**\n\t * Override layer level\n\t * Empty string has been added as an option for Angular 16+ to resolve type errors\n\t */\n\t@Input() set cdsLayer(level: 0 | 1 | 2 | \"\") {\n\t\tif (typeof(level) === \"number\") {\n\t\t\tthis._passedLevel = level;\n\t\t\tthis.layer = level;\n\t\t}\n\t}\n\n\tget cdsLayer() {\n\t\treturn this._passedLevel;\n\t}\n\n\t/**\n\t * If cdsLayer is undefined, auto increment & iterate level\n\t */\n\tset layer(level: number) {\n\t\tif (typeof level === \"number\") {\n\t\t\tthis._level = Math.max(0, Math.min(level, MAX_LEVEL));\n\t\t\tif (this.layerChildren) {\n\t\t\t\tthis.layerChildren.forEach((layer) => {\n\t\t\t\t\t// Ignore self to prevent infinite recursion\n\t\t\t\t\tif (layer === this) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tlayer.layer = typeof layer._passedLevel === \"number\" ? layer._passedLevel : this.layer + 1;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tget layer() {\n\t\treturn this._level;\n\t}\n\n\t/**\n\t * Using host bindings with classes to ensure we do not\n\t * overwrite user added classes\n\t */\n\t@HostBinding(\"class.cds--layer-one\") get layerOneClass() {\n\t\treturn this.layer === 0;\n\t}\n\n\t@HostBinding(\"class.cds--layer-two\") get layerTwoClass() {\n\t\treturn this.layer === 1;\n\t}\n\n\t@HostBinding(\"class.cds--layer-three\") get layerThreeClass() {\n\t\treturn this.layer === 2;\n\t}\n\n\t@ContentChildren(LayerDirective, { descendants: false }) layerChildren: QueryList;\n\n\t// Holds user passsed level\n\tprivate _passedLevel;\n\t// Holds current level\n\tprivate _level;\n\n\tngAfterContentInit(): void {\n\t\tif (typeof this.cdsLayer !== \"number\") {\n\t\t\tthis.layer = 1;\n\t\t}\n\t}\n}\n", "selector": "[cdsLayer], [ibmLayer]", "providers": [], "exportAs": "layer", "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "cdsLayer", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOverride layer level\nEmpty string has been added as an option for Angular 16+ to resolve type errors\n", "description": "

Override layer level\nEmpty string has been added as an option for Angular 16+ to resolve type errors

\n", "line": 38, "type": "\"0\" | \"1\" | \"2\" | string", "decorators": [] }, { "name": "ibmLayer", "deprecated": true, "deprecationMessage": "as of v5 - Use `cdsLayer` input property instead", "jsdoctags": [ { "pos": 539, "end": 602, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 540, "end": 550, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

as of v5 - Use cdsLayer input property instead

\n" } ], "line": 30, "type": "\"0\" | \"1\" | \"2\" | string", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--layer-one", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsing host bindings with classes to ensure we do not\noverwrite user added classes\n", "description": "

Using host bindings with classes to ensure we do not\noverwrite user added classes

\n", "line": 75, "type": "boolean", "decorators": [] }, { "name": "class.cds--layer-three", "deprecated": false, "deprecationMessage": "", "line": 83, "type": "boolean", "decorators": [] }, { "name": "class.cds--layer-two", "deprecated": false, "deprecationMessage": "", "line": 79, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "layerChildren", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "", "line": 87, "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "LayerDirective, {descendants: false}" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [], "implements": [ "AfterContentInit" ], "accessors": { "ibmLayer": { "name": "ibmLayer", "setSignature": { "name": "ibmLayer", "type": "void", "deprecated": true, "deprecationMessage": "

as of v5 - Use cdsLayer input property instead

\n", "args": [ { "name": "level", "type": "\"0\" | \"1\" | \"2\" | string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 30, "rawdescription": "\n\n", "description": "", "jsdoctags": [ { "name": "level", "type": "\"0\" | \"1\" | \"2\" | string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "cdsLayer": { "name": "cdsLayer", "setSignature": { "name": "cdsLayer", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "level", "type": "\"0\" | \"1\" | \"2\" | string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 38, "rawdescription": "\n\nOverride layer level\nEmpty string has been added as an option for Angular 16+ to resolve type errors\n", "description": "

Override layer level\nEmpty string has been added as an option for Angular 16+ to resolve type errors

\n", "jsdoctags": [ { "name": "level", "type": "\"0\" | \"1\" | \"2\" | string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "cdsLayer", "type": "", "returnType": "", "line": 45 } }, "layer": { "name": "layer", "setSignature": { "name": "layer", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "level", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 52, "rawdescription": "\n\nIf cdsLayer is undefined, auto increment & iterate level\n", "description": "

If cdsLayer is undefined, auto increment & iterate level

\n", "jsdoctags": [ { "name": "level", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "layer", "type": "", "returnType": "", "line": 67 } }, "layerOneClass": { "name": "layerOneClass", "getSignature": { "name": "layerOneClass", "type": "", "returnType": "", "line": 75, "rawdescription": "\n\nUsing host bindings with classes to ensure we do not\noverwrite user added classes\n", "description": "

Using host bindings with classes to ensure we do not\noverwrite user added classes

\n" } }, "layerTwoClass": { "name": "layerTwoClass", "getSignature": { "name": "layerTwoClass", "type": "", "returnType": "", "line": 79 } }, "layerThreeClass": { "name": "layerThreeClass", "getSignature": { "name": "layerThreeClass", "type": "", "returnType": "", "line": 83 } } } }, { "name": "Link", "id": "directive-Link-c3cd81b30289822bb8cb02b0badb8ab1fe8e137d2afbca752c45106629769d166da49a8356942db06852ce0e116f66e920eb4ba2926e1bd4b23851ee7b6e03de", "file": "src/link/link.directive.ts", "type": "directive", "description": "

A convenience directive for applying styling to a link. Get started with importing the module:

\nExample :
import { LinkModule } from 'carbon-components-angular';
Example :
<a href="#" cdsLink>A link</a>

See the vanilla carbon docs for more detail.

\n

See demo

\n", "rawdescription": "\n\nA convenience directive for applying styling to a link. Get started with importing the module:\n\n```typescript\nimport { LinkModule } from 'carbon-components-angular';\n```\n\n```html\nA link\n```\n\nSee the [vanilla carbon docs](http://www.carbondesignsystem.com/components/link/code) for more detail.\n\n[See demo](../../?path=/story/components-link--basic)\n", "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\n\n/**\n * A convenience directive for applying styling to a link. Get started with importing the module:\n *\n * ```typescript\n * import { LinkModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * A link\n * ```\n *\n * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/link/code) for more detail.\n *\n * [See demo](../../?path=/story/components-link--basic)\n */\n@Directive({\n\tselector: \"[cdsLink], [ibmLink]\"\n})\n\n\nexport class Link {\n\t@HostBinding(\"class.cds--link\") baseClass = true;\n\n\t/**\n\t * Automatically set to `-1` when link is disabled.\n\t */\n\t@HostBinding(\"attr.tabindex\") tabindex;\n\n\t/**\n\t * Set to true to show links inline in a sentence or paragraph.\n\t */\n\t@Input()\n\t@HostBinding(\"class.cds--link--inline\") inline = false;\n\n\t/**\n\t * Set to true to disable link.\n\t */\n\t@Input()\n\t@HostBinding(\"attr.aria-disabled\")\n\t@HostBinding(\"class.cds--link--disabled\")\n\tset disabled(disabled: boolean) {\n\t\tthis._disabled = disabled;\n\t\tthis.tabindex = this.disabled ? -1 : null;\n\t}\n\n\tget disabled(): boolean {\n\t\treturn this._disabled;\n\t}\n\n\tprivate _disabled;\n}\n", "selector": "[cdsLink], [ibmLink]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "disabled", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to true to disable link.\n", "description": "

Set to true to disable link.

\n", "line": 47, "type": "boolean", "decorators": [] }, { "name": "inline", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to true to show links inline in a sentence or paragraph.\n", "description": "

Set to true to show links inline in a sentence or paragraph.

\n", "line": 39, "type": "boolean", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.tabindex", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAutomatically set to `-1` when link is disabled.\n", "description": "

Automatically set to -1 when link is disabled.

\n", "line": 33, "type": "any", "decorators": [] }, { "name": "class.cds--link", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 28, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "baseClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 28, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--link'" } ], "modifierKind": [ 170 ] }, { "name": "tabindex", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Automatically set to -1 when link is disabled.

\n", "line": 33, "rawdescription": "\n\nAutomatically set to `-1` when link is disabled.\n", "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.tabindex'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [], "accessors": { "disabled": { "name": "disabled", "setSignature": { "name": "disabled", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "disabled", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 47, "rawdescription": "\n\nSet to true to disable link.\n", "description": "

Set to true to disable link.

\n", "jsdoctags": [ { "name": "disabled", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "disabled", "type": "boolean", "returnType": "boolean", "line": 52 } } } }, { "name": "LinkIconDirective", "id": "directive-LinkIconDirective-55c5a92a8ab4a84e9a10dde7956dcd2102bb8bd5c68efeed3b3fb2e36d02d5e24395230c758089993dc569202b7e7be0b129e5b06d66af4fa187b39b536241d7", "file": "src/link/link-icon.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[ibmLinkIcon], [cdsLinkIcon]\"\n})\nexport class LinkIconDirective {\n\t@HostBinding(\"class.cds--link__icon\") iconClass = true;\n}\n", "selector": "[ibmLinkIcon], [cdsLinkIcon]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--link__icon", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "iconClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--link__icon'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "List", "id": "directive-List-7d44f724e53819933ee594f8c4893d44b55c7363960fcffedf66251f58b045dedd4b63145af74affa2f6a9953d5b8dc6b3e17f68383c125f5edf48046a3779c8", "file": "src/list/list.directive.ts", "type": "directive", "description": "

Applies either ordered or unordered styling to the list container it is applied to.

\n

For uls it will apply unordered list styles, and for ols it will apply ordered list styles.

\n

If a ul or ol is nested within a li the directive will apply nested list styling.

\n

Get started with importing the module:

\nExample :
import { ListModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nApplies either ordered or unordered styling to the list container it is applied to.\n\nFor `ul`s it will apply unordered list styles, and for `ol`s it will apply ordered list styles.\n\nIf a `ul` or `ol` is nested within a `li` the directive will apply nested list styling.\n\nGet started with importing the module:\n\n```typescript\nimport { ListModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-list--basic)\n", "sourceCode": "import {\n\tDirective,\n\tElementRef,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\n\n/**\n * Applies either ordered or unordered styling to the list container it is applied to.\n *\n * For `ul`s it will apply unordered list styles, and for `ol`s it will apply ordered list styles.\n *\n * If a `ul` or `ol` is nested within a `li` the directive will apply nested list styling.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { ListModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-list--basic)\n */\n@Directive({\n\tselector: \"[cdsList], [ibmList]\"\n})\nexport class List {\n\t@HostBinding(\"class.cds--list--ordered\") get ordered() {\n\t\tif (this.nested) { return false; }\n\t\treturn this.elementRef.nativeElement.tagName === \"OL\";\n\t}\n\n\t@HostBinding(\"class.cds--list--unordered\") get unordered() {\n\t\tif (this.nested) { return false; }\n\t\treturn this.elementRef.nativeElement.tagName === \"UL\";\n\t}\n\n\t@HostBinding(\"class.cds--list--nested\") get nested() {\n\t\treturn !!(this.elementRef.nativeElement.parentElement && this.elementRef.nativeElement.parentElement.tagName === \"LI\");\n\t}\n\n\t/**\n\t * Set to `true` to make list expressive\n\t */\n\t@Input() @HostBinding(\"class.cds--list--expressive\") isExpressive = false;\n\n\tconstructor(protected elementRef: ElementRef) {}\n}\n", "selector": "[cdsList], [ibmList]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "isExpressive", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to make list expressive\n", "description": "

Set to true to make list expressive

\n", "line": 44, "type": "boolean", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--list--nested", "deprecated": false, "deprecationMessage": "", "line": 37, "type": "boolean", "decorators": [] }, { "name": "class.cds--list--ordered", "deprecated": false, "deprecationMessage": "", "line": 27, "type": "boolean", "decorators": [] }, { "name": "class.cds--list--unordered", "deprecated": false, "deprecationMessage": "", "line": 32, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [], "methodsClass": [], "extends": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" } ], "line": 44, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "accessors": { "ordered": { "name": "ordered", "getSignature": { "name": "ordered", "type": "", "returnType": "", "line": 27 } }, "unordered": { "name": "unordered", "getSignature": { "name": "unordered", "type": "", "returnType": "", "line": 32 } }, "nested": { "name": "nested", "getSignature": { "name": "nested", "type": "", "returnType": "", "line": 37 } } } }, { "name": "ListItemDirective", "id": "directive-ListItemDirective-384c36e90b242e2307b01f1411e1b17802dc25d688b4f6f561a1f674ed2ed20839b6022899d136fb3776e4d9403598714b4e004c84dc694dc1ee0ae67a957bfb", "file": "src/list/list-item.directive.ts", "type": "directive", "description": "

Applies list styling to the item it is used on. Best used with lis.

\n", "rawdescription": "\n\nApplies list styling to the item it is used on. Best used with `li`s.\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n/**\n * Applies list styling to the item it is used on. Best used with `li`s.\n */\n@Directive({\n\tselector: \"[cdsListItem], [ibmListItem]\"\n})\nexport class ListItemDirective {\n\t@HostBinding(\"class.cds--list__item\") wrapper = true;\n}\n", "selector": "[cdsListItem], [ibmListItem]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--list__item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 10, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "wrapper", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 10, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--list__item'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ModalContent", "id": "directive-ModalContent-34f16b5de9eb44a8439f812fcd465552dbb1ef9c488225bf02987ea9331cb28d426a40231cf66e6f0d9d61f2fdd3f5d4fe19b39fa01202d0a3725d7c9e3140f1", "file": "src/modal/modal-content.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding, Input } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsModalContent], [ibmModalContent]\"\n})\nexport class ModalContent {\n\t@HostBinding(\"class.cds--modal-content\") modalContentClass = true;\n\t/**\n\t * Provide whether the modal content has a form element.\n\t * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.\n\t */\n\t@HostBinding(\"class.cds--modal-content--with-form\") @Input() hasForm = false;\n}\n", "selector": "[cdsModalContent], [ibmModalContent]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "hasForm", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nProvide whether the modal content has a form element.\nIf `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.\n", "description": "

Provide whether the modal content has a form element.\nIf true is used here, non-form child content should have cds--modal-content__regular-content class.

\n", "line": 12, "type": "boolean", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--modal-content", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "modalContentClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--modal-content'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ModalContentText", "id": "directive-ModalContentText-13709d08252ac8c1f4499d3d695833966d415072e79181cc2a80b4658aefeea73a722746f10186fe6a138fd89d7ea557c3ad11c0e3712183cc75097f5bdd76ee", "file": "src/modal/modal-content-text.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsModalContentText], [ibmModalContentText]\"\n})\nexport class ModalContentText {\n\t@HostBinding(\"class.cds--modal-content__text\") modalContentTextClass = true;\n}\n", "selector": "[cdsModalContentText], [ibmModalContentText]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--modal-content__text", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "modalContentTextClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--modal-content__text'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ModalHeaderHeading", "id": "directive-ModalHeaderHeading-01c49c2f5e07124c5b7422886197b730fc99d74405099204ba7dc69f954e293fe53de02ebd50ee64e23f66b97e1f756ffacb83c1401192d91414ceec0dfe246a", "file": "src/modal/modal-header-heading.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding, Input } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsModalHeaderHeading], [ibmModalHeaderHeading]\"\n})\nexport class ModalHeaderHeading {\n\t@HostBinding(\"class.cds--modal-header__heading\") modalHeaderHeadingClass = true;\n}\n", "selector": "[cdsModalHeaderHeading], [ibmModalHeaderHeading]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--modal-header__heading", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "modalHeaderHeadingClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--modal-header__heading'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ModalHeaderLabel", "id": "directive-ModalHeaderLabel-6be0ea587759d731f6b5b56d5cbefd0b55c89cceb01ccdc1c0edafc2ec43d6bd72393425ea6220770f38d299fd0fce04d8b2031149b0acf9c7f4ec5b9022dd91", "file": "src/modal/modal-header-label.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsModalHeaderLabel], [ibmModalHeaderLabel]\"\n})\nexport class ModalHeaderLabel {\n\t@HostBinding(\"class.cds--modal-header__label\") modalHeaderLabelClass = true;\n}\n", "selector": "[cdsModalHeaderLabel], [ibmModalHeaderLabel]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--modal-header__label", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "modalHeaderLabelClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--modal-header__label'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "NotificationSubtitle", "id": "directive-NotificationSubtitle-07e4e34e5360205aeafb3bdcf07480ae03a71ff15f1914c40620bac35e0beab21e341ccb00a7fd2e14ef355bd82566df3a6999480c31310e2edfe682030d23a5", "file": "src/notification/notification-subtitle.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsNotificationSubtitle], [ibmNotificationSubtitle]\"\n})\nexport class NotificationSubtitle {\n\t@HostBinding(\"class.cds--inline-notification__subtitle\") baseClass = true;\n}\n", "selector": "[cdsNotificationSubtitle], [ibmNotificationSubtitle]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--inline-notification__subtitle", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "baseClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--inline-notification__subtitle'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "NotificationTitle", "id": "directive-NotificationTitle-9d3c843b71567dbd5d618d5eb05a8d1d49c06d1e2c5b12b3df24c3fae576c7db9b2d80c7dfa6e3ed15cce97f9240ac42214c756e8c672654f04c83770fe8569b", "file": "src/notification/notification-title.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsNotificationTitle], [ibmNotificationTitle]\"\n})\nexport class NotificationTitle {\n\t@HostBinding(\"class.cds--inline-notification__title\") baseClass = true;\n}\n", "selector": "[cdsNotificationTitle], [ibmNotificationTitle]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--inline-notification__title", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "baseClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--inline-notification__title'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "OptGroup", "id": "directive-OptGroup-6d5084f8e278e2d8b7a53e3901012b7360918695660755927a44b6473352e87486b258ff058c590090ebf59e4b3b715e1080ba5266c2d6df97e0267d0cc97c9a", "file": "src/select/optgroup.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\t// tslint:disable-next-line\n\tselector: \"optgroup\"\n})\nexport class OptGroup {\n\t@HostBinding(\"class\") inputClass = \"cds--select-optgroup\";\n}\n", "selector": "optgroup", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class", "defaultValue": "\"cds--select-optgroup\"", "deprecated": false, "deprecationMessage": "", "line": 8, "type": "string", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "inputClass", "defaultValue": "\"cds--select-optgroup\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 8, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "Option", "id": "directive-Option-9abd4782a9054b12eafb66e9579c6d15b1d9a82eecc6e1b4c32134de39e508f83be6f7ac8c1252abfec59846dcd59d132e223fe176876f6f3e2624aa4c07c272", "file": "src/select/option.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\t// tslint:disable-next-line\n\tselector: \"option\"\n})\nexport class Option {\n\t@HostBinding(\"class\") inputClass = \"cds--select-option\";\n}\n", "selector": "option", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class", "defaultValue": "\"cds--select-option\"", "deprecated": false, "deprecationMessage": "", "line": 8, "type": "string", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "inputClass", "defaultValue": "\"cds--select-option\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 8, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "OverflowMenuDirective", "id": "directive-OverflowMenuDirective-f3ee44e1cc11b61a7dfb62bcc171c0a2501b10ec36f095531976635bd9b9e59b9b3d7e913c446b68dcd1526f74f1514b12defeef6471d542fe67aec2836494dd", "file": "src/dialog/overflow-menu/overflow-menu.directive.ts", "type": "directive", "description": "

Directive for extending Dialog to create overflow menus.

\n

class: OverflowMenuDirective (extends DialogDirective)

\n

selector: cdsOverflowMenu

\nExample :
<div [cdsOverflowMenu]="templateRef"></div>\n<ng-template #templateRef>\n    <!-- overflow menu options here -->\n</ng-template>
Example :
<div [cdsOverflowMenu]="templateRef" [customPane]="true"></div>\n<ng-template #templateRef>\n <!-- custom content goes here -->\n</ng-template>
", "rawdescription": "\n\nDirective for extending `Dialog` to create overflow menus.\n\nclass: OverflowMenuDirective (extends DialogDirective)\n\n\nselector: `cdsOverflowMenu`\n\n\n```html\n
\n\n\t\n\n```\n\n```html\n
\n\n \n\n```\n", "sourceCode": "import {\n\tDirective,\n\tElementRef,\n\tViewContainerRef,\n\tInput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { DialogDirective } from \"../dialog.directive\";\nimport { DialogService } from \"../dialog.service\";\nimport { OverflowMenuPane } from \"./overflow-menu-pane.component\";\nimport { OverflowMenuCustomPane } from \"./overflow-menu-custom-pane.component\";\nimport { EventService } from \"carbon-components-angular/utils\";\n\n\n/**\n * Directive for extending `Dialog` to create overflow menus.\n *\n * class: OverflowMenuDirective (extends DialogDirective)\n *\n *\n * selector: `cdsOverflowMenu`\n *\n *\n * ```html\n *
\n * \n * \t\n * \n * ```\n *\n * ```html\n *
\n * \n * \n * \n * ```\n */\n@Directive({\n\tselector: \"[cdsOverflowMenu], [ibmOverflowMenu]\",\n\texportAs: \"overflowMenu\",\n\tproviders: [\n\t\tDialogService\n\t]\n})\nexport class OverflowMenuDirective extends DialogDirective {\n\t/**\n\t * @deprecated as of v5\n\t * Takes a template ref of `OverflowMenuOptions`s\n\t */\n\t@Input() set ibmOverflowMenu(template: TemplateRef) {\n\t\tthis.cdsOverflowMenu = template;\n\t}\n\n\t@Input() cdsOverflowMenu: TemplateRef;\n\t/**\n\t * Controls wether the overflow menu is flipped\n\t */\n\t@Input() flip = false;\n\t/**\n\t * This specifies any vertical and horizontal offset for the position of the dialog\n\t */\n\t@Input() offset: { x: number, y: number };\n\t/**\n\t * Classes to add to the dialog container\n\t */\n\t@Input() wrapperClass = \"\";\n\t/**\n\t * Set to true to for custom content\n\t */\n\t@Input() customPane = false;\n\n\t/**\n\t * Creates an instance of `OverflowMenuDirective`.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected viewContainerRef: ViewContainerRef,\n\t\tprotected dialogService: DialogService,\n\t\tprotected eventService: EventService\n\t) {\n\t\tsuper(elementRef, viewContainerRef, dialogService, eventService);\n\t}\n\n\tupdateConfig() {\n\t\tthis.dialogConfig.content = this.cdsOverflowMenu;\n\t\tthis.dialogConfig.flip = this.flip;\n\t\tthis.dialogConfig.offset = this.offset;\n\t\tthis.dialogConfig.wrapperClass = this.wrapperClass;\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tswitch (event.key) {\n\t\t\tcase \"Enter\":\n\t\t\tcase \" \":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\topen() {\n\t\treturn super.open(this.customPane ? OverflowMenuCustomPane : OverflowMenuPane);\n\t}\n}\n", "selector": "[cdsOverflowMenu], [ibmOverflowMenu]", "providers": [ { "name": "DialogService", "type": "injectable" } ], "exportAs": "overflowMenu", "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "cdsOverflowMenu", "deprecated": false, "deprecationMessage": "", "line": 55, "type": "TemplateRef", "decorators": [] }, { "name": "customPane", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to true to for custom content\n", "description": "

Set to true to for custom content

\n", "line": 71, "type": "boolean", "decorators": [] }, { "name": "flip", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls wether the overflow menu is flipped\n", "description": "

Controls wether the overflow menu is flipped

\n", "line": 59, "type": "boolean", "decorators": [] }, { "name": "ibmOverflowMenu", "deprecated": true, "deprecationMessage": "as of v5\nTakes a template ref of `OverflowMenuOptions`s", "jsdoctags": [ { "pos": 1130, "end": 1204, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 1131, "end": 1141, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

as of v5\nTakes a template ref of OverflowMenuOptionss

\n" } ], "line": 51, "type": "TemplateRef", "decorators": [] }, { "name": "offset", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThis specifies any vertical and horizontal offset for the position of the dialog\n", "description": "

This specifies any vertical and horizontal offset for the position of the dialog

\n", "line": 63, "type": "literal type", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "wrapperClass", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nClasses to add to the dialog container\n", "description": "

Classes to add to the dialog container

\n", "line": 67, "type": "string", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "appendInline", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to open the dialog next to the triggering component\n", "description": "

Set to true to open the dialog next to the triggering component

\n", "line": 86, "type": "boolean", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "cdsDialog", "deprecated": false, "deprecationMessage": "", "line": 52, "type": "string | TemplateRef", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "closeTrigger", "defaultValue": "\"mouseleave\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefines how the Dialog close event is triggered.\n\n[See here](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event)\nfor more on the difference between `mouseleave` and `mouseout`.\n\nDefaults to `click` when `trigger` is set to `click`.\n", "description": "

Defines how the Dialog close event is triggered.

\n

See here\nfor more on the difference between mouseleave and mouseout.

\n

Defaults to click when trigger is set to click.

\n", "line": 66, "type": "\"mouseout\" | \"mouseleave\"", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "data", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional data for templates\n", "description": "

Optional data for templates

\n", "line": 90, "type": "{}", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThis prevents the dialog from being toggled\n", "description": "

This prevents the dialog from being toggled

\n", "line": 96, "type": "boolean", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "gap", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpacing between the dialog and it's triggering element\n", "description": "

Spacing between the dialog and it's triggering element

\n", "line": 82, "type": "number", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "ibmDialog", "deprecated": true, "deprecationMessage": "as of v5, use `cdsDialog` instead\nDialog body content.", "jsdoctags": [ { "pos": 1168, "end": 1241, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 1169, "end": 1179, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

as of v5, use cdsDialog instead\nDialog body content.

\n" } ], "line": 48, "type": "string | TemplateRef", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "isOpen", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 92, "type": "boolean", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "placement", "defaultValue": "\"left\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nPlacement of the dialog, usually relative to the element the directive is on.\n", "description": "

Placement of the dialog, usually relative to the element the directive is on.

\n", "line": 70, "type": "string", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "shouldClose", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThis input allows explicit control over how the dialog should close\n", "description": "

This input allows explicit control over how the dialog should close

\n", "line": 100, "type": "function", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "title", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTitle for the dialog\n", "description": "

Title for the dialog

\n", "line": 43, "type": "string", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "trigger", "defaultValue": "\"click\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefines how the Dialog is triggered.(Hover and click behave the same on mobile - both respond to a single tap).\nDo not add focusable elements if trigger is `hover` or `mouseenter`.\n", "description": "

Defines how the Dialog is triggered.(Hover and click behave the same on mobile - both respond to a single tap).\nDo not add focusable elements if trigger is hover or mouseenter.

\n", "line": 57, "type": "\"click\" | \"hover\" | \"mouseenter\"", "decorators": [], "inheritance": { "file": "DialogDirective" } } ], "outputsClass": [ { "name": "isOpenChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the state of `isOpen` changes. Allows `isOpen` to be double bound\n", "description": "

Emits an event when the state of isOpen changes. Allows isOpen to be double bound

\n", "line": 116, "type": "EventEmitter", "inheritance": { "file": "DialogDirective" } }, { "name": "onClose", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the dialog is closed\n", "description": "

Emits an event when the dialog is closed

\n", "line": 108, "type": "EventEmitter", "inheritance": { "file": "DialogDirective" } }, { "name": "onOpen", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the dialog is opened\n", "description": "

Emits an event when the dialog is opened

\n", "line": 112, "type": "EventEmitter", "inheritance": { "file": "DialogDirective" } } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.aria-haspopup", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 119, "type": "boolean", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "attr.aria-owns", "deprecated": false, "deprecationMessage": "", "line": 120, "type": "string", "decorators": [], "inheritance": { "file": "DialogDirective" } }, { "name": "attr.role", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "line": 118, "type": "string", "decorators": [], "inheritance": { "file": "DialogDirective" } } ], "hostListeners": [ { "name": "keydown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 93 } ], "propertiesClass": [ { "name": "dialogConfig", "deprecated": false, "deprecationMessage": "", "type": "DialogConfig", "optional": false, "description": "

Config object passed to the rendered component

\n", "line": 104, "rawdescription": "\n\nConfig object passed to the rendered component\n", "inheritance": { "file": "DialogDirective" } }, { "name": "dialogCounter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 39, "modifierKind": [ 126 ], "inheritance": { "file": "DialogDirective" } }, { "name": "hasPopup", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 119, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.aria-haspopup'" } ], "modifierKind": [ 170 ], "inheritance": { "file": "DialogDirective" } }, { "name": "role", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 118, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ], "inheritance": { "file": "DialogDirective" } } ], "methodsClass": [ { "name": "hostkeys", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 93, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "open", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 102, "deprecated": false, "deprecationMessage": "", "inheritance": { "file": "DialogDirective" } }, { "name": "updateConfig", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 85, "deprecated": false, "deprecationMessage": "" }, { "name": "close", "args": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 305, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHelper method to close the dialogRef.\n", "description": "

Helper method to close the dialogRef.

\n", "jsdoctags": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }", "tagName": { "text": "param" } } ], "inheritance": { "file": "DialogDirective" } }, { "name": "toggle", "args": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 294, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHelper method to toggle the open state of the dialog\n", "description": "

Helper method to toggle the open state of the dialog

\n", "jsdoctags": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }", "tagName": { "text": "param" } } ], "inheritance": { "file": "DialogDirective" } } ], "extends": [ "DialogDirective" ], "constructorObj": { "name": "constructor", "description": "

Creates an instance of OverflowMenuDirective.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "viewContainerRef", "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "" }, { "name": "dialogService", "type": "DialogService", "deprecated": false, "deprecationMessage": "" }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "" } ], "line": 71, "rawdescription": "\n\nCreates an instance of `OverflowMenuDirective`.\n", "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "viewContainerRef", "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "dialogService", "type": "DialogService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "accessors": { "ibmOverflowMenu": { "name": "ibmOverflowMenu", "setSignature": { "name": "ibmOverflowMenu", "type": "void", "deprecated": true, "deprecationMessage": "

as of v5\nTakes a template ref of OverflowMenuOptionss

\n", "args": [ { "name": "template", "type": "TemplateRef", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 51, "rawdescription": "\n\nTakes a template ref of `OverflowMenuOptions`s\n", "description": "

Takes a template ref of OverflowMenuOptionss

\n", "jsdoctags": [ { "name": "template", "type": "TemplateRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } } } }, { "name": "PasswordInput", "id": "directive-PasswordInput-ff3f658fbcddc4e1f391934db19db0a8c63fa6f399034fc6b6f4fa2ea2e2eb9455b086a06183c142d06f61bcfdc9d2844178364c097b8473542f645c527389d3", "file": "src/input/password.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput,\n\tRenderer2,\n\tElementRef,\n\tAfterViewInit\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsPassword], [ibmPassword]\"\n})\nexport class PasswordInput implements AfterViewInit {\n\n\t@Input() set type(type: string) {\n\t\tif (type) {\n\t\t\tthis._type = type;\n\t\t\tif (this.elementRef) {\n\t\t\t\tthis.renderer.setAttribute(this.elementRef.nativeElement, \"type\", this._type);\n\t\t\t}\n\t\t}\n\t}\n\t@HostBinding(\"class.cds--password-input\") passwordInputClass = true;\n\n\t/**\n\t * @todo - remove `cds--text-input--${size}` classes in v12\n\t */\n\t@HostBinding(\"class.cds--text-input--sm\") get isSizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--text-input--md\") get isSizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--text-input--lg\") get isSizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t// Size\n\t@HostBinding(\"class.cds--layout--size-sm\") get sizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get sizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get sizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\t@HostBinding(\"class.cds--text-input--light\") get isLightTheme() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\t@HostBinding(\"class.cds--text-input\") inputClass = true;\n\t@HostBinding(\"class.cds--text-input--invalid\") @Input() invalid = false;\n\t@HostBinding(\"class.cds--text-input--warning\") @Input() warn = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` input theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@HostBinding(\"attr.data-invalid\") get getInvalidAttribute() {\n\t\treturn this.invalid ? true : undefined;\n\t}\n\n\tprivate _type = \"password\";\n\n\tconstructor(protected elementRef: ElementRef, protected renderer: Renderer2) { }\n\n\tngAfterViewInit(): void {\n\t\tthis.renderer.setAttribute(this.elementRef.nativeElement, \"type\", this._type);\n\t}\n}\n", "selector": "[cdsPassword], [ibmPassword]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 53, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nInput field render size\n", "description": "

Input field render size

\n", "line": 66, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 55, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` input theme", "jsdoctags": [ { "pos": 1495, "end": 1587, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 1496, "end": 1506, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5 - Use cdsLayer directive instead\nlight or dark input theme

\n" } ], "line": 61, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "type", "deprecated": false, "deprecationMessage": "", "line": 15, "type": "string", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 54, "type": "boolean", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.data-invalid", "deprecated": false, "deprecationMessage": "", "line": 68, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-lg", "deprecated": false, "deprecationMessage": "", "line": 45, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-md", "deprecated": false, "deprecationMessage": "", "line": 42, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-sm", "deprecated": false, "deprecationMessage": "", "line": 39, "type": "boolean", "decorators": [] }, { "name": "class.cds--password-input", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 23, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 52, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input--lg", "deprecated": false, "deprecationMessage": "", "line": 34, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input--light", "deprecated": false, "deprecationMessage": "", "line": 48, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input--md", "deprecated": false, "deprecationMessage": "", "line": 31, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input--sm", "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "pos": 493, "end": 552, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 494, "end": 498, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "
    \n
  • remove cds--text-input--${size} classes in v12
    • \n
\n" } ], "line": 28, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "inputClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 52, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--text-input'" } ], "modifierKind": [ 170 ] }, { "name": "passwordInputClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 23, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--password-input'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [], "implements": [ "AfterViewInit" ], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "" } ], "line": 72, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "accessors": { "type": { "name": "type", "setSignature": { "name": "type", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "type", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 15, "jsdoctags": [ { "name": "type", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "isSizeSm": { "name": "isSizeSm", "getSignature": { "name": "isSizeSm", "type": "", "returnType": "", "line": 28, "rawdescription": "\n\n", "description": "", "jsdoctags": [ { "pos": 493, "end": 552, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 494, "end": 498, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "
    \n
  • remove cds--text-input--${size} classes in v12
    • \n
\n" } ] } }, "isSizeMd": { "name": "isSizeMd", "getSignature": { "name": "isSizeMd", "type": "", "returnType": "", "line": 31 } }, "isSizelg": { "name": "isSizelg", "getSignature": { "name": "isSizelg", "type": "", "returnType": "", "line": 34 } }, "sizeSm": { "name": "sizeSm", "getSignature": { "name": "sizeSm", "type": "", "returnType": "", "line": 39 } }, "sizeMd": { "name": "sizeMd", "getSignature": { "name": "sizeMd", "type": "", "returnType": "", "line": 42 } }, "sizelg": { "name": "sizelg", "getSignature": { "name": "sizelg", "type": "", "returnType": "", "line": 45 } }, "isLightTheme": { "name": "isLightTheme", "getSignature": { "name": "isLightTheme", "type": "", "returnType": "", "line": 48 } }, "getInvalidAttribute": { "name": "getInvalidAttribute", "getSignature": { "name": "getInvalidAttribute", "type": "", "returnType": "", "line": 68 } } } }, { "name": "PopoverContainer", "id": "directive-PopoverContainer-752c04e41e3e90474efc0f00a23fa0777a9dfce8961b78493bae4986846a4ce726356c69a5ea4ba2468d9a052f23b4b817e80792411e55683e490708a9e4fcd4", "file": "src/popover/popover.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectorRef,\n\tDirective,\n\tElementRef,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tNgZone,\n\tOnChanges,\n\tOnDestroy,\n\tOutput,\n\tRenderer2,\n\tSimpleChanges\n} from \"@angular/core\";\nimport {\n\tarrow,\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\toffset,\n\tPlacement\n} from \"@floating-ui/dom\";\n\n// Deprecated popover alignments\ntype oldPlacement = \"top-left\"\n\t| \"top-right\"\n\t| \"bottom-left\"\n\t| \"bottom-right\"\n\t| \"left-bottom\"\n\t| \"left-top\"\n\t| \"right-bottom\"\n\t| \"right-top\";\n\n@Directive({\n\tselector: \"[cdsPopover], [ibmPopover]\"\n})\nexport class PopoverContainer implements AfterViewInit, OnChanges, OnDestroy {\n\t/**\n\t * Set alignment of popover\n\t * As of v5, `oldPlacements` are now deprecated in favor of Placements\n\t *\n\t * When `autoAlign` is set to `true`, alignment may change for best placement\n\t */\n\t@Input() set align(alignment: oldPlacement | Placement) {\n\t\t// If alignment is not passed, the default value will be `undefined`.\n\t\tif (!alignment) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst previousAlignment = this._align;\n\t\tswitch (alignment) {\n\t\t\tcase \"top-left\":\n\t\t\t\tthis._align = \"top-start\";\n\t\t\t\tbreak;\n\t\t\tcase \"top-right\":\n\t\t\t\tthis._align = \"top-end\";\n\t\t\t\tbreak;\n\t\t\tcase \"bottom-left\":\n\t\t\t\tthis._align = \"bottom-start\";\n\t\t\t\tbreak;\n\t\t\tcase \"bottom-right\":\n\t\t\t\tthis._align = \"bottom-end\";\n\t\t\t\tbreak;\n\t\t\tcase \"left-top\":\n\t\t\t\tthis._align = \"left-start\";\n\t\t\t\tbreak;\n\t\t\tcase \"left-bottom\":\n\t\t\t\tthis._align = \"left-end\";\n\t\t\t\tbreak;\n\t\t\tcase \"right-top\":\n\t\t\t\tthis._align = \"right-start\";\n\t\t\t\tbreak;\n\t\t\tcase \"right-bottom\":\n\t\t\t\tthis._align = \"right-end\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tthis._align = alignment as Placement;\n\t\t\t\tbreak;\n\t\t}\n\t\tthis.updateAlignmentClass(this._align, previousAlignment);\n\t}\n\n\t_align: Placement = \"bottom\";\n\treadonly alignmentClassPrefix = \"cds--popover--\";\n\n\t/**\n\t * Emits an event when the dialog is closed\n\t */\n\t@Output() onClose: EventEmitter = new EventEmitter();\n\t/**\n\t * Emits an event when the dialog is opened\n\t */\n\t@Output() onOpen: EventEmitter = new EventEmitter();\n\t/**\n\t * Emits an event when the state of `isOpen` changes. Allows `isOpen` to be double bound\n\t */\n\t@Output() isOpenChange = new EventEmitter();\n\t/**\n\t * Show caret at the alignment position\n\t */\n\t@HostBinding(\"class.cds--popover--caret\") @Input() caret = true;\n\t/**\n\t * Enable drop shadow around the popover container\n\t */\n\t@HostBinding(\"class.cds--popover--drop-shadow\") @Input() dropShadow = true;\n\t/**\n\t * Enable high contrast for popover container\n\t */\n\t@HostBinding(\"class.cds--popover--high-contrast\") @Input() highContrast = false;\n\t/**\n\t * **Experimental**: Use floating-ui to position the tooltip\n\t * This is not toggleable - should be assigned once\n\t */\n\t@HostBinding(\"class.cds--popover--auto-align\") @Input() autoAlign = false;\n\t@HostBinding(\"class.cds--popover-container\") containerClass = true;\n\t@Input() @HostBinding(\"class.cds--popover--open\") isOpen = false;\n\n\tprotected popoverContentRef: HTMLElement;\n\tprotected caretRef: HTMLElement;\n\tprotected caretOffset: number;\n\tprotected caretHeight: number;\n\tprotected unmountFloatingElement: Function;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) {}\n\n\t/**\n\t * Handles emitting open/close event\n\t * @param open - Is the popover container open\n\t * @param event - Event\n\t */\n\thandleChange(open: boolean, event?: Event) {\n\t\t// We only emit the event when parameter has an event to keep existing behavior\n\t\tif ((this.isOpen !== open) && event) {\n\t\t\tthis.isOpenChange.emit(open);\n\t\t}\n\n\t\tif (open) {\n\t\t\tif (event) {\n\t\t\t\tthis.onOpen.emit(event);\n\t\t\t}\n\n\t\t\t// when auto alignment is enabled, use auto update to set the placement for the element\n\t\t\tif (this.autoAlign) {\n\t\t\t\tif (this.caretRef) {\n\t\t\t\t\t// Get caret offset/height property\n\t\t\t\t\t// Getting computed styles once every open, otherwise expensive.\n\t\t\t\t\tconst computedStyle = getComputedStyle(this.caretRef);\n\t\t\t\t\tconst offset = computedStyle.getPropertyValue(\"--cds-popover-offset\");\n\t\t\t\t\tconst height = computedStyle.getPropertyValue(\"--cds-popover-caret-height\");\n\t\t\t\t\tthis.caretOffset = (offset?.includes(\"px\") ? Number(offset.split(\"px\", 1)[0]) : Number(offset.split(\"rem\", 1)[0]) * 16) || 10;\n\t\t\t\t\tthis.caretHeight = (height?.includes(\"px\") ? Number(height.split(\"px\", 1)[0]) : Number(height.split(\"rem\", 1)[0]) * 16) || 6;\n\t\t\t\t}\n\t\t\t\tif (this.elementRef.nativeElement && this.popoverContentRef) {\n\t\t\t\t\tthis.unmountFloatingElement = autoUpdate(\n\t\t\t\t\t\tthis.elementRef.nativeElement,\n\t\t\t\t\t\tthis.popoverContentRef,\n\t\t\t\t\t\tthis.recomputePosition.bind(this)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tthis.cleanUp();\n\t\t\tif (event) {\n\t\t\t\tthis.onClose.emit(event);\n\t\t\t}\n\t\t}\n\t\tthis.isOpen = open;\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n\n\troundByDPR(value) {\n\t\tconst dpr = window.devicePixelRatio || 1;\n\t\treturn Math.round(value * dpr) / dpr;\n\t}\n\n\t/**\n\t * Compute position of tooltip when autoAlign is enabled\n\t */\n\trecomputePosition() {\n\t\t// Run outside of angular zone to avoid unnecessary change detection and rely on floating-ui\n\t\tthis.ngZone.runOutsideAngular(async () => {\n\t\t\tconst { x, y, placement, middlewareData } = await computePosition(\n\t\t\t\tthis.elementRef.nativeElement,\n\t\t\t\tthis.popoverContentRef,\n\t\t\t\t{\n\t\t\t\t\tplacement: this._align,\n\t\t\t\t\tstrategy: \"fixed\",\n\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\toffset(this.caretOffset),\n\t\t\t\t\t\tflip({ fallbackAxisSideDirection: \"start\" }),\n\t\t\t\t\t\tarrow({ element: this.caretRef })\n\t\t\t\t\t]\n\t\t\t\t});\n\n\t\t\tconst previousAlignment = this._align;\n\t\t\tthis._align = placement;\n\t\t\tthis.updateAlignmentClass(this._align, previousAlignment);\n\n\t\t\t// Using CSSOM to manipulate CSS to avoid content security policy inline-src\n\t\t\t// https://github.com/w3c/webappsec-csp/issues/212\n\t\t\tObject.assign(this.popoverContentRef.style, {\n\t\t\t\tposition: \"fixed\",\n\t\t\t\ttop: \"0\",\n\t\t\t\tleft: \"0\",\n\t\t\t\t// Using transform instead of top/left position to improve performance\n\t\t\t\ttransform: `translate(${this.roundByDPR(x)}px,${this.roundByDPR(y)}px)`\n\t\t\t});\n\n\t\t\tif (middlewareData.arrow) {\n\t\t\t\tconst { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n\t\t\t\tconst staticSide = {\n\t\t\t\t\ttop: \"bottom\",\n\t\t\t\t\tright: \"left\",\n\t\t\t\t\tbottom: \"top\",\n\t\t\t\t\tleft: \"right\"\n\t\t\t\t}[placement.split(\"-\")[0]];\n\n\t\t\t\tthis.caretRef.style.left = arrowX != null ? `${arrowX}px` : \"\";\n\t\t\t\tthis.caretRef.style.top = arrowY != null ? `${arrowY}px` : \"\";\n\t\t\t\tthis.caretRef.style.right = \"\";\n\t\t\t\tthis.caretRef.style.bottom = \"\";\n\n\t\t\t\tif (staticSide) {\n\t\t\t\t\tthis.caretRef.style[staticSide] = `${-this.caretHeight}px`;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Close the popover and reopen it with updated values without emitting an event\n\t * @param changes\n\t */\n\tngOnChanges(changes: SimpleChanges): void {\n\t\t// Close and reopen the popover, handle alignment/programmatic open/close\n\t\tconst originalState = this.isOpen;\n\t\tthis.handleChange(false);\n\n\t\t// Ignore first change since content is not initialized\n\t\tif (changes.autoAlign && !changes.autoAlign.firstChange) {\n\t\t\t// Reset the inline styles\n\t\t\tthis.popoverContentRef = this.elementRef.nativeElement.querySelector(\".cds--popover-content\");\n\t\t\tthis.popoverContentRef.setAttribute(\"style\", \"\");\n\t\t\tthis.caretRef = this.elementRef.nativeElement.querySelector(\"span.cds--popover-caret\");\n\t\t}\n\n\t\tthis.handleChange(originalState);\n\t}\n\n\t/**\n\t * Handle initialization of element\n\t */\n\tngAfterViewInit(): void {\n\t\tthis.initializeReferences();\n\t}\n\n\tinitializeReferences(): void {\n\t\tthis.updateAlignmentClass(this._align);\n\n\t\t// Initialize html references since they will not change and are required for popover components\n\t\tthis.popoverContentRef = this.elementRef.nativeElement.querySelector(\".cds--popover-content\");\n\t\tthis.caretRef = this.elementRef.nativeElement.querySelector(\"span.cds--popover-caret\");\n\n\t\t// Handle initial isOpen\n\t\tthis.handleChange(this.isOpen);\n\t}\n\n\t/**\n\t * Clean up\n\t */\n\tngOnDestroy(): void {\n\t\tthis.cleanUp();\n\t}\n\n\t/**\n\t * Clean up `autoUpdate` if auto alignment is enabled\n\t */\n\tcleanUp() {\n\t\tif (this.unmountFloatingElement) {\n\t\t\tthis.unmountFloatingElement();\n\t\t}\n\t\tthis.unmountFloatingElement = undefined;\n\t}\n\n\t/**\n\t * Replace existing previous alignment class with new\n\t * @param previousAlignment\n\t */\n\tupdateAlignmentClass(newAlignment: string, previousAlignment?: string) {\n\t\tif (this.elementRef.nativeElement && previousAlignment !== newAlignment) {\n\t\t\tconst regexp = new RegExp(\"right|top|left|bottom\");\n\t\t\t// Since we are constantly switching, it's safer to delete all matching class names\n\t\t\tthis.elementRef.nativeElement.classList.forEach(className => {\n\t\t\t\tif (regexp.test(className)) {\n\t\t\t\t\tthis.renderer.removeClass(this.elementRef.nativeElement, `${className}`);\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.renderer.addClass(this.elementRef.nativeElement, `${this.alignmentClassPrefix}${newAlignment}`);\n\t\t}\n\t}\n}\n", "selector": "[cdsPopover], [ibmPopover]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "align", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet alignment of popover\nAs of v5, `oldPlacements` are now deprecated in favor of Placements\n\nWhen `autoAlign` is set to `true`, alignment may change for best placement\n", "description": "

Set alignment of popover\nAs of v5, oldPlacements are now deprecated in favor of Placements

\n

When autoAlign is set to true, alignment may change for best placement

\n", "line": 45, "type": "oldPlacement | Placement", "decorators": [] }, { "name": "autoAlign", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n**Experimental**: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once\n", "description": "

Experimental: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once

\n", "line": 115, "type": "boolean", "decorators": [] }, { "name": "caret", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nShow caret at the alignment position\n", "description": "

Show caret at the alignment position

\n", "line": 102, "type": "boolean", "decorators": [] }, { "name": "dropShadow", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEnable drop shadow around the popover container\n", "description": "

Enable drop shadow around the popover container

\n", "line": 106, "type": "boolean", "decorators": [] }, { "name": "highContrast", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEnable high contrast for popover container\n", "description": "

Enable high contrast for popover container

\n", "line": 110, "type": "boolean", "decorators": [] }, { "name": "isOpen", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 117, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "isOpenChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the state of `isOpen` changes. Allows `isOpen` to be double bound\n", "description": "

Emits an event when the state of isOpen changes. Allows isOpen to be double bound

\n", "line": 98, "type": "EventEmitter" }, { "name": "onClose", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the dialog is closed\n", "description": "

Emits an event when the dialog is closed

\n", "line": 90, "type": "EventEmitter" }, { "name": "onOpen", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the dialog is opened\n", "description": "

Emits an event when the dialog is opened

\n", "line": 94, "type": "EventEmitter" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--popover-container", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 116, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "_align", "defaultValue": "\"bottom\"", "deprecated": false, "deprecationMessage": "", "type": "Placement", "optional": false, "description": "", "line": 84 }, { "name": "alignmentClassPrefix", "defaultValue": "\"cds--popover--\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 85, "modifierKind": [ 148 ] }, { "name": "containerClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 116, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--popover-container'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "cleanUp", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 285, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nClean up `autoUpdate` if auto alignment is enabled\n", "description": "

Clean up autoUpdate if auto alignment is enabled

\n" }, { "name": "handleChange", "args": [ { "name": "open", "type": "boolean", "deprecated": false, "deprecationMessage": "" }, { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 137, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles emitting open/close event\n", "description": "

Handles emitting open/close event

\n", "jsdoctags": [ { "name": { "pos": 3305, "end": 3309, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "open" }, "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3299, "end": 3304, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "
    \n
  • Is the popover container open
    • \n
\n" }, { "name": { "pos": 3353, "end": 3358, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "type": "Event", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "pos": 3347, "end": 3352, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "
    \n
  • Event
    • \n
\n" } ] }, { "name": "initializeReferences", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 264, "deprecated": false, "deprecationMessage": "" }, { "name": "recomputePosition", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 185, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCompute position of tooltip when autoAlign is enabled\n", "description": "

Compute position of tooltip when autoAlign is enabled

\n" }, { "name": "roundByDPR", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 177, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "updateAlignmentClass", "args": [ { "name": "newAlignment", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "previousAlignment", "type": "string", "deprecated": false, "deprecationMessage": "", "optional": true } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 296, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReplace existing previous alignment class with new\n", "description": "

Replace existing previous alignment class with new

\n", "jsdoctags": [ { "name": "newAlignment", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": { "pos": 8148, "end": 8165, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "previousAlignment" }, "type": "string", "deprecated": false, "deprecationMessage": "", "optional": true, "tagName": { "pos": 8142, "end": 8147, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] } ], "extends": [], "implements": [ "AfterViewInit", "OnChanges", "OnDestroy" ], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "" }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "" }, { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "" } ], "line": 123, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "accessors": { "align": { "name": "align", "setSignature": { "name": "align", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "alignment", "type": "oldPlacement | Placement", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 45, "rawdescription": "\n\nSet alignment of popover\nAs of v5, `oldPlacements` are now deprecated in favor of Placements\n\nWhen `autoAlign` is set to `true`, alignment may change for best placement\n", "description": "

Set alignment of popover\nAs of v5, oldPlacements are now deprecated in favor of Placements

\n

When autoAlign is set to true, alignment may change for best placement

\n", "jsdoctags": [ { "name": "alignment", "type": "oldPlacement | Placement", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } } } }, { "name": "RouterLinkExtendedDirective", "id": "directive-RouterLinkExtendedDirective-5e5c28177be38ef9a1bb8c74d6e1905dbcc16d89d14393825fd626f312f778691a8d80d24bfe122dd49eb44836e83b6dc0002f93240b5da7e8016ad33ca20820", "file": "src/ui-shell/sidenav/routerlink-extended.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, Input, OnChanges, SimpleChanges } from \"@angular/core\";\nimport { NavigationExtras, RouterLinkWithHref } from \"@angular/router\";\nimport keys from \"lodash-es/keys\";\n\n@Directive({\n\t// tslint:disable-next-line\n\tselector: \"[routerLink]\"\n})\nexport class RouterLinkExtendedDirective extends RouterLinkWithHref implements OnChanges {\n\t// TODO: Change RouterLinkWithHref with RouterLink from angular 15 since RouterLinkWithHref has been deprecated\n\t@Input() routeExtras: NavigationExtras;\n\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes.routeExtras && this.routeExtras) {\n\t\t\tkeys(this.routeExtras).forEach(routeExtraProperty => this[routeExtraProperty] = this.routeExtras[routeExtraProperty]);\n\t\t}\n\n\t\tsuper.ngOnChanges(changes);\n\t}\n}\n", "selector": "[routerLink]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "routeExtras", "deprecated": false, "deprecationMessage": "", "line": 11, "type": "NavigationExtras", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "propertiesClass": [], "methodsClass": [], "extends": [ "RouterLinkWithHref" ], "implements": [ "OnChanges" ] }, { "name": "RowDirective", "id": "directive-RowDirective-01ee2b6eef775640ba20fa97727d9aaa5c19902997b6d06fc46d38386edb3682fa001df6082617c64ab0b6cfbf9ab60f1578313f0c3157926fc33115292b4ab7", "file": "src/grid/row.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsRow], [ibmRow]\"\n})\nexport class RowDirective {\n\t@HostBinding(\"class.cds--row\") baseClass = true;\n\t@HostBinding(\"class.cds--row--condensed\") @Input() condensed = false;\n\t@HostBinding(\"class.cds--row--narrow\") @Input() narrow = false;\n}\n", "selector": "[cdsRow], [ibmRow]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "condensed", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 12, "type": "boolean", "decorators": [] }, { "name": "narrow", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 13, "type": "boolean", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--row", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 11, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "baseClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 11, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--row'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ScrollableList", "id": "directive-ScrollableList-37607ebf37f6ef077c2265b630a7d7a0d14a9c7d9581652b946bba86f0ab283e1bf1007a29a4a3a4a32746b19a5e5aca335fa9646e24c7f43f15efef4e3e8ef9", "file": "src/dropdown/scrollable-list.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import {\n\tInput,\n\tDirective,\n\tElementRef,\n\tHostListener,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewInit\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsScrollableList], [ibmScrollableList]\",\n\texportAs: \"scrollable-list\"\n})\nexport class ScrollableList implements OnChanges, AfterViewInit {\n\t/**\n\t * Optional target list to scroll\n\t */\n\t@Input() nScrollableList: string = null;\n\t/**\n\t * Enables or disables scrolling for the whole directive\n\t */\n\t@Input() scrollEnabled = true;\n\t/**\n\t * Sets the target used for hover scrolling up\n\t */\n\t@Input() scrollUpTarget: HTMLElement;\n\t/**\n\t * Sets the target used for hover scrolling down\n\t */\n\t@Input() scrollDownTarget: HTMLElement;\n\t/**\n\t * How many lines to scroll by each time `wheel` fires\n\t * Defaults to 10 - based on testing this isn't too fast or slow on any platform\n\t */\n\t@Input() scrollBy = 10;\n\n\t// keeps track of the setInterval for hover scrolling\n\tprotected hoverScrollInterval;\n\t// tracks the last touch event\n\tprotected lastTouch;\n\tprotected canScrollUp = false;\n\tprotected canScrollDown = false;\n\tprotected list = this.elementRef.nativeElement;\n\n\tconstructor(protected elementRef: ElementRef) {}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.scrollEnabled) {\n\t\t\tif (changes.scrollEnabled.currentValue) {\n\t\t\t\tthis.list.style.overflow = \"hidden\";\n\t\t\t\tthis.scrollUpTarget.style.display = \"flex\";\n\t\t\t\tthis.scrollDownTarget.style.display = \"flex\";\n\t\t\t\tthis.canScrollUp = true;\n\t\t\t\tthis.canScrollDown = true;\n\t\t\t\tthis.updateScrollHeight();\n\t\t\t\tthis.checkScrollArrows();\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.checkScrollArrows();\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tthis.scrollUpTarget.style.display = \"none\";\n\t\t\t\tthis.scrollDownTarget.style.display = \"none\";\n\t\t\t\tthis.canScrollUp = false;\n\t\t\t\tthis.canScrollDown = false;\n\t\t\t\tthis.list.style.height = null;\n\t\t\t\tthis.list.style.overflow = null;\n\t\t\t\tclearInterval(this.hoverScrollInterval);\n\t\t\t}\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tif (this.nScrollableList) {\n\t\t\tthis.list = this.elementRef.nativeElement.querySelector(this.nScrollableList);\n\t\t}\n\t\tthis.scrollUpTarget.addEventListener(\"mouseover\", () => this.onHoverUp(true));\n\t\tthis.scrollUpTarget.addEventListener(\"mouseout\", () => this.onHoverUp(false));\n\t\tthis.scrollDownTarget.addEventListener(\"mouseover\", () => this.onHoverDown(true));\n\t\tthis.scrollDownTarget.addEventListener(\"mouseout\", () => this.onHoverDown(false));\n\t}\n\n\tpublic updateScrollHeight() {\n\t\tif (this.scrollEnabled) {\n\t\t\tconst container = this.elementRef.nativeElement.parentElement;\n\t\t\tconst containerRect = container.getBoundingClientRect();\n\t\t\tconst innerHeightDiff = this.list.getBoundingClientRect().top - containerRect.top;\n\t\t\tconst outerHeightDiff = containerRect.height - (containerRect.bottom - window.innerHeight);\n\t\t\t// 40 gives us some padding between the bottom of the list,\n\t\t\t// the bottom of the window, and the scroll down button\n\t\t\tconst height = outerHeightDiff - innerHeightDiff - 40;\n\t\t\tthis.list.style.height = `${height}px`;\n\t\t}\n\t}\n\n\tprotected checkScrollArrows() {\n\t\tconst scrollUpHeight = this.scrollUpTarget.offsetHeight;\n\t\tconst scrollDownHeight = this.scrollDownTarget.offsetHeight;\n\t\tif (this.list.scrollTop === 0) {\n\t\t\tif (this.canScrollUp) {\n\t\t\t\tthis.list.style.height = `${parseInt(this.list.style.height, 10) + scrollUpHeight}px`;\n\t\t\t}\n\t\t\tthis.scrollUpTarget.style.display = \"none\";\n\t\t\tthis.canScrollUp = false;\n\t\t} else if (this.list.scrollTop === this.list.scrollTopMax) {\n\t\t\tif (this.canScrollDown) {\n\t\t\t\tthis.list.style.height = `${parseInt(this.list.style.height, 10) + scrollDownHeight}px`;\n\t\t\t}\n\t\t\tthis.scrollDownTarget.style.display = \"none\";\n\t\t\tthis.canScrollDown = false;\n\t\t} else {\n\t\t\tif (!this.canScrollUp) {\n\t\t\t\tthis.list.style.height = `${parseInt(this.list.style.height, 10) - scrollUpHeight}px`;\n\t\t\t}\n\t\t\tif (!this.canScrollDown) {\n\t\t\t\tthis.list.style.height = `${parseInt(this.list.style.height, 10) - scrollDownHeight}px`;\n\t\t\t}\n\t\t\tthis.scrollUpTarget.style.display = \"flex\";\n\t\t\tthis.scrollDownTarget.style.display = \"flex\";\n\t\t\tthis.canScrollUp = true;\n\t\t\tthis.canScrollDown = true;\n\t\t}\n\t}\n\n\t@HostListener(\"wheel\", [\"$event\"])\n\tprotected onWheel(event) {\n\t\tif (event.deltaY < 0) {\n\t\t\tthis.list.scrollTop -= this.scrollBy;\n\t\t} else {\n\t\t\tthis.list.scrollTop += this.scrollBy;\n\t\t}\n\t\t// only prevent the parent/window from scrolling if we can scroll\n\t\tif (!(this.list.scrollTop === this.list.scrollTopMax || this.list.scrollTop === 0)) {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopPropagation();\n\t\t}\n\t\tthis.checkScrollArrows();\n\t}\n\n\t@HostListener(\"touchstart\", [\"$event\"])\n\tprotected onTouchStart(event) {\n\t\tif (event.touches[0]) {\n\t\t\tthis.lastTouch = event.touches[0].clientY;\n\t\t}\n\t}\n\n\t@HostListener(\"touchmove\", [\"$event\"])\n\tprotected onTouchMove(event) {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (event.touches[0]) {\n\t\t\tconst touch = event.touches[0];\n\t\t\tthis.list.scrollTop += this.lastTouch - touch.clientY;\n\t\t\tthis.lastTouch = touch.clientY;\n\t\t\tthis.checkScrollArrows();\n\t\t}\n\t}\n\n\tprotected hoverScrollBy(hovering, amount) {\n\t\tif (hovering) {\n\t\t\tthis.hoverScrollInterval = setInterval(() => {\n\t\t\t\tthis.list.scrollTop += amount;\n\t\t\t\tthis.checkScrollArrows();\n\t\t\t}, 1);\n\t\t} else {\n\t\t\tclearInterval(this.hoverScrollInterval);\n\t\t}\n\t}\n\n\tprotected onHoverUp(hovering) {\n\t\t// how many px/lines to scroll by on hover\n\t\t// 3 is just a random number that felt good\n\t\t// 1 and 2 are too slow, 4 works but it might be a tad fast\n\t\tthis.hoverScrollBy(hovering, -3);\n\t}\n\n\tprotected onHoverDown(hovering) {\n\t\tthis.hoverScrollBy(hovering, 3);\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\tprotected onKeyDown(event) {\n\t\tif (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\tthis.checkScrollArrows();\n\t\t}\n\t}\n}\n", "selector": "[cdsScrollableList], [ibmScrollableList]", "providers": [], "exportAs": "scrollable-list", "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "nScrollableList", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional target list to scroll\n", "description": "

Optional target list to scroll

\n", "line": 19, "type": "string", "decorators": [] }, { "name": "scrollBy", "defaultValue": "10", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHow many lines to scroll by each time `wheel` fires\nDefaults to 10 - based on testing this isn't too fast or slow on any platform\n", "description": "

How many lines to scroll by each time wheel fires\nDefaults to 10 - based on testing this isn't too fast or slow on any platform

\n", "line": 36, "type": "number", "decorators": [] }, { "name": "scrollDownTarget", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the target used for hover scrolling down\n", "description": "

Sets the target used for hover scrolling down

\n", "line": 31, "type": "HTMLElement", "decorators": [] }, { "name": "scrollEnabled", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEnables or disables scrolling for the whole directive\n", "description": "

Enables or disables scrolling for the whole directive

\n", "line": 23, "type": "boolean", "decorators": [] }, { "name": "scrollUpTarget", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the target used for hover scrolling up\n", "description": "

Sets the target used for hover scrolling up

\n", "line": 27, "type": "HTMLElement", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "keydown", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 182 }, { "name": "touchmove", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 148 }, { "name": "touchstart", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 141 }, { "name": "wheel", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 126 } ], "propertiesClass": [], "methodsClass": [ { "name": "updateScrollHeight", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 83, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ] } ], "extends": [], "implements": [ "OnChanges", "AfterViewInit" ], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" } ], "line": 44, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, { "name": "StackDirective", "id": "directive-StackDirective-5ddb98c69938c161368a53c0623a94b1ade16328fc524defc11a322ead027e1cd0384c8e2c56919f7c1c50909c1f3a3004a4c769583339bfeedba3ba1ce165bc", "file": "src/layout/stack.directive.ts", "type": "directive", "description": "

Stack elements horizontally or vertically using this helper directive. Get started with importing the module:

\nExample :
import { LayoutModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nStack elements horizontally or vertically using this helper directive. Get started with importing the module:\n\n```typescript\nimport { LayoutModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/layout-stack--basic)\n", "sourceCode": "import {\n\tDirective,\n\tElementRef,\n\tHostBinding,\n\tInput,\n\tRenderer2\n} from \"@angular/core\";\n\n/**\n * Stack elements horizontally or vertically using this helper directive. Get started with importing the module:\n *\n * ```typescript\n * import { LayoutModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/layout-stack--basic)\n */\n@Directive({\n\tselector: \"[cdsStack], [ibmStack]\"\n})\nexport class StackDirective {\n\t@HostBinding(\"class.cds--stack-horizontal\") get isHorizontal() {\n\t\treturn this.cdsStack === \"horizontal\";\n\t}\n\n\t@HostBinding(\"class.cds--stack-vertical\") get isVertical() {\n\t\treturn this.cdsStack === \"vertical\" || !this.cdsStack;\n\t}\n\n\t/**\n\t * @deprecated as of v5 - Use `cdsStack` input property instead\n\t */\n\t@Input() set ibmStack(type: \"vertical\" | \"horizontal\") {\n\t\tthis.cdsStack = type;\n\t}\n\n\t/**\n\t * Orientation of the items in the stack, defaults to `vertical`\n\t * Empty string is equivalent to \"vertical\"\n\t *\n\t * Empty string has been added as an option for Angular 16+ to resolve type errors\n\t */\n\t@Input() cdsStack: \"vertical\" | \"horizontal\" | \"\" = \"vertical\";\n\n\t/**\n\t * Gap in the layout, provide a custom value (string) or a step from the spacing scale (number)\n\t */\n\t@Input() set gap(num: number) {\n\t\tif (num !== undefined) {\n\t\t\tthis.render.removeClass(this.hostElement.nativeElement, `cds--stack-scale-${this._gap}`);\n\t\t\tthis.render.addClass(this.hostElement.nativeElement, `cds--stack-scale-${num}`);\n\t\t\tthis._gap = num;\n\t\t}\n\t}\n\t// Used to track previous value of gap so we can dynamically remove class\n\tprivate _gap;\n\n\tconstructor(private render: Renderer2, private hostElement: ElementRef) {}\n}\n", "selector": "[cdsStack], [ibmStack]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "cdsStack", "defaultValue": "\"vertical\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOrientation of the items in the stack, defaults to `vertical`\nEmpty string is equivalent to \"vertical\"\n\nEmpty string has been added as an option for Angular 16+ to resolve type errors\n", "description": "

Orientation of the items in the stack, defaults to vertical\nEmpty string is equivalent to "vertical"

\n

Empty string has been added as an option for Angular 16+ to resolve type errors

\n", "line": 43, "type": "\"vertical\" | \"horizontal\" | string", "decorators": [] }, { "name": "gap", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nGap in the layout, provide a custom value (string) or a step from the spacing scale (number)\n", "description": "

Gap in the layout, provide a custom value (string) or a step from the spacing scale (number)

\n", "line": 48, "type": "number", "decorators": [] }, { "name": "ibmStack", "deprecated": true, "deprecationMessage": "as of v5 - Use `cdsStack` input property instead", "jsdoctags": [ { "pos": 683, "end": 746, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 684, "end": 694, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

as of v5 - Use cdsStack input property instead

\n" } ], "line": 33, "type": "\"vertical\" | \"horizontal\"", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--stack-horizontal", "deprecated": false, "deprecationMessage": "", "line": 22, "type": "boolean", "decorators": [] }, { "name": "class.cds--stack-vertical", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [], "methodsClass": [], "extends": [], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "render", "type": "Renderer2", "deprecated": false, "deprecationMessage": "" }, { "name": "hostElement", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" } ], "line": 56, "jsdoctags": [ { "name": "render", "type": "Renderer2", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "hostElement", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "accessors": { "isHorizontal": { "name": "isHorizontal", "getSignature": { "name": "isHorizontal", "type": "", "returnType": "", "line": 22 } }, "isVertical": { "name": "isVertical", "getSignature": { "name": "isVertical", "type": "", "returnType": "", "line": 26 } }, "ibmStack": { "name": "ibmStack", "setSignature": { "name": "ibmStack", "type": "void", "deprecated": true, "deprecationMessage": "

as of v5 - Use cdsStack input property instead

\n", "args": [ { "name": "type", "type": "\"vertical\" | \"horizontal\"", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 33, "rawdescription": "\n\n", "description": "", "jsdoctags": [ { "name": "type", "type": "\"vertical\" | \"horizontal\"", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "gap": { "name": "gap", "setSignature": { "name": "gap", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "num", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 48, "rawdescription": "\n\nGap in the layout, provide a custom value (string) or a step from the spacing scale (number)\n", "description": "

Gap in the layout, provide a custom value (string) or a step from the spacing scale (number)

\n", "jsdoctags": [ { "name": "num", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } } } }, { "name": "TabHeader", "id": "directive-TabHeader-365f0cc2489f10fb45da315e1edd1c6fc3742a9d5eba030fa15d752d711635d5347000e9084f3fecb1c1a6063394d596a3fb49734ce88b12809f7d6466f1f216", "file": "src/tabs/tab-header.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import {\n\tDirective,\n\tInput,\n\tElementRef,\n\tEventEmitter,\n\tOutput,\n\tAfterViewInit,\n\tHostBinding,\n\tHostListener\n} from \"@angular/core\";\n\nimport { Tab } from \"./tab.component\";\n\n@Directive({\n\tselector: \"[cdsTabHeader], [ibmTabHeader]\"\n})\nexport class TabHeader implements AfterViewInit {\n\t@HostBinding(\"attr.tabIndex\") get tabIndex() {\n\t\treturn this.active ? 0 : -1;\n\t}\n\n\t@HostBinding(\"class.cds--tabs__nav-item--selected\") get isSelected() {\n\t\treturn this.active;\n\t}\n\n\t@HostBinding(\"class.cds--tabs__nav-item--disabled\") get isDisabled() {\n\t\treturn this.disabled;\n\t}\n\t/**\n\t * Set to 'true' to have pane reference cached and not reloaded on tab switching.\n\t */\n\t@Input() set cacheActive(shouldCache: boolean) {\n\t\tthis._cacheActive = shouldCache;\n\n\t\t// Updates the pane references associated with the tab header when cache active is changed.\n\t\tif (this.paneReference) {\n\t\t\tthis.paneReference.cacheActive = this.cacheActive;\n\t\t}\n\t}\n\n\t@Input() set paneTabIndex(tabIndex: number | null) {\n\t\tif (this.paneReference) {\n\t\t\tthis.paneReference.tabIndex = tabIndex;\n\t\t}\n\t}\n\n\tget cacheActive() {\n\t\treturn this._cacheActive;\n\t}\n\t/**\n\t * Indicates whether the `Tab` is active/selected.\n\t * Determines whether it's `TabPanel` is rendered.\n\t */\n\t@Input() active = false;\n\t/**\n\t * Indicates whether or not the `Tab` item is disabled.\n\t */\n\t@Input() disabled = false;\n\n\t@HostBinding(\"attr.type\") type = \"button\";\n\t@HostBinding(\"attr.aria-selected\") ariaSelected = this.active;\n\t@HostBinding(\"attr.aria-disabled\") ariaDisabled = this.disabled;\n\t@HostBinding(\"class.cds--tabs__nav-item\") navItem = true;\n\t@HostBinding(\"class.cds--tabs__nav-link\") navLink = true;\n\n\t/**\n\t * Reference to the corresponsing tab pane.\n\t */\n\t@Input() paneReference: Tab;\n\t@HostBinding(\"attr.title\") @Input() title;\n\n\t/**\n\t * Value 'selected' to be emitted after a new `Tab` is selected.\n\t */\n\n\t@Output() selected = new EventEmitter();\n\n\tprotected _cacheActive = false;\n\n\tconstructor(private host: ElementRef) {}\n\n\t@HostListener(\"click\")\n\tonClick() {\n\t\tthis.selectTab();\n\t}\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.title = this.title ? this.title : this.host.nativeElement.textContent;\n\t\t});\n\t}\n\n\tselectTab() {\n\t\tthis.focus();\n\t\tif (!this.disabled) {\n\t\t\tthis.selected.emit();\n\t\t\tthis.active = true;\n\t\t\tif (this.paneReference) {\n\t\t\t\tthis.paneReference.active = true;\n\t\t\t}\n\t\t}\n\t}\n\n\tfocus() {\n\t\tthis.host.nativeElement.focus();\n\t}\n}\n", "selector": "[cdsTabHeader], [ibmTabHeader]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "active", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nIndicates whether the `Tab` is active/selected.\nDetermines whether it's `TabPanel` is rendered.\n", "description": "

Indicates whether the Tab is active/selected.\nDetermines whether it's TabPanel is rendered.

\n", "line": 54, "type": "boolean", "decorators": [] }, { "name": "cacheActive", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to 'true' to have pane reference cached and not reloaded on tab switching.\n", "description": "

Set to 'true' to have pane reference cached and not reloaded on tab switching.

\n", "line": 32, "type": "boolean", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nIndicates whether or not the `Tab` item is disabled.\n", "description": "

Indicates whether or not the Tab item is disabled.

\n", "line": 58, "type": "boolean", "decorators": [] }, { "name": "paneReference", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReference to the corresponsing tab pane.\n", "description": "

Reference to the corresponsing tab pane.

\n", "line": 69, "type": "Tab", "decorators": [] }, { "name": "paneTabIndex", "deprecated": false, "deprecationMessage": "", "line": 41, "type": "number | null", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "line": 70, "type": "any", "decorators": [] } ], "outputsClass": [ { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue 'selected' to be emitted after a new `Tab` is selected.\n", "description": "

Value 'selected' to be emitted after a new Tab is selected.

\n", "line": 76, "type": "EventEmitter" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.aria-disabled", "defaultValue": "this.disabled", "deprecated": false, "deprecationMessage": "", "line": 62, "type": "boolean", "decorators": [] }, { "name": "attr.aria-selected", "defaultValue": "this.active", "deprecated": false, "deprecationMessage": "", "line": 61, "type": "boolean", "decorators": [] }, { "name": "attr.tabIndex", "deprecated": false, "deprecationMessage": "", "line": 18, "type": "0 | -1", "decorators": [] }, { "name": "attr.type", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "line": 60, "type": "string", "decorators": [] }, { "name": "class.cds--tabs__nav-item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 63, "type": "boolean", "decorators": [] }, { "name": "class.cds--tabs__nav-item--disabled", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "boolean", "decorators": [] }, { "name": "class.cds--tabs__nav-item--selected", "deprecated": false, "deprecationMessage": "", "line": 22, "type": "boolean", "decorators": [] }, { "name": "class.cds--tabs__nav-link", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 64, "type": "boolean", "decorators": [] } ], "hostListeners": [ { "name": "click", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 83 } ], "propertiesClass": [ { "name": "ariaDisabled", "defaultValue": "this.disabled", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 62, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.aria-disabled'" } ], "modifierKind": [ 170 ] }, { "name": "ariaSelected", "defaultValue": "this.active", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 61, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.aria-selected'" } ], "modifierKind": [ 170 ] }, { "name": "navItem", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 63, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--tabs__nav-item'" } ], "modifierKind": [ 170 ] }, { "name": "navLink", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 64, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--tabs__nav-link'" } ], "modifierKind": [ 170 ] }, { "name": "type", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 60, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.type'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "focus", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 104, "deprecated": false, "deprecationMessage": "" }, { "name": "onClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 83, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'click'" } ], "modifierKind": [ 170 ] }, { "name": "selectTab", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 93, "deprecated": false, "deprecationMessage": "" } ], "extends": [], "implements": [ "AfterViewInit" ], "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "host", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" } ], "line": 78, "jsdoctags": [ { "name": "host", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "accessors": { "tabIndex": { "name": "tabIndex", "getSignature": { "name": "tabIndex", "type": "", "returnType": "", "line": 18 } }, "isSelected": { "name": "isSelected", "getSignature": { "name": "isSelected", "type": "", "returnType": "", "line": 22 } }, "isDisabled": { "name": "isDisabled", "getSignature": { "name": "isDisabled", "type": "", "returnType": "", "line": 26 } }, "cacheActive": { "name": "cacheActive", "setSignature": { "name": "cacheActive", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "shouldCache", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 32, "rawdescription": "\n\nSet to 'true' to have pane reference cached and not reloaded on tab switching.\n", "description": "

Set to 'true' to have pane reference cached and not reloaded on tab switching.

\n", "jsdoctags": [ { "name": "shouldCache", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "cacheActive", "type": "", "returnType": "", "line": 47 } }, "paneTabIndex": { "name": "paneTabIndex", "setSignature": { "name": "paneTabIndex", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "tabIndex", "type": "number | null", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 41, "jsdoctags": [ { "name": "tabIndex", "type": "number | null", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } } } }, { "name": "TableDirective", "id": "directive-TableDirective-dfc907db4882a1de18b65785ae095086b1559467f72df76c81e6b69a7355e5dc184af9a4e02ce1267ee9c65ebeab26e7428a3bc52ffc8767340ab21e6c7045b0", "file": "src/table/table.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding, Input } from \"@angular/core\";\nimport { TableRowSize } from \"./table.types\";\n\n@Directive({\n\tselector: \"[cdsTable], [ibmTable]\"\n})\nexport class TableDirective {\n\t@Input() @HostBinding(\"class.cds--data-table--sort\") sortable = true;\n\n\t@Input() @HostBinding(\"class.cds--data-table--no-border\") noBorder = true;\n\n\t@Input() @HostBinding(\"class.cds--data-table--zebra\") striped = false;\n\n\t@Input() @HostBinding(\"class.cds--skeleton\") skeleton = false;\n\n\t/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\n\n\t@HostBinding(\"class.cds--data-table\") tableClass = true;\n\n\t// Bind table size class\n\t@HostBinding(\"class.cds--data-table--xs\") get extraSmallSize() { return this.size === \"xs\"; }\n\t@HostBinding(\"class.cds--data-table--sm\") get smallSize() { return this.size === \"sm\"; }\n\t@HostBinding(\"class.cds--data-table--md\") get mediumSize() { return this.size === \"md\"; }\n\t@HostBinding(\"class.cds--data-table--lg\") get LargeSize() { return this.size === \"lg\"; }\n\t@HostBinding(\"class.cds--data-table--xl\") get extraLargeSize() { return this.size === \"xl\"; }\n\n}\n", "selector": "[cdsTable], [ibmTable]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "noBorder", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 10, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSize of the table rows.\n", "description": "

Size of the table rows.

\n", "line": 19, "type": "TableRowSize", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 14, "type": "boolean", "decorators": [] }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 8, "type": "boolean", "decorators": [] }, { "name": "striped", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 12, "type": "boolean", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--data-table", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 21, "type": "boolean", "decorators": [] }, { "name": "class.cds--data-table--lg", "deprecated": false, "deprecationMessage": "", "line": 27, "type": "boolean", "decorators": [] }, { "name": "class.cds--data-table--md", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "boolean", "decorators": [] }, { "name": "class.cds--data-table--sm", "deprecated": false, "deprecationMessage": "", "line": 25, "type": "boolean", "decorators": [] }, { "name": "class.cds--data-table--xl", "deprecated": false, "deprecationMessage": "", "line": 28, "type": "boolean", "decorators": [] }, { "name": "class.cds--data-table--xs", "deprecated": false, "deprecationMessage": "", "line": 24, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "tableClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 21, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--data-table'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [], "accessors": { "extraSmallSize": { "name": "extraSmallSize", "getSignature": { "name": "extraSmallSize", "type": "", "returnType": "", "line": 24 } }, "smallSize": { "name": "smallSize", "getSignature": { "name": "smallSize", "type": "", "returnType": "", "line": 25 } }, "mediumSize": { "name": "mediumSize", "getSignature": { "name": "mediumSize", "type": "", "returnType": "", "line": 26 } }, "LargeSize": { "name": "LargeSize", "getSignature": { "name": "LargeSize", "type": "", "returnType": "", "line": 27 } }, "extraLargeSize": { "name": "extraLargeSize", "getSignature": { "name": "extraLargeSize", "type": "", "returnType": "", "line": 28 } } } }, { "name": "TableHeadCellLabel", "id": "directive-TableHeadCellLabel-ae749cd4642bda70f2ea17ae5743c3e9afb3e415ef6ffb2c4c7c1bbe75f67453e23c866703f45f8150ff02a68101971879f75832c6b737c1887e425d1b252141", "file": "src/table/head/table-head-cell-label.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]\"\n})\nexport class TableHeadCellLabel {\n\t@HostBinding(\"class.cds--table-header-label\") baseClass = true;\n}\n", "selector": "[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--table-header-label", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "baseClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--table-header-label'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "TableHeaderDescription", "id": "directive-TableHeaderDescription-f6b92f60404a7efe05d26724c1d71971b8c2dae0aca9f824a0917fe63287bc9a1dbfcc58a6170e2de557ed68454974ca58f8838c55ba90b373b9b9ccd22fb2ea", "file": "src/table/header/table-header-description.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding, Input } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsTableHeaderDescription], [ibmTableHeaderDescription]\"\n})\nexport class TableHeaderDescription {\n\tstatic counter = 0;\n\n\t@HostBinding(\"attr.id\") @Input() id = `table-description-${TableHeaderDescription.counter++}`;\n\t@HostBinding(\"class.cds--data-table-header__description\") descriptionClass = true;\n}\n", "selector": "[cdsTableHeaderDescription], [ibmTableHeaderDescription]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "id", "defaultValue": "`table-description-${TableHeaderDescription.counter++}`", "deprecated": false, "deprecationMessage": "", "line": 9, "type": "string", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--data-table-header__description", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 10, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "counter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 7, "modifierKind": [ 126 ] }, { "name": "descriptionClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 10, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--data-table-header__description'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "TableHeaderTitle", "id": "directive-TableHeaderTitle-0d996c1cb3e9c330696d4ea04bcebbcc6cdb1b7f650536956e25181ee53de162b509ff279a8d337048f18c4fc8211f15c49a0395843cbd49c87f8e9d7d93703e", "file": "src/table/header/table-header-title.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsTableHeaderTitle], [ibmTableHeaderTitle]\"\n})\nexport class TableHeaderTitle {\n\tstatic counter = 0;\n\n\t@HostBinding(\"attr.id\") @Input() id = `table-title-${TableHeaderTitle.counter++}`;\n\t@HostBinding(\"class.cds--data-table-header__title\") titleClass = true;\n}\n", "selector": "[cdsTableHeaderTitle], [ibmTableHeaderTitle]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "id", "defaultValue": "`table-title-${TableHeaderTitle.counter++}`", "deprecated": false, "deprecationMessage": "", "line": 13, "type": "string", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--data-table-header__title", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 14, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "counter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 11, "modifierKind": [ 126 ] }, { "name": "titleClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 14, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--data-table-header__title'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "TagIconDirective", "id": "directive-TagIconDirective-9dd312d1ac95dd89098a9bb1fa9378101eda24c999093b11785a6a111cec157212c04a44d712b4fc6b10d0466f646d9b4efaf571d8fd665ce55e774fbfc637ad", "file": "src/tag/tag-icon.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsTagIcon], [ibmTagIcon]\"\n})\nexport class TagIconDirective {\n\t@HostBinding(\"class.cds--tag__custom-icon\") tagIcon = true;\n}\n", "selector": "[cdsTagIcon], [ibmTagIcon]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--tag__custom-icon", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "tagIcon", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--tag__custom-icon'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "TextArea", "id": "directive-TextArea-8d330b7a2bb57091bffb8b71f610d9f3f98049b5d8dfb70f002d482b00d7509202e1ed207dc3f39eb43e3501ef0eddbe53558b9d3882d3c690ad73e626db938f", "file": "src/input/text-area.directive.ts", "type": "directive", "description": "

A directive for applying styling to a textarea element.

\n

Example:

\nExample :
<textarea cdsTextArea></textarea>

See the vanilla carbon docs for more detail.

\n", "rawdescription": "\n\nA directive for applying styling to a textarea element.\n\nExample:\n\n```html\n\n```\n\nSee the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.\n", "sourceCode": "import { Directive, HostBinding, Input } from \"@angular/core\";\n\n/**\n * A directive for applying styling to a textarea element.\n *\n * Example:\n *\n * ```html\n * \n * ```\n *\n * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.\n */\n@Directive({\n\tselector: \"[cdsTextArea], [ibmTextArea]\"\n})\nexport class TextArea {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` input theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@HostBinding(\"class.cds--text-area\") baseClass = true;\n\t@HostBinding(\"class.cds--text-area--invalid\") @Input() invalid = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\t@HostBinding(\"class.cds--text-area--light\") get isLightTheme() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\t@HostBinding(\"attr.data-invalid\") get getInvalidAttr() {\n\t\treturn this.invalid ? true : undefined;\n\t}\n}\n", "selector": "[cdsTextArea], [ibmTextArea]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 25, "type": "boolean", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` input theme", "jsdoctags": [ { "pos": 410, "end": 502, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 411, "end": 421, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5 - Use cdsLayer directive instead\nlight or dark input theme

\n" } ], "line": 22, "type": "\"light\" | \"dark\"", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.data-invalid", "deprecated": false, "deprecationMessage": "", "line": 31, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-area", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 24, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-area--light", "deprecated": false, "deprecationMessage": "", "line": 27, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "baseClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 24, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--text-area'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [], "accessors": { "isLightTheme": { "name": "isLightTheme", "getSignature": { "name": "isLightTheme", "type": "", "returnType": "", "line": 27 } }, "getInvalidAttr": { "name": "getInvalidAttr", "getSignature": { "name": "getInvalidAttr", "type": "", "returnType": "", "line": 31 } } } }, { "name": "TextInput", "id": "directive-TextInput-65a35808bf737a7b8eba08b1b54da0b59becf4132bc81901e672afb6e36e121fe507d68be484b85e05a1f6f916a845db77c8ccf0491beb0a7929260ea6418521", "file": "src/input/input.directive.ts", "type": "directive", "description": "

A directive for applying styling to an input element.

\n

Example:

\nExample :
<input cdsText/>

See the vanilla carbon docs for more detail.

\n", "rawdescription": "\n\nA directive for applying styling to an input element.\n\nExample:\n\n```html\n\n```\n\nSee the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.\n", "sourceCode": "import { Directive, HostBinding, Input } from \"@angular/core\";\n\n/**\n * A directive for applying styling to an input element.\n *\n * Example:\n *\n * ```html\n * \n * ```\n *\n * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.\n */\n@Directive({\n\tselector: \"[cdsText], [ibmText]\"\n})\nexport class TextInput {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` input theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@HostBinding(\"class.cds--text-input\") inputClass = true;\n\n\t/**\n\t * @todo - remove `cds--text-input--${size}` classes in v12\n\t */\n\t@HostBinding(\"class.cds--text-input--sm\") get isSizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--text-input--md\") get isSizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--text-input--lg\") get isSizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t// Size\n\t@HostBinding(\"class.cds--layout--size-sm\") get sizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get sizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get sizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t@HostBinding(\"class.cds--text-input--invalid\") @Input() invalid = false;\n\t@HostBinding(\"class.cds--text-input--warning\") @Input() warn = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\t@HostBinding(\"class.cds--text-input--light\") get isLightTheme() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\t@HostBinding(\"attr.data-invalid\") get getInvalidAttribute() {\n\t\treturn this.invalid ? true : undefined;\n\t}\n\n}\n", "selector": "[cdsText], [ibmText]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 55, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nInput field render size\n", "description": "

Input field render size

\n", "line": 27, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 57, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` input theme", "jsdoctags": [ { "pos": 384, "end": 476, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 385, "end": 395, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5 - Use cdsLayer directive instead\nlight or dark input theme

\n" } ], "line": 22, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 56, "type": "boolean", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.data-invalid", "deprecated": false, "deprecationMessage": "", "line": 62, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-lg", "deprecated": false, "deprecationMessage": "", "line": 51, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-md", "deprecated": false, "deprecationMessage": "", "line": 48, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-sm", "deprecated": false, "deprecationMessage": "", "line": 45, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 29, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input--lg", "deprecated": false, "deprecationMessage": "", "line": 40, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input--light", "deprecated": false, "deprecationMessage": "", "line": 58, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input--md", "deprecated": false, "deprecationMessage": "", "line": 37, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input--sm", "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "pos": 674, "end": 733, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 675, "end": 679, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "
    \n
  • remove cds--text-input--${size} classes in v12
    • \n
\n" } ], "line": 34, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "inputClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 29, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--text-input'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [], "accessors": { "isSizeSm": { "name": "isSizeSm", "getSignature": { "name": "isSizeSm", "type": "", "returnType": "", "line": 34, "rawdescription": "\n\n", "description": "", "jsdoctags": [ { "pos": 674, "end": 733, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 675, "end": 679, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "
    \n
  • remove cds--text-input--${size} classes in v12
    • \n
\n" } ] } }, "isSizeMd": { "name": "isSizeMd", "getSignature": { "name": "isSizeMd", "type": "", "returnType": "", "line": 37 } }, "isSizelg": { "name": "isSizelg", "getSignature": { "name": "isSizelg", "type": "", "returnType": "", "line": 40 } }, "sizeSm": { "name": "sizeSm", "getSignature": { "name": "sizeSm", "type": "", "returnType": "", "line": 45 } }, "sizeMd": { "name": "sizeMd", "getSignature": { "name": "sizeMd", "type": "", "returnType": "", "line": 48 } }, "sizelg": { "name": "sizelg", "getSignature": { "name": "sizelg", "type": "", "returnType": "", "line": 51 } }, "isLightTheme": { "name": "isLightTheme", "getSignature": { "name": "isLightTheme", "type": "", "returnType": "", "line": 58 } }, "getInvalidAttribute": { "name": "getInvalidAttribute", "getSignature": { "name": "getInvalidAttribute", "type": "", "returnType": "", "line": 62 } } } }, { "name": "ThemeDirective", "id": "directive-ThemeDirective-991ddc2db2784d911a0ab140fd541928e30751e17cf454d81770097ebf6bd1e04773e63812abe526f6663a037fccb2ac3a14d5ac5363608ec3934621086ce4e2", "file": "src/theme/theme.directive.ts", "type": "directive", "description": "

Applies theme styles to the div container it is applied to. Get started with importing the module:

\nExample :
import { ThemeModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nApplies theme styles to the div container it is applied to. Get started with importing the module:\n\n```typescript\nimport { ThemeModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-theme--basic)\n", "sourceCode": "import {\n\tAfterContentChecked,\n\tContentChildren,\n\tDirective,\n\tHostBinding,\n\tInput,\n\tQueryList\n} from \"@angular/core\";\nimport { LayerDirective } from \"carbon-components-angular/layer\";\n\nexport type ThemeType = \"white\" | \"g10\" | \"g90\" | \"g100\";\n\n/**\n * Applies theme styles to the div container it is applied to. Get started with importing the module:\n *\n * ```typescript\n * import { ThemeModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-theme--basic)\n */\n@Directive({\n\tselector: \"[cdsTheme], [ibmTheme]\",\n\texportAs: \"theme\"\n})\nexport class ThemeDirective implements AfterContentChecked {\n\t/**\n\t * @deprecated as of v5 - Use `cdsTheme` input property instead\n\t */\n\t@Input() set ibmTheme(type: ThemeType | \"\") {\n\t\tthis.cdsTheme = type;\n\t}\n\n\t/**\n\t * Sets the theme for the content\n\t * Accepts `ThemeType` or nothing (empty string which is equivalent to \"white\")\n\t * Empty string has been added as an option for Angular 16+ to resolve type errors\n\t */\n\t@Input() cdsTheme: ThemeType | \"\" = \"white\";\n\n\t@ContentChildren(LayerDirective, { descendants: false }) layerChildren: QueryList;\n\n\t/**\n\t * Using host bindings with classes to ensure we do not\n\t * overwrite user added classes\n\t */\n\t@HostBinding(\"class.cds--white\") get whiteThemeClass() {\n\t\treturn this.cdsTheme === \"white\" || !this.cdsTheme;\n\t}\n\n\t@HostBinding(\"class.cds--g10\") get g10ThemeClass() {\n\t\treturn this.cdsTheme === \"g10\";\n\t}\n\n\t@HostBinding(\"class.cds--g90\") get g90ThemeClass() {\n\t\treturn this.cdsTheme === \"g90\";\n\t}\n\n\t@HostBinding(\"class.cds--g100\") get g100ThemeClass() {\n\t\treturn this.cdsTheme === \"g100\";\n\t}\n\n\t@HostBinding(\"class.cds--layer-one\") layerClass = true;\n\n\tngAfterContentChecked(): void {\n\t\t/**\n\t\t * Resets next layer level in theme\n\t\t * If not found, the layer will be 1 by default\n\t\t */\n\t\tthis.layerChildren.toArray().forEach(layer => {\n\t\t\tif (typeof layer.cdsLayer !== \"number\") {\n\t\t\t\tlayer.cdsLayer = 1;\n\t\t\t}\n\t\t});\n\t}\n}\n", "selector": "[cdsTheme], [ibmTheme]", "providers": [], "exportAs": "theme", "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "cdsTheme", "defaultValue": "\"white\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the theme for the content\nAccepts `ThemeType` or nothing (empty string which is equivalent to \"white\")\nEmpty string has been added as an option for Angular 16+ to resolve type errors\n", "description": "

Sets the theme for the content\nAccepts ThemeType or nothing (empty string which is equivalent to "white")\nEmpty string has been added as an option for Angular 16+ to resolve type errors

\n", "line": 39, "type": "ThemeType | string", "decorators": [] }, { "name": "ibmTheme", "deprecated": true, "deprecationMessage": "as of v5 - Use `cdsTheme` input property instead", "jsdoctags": [ { "pos": 644, "end": 707, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 645, "end": 655, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

as of v5 - Use cdsTheme input property instead

\n" } ], "line": 30, "type": "ThemeType | string", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--g10", "deprecated": false, "deprecationMessage": "", "line": 51, "type": "boolean", "decorators": [] }, { "name": "class.cds--g100", "deprecated": false, "deprecationMessage": "", "line": 59, "type": "boolean", "decorators": [] }, { "name": "class.cds--g90", "deprecated": false, "deprecationMessage": "", "line": 55, "type": "boolean", "decorators": [] }, { "name": "class.cds--layer-one", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 63, "type": "boolean", "decorators": [] }, { "name": "class.cds--white", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsing host bindings with classes to ensure we do not\noverwrite user added classes\n", "description": "

Using host bindings with classes to ensure we do not\noverwrite user added classes

\n", "line": 47, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "layerChildren", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "", "line": 41, "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "LayerDirective, {descendants: false}" } ], "modifierKind": [ 170 ] }, { "name": "layerClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 63, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--layer-one'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [], "implements": [ "AfterContentChecked" ], "accessors": { "ibmTheme": { "name": "ibmTheme", "setSignature": { "name": "ibmTheme", "type": "void", "deprecated": true, "deprecationMessage": "

as of v5 - Use cdsTheme input property instead

\n", "args": [ { "name": "type", "type": "ThemeType | string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 30, "rawdescription": "\n\n", "description": "", "jsdoctags": [ { "name": "type", "type": "ThemeType | string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "whiteThemeClass": { "name": "whiteThemeClass", "getSignature": { "name": "whiteThemeClass", "type": "", "returnType": "", "line": 47, "rawdescription": "\n\nUsing host bindings with classes to ensure we do not\noverwrite user added classes\n", "description": "

Using host bindings with classes to ensure we do not\noverwrite user added classes

\n" } }, "g10ThemeClass": { "name": "g10ThemeClass", "getSignature": { "name": "g10ThemeClass", "type": "", "returnType": "", "line": 51 } }, "g90ThemeClass": { "name": "g90ThemeClass", "getSignature": { "name": "g90ThemeClass", "type": "", "returnType": "", "line": 55 } }, "g100ThemeClass": { "name": "g100ThemeClass", "getSignature": { "name": "g100ThemeClass", "type": "", "returnType": "", "line": 59 } } } }, { "name": "ToastCaption", "id": "directive-ToastCaption-dff538fcd2ad4cbd0ace29feb1ddea0bde31f85178b476b6ee47828e4cc55cb4dc0c54d80208ee99282c376e2f1df5ce69437db5f332dcb3a44f464e5eea2005", "file": "src/notification/toast-caption.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsToastCaption], [ibmToastCaption]\"\n})\nexport class ToastCaption {\n\t@HostBinding(\"class.cds--toast-notification__caption\") baseClass = true;\n}\n", "selector": "[cdsToastCaption], [ibmToastCaption]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--toast-notification__caption", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "baseClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--toast-notification__caption'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ToastSubtitle", "id": "directive-ToastSubtitle-10cfcfac97c18da0ead8837e20610aa1a36af8e4fc9f9379af760eb8179d5d3153f9961fc87b43e5a4197d90e14de83f44c039a686aeffffe887d36ef6579987", "file": "src/notification/toast-subtitle.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsToastSubtitle], [ibmToastSubtitle]\"\n})\nexport class ToastSubtitle {\n\t@HostBinding(\"class.cds--toast-notification__subtitle\") baseClass = true;\n}\n", "selector": "[cdsToastSubtitle], [ibmToastSubtitle]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--toast-notification__subtitle", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "baseClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--toast-notification__subtitle'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ToastTitle", "id": "directive-ToastTitle-13cdfd1ec876ebf07ee1198bf8558b4e120f4e73904ff212e06863b81ccb2e96f14aa9401e90c16ef0cfdbf6f4e6418ccf9ea658a3242f58e52dfd5835cb210a", "file": "src/notification/toast-title.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsToastTitle], [ibmToastTitle]\"\n})\nexport class ToastTitle {\n\t@HostBinding(\"class.cds--toast-notification__title\") baseClass = true;\n}\n", "selector": "[cdsToastTitle], [ibmToastTitle]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--toast-notification__title", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "baseClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--toast-notification__title'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ToggletipAction", "id": "directive-ToggletipAction-b7314c371a4cc8db8d2533412a2f463b9c3fd7f07d89c5f9bbd5154b2e395cf0065e087cf4fbc2bfd9c9977a345c4a7ed4b48ec199d542a807cae79e7a9c698d", "file": "src/toggletip/toggletip-action.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsToggletipAction], [ibmToggletipAction]\"\n})\nexport class ToggletipAction {\n\t@HostBinding(\"class.cds--toggletip-actions\") toggleTipActions = true;\n}\n", "selector": "[cdsToggletipAction], [ibmToggletipAction]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--toggletip-actions", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "toggleTipActions", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--toggletip-actions'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ToggletipButton", "id": "directive-ToggletipButton-2c9a3fac01930a2a3269544f8f17f951ea8505dabe5e8de2a58adc0d2f0496d611a28213115fc4d4b38b2bc21f29d43628803db2ffe5f92a24c4790106eb1d5f", "file": "src/toggletip/toggletip-button.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsToggletipButton], [ibmToggletipButton]\"\n})\nexport class ToggletipButton {\n\t@HostBinding(\"class.cds--toggletip-button\") toggletipButton = true;\n\t@HostBinding(\"attr.type\") toggletipButtonType = \"button\";\n\t@HostBinding(\"attr.aria-label\") @Input() ariaLabel = \"Show information\";\n}\n", "selector": "[cdsToggletipButton], [ibmToggletipButton]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [ { "name": "ariaLabel", "defaultValue": "\"Show information\"", "deprecated": false, "deprecationMessage": "", "line": 13, "type": "string", "decorators": [] } ], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.type", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "line": 12, "type": "string", "decorators": [] }, { "name": "class.cds--toggletip-button", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 11, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "toggletipButton", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 11, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--toggletip-button'" } ], "modifierKind": [ 170 ] }, { "name": "toggletipButtonType", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 12, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.type'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ToggletipContent", "id": "directive-ToggletipContent-b52db554a7c4f51d4e0a19a05822d47aca85c8ee27f26d575f49a1a523a2874122e7325bda16a2766911ab457e1de77b66c18c8c4a62860047bff799666851ce", "file": "src/toggletip/toggletip-content.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsToggletipContent], [ibmToggletipContent]\"\n})\nexport class ToggletipContent {\n\t@HostBinding(\"class.cds--toggletip-content\") toggletipContent = true;\n}\n", "selector": "[cdsToggletipContent], [ibmToggletipContent]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--toggletip-content", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "toggletipContent", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--toggletip-content'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] }, { "name": "ToggletipLabel", "id": "directive-ToggletipLabel-273a019a03d9fb4593c18dc2f43c9f795ba7d5e951d6db4c361c7344542ccc916fd78b87d2920635e9837ec7f0eba96e0ce2dd1d761d8e200add0a6ebc2f492b", "file": "src/toggletip/toggletip-label.directive.ts", "type": "directive", "description": "", "rawdescription": "\n", "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsToggletipLabel], [ibmToggletipLabel]\"\n})\nexport class ToggletipLabel {\n\t@HostBinding(\"class.cds--toggletip-label\") toggleTipLabel = true;\n}\n", "selector": "[cdsToggletipLabel], [ibmToggletipLabel]", "providers": [], "hostDirectives": [], "standalone": false, "inputsClass": [], "outputsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--toggletip-label", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 7, "type": "boolean", "decorators": [] } ], "hostListeners": [], "propertiesClass": [ { "name": "toggleTipLabel", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 7, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--toggletip-label'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "extends": [] } ], "components": [ { "name": "Accordion", "id": "component-Accordion-5fe4d6349456cfe211f4806b7a13abb8e271ba80dcdfc81a6fdf230e61d118dc84d179202fc299b494b6e26778eda481a4cdb12f7a6af6efb6f2db7a1834b057", "file": "src/accordion/accordion.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-accordion, ibm-accordion", "styleUrls": [], "styles": [], "template": "
\n\t\n
\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "align", "defaultValue": "\"end\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the alignment of the chevron icon\n", "description": "

Sets the alignment of the chevron icon

\n", "line": 42, "type": "\"start\" | \"end\"", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "pos": 1049, "end": 1105, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 1050, "end": 1054, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "

remove cds--accordion--${size} classes in v12

\n" } ], "line": 50, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "skeleton", "deprecated": false, "deprecationMessage": "", "line": 57, "type": "any", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "children", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "", "line": 52, "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "AccordionItem" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { AccordionModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { AccordionModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-accordion--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit\n} from \"@angular/core\";\nimport { AccordionItem } from \"./accordion-item.component\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { AccordionModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-accordion--basic)\n */\n@Component({\n\tselector: \"cds-accordion, ibm-accordion\",\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t`\n})\nexport class Accordion implements AfterContentInit {\n\t/**\n\t * Sets the alignment of the chevron icon\n\t */\n\t@Input() align: \"start\" | \"end\" = \"end\";\n\n\t/**\n\t *\t@todo remove `cds--accordion--${size}` classes in v12\n\t */\n\t/**\n\t * Sets the size of all accordian items\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@ContentChildren(AccordionItem) children: QueryList;\n\n\tprotected _skeleton = false;\n\n\t@Input()\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\tngAfterContentInit() {\n\t\tthis.updateChildren();\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.children) {\n\t\t\tthis.children.toArray().forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "AfterContentInit" ], "accessors": { "skeleton": { "name": "skeleton", "setSignature": { "name": "skeleton", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 57, "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "skeleton", "type": "any", "returnType": "any", "line": 62 } } } }, { "name": "AccordionItem", "id": "component-AccordionItem-5c60436a04bd2d2dd26f5739bcfc62035e3b1b6aa0ae4c93edeab579c1094c7f24911a49ef4e123d064beaab59d9186fef49a1a869da5bdc17e9404a4a6a8f5a", "file": "src/accordion/accordion-item.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-accordion-item, ibm-accordion-item", "styleUrls": [], "styles": [ "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t" ], "template": "\n\t\n\t

\n\t\t{{!skeleton ? title : null}}\n\t

\n\t\n\t\n\n
\n\t
\n\t\t\n\t\t\n\t\t\t

\n\t\t\t

\n\t\t\t

\n\t\t\n\t
\n
\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "context", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "line": 54, "type": "Object | null", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 61, "type": "boolean", "decorators": [] }, { "name": "expanded", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 60, "type": "boolean", "decorators": [] }, { "name": "id", "defaultValue": "`accordion-item-${AccordionItem.accordionItemCount++}`", "deprecated": false, "deprecationMessage": "", "line": 55, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 56, "type": "boolean", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "line": 53, "type": "string | TemplateRef", "decorators": [] } ], "outputsClass": [ { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 57, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "accordionItemCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 52, "modifierKind": [ 126 ] }, { "name": "itemClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 59, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--accordion__item'" } ], "modifierKind": [ 170 ] }, { "name": "role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 62, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 71, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "toggleExpanded", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 64, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "line": 62, "type": "string", "decorators": [] }, { "name": "class.cds--accordion__item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 59, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tOutput,\n\tTemplateRef,\n\tEventEmitter\n} from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-accordion-item, ibm-accordion-item\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t

\n\t\t\t\t{{!skeleton ? title : null}}\n\t\t\t

\n\t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t`]\n})\nexport class AccordionItem {\n\tstatic accordionItemCount = 0;\n\t@Input() title: string | TemplateRef;\n\t@Input() context: Object | null = null;\n\t@Input() id = `accordion-item-${AccordionItem.accordionItemCount++}`;\n\t@Input() skeleton = false;\n\t@Output() selected = new EventEmitter();\n\n\t@HostBinding(\"class.cds--accordion__item\") itemClass = true;\n\t@HostBinding(\"class.cds--accordion__item--active\") @Input() expanded = false;\n\t@HostBinding(\"class.cds--accordion__item--disabled\") @Input() disabled = false;\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\tpublic toggleExpanded() {\n\t\tif (!this.skeleton) {\n\t\t\tthis.expanded = !this.expanded;\n\t\t\tthis.selected.emit({id: this.id, expanded: this.expanded});\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t\n", "extends": [] }, { "name": "ActionableNotification", "id": "component-ActionableNotification-c46fe8cda2f79f9e50aaa8d1e32cc7f8b50de98e8223db63149ecea636582ad9e501dba4f1f37c2214918aa764740b293ea0408c112facbbff8c7a693705edc8", "file": "src/notification/actionable-notification.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-actionable-notification, ibm-actionable-notification", "styleUrls": [], "styles": [], "template": "
\n\t\n\t\n\t
\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{link.text}}\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t
\n\n\n\t\n\t\t{{action.text}}\n\t\n\n\n\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "notificationObj", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCan have `type`, `title`, and `message` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\n`message` is the message to display\n", "description": "

Can have type, title, and message members.

\n

type can be one of "error", "info", "info-square", "warning", "warning-alt", or "success"

\n

message is the message to display

\n", "line": 80, "type": "ActionableContent", "decorators": [] } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits on close.\n", "description": "

Emits on close.

\n", "line": 41, "type": "EventEmitter", "inheritance": { "file": "BaseNotification" } } ], "propertiesClass": [ { "name": "defaultNotificationObj", "defaultValue": "{\n\t\t...this.defaultNotificationObj,\n\t\tvariant: \"inline\" as NotificationVariants,\n\t\trole: \"alertdialog\"\n\t}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "

Set default variant & role, alternatives can be provided through notificationObj property

\n", "line": 106, "rawdescription": "\n\nSet default variant & role, alternatives can be provided through notificationObj property\n" }, { "name": "notificationClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 92, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--actionable-notification'" } ], "modifierKind": [ 170 ] }, { "name": "notificationID", "defaultValue": "`actionable-notification-${ActionableNotification.notificationCount++}`", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 90 }, { "name": "notificationLabel", "defaultValue": "this.notificationID", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 91, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.aria-labelledBy'" } ], "modifierKind": [ 170 ] }, { "name": "componentRef", "deprecated": false, "deprecationMessage": "", "type": "ComponentRef", "optional": false, "description": "", "line": 44, "inheritance": { "file": "BaseNotification" } }, { "name": "iconDictionary", "defaultValue": "{\n\t\t\"error\": \"error--filled\",\n\t\t\"info\": \"information--filled\",\n\t\t\"info-square\": \"information--square--filled\",\n\t\t\"success\": \"checkmark--filled\",\n\t\t\"warning\": \"warning--filled\",\n\t\t\"warning-alt\": \"warning--alt--filled\"\n\t}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "", "line": 47, "modifierKind": [ 148 ], "inheritance": { "file": "BaseNotification" } } ], "methodsClass": [ { "name": "destroy", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 90, "deprecated": false, "deprecationMessage": "", "inheritance": { "file": "BaseNotification" } }, { "name": "onClick", "args": [ { "name": "action", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 79, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "action", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "BaseNotification" } }, { "name": "onClose", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 75, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits close event.\n", "description": "

Emits close event.

\n", "inheritance": { "file": "BaseNotification" } } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.aria-labelledBy", "defaultValue": "this.notificationID", "deprecated": false, "deprecationMessage": "", "line": 91, "type": "string", "decorators": [] }, { "name": "class.cds--actionable-notification", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 92, "type": "boolean", "decorators": [] }, { "name": "class.cds--actionable-notification--error", "deprecated": false, "deprecationMessage": "", "line": 94, "type": "boolean", "decorators": [] }, { "name": "class.cds--actionable-notification--hide-close-button", "deprecated": false, "deprecationMessage": "", "line": 101, "type": "boolean", "decorators": [] }, { "name": "class.cds--actionable-notification--info", "deprecated": false, "deprecationMessage": "", "line": 95, "type": "boolean", "decorators": [] }, { "name": "class.cds--actionable-notification--info-square", "deprecated": false, "deprecationMessage": "", "line": 96, "type": "boolean", "decorators": [] }, { "name": "class.cds--actionable-notification--low-contrast", "deprecated": false, "deprecationMessage": "", "line": 100, "type": "any", "decorators": [] }, { "name": "class.cds--actionable-notification--success", "deprecated": false, "deprecationMessage": "", "line": 97, "type": "boolean", "decorators": [] }, { "name": "class.cds--actionable-notification--toast", "deprecated": false, "deprecationMessage": "", "line": 93, "type": "boolean", "decorators": [] }, { "name": "class.cds--actionable-notification--warning", "deprecated": false, "deprecationMessage": "", "line": 98, "type": "boolean", "decorators": [] }, { "name": "class.cds--actionable-notification--warning-alt", "deprecated": false, "deprecationMessage": "", "line": 99, "type": "boolean", "decorators": [] }, { "name": "attr.role", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet role attribute for component\n`Status` is default for inline-notification & toast component\n`alertdialog` is default for actionable-notification\n", "description": "

Set role attribute for component\nStatus is default for inline-notification & toast component\nalertdialog is default for actionable-notification

\n", "line": 34, "type": "string", "decorators": [], "inheritance": { "file": "BaseNotification" } } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

Actionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast.

\n

See demo

\n", "rawdescription": "\n\nActionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast.\n\n[See demo](../../?path=/story/components-notification--actionable-notification)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { isObservable, of } from \"rxjs\";\nimport { ActionableContent, NotificationVariants } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Actionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast.\n *\n * [See demo](../../?path=/story/components-notification--actionable-notification)\n */\n@Component({\n\tselector: \"cds-actionable-notification, ibm-actionable-notification\",\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{link.text}}\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t{{action.text}}\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class ActionableNotification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): ActionableContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: ActionableContent) {\n\t\tif (obj.closeLabel && !isObservable(obj.closeLabel)) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\tnotificationID = `actionable-notification-${ActionableNotification.notificationCount++}`;\n\t@HostBinding(\"attr.aria-labelledBy\") notificationLabel = this.notificationID;\n\t@HostBinding(\"class.cds--actionable-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--actionable-notification--toast\") get toastVariant() { return this.notificationObj.variant === \"toast\"; }\n\t@HostBinding(\"class.cds--actionable-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--actionable-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--actionable-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--actionable-notification--hide-close-button\") get isCloseHidden() { return !this._notificationObj.showClose; }\n\n\t/**\n\t * Set default variant & role, alternatives can be provided through notificationObj property\n\t */\n\tdefaultNotificationObj = {\n\t\t...this.defaultNotificationObj,\n\t\tvariant: \"inline\" as NotificationVariants,\n\t\trole: \"alertdialog\"\n\t};\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "notificationDisplayService", "type": "NotificationDisplayService", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 110, "jsdoctags": [ { "name": "notificationDisplayService", "type": "NotificationDisplayService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [ "BaseNotification" ], "accessors": { "notificationObj": { "name": "notificationObj", "setSignature": { "name": "notificationObj", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "obj", "type": "ActionableContent", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 83, "jsdoctags": [ { "name": "obj", "type": "ActionableContent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "notificationObj", "type": "", "returnType": "ActionableContent", "line": 80, "rawdescription": "\n\nCan have `type`, `title`, and `message` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\n`message` is the message to display\n", "description": "

Can have type, title, and message members.

\n

type can be one of "error", "info", "info-square", "warning", "warning-alt", or "success"

\n

message is the message to display

\n" } }, "toastVariant": { "name": "toastVariant", "getSignature": { "name": "toastVariant", "type": "", "returnType": "", "line": 93 } }, "isError": { "name": "isError", "getSignature": { "name": "isError", "type": "", "returnType": "", "line": 94 } }, "isInfo": { "name": "isInfo", "getSignature": { "name": "isInfo", "type": "", "returnType": "", "line": 95 } }, "isInfoSquare": { "name": "isInfoSquare", "getSignature": { "name": "isInfoSquare", "type": "", "returnType": "", "line": 96 } }, "isSuccess": { "name": "isSuccess", "getSignature": { "name": "isSuccess", "type": "", "returnType": "", "line": 97 } }, "isWarning": { "name": "isWarning", "getSignature": { "name": "isWarning", "type": "", "returnType": "", "line": 98 } }, "isWarningAlt": { "name": "isWarningAlt", "getSignature": { "name": "isWarningAlt", "type": "", "returnType": "", "line": 99 } }, "isLowContrast": { "name": "isLowContrast", "getSignature": { "name": "isLowContrast", "type": "", "returnType": "", "line": 100 } }, "isCloseHidden": { "name": "isCloseHidden", "getSignature": { "name": "isCloseHidden", "type": "", "returnType": "", "line": 101 } } } }, { "name": "AlertModal", "id": "component-AlertModal-a4c3b6d46610ece5833071c3d7827add5aaf5854a61ddb1aaf0c9370b5a8cd08aae7bc60d750a5dcaa535c731ccee0ae2762cfa91d235f7f10c7adceccb37a22", "file": "src/modal/alert-modal.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-alert-modal, ibm-alert-modal", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t

{{label}}

\n\t\t

{{title}}

\n\t\n\t
\n\t\t

\n\t
\n\t 0\">\n\t\t\n\t\t\t\n\t\t\t\t{{button.text}}\n\t\t\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the open state of the modal\n", "description": "

Controls the open state of the modal

\n", "line": 25, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseModal" } } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nBase event emitter to propagate close events\n", "description": "

Base event emitter to propagate close events

\n", "line": 20, "type": "EventEmitter", "inheritance": { "file": "BaseModal" } } ], "propertiesClass": [ { "name": "buttons", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 91, "decorators": [ { "name": "Optional", "stringifiedArguments": "" }, { "name": "Inject", "stringifiedArguments": "'buttons'" } ], "modifierKind": [ 170, 170, 125 ] }, { "name": "content", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 88, "decorators": [ { "name": "Optional", "stringifiedArguments": "" }, { "name": "Inject", "stringifiedArguments": "'content'" } ], "modifierKind": [ 170, 170, 125 ] }, { "name": "hasScrollingContent", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "boolean", "optional": false, "description": "", "line": 90, "decorators": [ { "name": "Optional", "stringifiedArguments": "" }, { "name": "Inject", "stringifiedArguments": "'hasScrollingContent'" } ], "modifierKind": [ 170, 170, 125 ] }, { "name": "label", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 86, "decorators": [ { "name": "Optional", "stringifiedArguments": "" }, { "name": "Inject", "stringifiedArguments": "'label'" } ], "modifierKind": [ 170, 170, 125 ] }, { "name": "modalContent", "deprecated": false, "deprecationMessage": "", "type": "literal type", "optional": false, "description": "", "line": 80, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'modalContent', {static: true}" } ], "modifierKind": [ 170 ] }, { "name": "onClose", "deprecated": false, "deprecationMessage": "", "type": "Function", "optional": false, "description": "", "line": 92, "decorators": [ { "name": "Optional", "stringifiedArguments": "" }, { "name": "Inject", "stringifiedArguments": "'close'" } ], "modifierKind": [ 170, 170, 125 ] }, { "name": "showCloseButton", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 93, "decorators": [ { "name": "Optional", "stringifiedArguments": "" }, { "name": "Inject", "stringifiedArguments": "'showCloseButton'" } ], "modifierKind": [ 170, 170, 125 ] }, { "name": "size", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 89, "decorators": [ { "name": "Optional", "stringifiedArguments": "" }, { "name": "Inject", "stringifiedArguments": "'size'" } ], "modifierKind": [ 170, 170, 125 ] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 87, "decorators": [ { "name": "Optional", "stringifiedArguments": "" }, { "name": "Inject", "stringifiedArguments": "'title'" } ], "modifierKind": [ 170, 170, 125 ] }, { "name": "type", "defaultValue": "\"default\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 85, "decorators": [ { "name": "Optional", "stringifiedArguments": "" }, { "name": "Inject", "stringifiedArguments": "'type'" } ], "modifierKind": [ 170, 170, 125 ] } ], "methodsClass": [ { "name": "buttonClicked", "args": [ { "name": "buttonIndex", "type": "string | number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 117, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "buttonIndex", "type": "string | number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "dismissModal", "args": [ { "name": "trigger", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 126, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "trigger", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "closeModal", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 30, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefault method to handle closing the modal\n", "description": "

Default method to handle closing the modal

\n", "inheritance": { "file": "BaseModal" } } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Component to create standard modals for presenting content or asking for user's input.\nIt can show as a passive modal showing only text or show as a transactional modal with\nmultiple buttons for different actions for the user to choose from.

\n

Using a modal in your application requires cds-placeholder which would generally be\nplaced near the end of your app component template (app.component.ts or app.component.html) as:

\nExample :
<cds-placeholder></cds-placeholder>

Example of opening the modal:

\nExample :
\\@Component({\n selector: "app-modal-demo",\n template: `\n  <button class="btn--primary" (click)="openModal()">Open modal</button>\n  <cds-placeholder></cds-placeholder>`\n})\nexport class ModalDemo {\n    openModal() {\n        this.modalService.show({\n            modalType: "default",\n            label: "optional header text",\n            title: "Modal title",\n            text: "Modal text",\n            buttons: [{\n                text: "Button text",\n                type: "primary",\n                click: clickFunction\n            }]\n        });\n    }\n}
", "rawdescription": "\n\nComponent to create standard modals for presenting content or asking for user's input.\nIt can show as a passive modal showing only text or show as a transactional modal with\nmultiple buttons for different actions for the user to choose from.\n\nUsing a modal in your application requires `cds-placeholder` which would generally be\nplaced near the end of your app component template (app.component.ts or app.component.html) as:\n\n```html\n\n```\n\nExample of opening the modal:\n\n```typescript\n\\@Component({\n selector: \"app-modal-demo\",\n template: `\n \n `\n})\nexport class ModalDemo {\n\topenModal() {\n\t\tthis.modalService.show({\n\t\t\tmodalType: \"default\",\n\t\t\tlabel: \"optional header text\",\n\t\t\ttitle: \"Modal title\",\n\t\t\ttext: \"Modal text\",\n\t\t\tbuttons: [{\n\t\t\t\ttext: \"Button text\",\n\t\t\t\ttype: \"primary\",\n\t\t\t\tclick: clickFunction\n\t\t\t}]\n\t\t});\n\t}\n}\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInject,\n\tViewChild,\n\tAfterViewInit,\n\tOptional\n} from \"@angular/core\";\nimport { BaseModal } from \"./base-modal.class\";\n\n/**\n * Component to create standard modals for presenting content or asking for user's input.\n * It can show as a passive modal showing only text or show as a transactional modal with\n * multiple buttons for different actions for the user to choose from.\n *\n * Using a modal in your application requires `cds-placeholder` which would generally be\n * placed near the end of your app component template (app.component.ts or app.component.html) as:\n *\n * ```html\n * \n * ```\n *\n * Example of opening the modal:\n *\n * ```typescript\n * \\@Component({\n * selector: \"app-modal-demo\",\n * template: `\n * \n * `\n * })\n * export class ModalDemo {\n * \topenModal() {\n * \t\tthis.modalService.show({\n *\t\t\tmodalType: \"default\",\n *\t\t\tlabel: \"optional header text\",\n *\t\t\ttitle: \"Modal title\",\n *\t\t\ttext: \"Modal text\",\n *\t\t\tbuttons: [{\n *\t\t\t\ttext: \"Button text\",\n *\t\t\t\ttype: \"primary\",\n *\t\t\t\tclick: clickFunction\n *\t\t\t}]\n *\t\t});\n * \t}\n * }\n * ```\n */\n@Component({\n\tselector: \"cds-alert-modal, ibm-alert-modal\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

{{label}}

\n\t\t\t\t

{{title}}

\n\t\t\t\n\t\t\t
\n\t\t\t\t

\n\t\t\t
\n\t\t\t 0\">\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{{button.text}}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class AlertModal extends BaseModal implements AfterViewInit {\n\t@ViewChild(\"modalContent\", { static: true }) modalContent: { nativeElement: any; };\n\t/**\n\t * Creates an instance of `AlertModal`.\n\t */\n\tconstructor(\n\t\t@Optional() @Inject(\"type\") public type = \"default\",\n\t\t@Optional() @Inject(\"label\") public label: string,\n\t\t@Optional() @Inject(\"title\") public title: string,\n\t\t@Optional() @Inject(\"content\") public content: string,\n\t\t@Optional() @Inject(\"size\") public size: string,\n\t\t@Optional() @Inject(\"hasScrollingContent\") public hasScrollingContent: boolean = null,\n\t\t@Optional() @Inject(\"buttons\") public buttons = [],\n\t\t@Optional() @Inject(\"close\") public onClose: Function,\n\t\t@Optional() @Inject(\"showCloseButton\") public showCloseButton = true\n\t) {\n\t\tsuper();\n\t\tfor (let i = 0; i < this.buttons.length; i++) {\n\t\t\tconst button = this.buttons[i];\n\t\t\tif (!button.id) {\n\t\t\t\tbutton.id = `alert-modal-button-${i}`;\n\t\t\t}\n\t\t\tif (!button.type) {\n\t\t\t\tbutton.type = \"secondary\";\n\t\t\t}\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tif (!this.modalContent) { return false; }\n\t\tconst element = this.modalContent.nativeElement;\n\t\tif (element.scrollHeight > element.clientHeight) {\n\t\t\telement.tabIndex = 0;\n\t\t} else {\n\t\t\telement.tabIndex = -1;\n\t\t}\n\t}\n\n\tbuttonClicked(buttonIndex: string | number) {\n\t\tconst button = this.buttons[buttonIndex];\n\t\tif (button.click) {\n\t\t\tbutton.click();\n\t\t}\n\n\t\tthis.closeModal();\n\t}\n\n\tdismissModal(trigger: any) {\n\t\tif (this.onClose && this.onClose(trigger) === false) {\n\t\t\treturn;\n\t\t}\n\t\tthis.closeModal();\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

Creates an instance of AlertModal.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "type", "type": "string", "deprecated": false, "deprecationMessage": "", "defaultValue": "\"default\"" }, { "name": "label", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "title", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "content", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "hasScrollingContent", "type": "boolean", "deprecated": false, "deprecationMessage": "", "defaultValue": "null" }, { "name": "buttons", "type": "[]", "deprecated": false, "deprecationMessage": "", "defaultValue": "[]" }, { "name": "onClose", "type": "Function", "deprecated": false, "deprecationMessage": "" }, { "name": "showCloseButton", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true" } ], "line": 80, "rawdescription": "\n\nCreates an instance of `AlertModal`.\n", "jsdoctags": [ { "name": "type", "type": "string", "deprecated": false, "deprecationMessage": "", "defaultValue": "\"default\"", "tagName": { "text": "param" } }, { "name": "label", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "title", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "content", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "size", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "hasScrollingContent", "type": "boolean", "deprecated": false, "deprecationMessage": "", "defaultValue": "null", "tagName": { "text": "param" } }, { "name": "buttons", "type": "[]", "deprecated": false, "deprecationMessage": "", "defaultValue": "[]", "tagName": { "text": "param" } }, { "name": "onClose", "type": "Function", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "showCloseButton", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true", "tagName": { "text": "param" } } ] }, "extends": [ "BaseModal" ], "implements": [ "AfterViewInit" ] }, { "name": "AlertModalStory", "id": "component-AlertModalStory-38ddb5b47c5a67438eaa1a6887b4b30dc69c5eeed82bc4032fe57d4e803981c3735ffeeb9214b9661191e08cb2b08f052035f0621dd80d70252e11f22b12e0ba", "file": "src/modal/stories/alert-modal.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-alert-modal-story", "styleUrls": [], "styles": [], "template": "\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "buttons", "deprecated": false, "deprecationMessage": "", "line": 20, "type": "Array", "decorators": [] }, { "name": "modalContent", "deprecated": false, "deprecationMessage": "", "line": 19, "type": "string", "decorators": [] }, { "name": "modalLabel", "deprecated": false, "deprecationMessage": "", "line": 17, "type": "string", "decorators": [] }, { "name": "modalTitle", "deprecated": false, "deprecationMessage": "", "line": 18, "type": "string", "decorators": [] }, { "name": "modalType", "deprecated": false, "deprecationMessage": "", "line": 16, "type": "AlertModalType", "decorators": [] }, { "name": "showCloseButton", "deprecated": false, "deprecationMessage": "", "line": 22, "type": "boolean", "decorators": [] }, { "name": "size", "deprecated": false, "deprecationMessage": "", "line": 21, "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "openModal", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 26, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\n\nimport {\n\tModalService,\n\tModalButton,\n\tAlertModalType\n} from \"../\";\n\n@Component({\n\tselector: \"app-alert-modal-story\",\n\ttemplate: `\n\t\t\n\t`\n})\nexport class AlertModalStory {\n\t@Input() modalType: AlertModalType;\n\t@Input() modalLabel: string;\n\t@Input() modalTitle: string;\n\t@Input() modalContent: string;\n\t@Input() buttons: Array;\n\t@Input() size: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\t@Input() showCloseButton: boolean;\n\n\tconstructor(protected modalService: ModalService) { }\n\n\topenModal() {\n\t\tthis.modalService.show({\n\t\t\ttype: this.modalType,\n\t\t\tlabel: this.modalLabel,\n\t\t\ttitle: this.modalTitle,\n\t\t\tcontent: this.modalContent,\n\t\t\tsize: this.size,\n\t\t\tbuttons: this.buttons,\n\t\t\tshowCloseButton: this.showCloseButton\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "modalService", "type": "ModalService", "deprecated": false, "deprecationMessage": "" } ], "line": 22, "jsdoctags": [ { "name": "modalService", "type": "ModalService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [] }, { "name": "BarComponent", "id": "component-BarComponent-7d0a371dfa3175a6fc9408d00f2bf8b177e529c127b3b7f88da2ceee09fbd4355672843dcfcebbdfdb999dd581e6456ced88698558dd85ff9d1167d53814be23", "file": "src/ui-shell/stories/header-fluid.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-bar", "styleUrls": [], "styles": [], "template": "

bar

", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\nimport { NavigationItem } from \"../\";\n\n@Component({\n\tselector: \"app-bar\",\n\ttemplate: \"

bar

\"\n})\nexport class BarComponent { }\n\n@Component({\n\tselector: \"app-foo\",\n\ttemplate: \"

foo

\"\n})\nexport class FooComponent { }\n\n@Component({\n\tselector: \"app-header-fluid\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class HeaderFluidComponent {\n\t@Input() headerItems: NavigationItem[];\n\thasHamburger = false;\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "BaseIconButton", "id": "component-BaseIconButton-77320a539d11df15c9cb5571f9c9d27fcc37267e8409207c56d2ad54688ab81ce690c41acb6b40aa3db648a7b449c2a92435fce701b979c3de693c5ffaa5f1ff", "file": "src/button/base-icon-button.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "styleUrls": [], "styles": [], "template": "", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "align", "defaultValue": "\"bottom\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet popover alignment\n", "description": "

Set popover alignment

\n", "line": 32, "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"", "decorators": [] }, { "name": "autoAlign", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n**Experimental**: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once\n", "description": "

Experimental: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once

\n", "line": 40, "type": "boolean", "decorators": [] }, { "name": "caret", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide caret\n", "description": "

Set to false to hide caret

\n", "line": 16, "type": "boolean", "decorators": [] }, { "name": "dropShadow", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide shadow\n", "description": "

Set to false to hide shadow

\n", "line": 20, "type": "boolean", "decorators": [] }, { "name": "enterDelayMs", "defaultValue": "100", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet delay before tooltip is shown\n", "description": "

Set delay before tooltip is shown

\n", "line": 44, "type": "number", "decorators": [] }, { "name": "highContrast", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to enable high contrast\n", "description": "

Set to true to enable high contrast

\n", "line": 24, "type": "boolean", "decorators": [] }, { "name": "isOpen", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to have the popover open by default\n", "description": "

Set to true to have the popover open by default

\n", "line": 28, "type": "boolean", "decorators": [] }, { "name": "leaveDelayMs", "defaultValue": "300", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet delay when tooltip disappears\n", "description": "

Set delay when tooltip disappears

\n", "line": 48, "type": "number", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Base button with common input properties for configuring icon button.\nExtend class to inherit @Input meta data

\n

Used by pagination nav icon button, code snippet, etc.

\n", "rawdescription": "\n\nBase button with common input properties for configuring icon button.\nExtend class to inherit @Input meta data\n\nUsed by pagination nav icon button, code snippet, etc.\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\n\n/**\n * Base button with common input properties for configuring icon button.\n * Extend class to inherit @Input meta data\n *\n * Used by pagination nav icon button, code snippet, etc.\n */\n@Component({\n\ttemplate: \"\"\n})\nexport class BaseIconButton {\n\t/**\n\t * Set to `false` to hide caret\n\t */\n\t@Input() caret = true;\n\t/**\n\t * Set to `false` to hide shadow\n\t */\n\t@Input() dropShadow = true;\n\t/**\n\t * Set to `true` to enable high contrast\n\t */\n\t@Input() highContrast = true;\n\t/**\n\t * Set to `true` to have the popover open by default\n\t */\n\t@Input() isOpen = false;\n\t/**\n\t * Set popover alignment\n\t */\n\t@Input() align: \"top\" | \"top-left\" | \"top-right\" |\n\t\t\"bottom\" | \"bottom-left\" | \"bottom-right\" |\n\t\t\"left\" | \"left-bottom\" | \"left-top\" |\n\t\t\"right\" | \"right-bottom\" | \"right-top\" = \"bottom\";\n\t/**\n\t * **Experimental**: Use floating-ui to position the tooltip\n\t * This is not toggleable - should be assigned once\n\t */\n\t@Input() autoAlign = false;\n\t/**\n\t * Set delay before tooltip is shown\n\t */\n\t@Input() enterDelayMs = 100;\n\t/**\n\t * Set delay when tooltip disappears\n\t */\n\t@Input() leaveDelayMs = 300;\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "BaseNotification", "id": "component-BaseNotification-c905c69f7887a71db38e003bae1b68de7e2541222be3f4a2309535d1fa685684e51765742ead7e82011a665a1d4d0e295fbb44e62a69dd99d64fd28293d49099", "file": "src/notification/base-notification.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "styleUrls": [], "styles": [], "template": "", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits on close.\n", "description": "

Emits on close.

\n", "line": 41, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "componentRef", "deprecated": false, "deprecationMessage": "", "type": "ComponentRef", "optional": false, "description": "", "line": 44 }, { "name": "iconDictionary", "defaultValue": "{\n\t\t\"error\": \"error--filled\",\n\t\t\"info\": \"information--filled\",\n\t\t\"info-square\": \"information--square--filled\",\n\t\t\"success\": \"checkmark--filled\",\n\t\t\"warning\": \"warning--filled\",\n\t\t\"warning-alt\": \"warning--alt--filled\"\n\t}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "", "line": 47, "modifierKind": [ 148 ] } ], "methodsClass": [ { "name": "destroy", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 90, "deprecated": false, "deprecationMessage": "" }, { "name": "onClick", "args": [ { "name": "action", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 79, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "action", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onClose", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 75, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits close event.\n", "description": "

Emits close event.

\n" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet role attribute for component\n`Status` is default for inline-notification & toast component\n`alertdialog` is default for actionable-notification\n", "description": "

Set role attribute for component\nStatus is default for inline-notification & toast component\nalertdialog is default for actionable-notification

\n", "line": 34, "type": "string", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

Base class for Notification, ActionableNotification, & Toast\nconsisting of common functionality

\n

Get started with importing the module:

\nExample :
import { NotificationModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nBase class for `Notification`, `ActionableNotification`, & `Toast`\nconsisting of common functionality\n\nGet started with importing the module:\n\n```typescript\nimport { NotificationModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-notification--inline-notification)\n", "type": "component", "sourceCode": "import {\n\tOutput,\n\tEventEmitter,\n\tHostBinding,\n\tComponent,\n\tComponentRef\n} from \"@angular/core\";\nimport { isObservable, Subject } from \"rxjs\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationContent, NotificationType } from \"./notification-content.interface\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\n\n/**\n * Base class for `Notification`, `ActionableNotification`, & `Toast`\n * consisting of common functionality\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { NotificationModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-notification--inline-notification)\n */\n@Component({\n\ttemplate: \"\"\n})\nexport class BaseNotification {\n\t/**\n\t * Set role attribute for component\n\t * `Status` is default for inline-notification & toast component\n\t * `alertdialog` is default for actionable-notification\n\t */\n\t@HostBinding(\"attr.role\") get roleAttr(): string {\n\t\treturn this._notificationObj.role;\n\t}\n\n\t/**\n\t * Emits on close.\n\t */\n\t@Output() close: EventEmitter = new EventEmitter();\n\n\t// Provides access to the component instance\n\tcomponentRef: ComponentRef;\n\n\t// Get icon name(value) for service based on the notification type (key)\n\treadonly iconDictionary = {\n\t\t\"error\": \"error--filled\",\n\t\t\"info\": \"information--filled\",\n\t\t\"info-square\": \"information--square--filled\",\n\t\t\"success\": \"checkmark--filled\",\n\t\t\"warning\": \"warning--filled\",\n\t\t\"warning-alt\": \"warning--alt--filled\"\n\t};\n\n\tprotected defaultNotificationObj: NotificationContent = {\n\t\ttitle: \"\",\n\t\tmessage: \"\",\n\t\ttype: \"info\" as NotificationType,\n\t\tshowClose: true,\n\t\tcloseLabel: this.i18n.get(\"NOTIFICATION.CLOSE_BUTTON\"),\n\t\trole: \"status\"\n\t};\n\n\tprotected _notificationObj: NotificationContent = Object.assign({}, this.defaultNotificationObj);\n\n\tconstructor(\n\t\tprotected notificationDisplayService: NotificationDisplayService,\n\t\tprotected i18n: I18n\n\t) { }\n\n\t/**\n\t * Emits close event.\n\t */\n\tonClose() {\n\t\tthis.close.emit();\n\t}\n\n\tonClick(action, event) {\n\t\tif (!action.click) {\n\t\t\treturn;\n\t\t}\n\t\tif (isObservable(action.click)) {\n\t\t\t(action.click as Subject<{ event: Event, action: any }>).next({ event, action });\n\t\t} else {\n\t\t\taction.click({ event, action });\n\t\t}\n\t}\n\n\tdestroy() {\n\t\tthis.notificationDisplayService.close(this);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "notificationDisplayService", "type": "NotificationDisplayService", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 65, "jsdoctags": [ { "name": "notificationDisplayService", "type": "NotificationDisplayService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "roleAttr": { "name": "roleAttr", "getSignature": { "name": "roleAttr", "type": "string", "returnType": "string", "line": 34, "rawdescription": "\n\nSet role attribute for component\n`Status` is default for inline-notification & toast component\n`alertdialog` is default for actionable-notification\n", "description": "

Set role attribute for component\nStatus is default for inline-notification & toast component\nalertdialog is default for actionable-notification

\n" } } } }, { "name": "BaseTabHeader", "id": "component-BaseTabHeader-2f6d37670cd859b4de0b2946232c740d576b4ebb6cb620e2f89ed5e51e8507eb68ead033ca983d878fd6764cc55f1a0553b533ca7c9ea48159cf9fc3aef50ae5", "file": "src/tabs/base-tab-header.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "styleUrls": [], "styles": [], "template": "", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the aria label on the nav element.\n", "description": "

Sets the aria label on the nav element.

\n", "line": 33, "type": "string", "decorators": [] }, { "name": "ariaLabelledby", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the aria labelledby on the nav element.\n", "description": "

Sets the aria labelledby on the nav element.

\n", "line": 37, "type": "string", "decorators": [] }, { "name": "cacheActive", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to 'true' to have `Tab` items cached and not reloaded on tab switching.\nDuplicate from `n-tabs` to support standalone headers\n", "description": "

Set to 'true' to have Tab items cached and not reloaded on tab switching.\nDuplicate from n-tabs to support standalone headers

\n", "line": 25, "type": "boolean", "decorators": [] }, { "name": "contentAfter", "deprecated": false, "deprecationMessage": "", "line": 40, "type": "TemplateRef", "decorators": [] }, { "name": "contentBefore", "deprecated": false, "deprecationMessage": "", "line": 39, "type": "TemplateRef", "decorators": [] }, { "name": "followFocus", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to 'true' to have tabs automatically activated and have their content displayed when they receive focus.\n", "description": "

Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.

\n", "line": 29, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": false, "deprecationMessage": "", "line": 43, "type": "\"dark\" | \"light\"", "decorators": [] }, { "name": "type", "defaultValue": "\"line\"", "deprecated": false, "deprecationMessage": "", "line": 42, "type": "\"line\" | \"contained\"", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "clickMultiplier", "defaultValue": "1.5", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 65, "modifierKind": [ 148 ] }, { "name": "currentSelectedTab", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

Controls the manual focusing done by tabbing through headings.

\n", "line": 61, "rawdescription": "\n\nControls the manual focusing done by tabbing through headings.\n" }, { "name": "headerContainer", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Gets the Unordered List element that holds the Tab headings from the view DOM.

\n", "line": 56, "rawdescription": "\n\nGets the Unordered List element that holds the `Tab` headings from the view DOM.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'tabList', {static: true}" } ], "modifierKind": [ 170 ] }, { "name": "longPressMultiplier", "defaultValue": "3", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 64, "modifierKind": [ 148 ] }, { "name": "OVERFLOW_BUTTON_OFFSET", "defaultValue": "44", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 63, "modifierKind": [ 148 ] }, { "name": "tabsClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 45, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--tabs'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "handleOverflowNavClick", "args": [ { "name": "direction", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "numOftabs", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 97, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "direction", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "numOftabs", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0", "tagName": { "text": "param" } } ] }, { "name": "handleOverflowNavMouseDown", "args": [ { "name": "direction", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 109, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "direction", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "handleOverflowNavMouseUp", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 134, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nClear intervals/Timeout & reset scroll behavior\n", "description": "

Clear intervals/Timeout & reset scroll behavior

\n" }, { "name": "handleScroll", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 93, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--tabs", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 45, "type": "boolean", "decorators": [] }, { "name": "class.cds--tabs--contained", "deprecated": false, "deprecationMessage": "", "line": 46, "type": "boolean", "decorators": [] }, { "name": "class.cds--tabs--light", "deprecated": false, "deprecationMessage": "", "line": 49, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

There are two ways to create a tab, this class is a collection of features\n& metadata required by both.

\n", "rawdescription": "\n\nThere are two ways to create a tab, this class is a collection of features\n& metadata required by both.\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tViewChild,\n\tElementRef,\n\tTemplateRef,\n\tChangeDetectorRef,\n\tHostBinding,\n\tRenderer2\n} from \"@angular/core\";\nimport { EventService } from \"carbon-components-angular/utils\";\n\n/**\n * There are two ways to create a tab, this class is a collection of features\n * & metadata required by both.\n */\n@Component({\n\ttemplate: \"\"\n})\nexport class BaseTabHeader {\n\t/**\n\t * Set to 'true' to have `Tab` items cached and not reloaded on tab switching.\n\t * Duplicate from `n-tabs` to support standalone headers\n\t */\n\t@Input() cacheActive = false;\n\t/**\n\t * Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.\n\t */\n\t@Input() followFocus: boolean;\n\t/**\n\t * Sets the aria label on the nav element.\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Sets the aria labelledby on the nav element.\n\t */\n\t@Input() ariaLabelledby: string;\n\n\t@Input() contentBefore: TemplateRef;\n\t@Input() contentAfter: TemplateRef;\n\n\t@Input() type: \"line\" | \"contained\" = \"line\";\n\t@Input() theme: \"dark\" | \"light\" = \"dark\";\n\n\t@HostBinding(\"class.cds--tabs\") tabsClass = true;\n\t@HostBinding(\"class.cds--tabs--contained\") get containedClass() {\n\t\treturn this.type === \"contained\";\n\t}\n\t@HostBinding(\"class.cds--tabs--light\") get themeClass() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\t/**\n\t * Gets the Unordered List element that holds the `Tab` headings from the view DOM.\n\t */\n\t@ViewChild(\"tabList\", { static: true }) headerContainer;\n\n\t/**\n\t * Controls the manual focusing done by tabbing through headings.\n\t */\n\tcurrentSelectedTab: number;\n\t// width of the overflow buttons\n\treadonly OVERFLOW_BUTTON_OFFSET = 44;\n\treadonly longPressMultiplier = 3;\n\treadonly clickMultiplier = 1.5;\n\n\tprotected longPressInterval = null;\n\tprotected tickInterval = null;\n\n\tget hasHorizontalOverflow() {\n\t\tconst tabList = this.headerContainer.nativeElement;\n\t\treturn tabList.scrollWidth > tabList.clientWidth;\n\t}\n\n\tget leftOverflowNavButtonHidden() {\n\t\tconst tabList = this.headerContainer.nativeElement;\n\t\treturn !this.hasHorizontalOverflow || !tabList.scrollLeft;\n\t}\n\n\tget rightOverflowNavButtonHidden() {\n\t\tconst tabList = this.headerContainer.nativeElement;\n\t\treturn !this.hasHorizontalOverflow ||\n\t\t\t(tabList.scrollLeft + tabList.clientWidth) === tabList.scrollWidth;\n\t}\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected changeDetectorRef: ChangeDetectorRef,\n\t\tprotected eventService: EventService,\n\t\tprotected renderer: Renderer2\n\t) { }\n\n\thandleScroll() {\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n\n\thandleOverflowNavClick(direction: number, numOftabs = 0) {\n\t\tconst tabList = this.headerContainer.nativeElement;\n\n\t\tconst { clientWidth, scrollLeft, scrollWidth } = tabList;\n\t\tif (direction > 0) {\n\t\t\ttabList.scrollLeft = Math.min(scrollLeft + (scrollWidth / numOftabs) * this.clickMultiplier,\n\t\t\t\tscrollWidth - clientWidth);\n\t\t} else if (direction < 0) {\n\t\t\ttabList.scrollLeft = Math.max(scrollLeft - (scrollWidth / numOftabs) * this.clickMultiplier, 0);\n\t\t}\n\t}\n\n\thandleOverflowNavMouseDown(direction: number) {\n\t\tconst tabList = this.headerContainer.nativeElement;\n\n\t\tthis.longPressInterval = setTimeout(() => {\n\t\t\t// Manually overriding scroll behvior to `auto` to make animation work correctly\n\t\t\tthis.renderer.setStyle(tabList, \"scroll-behavior\", \"auto\");\n\n\t\t\tthis.tickInterval = setInterval(() => {\n\t\t\t\ttabList.scrollLeft += (direction * this.longPressMultiplier);\n\t\t\t\t// clear interval if scroll reaches left or right edge\n\t\t\t\tif (this.leftOverflowNavButtonHidden || this.rightOverflowNavButtonHidden) {\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\tclearInterval(this.tickInterval);\n\t\t\t\t\t\tthis.handleOverflowNavMouseUp();\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn () => clearInterval(this.longPressInterval);\n\t\t}, 500);\n\t}\n\n\t/**\n\t * Clear intervals/Timeout & reset scroll behavior\n\t */\n\thandleOverflowNavMouseUp() {\n\t\tclearInterval(this.tickInterval);\n\t\tclearTimeout(this.longPressInterval);\n\n\t\t// Reset scroll behavior\n\t\tthis.renderer.setStyle(this.headerContainer.nativeElement, \"scroll-behavior\", \"smooth\");\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "" }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "" }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "" } ], "line": 84, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "containedClass": { "name": "containedClass", "getSignature": { "name": "containedClass", "type": "", "returnType": "", "line": 46 } }, "themeClass": { "name": "themeClass", "getSignature": { "name": "themeClass", "type": "", "returnType": "", "line": 49 } }, "hasHorizontalOverflow": { "name": "hasHorizontalOverflow", "getSignature": { "name": "hasHorizontalOverflow", "type": "", "returnType": "", "line": 70 } }, "leftOverflowNavButtonHidden": { "name": "leftOverflowNavButtonHidden", "getSignature": { "name": "leftOverflowNavButtonHidden", "type": "", "returnType": "", "line": 75 } }, "rightOverflowNavButtonHidden": { "name": "rightOverflowNavButtonHidden", "getSignature": { "name": "rightOverflowNavButtonHidden", "type": "", "returnType": "", "line": 80 } } } }, { "name": "BasicFileStory", "id": "component-BasicFileStory-fbd7995f212806cccdce8d9095089c59440cb8e75ce3be69bdebb79253624124bfa40661ce325fc4be3db865906e8479ae90ca86c3a0a6f273aed2a2a416342e", "file": "src/file-uploader/stories/basic-file.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-basic-file", "styleUrls": [], "styles": [], "template": "", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "size", "defaultValue": "\"sm\"", "deprecated": false, "deprecationMessage": "", "line": 8, "type": "string", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "fileItem", "defaultValue": "{\n\t\tfile: new File([\"foo\"], \"Lorem ipsum dolor sit amet.txt\", { type: \"text/plain\" }),\n\t\tstate: \"edit\"\n\t}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "", "line": 10 } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\n\n@Component({\n\tselector: \"app-basic-file\",\n\ttemplate: ``\n})\nexport class BasicFileStory {\n\t@Input() size = \"sm\";\n\n\tfileItem = {\n\t\tfile: new File([\"foo\"], \"Lorem ipsum dolor sit amet.txt\", { type: \"text/plain\" }),\n\t\tstate: \"edit\"\n\t};\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "Breadcrumb", "id": "component-Breadcrumb-f39b2ab2cd5f1dc2cb81fdd804326a1c4ac85918d35c8a6d4bbf6e8b31a146792a0b020796fc3c6482e197fef5fc5eebea240964875537407e9cd8a7233dcbf7", "file": "src/breadcrumb/breadcrumb.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-breadcrumb, ibm-breadcrumb", "styleUrls": [], "styles": [], "template": "", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "defaultValue": "this.i18n.get().BREADCRUMB.LABEL", "deprecated": false, "deprecationMessage": "", "line": 136, "type": "string", "decorators": [] }, { "name": "autoAlign", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n**Experimental**: Auto align menu tooltip position\n", "description": "

Experimental: Auto align menu tooltip position

\n", "line": 163, "type": "boolean", "decorators": [] }, { "name": "description", "defaultValue": "this.i18n.get().BREADCRUMB.OVERFLOW_MENU_DESCRIPTION", "deprecated": false, "deprecationMessage": "", "line": 164, "type": "string", "decorators": [] }, { "name": "items", "deprecated": false, "deprecationMessage": "", "line": 132, "type": "Array", "decorators": [] }, { "name": "noTrailingSlash", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 134, "type": "boolean", "decorators": [] }, { "name": "skeleton", "deprecated": false, "deprecationMessage": "", "line": 139, "type": "any", "decorators": [] }, { "name": "threshold", "deprecated": false, "deprecationMessage": "", "line": 149, "type": "number", "decorators": [] } ], "outputsClass": [ { "name": "navigation", "defaultValue": "new EventEmitter>()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the navigation status promise when the link is activated\n", "description": "

Emits the navigation status promise when the link is activated

\n", "line": 169, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "children", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "", "line": 130, "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "BreadcrumbItemComponent" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "navigate", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "item", "type": "BreadcrumbItem", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 207, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "item", "type": "BreadcrumbItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { BreadcrumbModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { BreadcrumbModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-breadcrumb--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tTemplateRef,\n\tOptional,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { BreadcrumbItem } from \"./breadcrumb-item.interface\";\nimport { BreadcrumbItemComponent } from \"./breadcrumb-item.component\";\nimport { Router } from \"@angular/router\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\nconst MINIMUM_OVERFLOW_THRESHOLD = 4;\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { BreadcrumbModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-breadcrumb--basic)\n */\n@Component({\n\tselector: \"cds-breadcrumb, ibm-breadcrumb\",\n\ttemplate: `\n\t`\n})\nexport class Breadcrumb implements AfterContentInit {\n\t@ContentChildren(BreadcrumbItemComponent) children: QueryList;\n\n\t@Input() items: Array;\n\n\t@Input() noTrailingSlash = false;\n\n\t@Input() ariaLabel: string = this.i18n.get().BREADCRUMB.LABEL;\n\n\t@Input()\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t@Input()\n\tset threshold(threshold: number) {\n\t\tthis._threshold = threshold;\n\t\tif (isNaN(threshold) || threshold < MINIMUM_OVERFLOW_THRESHOLD) {\n\t\t\tthis._threshold = MINIMUM_OVERFLOW_THRESHOLD;\n\t\t}\n\t}\n\n\tget threshold(): number {\n\t\treturn this._threshold;\n\t}\n\n\t/**\n\t * **Experimental**: Auto align menu tooltip position\n\t */\n\t@Input() autoAlign = false;\n\t@Input() description: string = this.i18n.get().BREADCRUMB.OVERFLOW_MENU_DESCRIPTION;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter>();\n\n\tget shouldShowContent(): boolean {\n\t\treturn !this.items;\n\t}\n\n\tget shouldShowOverflow(): boolean {\n\t\tif (!this.items) {\n\t\t\treturn false;\n\t\t}\n\t\treturn this.items.length > this.threshold;\n\t}\n\n\tget first(): BreadcrumbItem {\n\t\treturn this.shouldShowOverflow ? this.items[0] : null;\n\t}\n\n\tget overflowItems(): Array {\n\t\treturn this.shouldShowOverflow ? this.items.slice(1, this.items.length - 2) : [];\n\t}\n\n\tget secondLast(): BreadcrumbItem {\n\t\treturn this.shouldShowOverflow ? this.items[this.items.length - 2] : null;\n\t}\n\n\tget last(): BreadcrumbItem {\n\t\treturn this.shouldShowOverflow ? this.items[this.items.length - 1] : null;\n\t}\n\n\tprotected _threshold: number;\n\tprotected _skeleton = false;\n\n\tconstructor(protected i18n: I18n, @Optional() protected router: Router) { }\n\n\tngAfterContentInit() {\n\t\tthis.updateChildren();\n\t}\n\n\tnavigate(event, item: BreadcrumbItem) {\n\t\tif (this.router && item.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(item.route, item.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t}\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.children) {\n\t\t\tthis.children.toArray().forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" }, { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "" } ], "line": 199, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AfterContentInit" ], "accessors": { "skeleton": { "name": "skeleton", "setSignature": { "name": "skeleton", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 139, "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "skeleton", "type": "any", "returnType": "any", "line": 144 } }, "threshold": { "name": "threshold", "setSignature": { "name": "threshold", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "threshold", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 149, "jsdoctags": [ { "name": "threshold", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "threshold", "type": "number", "returnType": "number", "line": 156 } }, "shouldShowContent": { "name": "shouldShowContent", "getSignature": { "name": "shouldShowContent", "type": "boolean", "returnType": "boolean", "line": 171 } }, "shouldShowOverflow": { "name": "shouldShowOverflow", "getSignature": { "name": "shouldShowOverflow", "type": "boolean", "returnType": "boolean", "line": 175 } }, "first": { "name": "first", "getSignature": { "name": "first", "type": "", "returnType": "BreadcrumbItem", "line": 182 } }, "overflowItems": { "name": "overflowItems", "getSignature": { "name": "overflowItems", "type": "", "returnType": "Array", "line": 186 } }, "secondLast": { "name": "secondLast", "getSignature": { "name": "secondLast", "type": "", "returnType": "BreadcrumbItem", "line": 190 } }, "last": { "name": "last", "getSignature": { "name": "last", "type": "", "returnType": "BreadcrumbItem", "line": 194 } } } }, { "name": "BreadcrumbItemComponent", "id": "component-BreadcrumbItemComponent-851ae467d5ac22d68cecc7f25e3ddaa0dd75bb63b0003123b092ee45e06960cc583b7108b16dc3b1d15c8fd3b300c3864eb3c20d71b8f7944693cb0affd56581", "file": "src/breadcrumb/breadcrumb-item.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-breadcrumb-item, ibm-breadcrumb-item", "styleUrls": [], "styles": [], "template": "\n\t\n\n\n\t\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaCurrent", "defaultValue": "\"page\"", "deprecated": false, "deprecationMessage": "", "line": 55, "type": "string", "decorators": [] }, { "name": "current", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 57, "type": "boolean", "decorators": [] }, { "name": "href", "deprecated": false, "deprecationMessage": "", "line": 28, "type": "string", "decorators": [] }, { "name": "route", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nArray of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate\n", "description": "

Array of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate

\n", "line": 40, "type": "any[]", "decorators": [] }, { "name": "routeExtras", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRouter options. Used in conjunction with `route`\nSee: https://angular.io/api/router/Router#navigate\n", "description": "

Router options. Used in conjunction with route\nSee: https://angular.io/api/router/Router#navigate

\n", "line": 46, "type": "any", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 53, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "navigation", "defaultValue": "new EventEmitter>()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the navigation status promise when the link is activated\n", "description": "

Emits the navigation status promise when the link is activated

\n", "line": 51, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "itemClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 59, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--breadcrumb-item'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "navigate", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 69, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "useTemplate", "args": [], "optional": false, "returnType": "{}", "typeParameters": [], "line": 65, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--breadcrumb-item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 59, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tOptional\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\n\n@Component({\n\tselector: \"cds-breadcrumb-item, ibm-breadcrumb-item\",\n\ttemplate: `\n\t\n\t\t\n\t\n\t\n\t\t\n\t`\n})\nexport class BreadcrumbItemComponent {\n\t@Input() set href(v: string) {\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter>();\n\n\t@Input() skeleton = false;\n\n\t@Input() ariaCurrent = \"page\";\n\n\t@HostBinding(\"class.cds--breadcrumb-item--current\") @Input() current = false;\n\n\t@HostBinding(\"class.cds--breadcrumb-item\") itemClass = true;\n\n\tprotected _href: string;\n\n\tconstructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) { }\n\n\tuseTemplate() {\n\t\treturn this.skeleton || this._href || this.route;\n\t}\n\n\tnavigate(event) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "domSanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "" }, { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "" } ], "line": 61, "jsdoctags": [ { "name": "domSanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "href": { "name": "href", "setSignature": { "name": "href", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 28, "jsdoctags": [ { "name": "v", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "href", "type": "", "returnType": "", "line": 32 } } } }, { "name": "ButtonSet", "id": "component-ButtonSet-4dc1cf58606c7eccafc077b4b8757485e26b20e3ae2faafc16882595412f04195ca81cdfe7d54045d1d9dc4a82723cc11f80960897f4c58091ae6c0850ac3153", "file": "src/button/button-set.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-button-set, ibm-button-set", "styleUrls": [], "styles": [], "template": "", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "buttonSetClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 17, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--btn-set'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--btn-set", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 17, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { ButtonModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ButtonModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-button-button-set--basic)\n", "type": "component", "sourceCode": "import { Component, HostBinding } from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ButtonModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-button-button-set--basic)\n */\n@Component({\n\tselector: \"cds-button-set, ibm-button-set\",\n\ttemplate: \"\"\n})\nexport class ButtonSet {\n\t@HostBinding(\"class.cds--btn-set\") buttonSetClass = true;\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "Checkbox", "id": "component-Checkbox-903078ac0c74d3b9c98940d4a7cd48115dd4609250ba018d2c54ae65f1a64faa99523ad63731575fef0c64690d2b409fe4b4c21a8b68a177c546d45bb48e78f6", "file": "src/checkbox/checkbox.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: Checkbox, multi: true\n}" } ], "selector": "cds-checkbox, ibm-checkbox", "styleUrls": [], "styles": [], "template": "
\n\t\n\t\n\t\t\n\t\t\t\n\t\t\n\t\n
\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "line": 108, "type": "string", "decorators": [] }, { "name": "ariaLabelledby", "deprecated": false, "deprecationMessage": "", "line": 109, "type": "string", "decorators": [] }, { "name": "checked", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the `checked` state. `true` for checked, `false` for unchecked\n\nAllows double binding with the `checkedChange` Output.\n", "description": "

Sets the checked state. true for checked, false for unchecked

\n

Allows double binding with the checkedChange Output.

\n", "line": 148, "type": "boolean", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a disabled checkbox.\n", "description": "

Set to true for a disabled checkbox.

\n", "line": 83, "type": "boolean", "decorators": [] }, { "name": "hideLabel", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to hide the checkbox labels.\n", "description": "

Set to true to hide the checkbox labels.

\n", "line": 91, "type": "boolean", "decorators": [] }, { "name": "id", "defaultValue": "`checkbox-${Checkbox.checkboxCount}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe unique id for the checkbox component.\n", "description": "

The unique id for the checkbox component.

\n", "line": 99, "type": "string", "decorators": [] }, { "name": "indeterminate", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.\n\nAllows double binding with the `indeterminateChange` Output.\n", "description": "

Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.

\n

Allows double binding with the indeterminateChange Output.

\n", "line": 116, "type": "boolean", "decorators": [] }, { "name": "name", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the name attribute on the `input` element.\n", "description": "

Sets the name attribute on the input element.

\n", "line": 95, "type": "string", "decorators": [] }, { "name": "required", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReflects the required attribute of the `input` element.\n", "description": "

Reflects the required attribute of the input element.

\n", "line": 103, "type": "boolean", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a loading checkbox.\n", "description": "

Set to true for a loading checkbox.

\n", "line": 87, "type": "boolean", "decorators": [] }, { "name": "value", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the value attribute on the `input` element.\n", "description": "

Sets the value attribute on the input element.

\n", "line": 107, "type": "CheckboxValue", "decorators": [] } ], "outputsClass": [ { "name": "checkedChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the value of the checkbox changes.\n\nAllows double biding with the `checked` Input.\n", "description": "

Emits an event when the value of the checkbox changes.

\n

Allows double biding with the checked Input.

\n", "line": 169, "type": "EventEmitter" }, { "name": "click", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits click event.\n", "description": "

Emits click event.

\n", "line": 162, "type": "EventEmitter" }, { "name": "indeterminateChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits event notifying other classes when a change in state occurs specifically\non an indeterminate checkbox.\n", "description": "

Emits event notifying other classes when a change in state occurs specifically\non an indeterminate checkbox.

\n", "line": 175, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "_checked", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Set to true if the input checkbox is selected (or checked).

\n", "line": 180, "rawdescription": "\n\nSet to `true` if the input checkbox is selected (or checked).\n" }, { "name": "_indeterminate", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Set to true if the input checkbox is in state indeterminate.

\n", "line": 184, "rawdescription": "\n\nSet to `true` if the input checkbox is in state indeterminate.\n" }, { "name": "checkboxCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

Variable used for creating unique ids for checkbox components.

\n", "line": 78, "rawdescription": "\n\nVariable used for creating unique ids for checkbox components.\n", "modifierKind": [ 126 ] }, { "name": "currentCheckboxState", "defaultValue": "CheckboxState.Init", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Keeps a reference to the checkboxes current state, as defined in CheckboxState.

\n", "line": 189, "rawdescription": "\n\nKeeps a reference to the checkboxes current state, as defined in `CheckboxState`.\n" }, { "name": "inputCheckbox", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "

Maintains a reference to the view DOM element of the Checkbox.

\n", "line": 194, "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Checkbox`.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'inputCheckbox'" } ], "modifierKind": [ 170 ] }, { "name": "onTouched", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": false, "description": "

Called when checkbox is blurred. Needed to properly implement ControlValueAccessor.

\n", "line": 284, "rawdescription": "\n\nCalled when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.\n" }, { "name": "propagateChange", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Method set in registerOnChange to propagate changes back to the form.

\n", "line": 313, "rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n" } ], "methodsClass": [ { "name": "emitChangeEvent", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 296, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates instance of `CheckboxChange` used to propagate the change event.\n", "description": "

Creates instance of CheckboxChange used to propagate the change event.

\n" }, { "name": "focusOut", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 251, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusout'" } ], "modifierKind": [ 170 ] }, { "name": "onChange", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 258, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExecutes on the event of a change within `Checkbox` to block propagation.\n", "description": "

Executes on the event of a change within Checkbox to block propagation.

\n", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onClick", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 265, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles click events on the `Checkbox` and emits changes to other classes.\n", "description": "

Handles click events on the Checkbox and emits changes to other classes.

\n", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 226, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n", "description": "

Sets a method in order to propagate changes back to the form.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 234, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n", "description": "

Registers a callback to be triggered when the control has been touched.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 5459, "end": 5461, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "fn" }, "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 5453, "end": 5458, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

Callback to be triggered when the checkbox is touched.

\n" } ] }, { "name": "setDisabledState", "args": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 245, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the checkbox.\n\nex: `this.formGroup.get(\"myCheckbox\").disable();`\n\n", "description": "

ControlValueAccessor method to programmatically disable the checkbox.

\n

ex: this.formGroup.get("myCheckbox").disable();

\n", "jsdoctags": [ { "name": { "pos": 5740, "end": 5750, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "isDisabled" }, "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 5734, "end": 5739, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

true to disable the checkbox

\n" } ] }, { "name": "toggle", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 206, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nToggle the selected state of the checkbox.\n", "description": "

Toggle the selected state of the checkbox.

\n", "modifierKind": [ 125 ] }, { "name": "transitionCheckboxState", "args": [ { "name": "newState", "type": "CheckboxState", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 289, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles changes between checkbox states.\n", "description": "

Handles changes between checkbox states.

\n", "jsdoctags": [ { "name": "newState", "type": "CheckboxState", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "writeValue", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 218, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nWrites a value from `ngModel` to the component.\n\nIn this case the value is the `checked` property.\n\n", "description": "

Writes a value from ngModel to the component.

\n

In this case the value is the checked property.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 5051, "end": 5056, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "value" }, "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 5045, "end": 5050, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

boolean, corresponds to the checked property.

\n" } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "focusout", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 251 } ], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { CheckboxModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { CheckboxModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-checkbox--basic)\n", "type": "component", "sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tViewChild,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { CheckboxValue } from \"./checkbox.types\";\n\n/**\n * Defines the set of states for a checkbox component.\n */\nexport enum CheckboxState {\n\tInit,\n\tIndeterminate,\n\tChecked,\n\tUnchecked\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { CheckboxModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-checkbox--basic)\n */\n@Component({\n\tselector: \"cds-checkbox, ibm-checkbox\",\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Checkbox,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class Checkbox implements ControlValueAccessor, AfterViewInit {\n\t/**\n\t * Variable used for creating unique ids for checkbox components.\n\t */\n\tstatic checkboxCount = 0;\n\n\t/**\n\t * Set to `true` for a disabled checkbox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading checkbox.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` to hide the checkbox labels.\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the name attribute on the `input` element.\n\t */\n\t@Input() name: string;\n\t/**\n\t * The unique id for the checkbox component.\n\t */\n\t@Input() id = `checkbox-${Checkbox.checkboxCount}`;\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() value: CheckboxValue;\n\t@Input() ariaLabel: string;\n\t@Input() ariaLabelledby: string;\n\n\t/**\n\t * Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.\n\t *\n\t * Allows double binding with the `indeterminateChange` Output.\n\t */\n\t@Input() set indeterminate(indeterminate: boolean) {\n\t\tif (indeterminate === this._indeterminate) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._indeterminate = indeterminate;\n\n\t\tif (this._indeterminate) {\n\t\t\tthis.transitionCheckboxState(CheckboxState.Indeterminate);\n\t\t} else {\n\t\t\tthis.transitionCheckboxState(this.checked ? CheckboxState.Checked : CheckboxState.Unchecked);\n\t\t}\n\n\t\tif (this.inputCheckbox && this.inputCheckbox.nativeElement) {\n\t\t\tthis.inputCheckbox.nativeElement.indeterminate = indeterminate;\n\t\t}\n\t\tthis.changeDetectorRef.markForCheck();\n\t\tthis.indeterminateChange.emit(this._indeterminate);\n\t}\n\n\t/**\n\t * Reflects whether the checkbox state is indeterminate.\n\t */\n\tget indeterminate() {\n\t\treturn this._indeterminate;\n\t}\n\n\t/**\n\t * Sets the `checked` state. `true` for checked, `false` for unchecked\n\t *\n\t * Allows double binding with the `checkedChange` Output.\n\t */\n\t@Input() set checked (checked: boolean) {\n\t\tthis.setChecked(checked, false);\n\t}\n\n\t/**\n\t * Returns value `true` if state is selected for the checkbox.\n\t */\n\tget checked() {\n\t\treturn this._checked;\n\t}\n\n\t/**\n\t * Emits click event.\n\t */\n\t@Output() click = new EventEmitter();\n\n\t/**\n\t * Emits an event when the value of the checkbox changes.\n\t *\n\t * Allows double biding with the `checked` Input.\n\t */\n\t@Output() checkedChange = new EventEmitter();\n\n\t/**\n\t * Emits event notifying other classes when a change in state occurs specifically\n\t * on an indeterminate checkbox.\n\t */\n\t@Output() indeterminateChange = new EventEmitter();\n\n\t/**\n\t * Set to `true` if the input checkbox is selected (or checked).\n\t */\n\t_checked = false;\n\t/**\n\t * Set to `true` if the input checkbox is in state indeterminate.\n\t */\n\t_indeterminate = false;\n\n\t/**\n\t * Keeps a reference to the checkboxes current state, as defined in `CheckboxState`.\n\t */\n\tcurrentCheckboxState = CheckboxState.Init;\n\n\t/**\n\t * Maintains a reference to the view DOM element of the `Checkbox`.\n\t */\n\t@ViewChild(\"inputCheckbox\") inputCheckbox: ElementRef;\n\n\t/**\n\t * Creates an instance of `Checkbox`.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {\n\t\tCheckbox.checkboxCount++;\n\t}\n\n\t/**\n\t * Toggle the selected state of the checkbox.\n\t */\n\tpublic toggle() {\n\t\t// Flip checked and reset indeterminate\n\t\tthis.setChecked(!this.checked, true);\n\t}\n\n\t/**\n\t * Writes a value from `ngModel` to the component.\n\t *\n\t * In this case the value is the `checked` property.\n\t *\n\t * @param value boolean, corresponds to the `checked` property.\n\t */\n\tpublic writeValue(value: any) {\n\t\t// Set checked and reset indeterminate\n\t\tthis.setChecked(!!value, true);\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the checkbox is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the checkbox.\n\t *\n\t * ex: `this.formGroup.get(\"myCheckbox\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the checkbox\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Executes on the event of a change within `Checkbox` to block propagation.\n\t */\n\tonChange(event: Event) {\n\t\tevent.stopPropagation();\n\t}\n\n\t/**\n\t * Handles click events on the `Checkbox` and emits changes to other classes.\n\t */\n\tonClick(event: Event) {\n\t\tif (this.click.observers.length) {\n\t\t\t// Disable default checkbox activation behavior which flips checked and resets indeterminate.\n\t\t\t// This allows the parent component to control the checked/indeterminate properties.\n\t\t\tevent.preventDefault();\n\t\t\tthis.click.emit();\n\t\t\treturn;\n\t\t}\n\t\tif (!this.disabled) {\n\t\t\tthis.toggle();\n\t\t\tthis.transitionCheckboxState(this._checked ? CheckboxState.Checked : CheckboxState.Unchecked);\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\n\t/**\n\t * Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Handles changes between checkbox states.\n\t */\n\ttransitionCheckboxState(newState: CheckboxState) {\n\t\tthis.currentCheckboxState = newState;\n\t}\n\n\t/**\n\t * Creates instance of `CheckboxChange` used to propagate the change event.\n\t */\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\t/**\n\t * Updates the checkbox if it is in the indeterminate state.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.indeterminate && this.inputCheckbox && this.inputCheckbox.nativeElement) {\n\t\t\tthis.inputCheckbox.nativeElement.indeterminate = true;\n\t\t}\n\t}\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\t/**\n\t * Sets checked state and optionally resets indeterminate state.\n\t */\n\tprivate setChecked(checked: boolean, resetIndeterminate: boolean) {\n\t\tif (checked === this._checked) {\n\t\t\treturn;\n\t\t}\n\t\tthis._checked = checked;\n\t\t// Reset indeterminate if requested\n\t\tif (resetIndeterminate && this._indeterminate) {\n\t\t\tthis._indeterminate = false;\n\t\t\tPromise.resolve().then(() => {\n\t\t\t\tthis.indeterminateChange.emit(this._indeterminate);\n\t\t\t});\n\t\t}\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

Creates an instance of Checkbox.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "" } ], "line": 194, "rawdescription": "\n\nCreates an instance of `Checkbox`.\n", "jsdoctags": [ { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "ControlValueAccessor", "AfterViewInit" ], "accessors": { "indeterminate": { "name": "indeterminate", "setSignature": { "name": "indeterminate", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "indeterminate", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 116, "rawdescription": "\n\nSet the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.\n\nAllows double binding with the `indeterminateChange` Output.\n", "description": "

Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.

\n

Allows double binding with the indeterminateChange Output.

\n", "jsdoctags": [ { "name": "indeterminate", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "indeterminate", "type": "", "returnType": "", "line": 139, "rawdescription": "\n\nReflects whether the checkbox state is indeterminate.\n", "description": "

Reflects whether the checkbox state is indeterminate.

\n" } }, "checked": { "name": "checked", "setSignature": { "name": "checked", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "checked", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 148, "rawdescription": "\n\nSets the `checked` state. `true` for checked, `false` for unchecked\n\nAllows double binding with the `checkedChange` Output.\n", "description": "

Sets the checked state. true for checked, false for unchecked

\n

Allows double binding with the checkedChange Output.

\n", "jsdoctags": [ { "name": "checked", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "checked", "type": "", "returnType": "", "line": 155, "rawdescription": "\n\nReturns value `true` if state is selected for the checkbox.\n", "description": "

Returns value true if state is selected for the checkbox.

\n" } } } }, { "name": "ClickableTile", "id": "component-ClickableTile-a5303199c898157627bf55b5745c75a70fc527c731908c5eb837f758daf227491942c15ece088eb017e082b0a5cd86ae2bd36af37c26394c68290018d867e1a4", "file": "src/tiles/clickable-tile.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-clickable-tile, ibm-clickable-tile", "styleUrls": [], "styles": [], "template": "\n\t\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to disable the clickable tile.\n", "description": "

Set to true to disable the clickable tile.

\n", "line": 67, "type": "boolean", "decorators": [] }, { "name": "href", "defaultValue": "\"#\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the `href` attribute on the `cds-clickable-tile` element.\n", "description": "

Sets the href attribute on the cds-clickable-tile element.

\n", "line": 52, "type": "string", "decorators": [] }, { "name": "rel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the `rel` attribute on the `cds-clickable-tile` element.\n", "description": "

Sets the rel attribute on the cds-clickable-tile element.

\n", "line": 62, "type": "string", "decorators": [] }, { "name": "route", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nArray of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate\n", "description": "

Array of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate

\n", "line": 73, "type": "any[]", "decorators": [] }, { "name": "routeExtras", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRouter options. Used in conjunction with `route`\nSee: https://angular.io/api/router/Router#navigate\n", "description": "

Router options. Used in conjunction with route\nSee: https://angular.io/api/router/Router#navigate

\n", "line": 79, "type": "any", "decorators": [] }, { "name": "target", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the `target` attribute on the `cds-clickable-tile` element.\n", "description": "

Sets the target attribute on the cds-clickable-tile element.

\n", "line": 57, "type": "string", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style", "jsdoctags": [ { "pos": 916, "end": 1020, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 917, "end": 927, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5 - Use cdsLayer directive instead\nSet to "light" to apply the light style

\n" } ], "line": 47, "type": "\"light\" | \"dark\"", "decorators": [] } ], "outputsClass": [ { "name": "navigation", "defaultValue": "new EventEmitter>()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the navigation status promise when the link is activated\n", "description": "

Emits the navigation status promise when the link is activated

\n", "line": 84, "type": "EventEmitter" } ], "propertiesClass": [], "methodsClass": [ { "name": "navigate", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 88, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Build application's clickable tiles using this component. Get started with importing the module:

\nExample :
import { TilesModule } from 'carbon-components-angular';
Example :
<cds-clickable-tile>\n        tile content\n</cds-clickable-tile>
", "rawdescription": "\n\nBuild application's clickable tiles using this component. Get started with importing the module:\n\n```typescript\nimport { TilesModule } from 'carbon-components-angular';\n```\n\n```html\n\n\t\ttile content\n\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tOptional\n} from \"@angular/core\";\nimport { Router } from \"@angular/router\";\n\n/**\n * Build application's clickable tiles using this component. Get started with importing the module:\n *\n * ```typescript\n * import { TilesModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * \n * \t\ttile content\n * \n * ```\n */\n@Component({\n\tselector: \"cds-clickable-tile, ibm-clickable-tile\",\n\ttemplate: `\n\t\n\t\t\n\t`\n})\nexport class ClickableTile {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Sets the `href` attribute on the `cds-clickable-tile` element.\n\t */\n\t@Input() href = \"#\";\n\n\t/**\n\t * Sets the `target` attribute on the `cds-clickable-tile` element.\n\t */\n\t@Input() target: string;\n\n\t/**\n\t * Sets the `rel` attribute on the `cds-clickable-tile` element.\n\t */\n\t@Input() rel: string;\n\n\t/**\n\t * Set to `true` to disable the clickable tile.\n\t */\n\t@Input() disabled = false;\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter>();\n\n\tconstructor(@Optional() protected router: Router) {}\n\n\tnavigate(event) {\n\t\tif (this.router && this.route && !this.disabled) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "" } ], "line": 84, "jsdoctags": [ { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [] }, { "name": "CodeSnippet", "id": "component-CodeSnippet-72e1aea3258b346513008c821263e69261e4d63be4e22daa7b0828df812d14fbe9312ddadbf3045e29206bf241e189b34321ab5b5f04f993d7aeda2fd1345013", "file": "src/code-snippet/code-snippet.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-code-snippet, ibm-code-snippet", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t\n\t\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n\n\n\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\n\t
\n\t
\n\t\n\t\t\n\t\n\t\n\t\t{{expanded ? translations.SHOW_LESS : translations.SHOW_MORE}}\n\t\t\n\t\n\n\n\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\n\n\n\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "copyButtonDescription", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\ncopy button description to show on hover\n", "description": "

copy button description to show on hover

\n", "line": 164, "type": "string", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to disable the code snippet\n", "description": "

Set to true to disable the code snippet

\n", "line": 172, "type": "boolean", "decorators": [] }, { "name": "display", "defaultValue": "SnippetType.single", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nIt can be `\"single\"`, `\"multi\"` or `\"inline\"`\n", "description": "

It can be "single", "multi" or "inline"

\n", "line": 159, "type": "SnippetType", "decorators": [] }, { "name": "expanded", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 212, "type": "boolean", "decorators": [] }, { "name": "feedbackText", "defaultValue": "this.translations.COPIED", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nText displayed in the tooltip when user clicks button to copy code.\n", "description": "

Text displayed in the tooltip when user clicks button to copy code.

\n", "line": 205, "type": "any", "decorators": [] }, { "name": "feedbackTimeout", "defaultValue": "2000", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTime in miliseconds to keep the feedback tooltip displayed.\nDefaults to 2 seconds\n", "description": "

Time in miliseconds to keep the feedback tooltip displayed.\nDefaults to 2 seconds

\n", "line": 210, "type": "number", "decorators": [] }, { "name": "hideCopyButton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to hide copy button\n", "description": "

Set to true to hide copy button

\n", "line": 168, "type": "boolean", "decorators": [] }, { "name": "maxCollapsedNumberOfRows", "defaultValue": "15", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the max number of rows to show when collapsed\nDefault is `15`\n", "description": "

Specify the max number of rows to show when collapsed\nDefault is 15

\n", "line": 177, "type": "number", "decorators": [] }, { "name": "maxExpandedNumberOfRows", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the max number of rows to show when expanded\nDefault is `0`, hence all content will be visible when expanded\n", "description": "

Specify the max number of rows to show when expanded\nDefault is 0, hence all content will be visible when expanded

\n", "line": 187, "type": "number", "decorators": [] }, { "name": "minCollapsedNumberOfRows", "defaultValue": "3", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the min number of rows to show when collapsed\nDefault is `3`\n", "description": "

Specify the min number of rows to show when collapsed\nDefault is 3

\n", "line": 182, "type": "number", "decorators": [] }, { "name": "minExpandedNumberOfRows", "defaultValue": "16", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the min number of rows to show when expanded\nDefault is `16`, hence height of expanded row will be 16 * rowHeightInPixel (16) = 256px\n", "description": "

Specify the min number of rows to show when expanded\nDefault is 16, hence height of expanded row will be 16 * rowHeightInPixel (16) = 256px

\n", "line": 192, "type": "number", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 213, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style", "jsdoctags": [ { "pos": 6125, "end": 6229, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 6126, "end": 6136, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5 - Use cdsLayer directive instead\nSet to "light" to apply the light style

\n" } ], "line": 201, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "translations", "defaultValue": "this.i18n.get().CODE_SNIPPET", "deprecated": false, "deprecationMessage": "", "line": 160, "type": "any", "decorators": [] }, { "name": "wrapText", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to wrap the text\n", "description": "

Set to true to wrap the text

\n", "line": 196, "type": "boolean", "decorators": [] }, { "name": "align", "defaultValue": "\"bottom\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet popover alignment\n", "description": "

Set popover alignment

\n", "line": 32, "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "autoAlign", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n**Experimental**: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once\n", "description": "

Experimental: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once

\n", "line": 40, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "caret", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide caret\n", "description": "

Set to false to hide caret

\n", "line": 16, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "dropShadow", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide shadow\n", "description": "

Set to false to hide shadow

\n", "line": 20, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "enterDelayMs", "defaultValue": "100", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet delay before tooltip is shown\n", "description": "

Set delay before tooltip is shown

\n", "line": 44, "type": "number", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "highContrast", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to enable high contrast\n", "description": "

Set to true to enable high contrast

\n", "line": 24, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "isOpen", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to have the popover open by default\n", "description": "

Set to true to have the popover open by default

\n", "line": 28, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "leaveDelayMs", "defaultValue": "300", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet delay when tooltip disappears\n", "description": "

Set delay when tooltip disappears

\n", "line": 48, "type": "number", "decorators": [], "inheritance": { "file": "BaseIconButton" } } ], "outputsClass": [], "propertiesClass": [ { "name": "animating", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 221 }, { "name": "code", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 216, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'code'" } ], "modifierKind": [ 170 ] }, { "name": "codeContainer", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 218, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'codeContainer'" } ], "modifierKind": [ 170 ] }, { "name": "codeContent", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 217, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'codeContent'" } ], "modifierKind": [ 170 ] }, { "name": "hasExpandButton", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "null", "optional": false, "description": "", "line": 222 }, { "name": "hasLeft", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 227 }, { "name": "hasRight", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 226 }, { "name": "hasRightOverflow", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 224 }, { "name": "isExpandable", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 223 }, { "name": "rowHeightInPixel", "defaultValue": "16", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 154, "modifierKind": [ 148 ] }, { "name": "showFeedback", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 220 }, { "name": "styles", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "", "line": 214 } ], "methodsClass": [ { "name": "calculateContainerHeight", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 299, "deprecated": false, "deprecationMessage": "" }, { "name": "handleScroll", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 237, "deprecated": false, "deprecationMessage": "" }, { "name": "onCopyButtonClicked", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 270, "deprecated": false, "deprecationMessage": "" }, { "name": "toggleSnippetExpansion", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 265, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--snippet", "deprecated": false, "deprecationMessage": "", "line": 138, "type": "boolean", "decorators": [] }, { "name": "class.cds--snippet--disabled", "deprecated": false, "deprecationMessage": "", "line": 147, "type": "boolean", "decorators": [] }, { "name": "class.cds--snippet--light", "deprecated": false, "deprecationMessage": "", "line": 150, "type": "boolean", "decorators": [] }, { "name": "class.cds--snippet--multi", "deprecated": false, "deprecationMessage": "", "line": 144, "type": "boolean", "decorators": [] }, { "name": "class.cds--snippet--single", "deprecated": false, "deprecationMessage": "", "line": 141, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { CodeSnippetModule } from 'carbon-components-angular';
Example :
<cds-code-snippet>Code</cds-code-snippet>

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { CodeSnippetModule } from 'carbon-components-angular';\n```\n\n```html\nCode\n```\n\n[See demo](../../?path=/story/components-code-snippet--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tViewChild,\n\tAfterViewInit,\n\tOnInit\n} from \"@angular/core\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { EventService } from \"carbon-components-angular/utils\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\nexport enum SnippetType {\n\tsingle = \"single\",\n\tmulti = \"multi\",\n\tinline = \"inline\"\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { CodeSnippetModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * Code\n * ```\n *\n * [See demo](../../?path=/story/components-code-snippet--basic)\n */\n@Component({\n\tselector: \"cds-code-snippet, ibm-code-snippet\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t{{expanded ? translations.SHOW_LESS : translations.SHOW_MORE}}\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit {\n\t@HostBinding(\"class.cds--snippet\") get snippetClass() {\n\t\treturn this.display !== SnippetType.inline;\n\t}\n\t@HostBinding(\"class.cds--snippet--single\") get snippetSingleClass() {\n\t\treturn this.display === SnippetType.single;\n\t}\n\t@HostBinding(\"class.cds--snippet--multi\") get snippetMultiClass() {\n\t\treturn this.display === SnippetType.multi;\n\t}\n\t@HostBinding(\"class.cds--snippet--disabled\") get snippetDisabledClass() {\n\t\treturn this.display !== \"inline\" && this.disabled;\n\t}\n\t@HostBinding(\"class.cds--snippet--light\") get snippetInlineLightClass() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\treadonly rowHeightInPixel: number = 16;\n\n\t/**\n\t * It can be `\"single\"`, `\"multi\"` or `\"inline\"`\n\t */\n\t@Input() display: SnippetType = SnippetType.single;\n\t@Input() translations = this.i18n.get().CODE_SNIPPET;\n\t/**\n\t * copy button description to show on hover\n\t */\n\t@Input() copyButtonDescription: string;\n\t/**\n\t * Set to `true` to hide copy button\n\t */\n\t@Input() hideCopyButton = false;\n\t/**\n\t * Set to `true` to disable the code snippet\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Specify the max number of rows to show when collapsed\n\t * Default is `15`\n\t */\n\t@Input() maxCollapsedNumberOfRows = 15;\n\t/**\n\t * Specify the min number of rows to show when collapsed\n\t * Default is `3`\n\t */\n\t@Input() minCollapsedNumberOfRows = 3;\n\t/**\n\t * Specify the max number of rows to show when expanded\n\t * Default is `0`, hence all content will be visible when expanded\n\t */\n\t@Input() maxExpandedNumberOfRows = 0;\n\t/**\n\t * Specify the min number of rows to show when expanded\n\t * Default is `16`, hence height of expanded row will be 16 * rowHeightInPixel (16) = 256px\n\t */\n\t@Input() minExpandedNumberOfRows = 16;\n\t/**\n\t * Set to `true` to wrap the text\n\t */\n\t@HostBinding(\"class.cds--snippet--wraptext\") @Input() wrapText = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Text displayed in the tooltip when user clicks button to copy code.\n\t */\n\t@Input() feedbackText = this.translations.COPIED;\n\t/**\n\t * Time in miliseconds to keep the feedback tooltip displayed.\n\t * Defaults to 2 seconds\n\t */\n\t@Input() feedbackTimeout = 2000;\n\n\t@HostBinding(\"class.cds--snippet--expand\") @Input() expanded = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\tstyles: any = {};\n\n\t@ViewChild(\"code\") code;\n\t@ViewChild(\"codeContent\") codeContent;\n\t@ViewChild(\"codeContainer\") codeContainer;\n\n\tshowFeedback = false;\n\tanimating = false;\n\thasExpandButton = null;\n\tisExpandable = false;\n\thasRightOverflow = false;\n\n\thasRight = false;\n\thasLeft = false;\n\n\t/**\n\t * Creates an instance of CodeSnippet.\n\t */\n\tconstructor(protected i18n: I18n, protected eventService: EventService) {\n\t\tsuper();\n\t\tthis.dropShadow = false;\n\t}\n\n\thandleScroll() {\n\t\tif (this.skeleton) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet ref;\n\t\tswitch (this.display) {\n\t\t\tcase \"multi\":\n\t\t\t\tref = this.codeContent.nativeElement;\n\t\t\t\tbreak;\n\t\t\tcase \"single\":\n\t\t\t\tref = this.codeContainer.nativeElement;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\t\tif (ref) {\n\t\t\tconst {\n\t\t\t\tscrollWidth,\n\t\t\t\tclientWidth,\n\t\t\t\tscrollLeft\n\t\t\t} = ref;\n\t\t\tconst horizontalOverflow = scrollWidth > clientWidth;\n\t\t\tthis.hasLeft = horizontalOverflow && !!scrollLeft;\n\t\t\tthis.hasRight = horizontalOverflow && scrollLeft + clientWidth !== scrollWidth;\n\t\t}\n\t}\n\n\ttoggleSnippetExpansion() {\n\t\tthis.expanded = !this.expanded;\n\t\tthis.calculateContainerHeight();\n\t}\n\n\tonCopyButtonClicked() {\n\t\tif (!this.disabled) {\n\t\t\twindow.navigator.clipboard\n\t\t\t\t.writeText(this.code.nativeElement.innerText || this.code.nativeElement.textContent).then(() => {\n\t\t\t\t\tthis.showFeedback = true;\n\t\t\t\t\tthis.animating = true;\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tthis.showFeedback = false;\n\t\t\t\t\t\tthis.animating = false;\n\t\t\t\t\t}, this.feedbackTimeout);\n\t\t\t\t});\n\t\t}\n\t}\n\n\tngOnInit() {\n\t\tthis.calculateContainerHeight();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.canExpand();\n\t\tthis.handleScroll();\n\t\tif (window) {\n\t\t\tthis.eventService.on(window as any, \"resize\", () => {\n\t\t\t\tthis.canExpand();\n\t\t\t\tthis.handleScroll();\n\t\t\t});\n\t\t}\n\t}\n\n\tcalculateContainerHeight() {\n\t\tif (this.display === \"multi\" && !this.skeleton) {\n\t\t\tthis.styles = {};\n\t\t\tif (this.expanded) {\n\t\t\t\tif (this.maxExpandedNumberOfRows > 0) {\n\t\t\t\t\tthis.styles[\"max-height\"] = `${this.maxExpandedNumberOfRows * this.rowHeightInPixel}px`;\n\t\t\t\t}\n\t\t\t\tif (this.minExpandedNumberOfRows > 0) {\n\t\t\t\t\tthis.styles[\"min-height\"] = `${this.minExpandedNumberOfRows * this.rowHeightInPixel}px`;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (this.maxCollapsedNumberOfRows > 0) {\n\t\t\t\t\tthis.styles[\"max-height\"] = `${this.maxCollapsedNumberOfRows * this.rowHeightInPixel}px`;\n\t\t\t\t}\n\t\t\t\tif (this.minCollapsedNumberOfRows > 0) {\n\t\t\t\t\tthis.styles[\"min-height\"] = `${this.minCollapsedNumberOfRows * this.rowHeightInPixel}px`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected canExpand() {\n\t\tif (this.display === \"multi\" && !this.skeleton) {\n\t\t\tconst height = this.codeContent.nativeElement.getBoundingClientRect().height;\n\t\t\tif (\n\t\t\t\tthis.maxCollapsedNumberOfRows > 0 &&\n\t\t\t\t(this.maxExpandedNumberOfRows <= 0 ||\n\t\t\t\t\tthis.maxExpandedNumberOfRows > this.maxCollapsedNumberOfRows) &&\n\t\t\t\theight > this.maxCollapsedNumberOfRows * this.rowHeightInPixel\n\t\t\t) {\n\t\t\t\tthis.isExpandable = true;\n\t\t\t} else {\n\t\t\t\tthis.isExpandable = false;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tthis.expanded &&\n\t\t\t\tthis.minExpandedNumberOfRows > 0 &&\n\t\t\t\theight <= this.minExpandedNumberOfRows * this.rowHeightInPixel\n\t\t\t) {\n\t\t\t\tthis.isExpandable = false;\n\t\t\t}\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

Creates an instance of CodeSnippet.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "" } ], "line": 227, "rawdescription": "\n\nCreates an instance of CodeSnippet.\n", "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [ "BaseIconButton" ], "implements": [ "OnInit", "AfterViewInit" ], "accessors": { "snippetClass": { "name": "snippetClass", "getSignature": { "name": "snippetClass", "type": "", "returnType": "", "line": 138 } }, "snippetSingleClass": { "name": "snippetSingleClass", "getSignature": { "name": "snippetSingleClass", "type": "", "returnType": "", "line": 141 } }, "snippetMultiClass": { "name": "snippetMultiClass", "getSignature": { "name": "snippetMultiClass", "type": "", "returnType": "", "line": 144 } }, "snippetDisabledClass": { "name": "snippetDisabledClass", "getSignature": { "name": "snippetDisabledClass", "type": "", "returnType": "", "line": 147 } }, "snippetInlineLightClass": { "name": "snippetInlineLightClass", "getSignature": { "name": "snippetInlineLightClass", "type": "", "returnType": "", "line": 150 } } } }, { "name": "ComboBox", "id": "component-ComboBox-ef7f2d87b1acfe5d29964f5676694b5387cf38348c08ab1047e5d984bced49c75fe8be23bfbd9e765fe02e83de7969a7a2e08f6f9702f06b184f1d2fb7535729", "file": "src/combobox/combobox.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: ComboBox, multi: true\n}" } ], "selector": "cds-combo-box, ibm-combo-box", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t{{label}}\n\t\t\n\t\n\t\n\t\t\n\t\t\t 0\"\n\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled || readonly}\">\n\t\t\t\t{{ pills.length }}\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\n\t
\n\t\n\t\t{{helperText}}\n\t\t\n\t\n\t
\n\t\t{{ invalidText }}\n\t\t\n\t
\n\t
\n\t\t{{warnText}}\n\t\t\n\t
\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "appendInline", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nset to `true` to place the dropdown view inline with the component\n", "description": "

set to true to place the dropdown view inline with the component

\n", "line": 331, "type": "boolean", "decorators": [] }, { "name": "autocomplete", "defaultValue": "\"list\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify aria-autocomplete attribute of text input.\n\"list\", is the expected value for a combobox that invokes a drop-down list\n", "description": "

Specify aria-autocomplete attribute of text input.\n"list", is the expected value for a combobox that invokes a drop-down list

\n", "line": 367, "type": "string", "decorators": [] }, { "name": "clearSelectionAria", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue to display for accessibility purposes on the clear the selected item icon, when single is selected\n", "description": "

Value to display for accessibility purposes on the clear the selected item icon, when single is selected

\n", "line": 267, "type": "string | Observable", "decorators": [] }, { "name": "clearSelectionsAria", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue to display for accessibility purposes to clear selections, when multi is selected\n", "description": "

Value to display for accessibility purposes to clear selections, when multi is selected

\n", "line": 247, "type": "string | Observable", "decorators": [] }, { "name": "clearSelectionsTitle", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue to display on the clear selections icon, when multi is selected\n", "description": "

Value to display on the clear selections icon, when multi is selected

\n", "line": 237, "type": "string | Observable", "decorators": [] }, { "name": "clearSelectionTitle", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue to display on the clear the selected item icon, when single is selected\n", "description": "

Value to display on the clear the selected item icon, when single is selected

\n", "line": 257, "type": "string | Observable", "decorators": [] }, { "name": "closeMenuAria", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when opened\n", "description": "

Value to display for accessibility purposes on the combobox control menu when opened

\n", "line": 227, "type": "string | Observable", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to disable combobox.\n", "description": "

Set to true to disable combobox.

\n", "line": 375, "type": "boolean", "decorators": [] }, { "name": "dropUp", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOverrides the automatic dropUp.\n", "description": "

Overrides the automatic dropUp.

\n", "line": 371, "type": "boolean", "decorators": [] }, { "name": "fluid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExperimental: enable fluid state\n", "description": "

Experimental: enable fluid state

\n", "line": 383, "type": "boolean", "decorators": [] }, { "name": "helperText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the optional helper text.\n", "description": "

Sets the optional helper text.

\n", "line": 327, "type": "string | TemplateRef", "decorators": [] }, { "name": "hideLabel", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHide label while keeping it accessible for screen readers\n", "description": "

Hide label while keeping it accessible for screen readers

\n", "line": 323, "type": "boolean", "decorators": [] }, { "name": "id", "defaultValue": "`combobox-${ComboBox.comboBoxCount++}`", "deprecated": false, "deprecationMessage": "", "line": 275, "type": "string", "decorators": [] }, { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show the invalid state.\n", "description": "

Set to true to show the invalid state.

\n", "line": 335, "type": "boolean", "decorators": [] }, { "name": "invalidText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue displayed if combobox is in an invalid state.\n", "description": "

Value displayed if combobox is in an invalid state.

\n", "line": 339, "type": "string | TemplateRef", "decorators": [] }, { "name": "items", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nList of items to fill the content with.\n\n**Example:**\n```javascript\nitems = [\n\t\t{\n\t\t\tcontent: \"Abacus\",\n\t\t\tselected: false\n\t\t},\n\t\t{\n\t\t\tcontent: \"Byte\",\n\t\t\tselected: false,\n\t\t},\n\t\t{\n\t\t\tcontent: \"Computer\",\n\t\t\tselected: false\n\t\t},\n\t\t{\n\t\t\tcontent: \"Digital\",\n\t\t\tselected: false\n\t\t}\n];\n```\n\n", "description": "

List of items to fill the content with.

\n

Example:

\nExample :
items = [\n        {\n            content: "Abacus",\n            selected: false\n        },\n        {\n            content: "Byte",\n            selected: false,\n        },\n        {\n            content: "Computer",\n            selected: false\n        },\n        {\n            content: "Digital",\n            selected: false\n        }\n];
", "line": 303, "type": "Array", "decorators": [] }, { "name": "itemValueKey", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecifies the property to be used as the return value to `ngModel`\n", "description": "

Specifies the property to be used as the return value to ngModel

\n", "line": 315, "type": "string", "decorators": [] }, { "name": "label", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nLabel for the combobox.\n", "description": "

Label for the combobox.

\n", "line": 319, "type": "string | TemplateRef", "decorators": [] }, { "name": "labelId", "defaultValue": "`combobox-label-${ComboBox.comboBoxCount++}`", "deprecated": false, "deprecationMessage": "", "line": 276, "type": "string", "decorators": [] }, { "name": "maxLength", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nMax length value to limit input characters\n", "description": "

Max length value to limit input characters

\n", "line": 351, "type": "number", "decorators": [] }, { "name": "openMenuAria", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when closed\n", "description": "

Value to display for accessibility purposes on the combobox control menu when closed

\n", "line": 217, "type": "string | Observable", "decorators": [] }, { "name": "placeholder", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nText to show when nothing is selected.\n", "description": "

Text to show when nothing is selected.

\n", "line": 207, "type": "string | Observable", "decorators": [] }, { "name": "readonly", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for readonly state.\n", "description": "

Set to true for readonly state.

\n", "line": 379, "type": "boolean", "decorators": [] }, { "name": "selectionFeedback", "defaultValue": "\"top-after-reopen\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify feedback (mode) of the selection.\n`top`: selected item jumps to top\n`fixed`: selected item stays at its position\n`top-after-reopen`: selected item jump to top after reopen dropdown\n", "description": "

Specify feedback (mode) of the selection.\ntop: selected item jumps to top\nfixed: selected item stays at its position\ntop-after-reopen: selected item jump to top after reopen dropdown

\n", "line": 362, "type": "\"top\" | \"fixed\" | \"top-after-reopen\"", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCombo box render size.\n", "description": "

Combo box render size.

\n", "line": 311, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead", "jsdoctags": [ { "pos": 10251, "end": 10309, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 10252, "end": 10262, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5 - Use cdsLayer directive instead

\n" } ], "line": 355, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "type", "defaultValue": "\"single\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCombo box type (supporting single or multi selection of items).\n", "description": "

Combo box type (supporting single or multi selection of items).

\n", "line": 307, "type": "\"single\" | \"multi\"", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show a warning (contents set by warnText)\n", "description": "

Set to true to show a warning (contents set by warnText)

\n", "line": 343, "type": "boolean", "decorators": [] }, { "name": "warnText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the warning text\n", "description": "

Sets the warning text

\n", "line": 347, "type": "string | TemplateRef", "decorators": [] } ], "outputsClass": [ { "name": "clear", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nEmits an event when the clear button is clicked.", "description": "

Emits an event when the clear button is clicked.

\n", "line": 435, "type": "EventEmitter" }, { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nEmits an empty event when the menu is closed", "description": "

Emits an empty event when the menu is closed

\n", "line": 431, "type": "EventEmitter" }, { "name": "search", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nEmits the search string from the input", "description": "

Emits the search string from the input

\n", "line": 433, "type": "EventEmitter" }, { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits a ListItem\n\nExample:\n```javascript\n{\n\t\tcontent: \"one\",\n\t\tselected: true\n}\n```\n", "description": "

Emits a ListItem

\n

Example:

\nExample :
{\n        content: "one",\n        selected: true\n}
", "line": 395, "type": "EventEmitter" }, { "name": "submit", "defaultValue": "new EventEmitter<{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nIntended to be used to add items to the list.\n\nEmits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\nExample:\n```javascript\n\t{\n\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t\tindex: 1,\n\t\tvalue: {\n\t\t\tcontent: \"some user string\",\n\t\t\tselected: false\n\t\t}\n\t}\n```\n\n\nExample:\n```javascript\n{\n\tafter: 1,\n\tvalue: \"some user string\"\n}\n```\n", "description": "

Intended to be used to add items to the list.

\n

Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem

\n

Example:

\nExample :
    {\n        items: [{content: "one", selected: true}, {content: "two", selected: true}],\n        index: 1,\n        value: {\n            content: "some user string",\n            selected: false\n        }\n    }

Example:

\nExample :
{\n    after: 1,\n    value: "some user string"\n}
", "line": 422, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "_dropUp", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

controls whether the drop-up class is applied

\n", "line": 457, "rawdescription": "\n\ncontrols whether the `drop-up` class is applied\n" }, { "name": "comboBoxCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 274, "modifierKind": [ 126 ] }, { "name": "dropdownMenu", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 438, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'dropdownMenu'" } ], "modifierKind": [ 170 ] }, { "name": "hostClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 441, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--list-box__wrapper'" } ], "modifierKind": [ 170 ] }, { "name": "input", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 439, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'input', {static: true}" } ], "modifierKind": [ 170 ] }, { "name": "keyboardNav", "defaultValue": "this._keyboardNav.bind(this)", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 453 }, { "name": "listbox", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 440, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'listbox', {static: true}" } ], "modifierKind": [ 170 ] }, { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 443, "modifierKind": [ 125 ] }, { "name": "outsideClick", "defaultValue": "this._outsideClick.bind(this)", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 452 }, { "name": "pills", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "

Selected items for multi-select combo-boxes.

\n", "line": 448, "rawdescription": "\nSelected items for multi-select combo-boxes.", "modifierKind": [ 125 ] }, { "name": "selectedValue", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

used to update the displayValue

\n", "line": 450, "rawdescription": "\nused to update the displayValue", "modifierKind": [ 125 ] }, { "name": "showClearButton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 445, "modifierKind": [ 125 ] }, { "name": "view", "deprecated": false, "deprecationMessage": "", "type": "AbstractDropdownView", "optional": false, "description": "

ContentChild reference to the instantiated dropdown list

\n", "line": 437, "rawdescription": "\nContentChild reference to the instantiated dropdown list", "decorators": [ { "name": "ContentChild", "stringifiedArguments": "AbstractDropdownView, {static: true}" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "_appendToBody", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 859, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates the `Dropdown` list as an element that is appended to the DOM body.\n", "description": "

Creates the Dropdown list as an element that is appended to the DOM body.

\n" }, { "name": "_appendToDropdown", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 870, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n", "description": "

Creates the Dropdown list appending it to the dropdown parent object instead of the body.

\n" }, { "name": "_keyboardNav", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 839, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n", "description": "

Handles keyboard events so users are controlling the Dropdown instead of unintentionally controlling outside elements.

\n", "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "_noop", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 619, "deprecated": false, "deprecationMessage": "" }, { "name": "_outsideClick", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 899, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles clicks outside of the `Dropdown` list.\n", "description": "

Handles clicks outside of the Dropdown list.

\n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "_shouldDropUp", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 879, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDetects whether or not the `Dropdown` list is visible within all scrollable parents.\nThis can be overridden by passing in a value to the `dropUp` input.\n", "description": "

Detects whether or not the Dropdown list is visible within all scrollable parents.\nThis can be overridden by passing in a value to the dropUp input.

\n" }, { "name": "clearInput", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 811, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "clearSelected", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 685, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "closeDropdown", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 719, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCloses the dropdown and emits the close event.\n", "description": "

Closes the dropdown and emits the close event.

\n", "modifierKind": [ 125 ] }, { "name": "handleFocus", "args": [ { "name": "event", "type": "FocusEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 908, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "FocusEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "hostkeys", "args": [ { "name": "ev", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 594, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n", "description": "

Handles Escape/Tab key closing the dropdown, and arrow up/down focus to/from the dropdown list.

\n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "ev", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 832, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onBlur", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 656, "deprecated": false, "deprecationMessage": "" }, { "name": "onSearch", "args": [ { "name": "searchString", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "shouldEmitSearch", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 767, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the list group filter, and manages single select item selection.\n", "description": "

Sets the list group filter, and manages single select item selection.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "searchString", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "shouldEmitSearch", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true", "tagName": { "text": "param" } } ] }, { "name": "onSubmit", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 800, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nIntended to be used to add items to the list.\n", "description": "

Intended to be used to add items to the list.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "openDropdown", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 733, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOpens the dropdown.\n", "description": "

Opens the dropdown.

\n", "modifierKind": [ 125 ] }, { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 660, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 664, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "setDisabledState", "args": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 673, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the combobox.\n\nex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n", "description": "

ControlValueAccessor method to programmatically disable the combobox.

\n

ex: this.formGroup.get("myCoolCombobox").disable();

\n", "jsdoctags": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "toggleDropdown", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 756, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nToggles the dropdown.\n", "description": "

Toggles the dropdown.

\n", "modifierKind": [ 125 ] }, { "name": "updatePills", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 680, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled by `n-pill-input` when the selected pills have changed.\n", "description": "

Called by n-pill-input when the selected pills have changed.

\n", "modifierKind": [ 125 ] }, { "name": "writeValue", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 624, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--list-box__wrapper", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 441, "type": "boolean", "decorators": [] } ], "hostListeners": [ { "name": "keydown", "args": [ { "name": "ev", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n", "description": "

Handles Escape/Tab key closing the dropdown, and arrow up/down focus to/from the dropdown list.

\n", "line": 594 } ], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { ComboBoxModule } from 'carbon-components-angular';

ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide "pills" of selected items.

\n

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ComboBoxModule } from 'carbon-components-angular';\n```\n\nComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide \"pills\" of selected items.\n\n[See demo](../../?path=/story/components-combobox--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\n * ```\n *\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t{{label}}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled || readonly}\">\n\t\t\t\t\t\t{{ pills.length }}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\t{{helperText}}\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t{{ invalidText }}\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t{{warnText}}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `combobox-${ComboBox.comboBoxCount++}`;\n\t@Input() labelId = `combobox-label-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef;\n\t/**\n\t * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = false;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter<{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\toutsideClick = this._outsideClick.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\tprotected _isFocused = false;\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif (this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.selected.emit(event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t// this should also cover the case where the dropdown is in a modal\n\t\t// (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.preventDefault();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value ?? []) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected(event) {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t/**\n\t\t * @todo - In next major version update to the following:\n\t\t * const selected = this.type === \"multi\" ? this.view.getSelected() : undefined;\n\t\t *\n\t\t * Previously it returned an empty array even for type === 'single'\n\t\t * Also resolve #ref-1245723\n\t\t */\n\t\t// On type=multi we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\n\t\t// in case there are disabled items they should be mapped according to itemValueKey\n\t\tif (this.itemValueKey && selected) {\n\t\t\tconst values = selected.map((item) => item[this.itemValueKey]);\n\t\t\tthis.propagateChangeCallback(values);\n\t\t} else {\n\t\t\tthis.propagateChangeCallback(selected);\n\t\t}\n\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit(event);\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled || this.readonly) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tif (this.disabled || this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected(event);\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation(); // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

Creates an instance of ComboBox.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "dropdownService", "type": "DropdownService", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 471, "rawdescription": "\n\nCreates an instance of ComboBox.\n", "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "dropdownService", "type": "DropdownService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnChanges", "AfterViewInit", "AfterContentInit", "OnDestroy" ], "accessors": { "placeholder": { "name": "placeholder", "setSignature": { "name": "placeholder", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 207, "rawdescription": "\n\nText to show when nothing is selected.\n", "description": "

Text to show when nothing is selected.

\n", "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "placeholder", "type": "", "returnType": "", "line": 211 } }, "openMenuAria": { "name": "openMenuAria", "setSignature": { "name": "openMenuAria", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 217, "rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when closed\n", "description": "

Value to display for accessibility purposes on the combobox control menu when closed

\n", "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "openMenuAria", "type": "", "returnType": "", "line": 221 } }, "closeMenuAria": { "name": "closeMenuAria", "setSignature": { "name": "closeMenuAria", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 227, "rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when opened\n", "description": "

Value to display for accessibility purposes on the combobox control menu when opened

\n", "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "closeMenuAria", "type": "", "returnType": "", "line": 231 } }, "clearSelectionsTitle": { "name": "clearSelectionsTitle", "setSignature": { "name": "clearSelectionsTitle", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 237, "rawdescription": "\n\nValue to display on the clear selections icon, when multi is selected\n", "description": "

Value to display on the clear selections icon, when multi is selected

\n", "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "clearSelectionsTitle", "type": "", "returnType": "", "line": 241 } }, "clearSelectionsAria": { "name": "clearSelectionsAria", "setSignature": { "name": "clearSelectionsAria", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 247, "rawdescription": "\n\nValue to display for accessibility purposes to clear selections, when multi is selected\n", "description": "

Value to display for accessibility purposes to clear selections, when multi is selected

\n", "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "clearSelectionsAria", "type": "", "returnType": "", "line": 251 } }, "clearSelectionTitle": { "name": "clearSelectionTitle", "setSignature": { "name": "clearSelectionTitle", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 257, "rawdescription": "\n\nValue to display on the clear the selected item icon, when single is selected\n", "description": "

Value to display on the clear the selected item icon, when single is selected

\n", "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "clearSelectionTitle", "type": "", "returnType": "", "line": 261 } }, "clearSelectionAria": { "name": "clearSelectionAria", "setSignature": { "name": "clearSelectionAria", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 267, "rawdescription": "\n\nValue to display for accessibility purposes on the clear the selected item icon, when single is selected\n", "description": "

Value to display for accessibility purposes on the clear the selected item icon, when single is selected

\n", "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "clearSelectionAria", "type": "", "returnType": "", "line": 271 } } } }, { "name": "ComboButtonComponent", "id": "component-ComboButtonComponent-a6d257c42463e5b1a3621fb09c5cf059d94e790f4dbe949c6c47fc4a0d8110f4cba34c7675e9c7a61cd7fa82c2cc86c121bc1fb8d8335d18a6472e1ab91cd0a7", "file": "src/combo-button/combo-button.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-combo-button", "styleUrls": [], "styles": [], "template": "
\n\t\n\t\t{{label}}\n\t\n
\n\n\t\n\t\n\n\n\n\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "comboId", "defaultValue": "`combo-button-${ComboButtonComponent.comboButtonCounter++}`", "deprecated": false, "deprecationMessage": "", "line": 79, "type": "string", "decorators": [] }, { "name": "description", "deprecated": false, "deprecationMessage": "", "line": 97, "type": "string", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 95, "type": "boolean", "decorators": [] }, { "name": "label", "deprecated": false, "deprecationMessage": "", "line": 94, "type": "string", "decorators": [] }, { "name": "menuAlignment", "defaultValue": "\"bottom\"", "deprecated": false, "deprecationMessage": "", "line": 96, "type": "ComboButtonPlacement", "decorators": [] }, { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 100, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "line": 93, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "tooltipAutoAlign", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 98, "type": "boolean", "decorators": [] }, { "name": "tooltipPlacement", "defaultValue": "\"bottom\"", "deprecated": false, "deprecationMessage": "", "line": 99, "type": "string", "decorators": [] } ], "outputsClass": [ { "name": "actionClick", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 101, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "comboButtonContainer", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 102, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--combo-button__container'" } ], "modifierKind": [ 170 ] }, { "name": "comboButtonCounter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 78, "modifierKind": [ 126 ] }, { "name": "menuTemplate", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "", "line": 110, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'menuTemplate'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "cleanUp", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 188, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nClean up `autoUpdate` if auto alignment is enabled\n", "description": "

Clean up autoUpdate if auto alignment is enabled

\n" }, { "name": "handleFocusOut", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 177, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOn body click, close the menu\n", "description": "

On body click, close the menu

\n", "jsdoctags": [ { "name": { "pos": 4675, "end": 4680, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 4669, "end": 4674, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, { "name": "handleMenuItemClick", "args": [ { "name": "event", "type": "ItemClickEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 164, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAs of now, menu button does not support nexted menu, on button click it should close\n", "description": "

As of now, menu button does not support nexted menu, on button click it should close

\n", "jsdoctags": [ { "name": "event", "type": "ItemClickEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onActionClick", "args": [ { "name": "event", "type": "PointerEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 206, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOn action click, notify user\nIf the menu is open, close the menu\n", "description": "

On action click, notify user\nIf the menu is open, close the menu

\n", "jsdoctags": [ { "name": { "pos": 5334, "end": 5339, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "type": "PointerEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 5328, "end": 5333, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, { "name": "recomputePosition", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 259, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCompute position of menu\n", "description": "

Compute position of menu

\n" }, { "name": "roundByDPR", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 249, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "toggleMenu", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 218, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles emitting open/close event\n", "description": "

Handles emitting open/close event

\n" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.aria-owns", "deprecated": false, "deprecationMessage": "", "line": 106, "type": "string", "decorators": [] }, { "name": "class.cds--combo-button__container", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 102, "type": "boolean", "decorators": [] }, { "name": "class.cds--combo-button__container--lg", "deprecated": false, "deprecationMessage": "", "line": 103, "type": "boolean", "decorators": [] }, { "name": "class.cds--combo-button__container--md", "deprecated": false, "deprecationMessage": "", "line": 104, "type": "boolean", "decorators": [] }, { "name": "class.cds--combo-button__container--sm", "deprecated": false, "deprecationMessage": "", "line": 105, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tContentChildren,\n\tElementRef,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tNgZone,\n\tOnChanges,\n\tOnDestroy,\n\tOutput,\n\tQueryList,\n\tRenderer2,\n\tSimpleChanges,\n\tTemplateRef,\n\tViewChild,\n\tViewContainerRef\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip\n} from \"@floating-ui/dom\";\nimport { ContextMenuItemComponent, ItemClickEvent } from \"carbon-components-angular/context-menu\";\n\ntype ComboButtonPlacement = \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\";\n\n@Component({\n\tselector: \"cds-combo-button\",\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t{{label}}\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComboButtonComponent implements OnChanges, AfterViewInit, OnDestroy {\n\tstatic comboButtonCounter = 0;\n\t@Input() comboId = `combo-button-${ComboButtonComponent.comboButtonCounter++}`;\n\n\t// Listen for click & determine if menu should close\n\t@ContentChildren(ContextMenuItemComponent) set projectedMenuItems(itemList: QueryList) {\n\t\t// Reset in case user dynamically updates menu item\n\t\tthis.subscriptions.forEach((sub) => sub?.unsubscribe());\n\t\tthis.subscriptions = [];\n\t\titemList.forEach((item) => {\n\t\t\tthis.subscriptions.push(\n\t\t\t\titem.itemClick.subscribe((clickEvent) => this.handleMenuItemClick(clickEvent))\n\t\t\t);\n\t\t});\n\t}\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\t@Input() label: string;\n\t@Input() disabled = false;\n\t@Input() menuAlignment: ComboButtonPlacement = \"bottom\";\n\t@Input() description: string;\n\t@Input() tooltipAutoAlign = false;\n\t@Input() tooltipPlacement = \"bottom\";\n\t@Input() @HostBinding(\"class.cds--combo-button__container--open\") open = false;\n\t@Output() actionClick = new EventEmitter();\n\t@HostBinding(\"class.cds--combo-button__container\") comboButtonContainer = true;\n\t@HostBinding(\"class.cds--combo-button__container--lg\") get sizeLg() { return this.size === \"lg\"; }\n\t@HostBinding(\"class.cds--combo-button__container--md\") get sizeMd() { return this.size === \"md\"; }\n\t@HostBinding(\"class.cds--combo-button__container--sm\") get sizeSm() { return this.size === \"sm\"; }\n\t@HostBinding(\"attr.aria-owns\") get ariaOwns() {\n\t\treturn this.open ? this.comboId : undefined;\n\t}\n\n\t@ViewChild(\"menuTemplate\") menuTemplate: TemplateRef;\n\n\tprotected documentClick = this.handleFocusOut.bind(this);\n\tprotected unmountFloatingElement: Function;\n\n\tprivate subscriptions: Subscription[] = [];\n\tprivate _alignment: ComboButtonPlacement = \"bottom\";\n\tprivate menuRef: HTMLElement;\n\n\tconstructor(\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected hostElement: ElementRef,\n\t\tprotected viewContainerRef: ViewContainerRef,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) { }\n\n\n\t/**\n\t * In case user updates alignment, store initial value.\n\t * This allows us to test user passed alignment on each open\n\t */\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes.menuAlignment) {\n\t\t\tthis._alignment = changes.menuAlignment.currentValue;\n\t\t}\n\t}\n\n\n\n\t/**\n\t * If user has passed in true for open, we dynamically open the menu\n\t */\n\tngAfterViewInit(): void {\n\t\tif (this.open) {\n\t\t\tthis.open = !this.open;\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t* Clean up Floating-ui & subscriptions\n\t*/\n\tngOnDestroy(): void {\n\t\tthis.cleanUp();\n\t\tthis.subscriptions.forEach((sub) => sub.unsubscribe());\n\t}\n\n\n\t/**\n\t * As of now, menu button does not support nexted menu, on button click it should close\n\t */\n\thandleMenuItemClick(event: ItemClickEvent) {\n\t\t// If event is not type radio/checkbox, we close the menu\n\t\tif (!event.type) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t * On body click, close the menu\n\t * @param event\n\t */\n\thandleFocusOut(event) {\n\t\tif (!this.hostElement.nativeElement.contains(event.target)) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t * Clean up `autoUpdate` if auto alignment is enabled\n\t */\n\tcleanUp() {\n\t\tdocument.removeEventListener(\"click\", this.documentClick);\n\t\tif (this.unmountFloatingElement) {\n\t\t\tthis.menuRef.remove();\n\t\t\tthis.viewContainerRef.clear();\n\t\t\tthis.unmountFloatingElement();\n\t\t}\n\t\tthis.unmountFloatingElement = undefined;\n\t\t// On all instances of menu closing, make sure icon direction is correct\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n\n\n\t/**\n\t * On action click, notify user\n\t * If the menu is open, close the menu\n\t * @param event\n\t */\n\tonActionClick(event: PointerEvent) {\n\t\tif (this.open) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t\tthis.actionClick.emit(event);\n\t}\n\n\n\n\t/**\n\t * Handles emitting open/close event\n\t */\n\ttoggleMenu() {\n\t\tthis.open = !this.open;\n\t\tif (this.open) {\n\t\t\t// Render the template & append to view\n\t\t\tconst view = this.viewContainerRef.createEmbeddedView(this.menuTemplate);\n\t\t\tthis.menuRef = document.body.appendChild(view.rootNodes[0] as HTMLElement);\n\t\t\t// Assign button width to the menu ref to align with button\n\t\t\tObject.assign(this.menuRef.style, {\n\t\t\t\twidth: `${this.hostElement.nativeElement.clientWidth}px`,\n\t\t\t\ttop: \"0\",\n\t\t\t\tleft: \"0\"\n\t\t\t});\n\n\t\t\t// Reset & test alignment every open\n\t\t\tthis.menuAlignment = this._alignment;\n\n\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\n\t\t\t// Listen for events such as scrolling to keep menu aligned\n\t\t\tthis.unmountFloatingElement = autoUpdate(\n\t\t\t\tthis.hostElement.nativeElement,\n\t\t\t\tthis.menuRef,\n\t\t\t\tthis.recomputePosition.bind(this)\n\t\t\t);\n\t\t} else {\n\t\t\tthis.cleanUp();\n\t\t}\n\t}\n\n\n\n\troundByDPR(value) {\n\t\tconst dpr = window.devicePixelRatio || 1;\n\t\treturn Math.round(value * dpr) / dpr;\n\t}\n\n\n\n\t/**\n\t * Compute position of menu\n\t */\n\trecomputePosition() {\n\t\tif (this.menuTemplate && this.hostElement) {\n\t\t\t// Run outside of angular zone to avoid unnecessary change detection and rely on floating-ui\n\t\t\tthis.ngZone.runOutsideAngular(async () => {\n\t\t\t\tconst { x, y, placement } = await computePosition(\n\t\t\t\t\tthis.hostElement.nativeElement,\n\t\t\t\t\tthis.menuRef,\n\t\t\t\t\t{\n\t\t\t\t\t\tplacement: this.menuAlignment,\n\t\t\t\t\t\tstrategy: \"fixed\",\n\t\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\t\tflip({ crossAxis: false })\n\t\t\t\t\t\t]\n\t\t\t\t\t});\n\n\t\t\t\tthis.menuAlignment = placement as ComboButtonPlacement;\n\n\t\t\t\t// Using CSSOM to manipulate CSS to avoid content security policy inline-src\n\t\t\t\t// https://github.com/w3c/webappsec-csp/issues/212\n\t\t\t\tObject.assign(this.menuRef.style, {\n\t\t\t\t\tposition: \"fixed\",\n\t\t\t\t\t// Using transform instead of top/left position to improve performance\n\t\t\t\t\ttransform: `translate(${this.roundByDPR(x)}px,${this.roundByDPR(y)}px)`\n\t\t\t\t});\n\t\t\t\tthis.changeDetectorRef.markForCheck();\n\t\t\t});\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "" }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "" }, { "name": "hostElement", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "viewContainerRef", "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "" }, { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "" } ], "line": 117, "jsdoctags": [ { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "hostElement", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "viewContainerRef", "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnChanges", "AfterViewInit", "OnDestroy" ], "accessors": { "projectedMenuItems": { "name": "projectedMenuItems", "setSignature": { "name": "projectedMenuItems", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "itemList", "type": "QueryList", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 82, "jsdoctags": [ { "name": "itemList", "type": "QueryList", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "sizeLg": { "name": "sizeLg", "getSignature": { "name": "sizeLg", "type": "", "returnType": "", "line": 103 } }, "sizeMd": { "name": "sizeMd", "getSignature": { "name": "sizeMd", "type": "", "returnType": "", "line": 104 } }, "sizeSm": { "name": "sizeSm", "getSignature": { "name": "sizeSm", "type": "", "returnType": "", "line": 105 } }, "ariaOwns": { "name": "ariaOwns", "getSignature": { "name": "ariaOwns", "type": "", "returnType": "", "line": 106 } } } }, { "name": "ContainedList", "id": "component-ContainedList-207a5131842308ae824ff732bf4685cc678d471181ee6124ab1c65c949594670f38ee9e5277759da3118cca2b1a88763cf73ceb19a3c0b777307a4f45ee52fad", "file": "src/contained-list/contained-list.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-contained-list, ibm-contained-list", "styleUrls": [], "styles": [], "template": "\n\t
\n\t\t
\n\t\t\t{{ label }}\n\t\t\t\n\t\t
\n\n\t\t
\n\t\t\t\n\t\t
\n\t
\n\t
\n\t\t\n\t
\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "action", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nA slot for a possible interactive element to render within the list header.\n", "description": "

A slot for a possible interactive element to render within the list header.

\n", "line": 60, "type": "TemplateRef", "decorators": [] }, { "name": "actionData", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional interactive element data.\n", "description": "

Optional interactive element data.

\n", "line": 65, "type": "any", "decorators": [] }, { "name": "isInset", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify whether the dividing lines in between list items should be inset.\n", "description": "

Specify whether the dividing lines in between list items should be inset.

\n", "line": 70, "type": "boolean", "decorators": [] }, { "name": "kind", "defaultValue": "ContainedListKind.OnPage", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe kind of ContainedList you want to display.\n", "description": "

The kind of ContainedList you want to display.

\n", "line": 75, "type": "ContainedListKind", "decorators": [] }, { "name": "label", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nA label describing the contained list.\n", "description": "

A label describing the contained list.

\n", "line": 80, "type": "string | TemplateRef", "decorators": [] }, { "name": "labelId", "defaultValue": "`contained-list-${ContainedList.count++}-header`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nLabel id for the contained list.\n", "description": "

Label id for the contained list.

\n", "line": 90, "type": "string", "decorators": [] }, { "name": "size", "defaultValue": "ContainedListSize.Large", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the size of the contained list.\n", "description": "

Specify the size of the contained list.

\n", "line": 85, "type": "ContainedListSize", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "ContainedListKind", "defaultValue": "ContainedListKind", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Exposing ContainedListKind enum to the template

\n", "line": 100, "rawdescription": "\n\nExposing ContainedListKind enum to the template\n", "modifierKind": [ 125 ] }, { "name": "ContainedListSize", "defaultValue": "ContainedListSize", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Exposing ContainedListSize enum to the template

\n", "line": 95, "rawdescription": "\n\nExposing ContainedListSize enum to the template\n", "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "isTemplate", "args": [ { "name": "value", "type": "string | TemplateRef", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 102, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "string | TemplateRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { ContainedListModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ContainedListModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-contained-list--basic)\n", "type": "component", "sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tInput,\n\tTemplateRef\n} from \"@angular/core\";\nimport { ContainedListKind, ContainedListSize } from \"./contained-list.enums\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContainedListModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-contained-list--basic)\n */\n@Component({\n\tselector: \"cds-contained-list, ibm-contained-list\",\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{{ label }}\n\t\t\t\t\t\n\t\t\t\t
\n\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContainedList {\n\t/** Used to generate unique IDs */\n\tprivate static count = 0;\n\n\t/**\n\t * A slot for a possible interactive element to render within the list header.\n\t */\n\t@Input() action: TemplateRef;\n\n\t/**\n\t * Optional interactive element data.\n\t */\n\t@Input() actionData: any;\n\n\t/**\n\t * Specify whether the dividing lines in between list items should be inset.\n\t */\n\t@Input() isInset = false;\n\n\t/**\n\t * The kind of ContainedList you want to display.\n\t */\n\t@Input() kind: ContainedListKind = ContainedListKind.OnPage;\n\n\t/**\n\t * A label describing the contained list.\n\t */\n\t@Input() label: string | TemplateRef;\n\n\t/**\n\t * Specify the size of the contained list.\n\t */\n\t@Input() size: ContainedListSize = ContainedListSize.Large;\n\n\t/**\n\t * Label id for the contained list.\n\t */\n\t@Input() labelId = `contained-list-${ContainedList.count++}-header`;\n\n\t/**\n\t * Exposing ContainedListSize enum to the template\n\t */\n\tpublic ContainedListSize: typeof ContainedListSize = ContainedListSize;\n\n\t/**\n\t * Exposing ContainedListKind enum to the template\n\t */\n\tpublic ContainedListKind: typeof ContainedListKind = ContainedListKind;\n\n\tpublic isTemplate(value: string | TemplateRef) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "ContainedListItem", "id": "component-ContainedListItem-1b6f3efc8e99bcccd91fa88e339a45f80e12078e615d42baebe3d8efd1a0333257b7aeb1b942f82fed95297d44d4dbe4dbcff1af6e2d980f4bdccf4c7bfc79ac", "file": "src/contained-list/contained-list-item.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-contained-list-item, ibm-contained-list-item", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t\n\t\n\n\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t\t\n\t
\n\n
\n\t\n
\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "action", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nA slot for a possible interactive element to render within the item.\n", "description": "

A slot for a possible interactive element to render within the item.

\n", "line": 42, "type": "TemplateRef", "decorators": [] }, { "name": "actionData", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional interactive element data.\n", "description": "

Optional interactive element data.

\n", "line": 47, "type": "any", "decorators": [] }, { "name": "clickable", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nWhether this item is clickable.\n", "description": "

Whether this item is clickable.

\n", "line": 57, "type": "boolean", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nWhether this item is disabled.\n", "description": "

Whether this item is disabled.

\n", "line": 52, "type": "boolean", "decorators": [] }, { "name": "icon", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nProvide an optional icon to render in front of the item's content.\n\nNote that if you intend to use this as a string ref, it's important to remember\nto register the icon that you wish to add. In this case, it's also worth noting\nthat only icons with a size of 16 are currently supported.\n", "description": "

Provide an optional icon to render in front of the item's content.

\n

Note that if you intend to use this as a string ref, it's important to remember\nto register the icon that you wish to add. In this case, it's also worth noting\nthat only icons with a size of 16 are currently supported.

\n", "line": 66, "type": "TemplateRef | string", "decorators": [] } ], "outputsClass": [ { "name": "click", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits click event.\n", "description": "

Emits click event.

\n", "line": 71, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "itemClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Host binding item class.

\n", "line": 76, "rawdescription": "\n\nHost binding item class.\n", "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--contained-list-item'" } ], "modifierKind": [ 170 ] }, { "name": "role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

Host binding item role attribute

\n", "line": 81, "rawdescription": "\n\nHost binding item role attribute\n", "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "isTemplate", "args": [ { "name": "value", "type": "string | TemplateRef", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 101, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "string | TemplateRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 97, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHost binding item role attribute\n", "description": "

Host binding item role attribute

\n", "line": 81, "type": "string", "decorators": [] }, { "name": "class.cds--contained-list-item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHost binding item class.\n", "description": "

Host binding item class.

\n", "line": 76, "type": "boolean", "decorators": [] }, { "name": "class.cds--contained-list-item--clickable", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHost binding clickable item class.\n", "description": "

Host binding clickable item class.

\n", "line": 86, "type": "boolean", "decorators": [] }, { "name": "class.cds--contained-list-item--with-icon", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHost binding item with icon class.\n", "description": "

Host binding item with icon class.

\n", "line": 93, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tTemplateRef\n} from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-contained-list-item, ibm-contained-list-item\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t
\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContainedListItem {\n\t/**\n\t * A slot for a possible interactive element to render within the item.\n\t */\n\t@Input() action: TemplateRef;\n\n\t/**\n\t * Optional interactive element data.\n\t */\n\t@Input() actionData: any;\n\n\t/**\n\t * Whether this item is disabled.\n\t */\n\t@Input() disabled = false;\n\n\t/**\n\t * Whether this item is clickable.\n\t */\n\t@Input() clickable: boolean;\n\n\t/**\n\t * Provide an optional icon to render in front of the item's content.\n\t *\n\t * Note that if you intend to use this as a string ref, it's important to remember\n\t * to register the icon that you wish to add. In this case, it's also worth noting\n\t * that only icons with a size of 16 are currently supported.\n\t */\n\t@Input() icon: TemplateRef | string;\n\n\t/**\n\t * Emits click event.\n\t */\n\t@Output() click = new EventEmitter();\n\n\t/**\n\t * Host binding item class.\n\t */\n\t@HostBinding(\"class.cds--contained-list-item\") itemClass = true;\n\n\t/**\n\t * Host binding item role attribute\n\t */\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\t/**\n\t * Host binding clickable item class.\n\t */\n\t@HostBinding(\"class.cds--contained-list-item--clickable\") get itemClickableClass() {\n\t\treturn this.clickable;\n\t}\n\n\t/**\n\t * Host binding item with icon class.\n\t */\n\t@HostBinding(\"class.cds--contained-list-item--with-icon\") get itemWithIconClass() {\n\t\treturn !!this.icon;\n\t}\n\n\tpublic onClick() {\n\t\tthis.click.emit();\n\t}\n\n\tpublic isTemplate(value: string | TemplateRef) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "accessors": { "itemClickableClass": { "name": "itemClickableClass", "getSignature": { "name": "itemClickableClass", "type": "", "returnType": "", "line": 86, "rawdescription": "\n\nHost binding clickable item class.\n", "description": "

Host binding clickable item class.

\n" } }, "itemWithIconClass": { "name": "itemWithIconClass", "getSignature": { "name": "itemWithIconClass", "type": "", "returnType": "", "line": 93, "rawdescription": "\n\nHost binding item with icon class.\n", "description": "

Host binding item with icon class.

\n" } } } }, { "name": "ContentSwitcher", "id": "component-ContentSwitcher-8544666bd359931acc726ef859373da47cb92ce5a38e73ae5f173541966e0b57669238b5fe50f2fc18c16d55d659529f942bc059821bfb3e5451fe82c9fe1854", "file": "src/content-switcher/content-switcher.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-content-switcher, ibm-content-switcher", "styleUrls": [], "styles": [], "template": "\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "defaultValue": "\"content switcher\"", "deprecated": false, "deprecationMessage": "", "line": 52, "type": "string", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet content switcher size\n", "description": "

Set content switcher size

\n", "line": 57, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] } ], "outputsClass": [ { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the activated `ContentSwitcherOption`\n", "description": "

Emits the activated ContentSwitcherOption

\n", "line": 62, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "options", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "", "line": 64, "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "ContentSwitcherOption" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "hostkeys", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 89, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "keydown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 89 } ], "standalone": false, "imports": [], "description": "

The content switcher can be used for toggling between distinct options.\nSimilar to tabs, but without an associated content panel.

\n

Get started with importing the module:

\nExample :
import { ContentSwitcherModule } from 'carbon-components-angular';
Example :
<cds-content-switcher (selected)="selected($event)">\n        <button cdsContentOption>First section</button>\n        <button cdsContentOption>Second section</button>\n        <button cdsContentOption>Third section</button>\n</cds-content-switcher>

See demo

\n", "rawdescription": "\n\nThe content switcher can be used for toggling between distinct options.\nSimilar to tabs, but without an associated content panel.\n\nGet started with importing the module:\n\n```typescript\nimport { ContentSwitcherModule } from 'carbon-components-angular';\n```\n\n```html\n\n\t\t\n\t\t\n\t\t\n\n```\n\n[See demo](../../?path=/story/components-content-switcher--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tHostListener,\n\tElementRef\n} from \"@angular/core\";\nimport { ContentSwitcherOption } from \"./content-switcher-option.directive\";\nimport { isFocusInLastItem, isFocusInFirstItem } from \"carbon-components-angular/common\";\n\n/**\n * The content switcher can be used for toggling between distinct options.\n * Similar to tabs, but without an associated content panel.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContentSwitcherModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * \n *\t\t\n *\t\t\n *\t\t\n * \n * ```\n *\n * [See demo](../../?path=/story/components-content-switcher--basic)\n */\n@Component({\n\tselector: \"cds-content-switcher, ibm-content-switcher\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class ContentSwitcher implements AfterViewInit {\n\t@Input() ariaLabel = \"content switcher\";\n\n\t/**\n\t * Set content switcher size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t/**\n\t * Emits the activated `ContentSwitcherOption`\n\t */\n\t@Output() selected = new EventEmitter();\n\n\t@ContentChildren(ContentSwitcherOption) options: QueryList;\n\n\tconstructor(protected elementRef: ElementRef) {}\n\n\tngAfterViewInit() {\n\t\tconst firstActive = this.options.find(option => option.active);\n\t\t// delay setting active until the DOM has settled\n\t\tif (!firstActive) {\n\t\t\tsetTimeout(() => this.options.first.active = true);\n\t\t}\n\t\t// subscribe to each item, emit when one is selected, and reset the active states\n\t\tthis.options.forEach(option => {\n\t\t\toption.selected.subscribe((_: boolean) => {\n\t\t\t\tconst active = option;\n\t\t\t\tthis.options.forEach(option => {\n\t\t\t\t\tif (option !== active) {\n\t\t\t\t\t\toption.active = false;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tthis.selected.emit(active);\n\t\t\t});\n\t\t});\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tconst buttonList = Array.from(this.elementRef.nativeElement.querySelectorAll(\"[cdsContentOption], [ibmContentOption]\"));\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowRight\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInLastItem(event, buttonList)) {\n\t\t\t\t\tconst index = buttonList.findIndex(item => item === event.target);\n\t\t\t\t\tbuttonList[index + 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tbuttonList[0].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"ArrowLeft\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInFirstItem(event, buttonList)) {\n\t\t\t\t\tconst index = buttonList.findIndex(item => item === event.target);\n\t\t\t\t\tbuttonList[index - 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tbuttonList[buttonList.length - 1].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"Home\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbuttonList[0].focus();\n\t\t\t\tbreak;\n\n\t\t\tcase \"End\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbuttonList[buttonList.length - 1].focus();\n\t\t\t\tbreak;\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" } ], "line": 64, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AfterViewInit" ] }, { "name": "ContextMenuComponent", "id": "component-ContextMenuComponent-80caea86ac68d0a24f5699cd6c23c5d368bf1edaabd6b2b998eef689a8679010cdf24b0a077266d6cdef3e934f17406f2a72270ac955d5cf3a6441a887d8c6b6", "file": "src/context-menu/context-menu.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-menu, cds-context-menu, ibm-context-menu", "styleUrls": [], "styles": [ "\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t" ], "template": "\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 34, "type": "boolean", "decorators": [] }, { "name": "position", "defaultValue": "{\n\t\tleft: 0,\n\t\ttop: 0\n\t}", "deprecated": false, "deprecationMessage": "", "line": 35, "type": "{ left: number; top: number; }", "decorators": [] }, { "name": "size", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "line": 39, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "iconClass", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

after switching to on OnPush Change Detection Strategy

\n", "line": 55, "rawdescription": "\n\nafter switching to on OnPush Change Detection Strategy\n", "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--menu--with-icons'" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "pos": 1168, "end": 1300, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 1169, "end": 1173, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "
    \n
  • convert to getter in v6, should resolve expression has changed\nafter switching to on OnPush Change Detection Strategy
    • \n
\n" } ] }, { "name": "role", "defaultValue": "\"menu\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 46, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] }, { "name": "tabindex", "defaultValue": "\"-1\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 47, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.tabindex'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "focusMenu", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 75, "deprecated": false, "deprecationMessage": "" }, { "name": "handleNavigation", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 85, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"menu\"", "deprecated": false, "deprecationMessage": "", "line": 46, "type": "string", "decorators": [] }, { "name": "attr.tabindex", "defaultValue": "\"-1\"", "deprecated": false, "deprecationMessage": "", "line": 47, "type": "string", "decorators": [] }, { "name": "class", "deprecated": false, "deprecationMessage": "", "line": 41, "type": "string", "decorators": [] }, { "name": "class.cds--menu--with-icons", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "pos": 1168, "end": 1300, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 1169, "end": 1173, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "
    \n
  • convert to getter in v6, should resolve expression has changed\nafter switching to on OnPush Change Detection Strategy
    • \n
\n" } ], "line": 55, "type": "boolean", "decorators": [] }, { "name": "style.left.px", "deprecated": false, "deprecationMessage": "", "line": 48, "type": "number", "decorators": [] }, { "name": "style.top.px", "deprecated": false, "deprecationMessage": "", "line": 49, "type": "number", "decorators": [] } ], "hostListeners": [ { "name": "keydown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 85 } ], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { ContextMenuModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ContextMenuModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-context-menu--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tElementRef,\n\tHostListener,\n\tInput,\n\tSimpleChanges,\n\tOnChanges,\n\tHostBinding,\n\tAfterViewInit,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContextMenuModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-context-menu--basic)\n */\n@Component({\n\tselector: \"cds-menu, cds-context-menu, ibm-context-menu\",\n\ttemplate: `\n\t\t\t\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t`]\n})\nexport class ContextMenuComponent implements OnChanges, AfterViewInit {\n\t@Input() open = false;\n\t@Input() position = {\n\t\tleft: 0,\n\t\ttop: 0\n\t};\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t@HostBinding(\"class\") get hostClass() {\n\t\tconst open = this.open ? \"cds--menu--open cds--menu--shown\" : \"\";\n\t\treturn `cds--menu cds--autoalign cds--menu--${this.size} ${open}`;\n\t}\n\n\t@HostBinding(\"attr.role\") role = \"menu\";\n\t@HostBinding(\"attr.tabindex\") tabindex = \"-1\";\n\t@HostBinding(\"style.left.px\") get leftPosition() { return this.position.left; }\n\t@HostBinding(\"style.top.px\") get topPosition() { return this.position.top; }\n\n\t/**\n\t * @todo - convert to getter in v6, should resolve expression has changed\n\t * after switching to on OnPush Change Detection Strategy\n\t */\n\t@HostBinding(\"class.cds--menu--with-icons\") iconClass = false;\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.open && changes.open.currentValue) {\n\t\t\tthis.focusMenu();\n\t\t}\n\t}\n\n\tngAfterViewInit(): void {\n\t\tsetTimeout(() => {\n\t\t\tconst nativeElement = this.elementRef.nativeElement;\n\t\t\tif (nativeElement) {\n\t\t\t\tthis.iconClass = !!nativeElement\n\t\t\t\t\t.querySelector(\".cds--menu-item .cds--menu-item__icon svg\");\n\t\t\t}\n\t\t});\n\t}\n\n\tfocusMenu() {\n\t\t// wait until the next tick to let the DOM settle before changing the focus\n\t\tsetTimeout(() => {\n\t\t\tconst list: HTMLElement = this.elementRef.nativeElement;\n\t\t\tconst firstOption = list.querySelector(\".cds--menu-item\") as HTMLElement;\n\t\t\tfirstOption.focus();\n\t\t});\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thandleNavigation(event: KeyboardEvent) {\n\t\tconst list: HTMLElement = this.elementRef.nativeElement;\n\t\tconst subMenus: HTMLElement[] = Array.from(list.querySelectorAll(\"cds-context-menu[role=menu]\"));\n\t\tconst menuItems: HTMLElement[] = (\n\t\t\tArray.from(list.querySelectorAll(\".cds--menu-item\")) as HTMLElement[])\n\t\t\t\t.filter(menuItem => !subMenus.some(subMenu => subMenu.contains(menuItem))\n\t\t);\n\t\tconst currentIndex = menuItems.findIndex(menuItem => parseInt(menuItem.getAttribute(\"tabindex\"), 10) === 0);\n\t\tconst currentMenuItem = menuItems[currentIndex];\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowDown\": {\n\t\t\t\tif (document.activeElement === list) {\n\t\t\t\t\tmenuItems[0].focus();\n\t\t\t\t} else {\n\t\t\t\t\tif (currentIndex !== -1 && currentIndex < menuItems.length - 1) {\n\t\t\t\t\t\tmenuItems[currentIndex + 1].focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowUp\": {\n\t\t\t\tif (document.activeElement === list) {\n\t\t\t\t\tmenuItems[menuItems.length - 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tif (currentIndex !== -1 && currentIndex > 0) {\n\t\t\t\t\t\tmenuItems[currentIndex - 1].focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowRight\": {\n\t\t\t\tif (currentIndex !== -1 && subMenus.some(subMenu => currentMenuItem.contains(subMenu))) {\n\t\t\t\t\tcurrentMenuItem.click();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowLeft\": {\n\t\t\t\tconst parent = currentMenuItem.parentElement.closest(\".cds--menu-item, .cds--menu-item\") as HTMLElement;\n\t\t\t\tif (parent) {\n\t\t\t\t\tparent.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" } ], "line": 55, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnChanges", "AfterViewInit" ], "accessors": { "hostClass": { "name": "hostClass", "getSignature": { "name": "hostClass", "type": "", "returnType": "", "line": 41 } }, "leftPosition": { "name": "leftPosition", "getSignature": { "name": "leftPosition", "type": "", "returnType": "", "line": 48 } }, "topPosition": { "name": "topPosition", "getSignature": { "name": "topPosition", "type": "", "returnType": "", "line": 49 } } } }, { "name": "ContextMenuDividerComponent", "id": "component-ContextMenuDividerComponent-8606e1fda9f4aceddf8cec5a54922ff81aa06daee6e7503f4e85e8ea131b6542c95eb997365fd4ef2e0ed1faeab986035893e5c11e4b2ec5eb1f9ba9306ded85", "file": "src/context-menu/context-menu-divider.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider", "styleUrls": [], "styles": [], "template": "", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "dividerClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 8, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--menu-item-divider'" } ], "modifierKind": [ 170 ] }, { "name": "role", "defaultValue": "\"separator\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 9, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"separator\"", "deprecated": false, "deprecationMessage": "", "line": 9, "type": "string", "decorators": [] }, { "name": "class.cds--menu-item-divider", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 8, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, HostBinding } from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider\",\n\ttemplate: \"\"\n})\nexport class ContextMenuDividerComponent {\n\t@HostBinding(\"class.cds--menu-item-divider\") dividerClass = true;\n\t@HostBinding(\"attr.role\") role = \"separator\";\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "ContextMenuGroupComponent", "id": "component-ContextMenuGroupComponent-c530a677a99ceb9ddb6af2bc31cc1f8d289a1abadc9f297eb69c8a2623074fb62d3a613a3ec3ccc829a70ceedc219b34185e36a7722b9700585b1b702cd8851f", "file": "src/context-menu/context-menu-group.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "ContextMenuSelectionService", "type": "injectable" } ], "selector": "cds-menu-group, cds-context-menu-group, ibm-context-menu-group", "styleUrls": [], "styles": [], "template": "\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "label", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "line": 27, "type": "any", "decorators": [] }, { "name": "type", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "line": 29, "type": "null | \"radio\" | \"checkbox\"", "decorators": [] }, { "name": "value", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "line": 28, "type": "any[]", "decorators": [] } ], "outputsClass": [ { "name": "valueChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 30, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "role", "defaultValue": "\"group\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 23, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"group\"", "deprecated": false, "deprecationMessage": "", "line": 23, "type": "string", "decorators": [] }, { "name": "class.cds--menu-item-group", "deprecated": false, "deprecationMessage": "", "line": 25, "type": "boolean", "decorators": [] }, { "name": "class.cds--menu-item-radio-group", "deprecated": false, "deprecationMessage": "", "line": 24, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOnChanges,\n\tOnDestroy,\n\tOnInit,\n\tOutput,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\n\n@Component({\n\tselector: \"cds-menu-group, cds-context-menu-group, ibm-context-menu-group\",\n\ttemplate: `\n\t\t\n\t`,\n\tproviders: [ContextMenuSelectionService]\n})\nexport class ContextMenuGroupComponent implements OnInit, OnChanges, OnDestroy {\n\t@HostBinding(\"attr.role\") role = \"group\";\n\t@HostBinding(\"class.cds--menu-item-radio-group\") get radioGroup() { return this.type === \"radio\"; }\n\t@HostBinding(\"class.cds--menu-item-group\") get group() { return this.type === \"checkbox\"; }\n\n\t@HostBinding(\"attr.aria-label\") @Input() label = null;\n\t@Input() value: any[] = [];\n\t@Input() type: null | \"radio\" | \"checkbox\" = null;\n\t@Output() valueChange = new EventEmitter();\n\n\tprivate subscription = new Subscription();\n\n\tconstructor(protected contextMenuSelectionService: ContextMenuSelectionService) {}\n\n\tngOnInit() {\n\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\tconst subscription = selectionObservable.subscribe(value => {\n\t\t\tthis.valueChange.emit(value);\n\t\t});\n\t\tthis.subscription.add(subscription);\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.value) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(changes.value.currentValue);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckboxes(changes.value.currentValue);\n\t\t\t}\n\t\t}\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscription.unsubscribe();\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "contextMenuSelectionService", "type": "ContextMenuSelectionService", "deprecated": false, "deprecationMessage": "" } ], "line": 32, "jsdoctags": [ { "name": "contextMenuSelectionService", "type": "ContextMenuSelectionService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit", "OnChanges", "OnDestroy" ], "accessors": { "radioGroup": { "name": "radioGroup", "getSignature": { "name": "radioGroup", "type": "", "returnType": "", "line": 24 } }, "group": { "name": "group", "getSignature": { "name": "group", "type": "", "returnType": "", "line": 25 } } } }, { "name": "ContextMenuItemComponent", "id": "component-ContextMenuItemComponent-1688169278415531c2622c3ec58218219e214e8fb013ca1c0dff71e41f4a9c9b2ac3eb56e83d8e977ba86c5b9c92f02a5545ad346b86886e070dcfa21fa94668", "file": "src/context-menu/context-menu-item.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-menu-item, cds-context-menu-item, ibm-context-menu-item", "styleUrls": [], "styles": [ "\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t" ], "template": "
\n\t\n\t\n
\n
{{label}}
\n
\n\t{{info}}\n\t\n
\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "checked", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 58, "type": "boolean", "decorators": [] }, { "name": "danger", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 54, "type": "boolean", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 53, "type": "boolean", "decorators": [] }, { "name": "icon", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 59, "type": "string", "decorators": [] }, { "name": "info", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 56, "type": "string", "decorators": [] }, { "name": "label", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 55, "type": "string", "decorators": [] }, { "name": "type", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "line": 57, "type": "null | \"checkbox\" | \"radio\"", "decorators": [] }, { "name": "value", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 60, "type": "string", "decorators": [] } ], "outputsClass": [ { "name": "checkedChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 61, "type": "EventEmitter" }, { "name": "itemClick", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 62, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "ariaExpanded", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "null", "optional": false, "description": "", "line": 45, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.aria-expanded'" } ], "modifierKind": [ 170 ] }, { "name": "ariaHasPopup", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "null", "optional": false, "description": "", "line": 44, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.aria-haspopup'" } ], "modifierKind": [ 170 ] }, { "name": "childContextMenu", "deprecated": false, "deprecationMessage": "", "type": "ContextMenuComponent", "optional": false, "description": "", "line": 67, "decorators": [ { "name": "ContentChild", "stringifiedArguments": "ContextMenuComponent, {static: true}" } ], "modifierKind": [ 170 ] }, { "name": "hasChildren", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 64 }, { "name": "optionClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 41, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--menu-item'" } ], "modifierKind": [ 170 ] }, { "name": "role", "defaultValue": "\"menuitem\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 42, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] }, { "name": "selectable", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 65 }, { "name": "tabindex", "defaultValue": "-1", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 43, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.tabindex'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "closeSubMenu", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 166, "deprecated": false, "deprecationMessage": "" }, { "name": "focusItem", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 196, "deprecated": false, "deprecationMessage": "" }, { "name": "handleBlur", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 192, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'blur'" } ], "modifierKind": [ 170 ] }, { "name": "handleClick", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 118, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown.enter', ['$event']" }, { "name": "HostListener", "stringifiedArguments": "'keydown.space', ['$event']" }, { "name": "HostListener", "stringifiedArguments": "'click', ['$event']" } ], "modifierKind": [ 170, 170, 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "handleFocus", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 184, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focus'" } ], "modifierKind": [ 170 ] }, { "name": "handleMouseOut", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 179, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'mouseout'" } ], "modifierKind": [ 170 ] }, { "name": "handleMouseOver", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 174, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'mouseover'" } ], "modifierKind": [ 170 ] }, { "name": "handleSelection", "args": [ { "name": "selected", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 150, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "selected", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "openSubMenu", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 155, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.aria-checked", "deprecated": false, "deprecationMessage": "", "line": 46, "type": "boolean", "decorators": [] }, { "name": "attr.aria-disabled", "deprecated": false, "deprecationMessage": "", "line": 50, "type": "boolean", "decorators": [] }, { "name": "attr.aria-expanded", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "line": 45, "type": "any", "decorators": [] }, { "name": "attr.aria-haspopup", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "line": 44, "type": "any", "decorators": [] }, { "name": "attr.role", "defaultValue": "\"menuitem\"", "deprecated": false, "deprecationMessage": "", "line": 42, "type": "string", "decorators": [] }, { "name": "attr.tabindex", "defaultValue": "-1", "deprecated": false, "deprecationMessage": "", "line": 43, "type": "number", "decorators": [] }, { "name": "class.cds--menu-item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 41, "type": "boolean", "decorators": [] } ], "hostListeners": [ { "name": "blur", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 192 }, { "name": "click", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 118 }, { "name": "focus", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 184 }, { "name": "keydown.enter", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 118 }, { "name": "keydown.space", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 118 }, { "name": "mouseout", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 179 }, { "name": "mouseover", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 174 } ], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tHostListener,\n\tContentChild,\n\tOptional,\n\tOnInit,\n\tAfterContentInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\nimport { ContextMenuComponent } from \"./context-menu.component\";\nimport { ItemClickEvent } from \"./context-menu.types\";\n\n@Component({\n\tselector: \"cds-menu-item, cds-context-menu-item, ibm-context-menu-item\",\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t\t
{{label}}
\n\t\t
\n\t\t\t{{info}}\n\t\t\t\n\t\t
\n\t\t\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t`]\n})\nexport class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDestroy {\n\t@HostBinding(\"class.cds--menu-item\") optionClass = true;\n\t@HostBinding(\"attr.role\") role = \"menuitem\";\n\t@HostBinding(\"attr.tabindex\") tabindex = -1;\n\t@HostBinding(\"attr.aria-haspopup\") ariaHasPopup = null;\n\t@HostBinding(\"attr.aria-expanded\") ariaExpanded = null;\n\t@HostBinding(\"attr.aria-checked\") get ariaChecked() {\n\t\treturn this.type === \"checkbox\" ?\n\t\t\t(this.checked ? true : false) : null;\n\t}\n\t@HostBinding(\"attr.aria-disabled\") get ariaDisabled() {\n\t\treturn this.disabled;\n\t}\n\t@Input() @HostBinding(\"class.cds--menu-item--disabled\") disabled = false;\n\t@Input() @HostBinding(\"class.cds--menu-item--danger\") danger = false;\n\t@Input() label = \"\";\n\t@Input() info = \"\";\n\t@Input() type: null | \"checkbox\" | \"radio\" = null;\n\t@Input() checked = false;\n\t@Input() icon = \"\";\n\t@Input() value = \"\";\n\t@Output() checkedChange = new EventEmitter();\n\t@Output() itemClick = new EventEmitter();\n\n\thasChildren = false;\n\tselectable = false;\n\n\t@ContentChild(ContextMenuComponent, { static: true }) childContextMenu: ContextMenuComponent;\n\tprivate subscriptions = new Subscription();\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\t@Optional() protected contextMenuSelectionService: ContextMenuSelectionService\n\t) {}\n\n\tngOnInit() {\n\t\tswitch (this.type) {\n\t\t\tcase \"checkbox\": {\n\t\t\t\tthis.role = \"menuitemcheckbox\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"radio\": {\n\t\t\t\tthis.role = \"menuitemradio\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tthis.role = \"menuitem\";\n\t\t\t}\n\t\t}\n\n\t\tif (this.type && this.contextMenuSelectionService && this.value) {\n\t\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\t\tconst subscription = selectionObservable.subscribe((value) => {\n\t\t\t\tif (this.type === \"radio\") {\n\t\t\t\t\tthis.handleSelection(value === this.value);\n\t\t\t\t}\n\n\t\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\t\tthis.handleSelection(value.includes(this.value));\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.subscriptions.add(subscription);\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.hasChildren = true;\n\t\t\tthis.ariaHasPopup = true;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"keydown.enter\", [\"$event\"])\n\t@HostListener(\"keydown.space\", [\"$event\"])\n\t@HostListener(\"click\", [\"$event\"])\n\thandleClick(event: MouseEvent & KeyboardEvent) {\n\t\tevent.stopPropagation();\n\t\tif (this.hasChildren) {\n\t\t\tthis.openSubMenu();\n\t\t\tthis.childContextMenu.focusMenu();\n\t\t}\n\n\t\tif (this.type) {\n\t\t\tthis.handleSelection(!this.checked);\n\t\t}\n\n\t\tif (this.contextMenuSelectionService) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(this.value);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckbox(this.value);\n\t\t\t}\n\t\t}\n\n\t\tif (!this.disabled) {\n\t\t\tthis.itemClick.emit({\n\t\t\t\tevent,\n\t\t\t\tlabel: this.label,\n\t\t\t\tinfo: this.info,\n\t\t\t\tvalue: this.value,\n\t\t\t\ttype: this.type\n\t\t\t});\n\t\t}\n\t}\n\n\thandleSelection(selected: boolean) {\n\t\tthis.checked = selected;\n\t\tthis.checkedChange.emit(this.checked);\n\t}\n\n\topenSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = true;\n\t\t\tthis.ariaExpanded = true;\n\t\t\tconst dimensions = this.elementRef.nativeElement.getBoundingClientRect();\n\t\t\tthis.childContextMenu.position.left = dimensions.left + dimensions.width;\n\t\t\t// subtract 4px to account for margins\n\t\t\tthis.childContextMenu.position.top = dimensions.top - 4;\n\t\t}\n\t}\n\n\tcloseSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = false;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"mouseover\")\n\thandleMouseOver() {\n\t\tthis.openSubMenu();\n\t}\n\n\t@HostListener(\"mouseout\")\n\thandleMouseOut() {\n\t\tthis.closeSubMenu();\n\t}\n\n\t@HostListener(\"focus\")\n\thandleFocus() {\n\t\tthis.tabindex = 0;\n\t\tif (this.hasChildren && this.ariaExpanded) {\n\t\t\tthis.closeSubMenu();\n\t\t}\n\t}\n\n\t@HostListener(\"blur\")\n\thandleBlur() {\n\t\tthis.tabindex = -1;\n\t}\n\n\tfocusItem() {\n\t\tthis.elementRef.nativeElement.focus();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "contextMenuSelectionService", "type": "ContextMenuSelectionService", "deprecated": false, "deprecationMessage": "" } ], "line": 68, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "contextMenuSelectionService", "type": "ContextMenuSelectionService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit", "AfterContentInit", "OnDestroy" ], "accessors": { "ariaChecked": { "name": "ariaChecked", "getSignature": { "name": "ariaChecked", "type": "", "returnType": "", "line": 46 } }, "ariaDisabled": { "name": "ariaDisabled", "getSignature": { "name": "ariaDisabled", "type": "", "returnType": "", "line": 50 } } } }, { "name": "CustomFileStory", "id": "component-CustomFileStory-d6c568385d3a5d4c8b674bdcf26234688894a46081a3509a98b12bd55f0d7b62385f87074989c5081b044757c324a2a648246f71d010e26fa4e548dad5cd5da8", "file": "src/file-uploader/stories/custom-file.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-custom-file", "styleUrls": [], "styles": [], "template": "\n\n\n\n\t{{ fileItem.file.name }}\n\n\n\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "size", "defaultValue": "\"sm\"", "deprecated": false, "deprecationMessage": "", "line": 37, "type": "string", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "fileItem", "defaultValue": "{\n\t\tfile: new File([\"foo\"], \"Lorem ipsum dolor sit amet.txt\", {\n\t\t\ttype: \"text/plain\"\n\t\t}),\n\t\tstate: \"edit\"\n\t}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "", "line": 39 } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\n\n@Component({\n\tselector: \"app-custom-file\",\n\ttemplate: `\n\t\t\n\t\t\n\n\t\t\n\t\t\t{{ fileItem.file.name }}\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n\tstyles: []\n})\nexport class CustomFileStory {\n\t@Input() size = \"sm\";\n\n\tfileItem = {\n\t\tfile: new File([\"foo\"], \"Lorem ipsum dolor sit amet.txt\", {\n\t\t\ttype: \"text/plain\"\n\t\t}),\n\t\tstate: \"edit\"\n\t};\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "DataPassingModal", "id": "component-DataPassingModal-75b188f47dcf07f12b7cddaab217ee06d01451bef3ca1a851b0a60bc9db6ad47565d3dad264163d1b04b283a4f8e3ecb72deb201d36f7a64435a0833083c09aa", "file": "src/modal/stories/data-passing.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-data-passing-modal", "styleUrls": [], "styles": [], "template": "\n

Data passed from input modal on input change:

{{ modalInputValue }}\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "modalText", "defaultValue": "\"Hello, World\"", "deprecated": false, "deprecationMessage": "", "line": 19, "type": "string", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 20, "type": "string", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "openModal", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 27, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterContentInit\n} from \"@angular/core\";\nimport { Observable, Subject } from \"rxjs\";\n\nimport { ModalService } from \"../\";\nimport { InputModal } from \"./input-modal.component\";\n\n@Component({\n\tselector: \"app-data-passing-modal\",\n\ttemplate: `\n\t\t\n\t\t

Data passed from input modal on input change:

{{ modalInputValue }}\n\t`\n})\nexport class DataPassingModal implements AfterContentInit {\n\t@Input() modalText = \"Hello, World\";\n\t@Input() size = \"md\";\n\n\tprotected modalInputValue = \"\";\n\tprotected data: Observable = new Subject();\n\n\tconstructor(protected modalService: ModalService) { }\n\n\topenModal() {\n\t\tthis.modalService.create({\n\t\t\tcomponent: InputModal,\n\t\t\tinputs: {\n\t\t\t\tmodalText: this.modalText,\n\t\t\t\tinputValue: this.modalInputValue,\n\t\t\t\tsize: this.size,\n\t\t\t\tdata: this.data\n\t\t\t}\n\t\t});\n\t}\n\n\tngAfterContentInit() {\n\t\tthis.data.subscribe(value => this.modalInputValue = value);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "modalService", "type": "ModalService", "deprecated": false, "deprecationMessage": "" } ], "line": 23, "jsdoctags": [ { "name": "modalService", "type": "ModalService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AfterContentInit" ] }, { "name": "DatePicker", "id": "component-DatePicker-ff293c0c2be8fdf9f555fef4cc23b2d966c09514751aa2b5096d1048e9e522081e4eea33b5742cb1b40faa6f6419aee019237c2a4d2a430c52e0455c939f3877", "file": "src/datepicker/datepicker.component.ts", "encapsulation": [ "ViewEncapsulation.None" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: DatePicker, multi: true\n}" } ], "selector": "cds-date-picker, ibm-date-picker", "styleUrls": [], "styles": [], "template": "
\n\t\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "defaultValue": "\"calendar container\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAria label added to datepicker's calendar container.\n", "description": "

Aria label added to datepicker's calendar container.

\n", "line": 161, "type": "string", "decorators": [] }, { "name": "dateFormat", "defaultValue": "\"m/d/Y\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFormat of date\n\nFor reference: https://flatpickr.js.org/formatting/\n", "description": "

Format of date

\n

For reference: https://flatpickr.js.org/formatting/

\n", "line": 141, "type": "string", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 187, "type": "boolean", "decorators": [] }, { "name": "flatpickrOptions", "deprecated": false, "deprecationMessage": "", "line": 230, "type": "Partial", "decorators": [] }, { "name": "helperText", "deprecated": false, "deprecationMessage": "", "line": 152, "type": "string | TemplateRef", "decorators": [] }, { "name": "id", "defaultValue": "`datepicker-${DatePicker.datePickerCount++}`", "deprecated": false, "deprecationMessage": "", "line": 168, "type": "string", "decorators": [] }, { "name": "inputPattern", "defaultValue": "\"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe pattern for the underlying input element\n", "description": "

The pattern for the underlying input element

\n", "line": 166, "type": "string", "decorators": [] }, { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to display the invalid state.\n", "description": "

Set to true to display the invalid state.

\n", "line": 193, "type": "boolean", "decorators": [] }, { "name": "invalidText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue displayed if datepicker is in an invalid state.\n", "description": "

Value displayed if datepicker is in an invalid state.

\n", "line": 197, "type": "string | TemplateRef", "decorators": [] }, { "name": "label", "deprecated": false, "deprecationMessage": "", "line": 151, "type": "string | TemplateRef", "decorators": [] }, { "name": "language", "defaultValue": "\"en\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nLanguage of the flatpickr calendar.\n\nFor reference of the possible locales:\nhttps://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n", "description": "

Language of the flatpickr calendar.

\n

For reference of the possible locales:\nhttps://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts

\n", "line": 149, "type": "string", "decorators": [] }, { "name": "placeholder", "defaultValue": "\"mm/dd/yyyy\"", "deprecated": false, "deprecationMessage": "", "line": 156, "type": "string", "decorators": [] }, { "name": "plugins", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "line": 227, "type": "{}", "decorators": [] }, { "name": "range", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSelect calendar range mode\n", "description": "

Select calendar range mode

\n", "line": 134, "type": "boolean", "decorators": [] }, { "name": "rangeHelperText", "deprecated": false, "deprecationMessage": "", "line": 153, "type": "string | TemplateRef", "decorators": [] }, { "name": "rangeInvalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to display the invalid state for the second datepicker input.\n", "description": "

Set to true to display the invalid state for the second datepicker input.

\n", "line": 211, "type": "boolean", "decorators": [] }, { "name": "rangeInvalidText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue displayed if the second datepicker input is in an invalid state.\n", "description": "

Value displayed if the second datepicker input is in an invalid state.

\n", "line": 215, "type": "string | TemplateRef", "decorators": [] }, { "name": "rangeLabel", "deprecated": false, "deprecationMessage": "", "line": 154, "type": "string", "decorators": [] }, { "name": "rangeWarn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n", "description": "

Set to true to show a warning in the second datepicker input (contents set by rangeWarningText)

\n", "line": 219, "type": "boolean", "decorators": [] }, { "name": "rangeWarnText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the warning text for the second datepicker input\n", "description": "

Sets the warning text for the second datepicker input

\n", "line": 223, "type": "string | TemplateRef", "decorators": [] }, { "name": "readonly", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 189, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 207, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 225, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style", "jsdoctags": [ { "pos": 4637, "end": 4741, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 4638, "end": 4648, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5 - Use cdsLayer directive instead\nSet to "light" to apply the light style

\n" } ], "line": 185, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "value", "deprecated": false, "deprecationMessage": "", "line": 170, "type": "[]", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n", "description": "

Set to true to show a warning (contents set by warningText)

\n", "line": 201, "type": "boolean", "decorators": [] }, { "name": "warnText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the warning text\n", "description": "

Sets the warning text

\n", "line": 205, "type": "string | TemplateRef", "decorators": [] } ], "outputsClass": [ { "name": "onClose", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nWe are overriding onClose event even if users pass it via flatpickr options\nEmits an event when date picker closes\n", "description": "

We are overriding onClose event even if users pass it via flatpickr options\nEmits an event when date picker closes

\n", "line": 259, "type": "EventEmitter" }, { "name": "valueChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 253, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "input", "deprecated": false, "deprecationMessage": "", "type": "DatePickerInput", "optional": false, "description": "", "line": 250, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'input', {static: true}" } ], "modifierKind": [ 170 ] }, { "name": "onTouched", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": false, "description": "", "line": 414 }, { "name": "propagateChange", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 416 }, { "name": "rangeInput", "deprecated": false, "deprecationMessage": "", "type": "DatePickerInput", "optional": false, "description": "", "line": 251, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'rangeInput'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "onFocus", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 363, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusin'" } ], "modifierKind": [ 170 ] }, { "name": "onFocusOut", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 378, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusout'" } ], "modifierKind": [ 170 ] }, { "name": "onRangeValueChange", "args": [ { "name": "event", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 444, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles the `valueChange` event from the range input\n", "description": "

Handles the valueChange event from the range input

\n", "jsdoctags": [ { "name": "event", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onValueChange", "args": [ { "name": "event", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 429, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles the `valueChange` event from the primary/single input\n", "description": "

Handles the valueChange event from the primary/single input

\n", "jsdoctags": [ { "name": "event", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "openCalendar", "args": [ { "name": "datepickerInput", "type": "DatePickerInput", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 455, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles opening the calendar \"properly\" when the calendar icon is clicked.\n", "description": "

Handles opening the calendar "properly" when the calendar icon is clicked.

\n", "jsdoctags": [ { "name": "datepickerInput", "type": "DatePickerInput", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 406, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 410, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "setDisabledState", "args": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 402, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the DatePicker.\n\nex: `this.formGroup.get(\"myDatePicker\").disable();`\n\n", "description": "

ControlValueAccessor method to programmatically disable the DatePicker.

\n

ex: this.formGroup.get("myDatePicker").disable();

\n", "jsdoctags": [ { "name": { "pos": 11436, "end": 11446, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "isDisabled" }, "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 11430, "end": 11435, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

true to disable the DatePicker

\n" } ] }, { "name": "writeValue", "args": [ { "name": "value", "type": "(Date | string)[]", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 386, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nWrites a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n", "description": "

Writes a value from the model to the component. Expects the value to be null or (Date | string)[]

\n", "jsdoctags": [ { "name": { "pos": 11035, "end": 11040, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "value" }, "type": "(Date | string)[]", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 11029, "end": 11034, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

value received from the model

\n" } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "focusin", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 363 }, { "name": "focusout", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 378 } ], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { DatePickerModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { DatePickerModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-date-picker--single)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { Options } from \"flatpickr/dist/types/options\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t
\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef;\n\t@Input() helperText: string | TemplateRef;\n\t@Input() rangeHelperText: string | TemplateRef;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef;\n\t/**\n\t * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options: Partial) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions(): Partial {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language],\n\t\t\t// Little trick force \"readonly mode\" on datepicker input.\n\t\t\t// Docs: Whether clicking on the input should open the picker.\n\t\t\t// You could disable this if you wish to open the calendar manually with.open().\n\t\t\tclickOpens: !this.readonly\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions: Partial = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue || inputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\",\n\t\t\t\"readonly\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tif (!this.skeleton) {\n\t\t\tthis.input.input.nativeElement.value = this._value[0] ?? \"\";\n\t\t\tif (this.range) {\n\t\t\t\tthis.rangeInput.input.nativeElement.value = this._value[1] ?? \"\";\n\t\t\t}\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.readonly || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\t// Listeners are added just once, so a check is needed here.\n\t\t\t\tif (this.readonly) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\t\t\t\t\tconst selectedDateElem = calendarContainer && calendarContainer.querySelector('.selected');\n\t\t\t\t\tconst todayDateElem = calendarContainer && calendarContainer.querySelector('.today');\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\t(todayDateElem || selectedDateElem || dayElement).focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.setAttribute('role', 'button');\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"application\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t`;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 298, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit", "OnDestroy", "OnChanges", "AfterViewChecked", "AfterViewInit" ], "accessors": { "value": { "name": "value", "setSignature": { "name": "value", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "(Date | string)[]", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 170, "jsdoctags": [ { "name": "v", "type": "(Date | string)[]", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "value", "type": "", "returnType": "", "line": 177 } }, "flatpickrOptions": { "name": "flatpickrOptions", "setSignature": { "name": "flatpickrOptions", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "options", "type": "Partial", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 230, "jsdoctags": [ { "name": "options", "type": "Partial", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "flatpickrOptions", "type": "", "returnType": "Partial", "line": 233 } } } }, { "name": "DatePickerInput", "id": "component-DatePickerInput-bec03ed7095aa2b07d47458bb551fab7e6736a64529f457cdc52a6613ee9c0deb34f9a320037c5840bc9fecd9ecd08adae1bfaa465926fd6af13a899a1f1363e", "file": "src/datepicker-input/datepicker-input.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true\n}" } ], "selector": "cds-date-picker-input, ibm-date-picker-input", "styleUrls": [], "styles": [], "template": "\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{label}}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{{helperText}}\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{{invalidText}}\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{{warnText}}\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 136, "type": "boolean", "decorators": [] }, { "name": "hasIcon", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 120, "type": "boolean", "decorators": [] }, { "name": "helperText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the optional helper text.\n", "description": "

Sets the optional helper text.

\n", "line": 159, "type": "string | TemplateRef", "decorators": [] }, { "name": "id", "defaultValue": "`datepicker-${DatePickerInput.datePickerCount++}`", "deprecated": false, "deprecationMessage": "", "line": 118, "type": "string", "decorators": [] }, { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for invalid state.\n", "description": "

Set to true for invalid state.

\n", "line": 142, "type": "boolean", "decorators": [] }, { "name": "invalidText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue displayed if dropdown is in invalid state.\n", "description": "

Value displayed if dropdown is in invalid state.

\n", "line": 146, "type": "string | TemplateRef", "decorators": [] }, { "name": "label", "deprecated": false, "deprecationMessage": "", "line": 122, "type": "string | TemplateRef", "decorators": [] }, { "name": "pattern", "defaultValue": "\"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\"", "deprecated": false, "deprecationMessage": "", "line": 126, "type": "string", "decorators": [] }, { "name": "placeholder", "defaultValue": "\"mm/dd/yyyy\"", "deprecated": false, "deprecationMessage": "", "line": 124, "type": "string", "decorators": [] }, { "name": "readonly", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 138, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 165, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 161, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style", "jsdoctags": [ { "pos": 3927, "end": 4031, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 3928, "end": 3938, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5 - Use cdsLayer directive instead\nSet to "light" to apply the light style

\n" } ], "line": 134, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "type", "defaultValue": "\"simple\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSelect a calendar type for the `model`.\nInternal purposes only.\n", "description": "

Select a calendar type for the model.\nInternal purposes only.

\n", "line": 116, "type": "\"simple\" | \"single\" | \"range\"", "decorators": [] }, { "name": "value", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 163, "type": "string", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show a warning (contents set by warnText)\n", "description": "

Set to true to show a warning (contents set by warnText)

\n", "line": 150, "type": "boolean", "decorators": [] }, { "name": "warnText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the warning text\n", "description": "

Sets the warning text

\n", "line": 154, "type": "string | TemplateRef", "decorators": [] } ], "outputsClass": [ { "name": "valueChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 128, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "input", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 167, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'input'" } ], "modifierKind": [ 170 ] }, { "name": "onTouched", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": false, "description": "", "line": 190 }, { "name": "propagateChange", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 192 } ], "methodsClass": [ { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 194, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onChange", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 171, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 182, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 186, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "writeValue", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 178, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n@Component({\n\tselector: \"cds-date-picker-input, ibm-date-picker-input\",\n\ttemplate: `\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{label}}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t{{helperText}}\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{{invalidText}}\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t{{warnText}}\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePickerInput,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class DatePickerInput {\n\tprivate static datePickerCount = 0;\n\t/**\n\t * Select a calendar type for the `model`.\n\t * Internal purposes only.\n\t */\n\t@Input() type: \"simple\" | \"single\" | \"range\" = \"simple\";\n\n\t@Input() id = `datepicker-${DatePickerInput.datePickerCount++}`;\n\n\t@Input() hasIcon = false;\n\n\t@Input() label: string | TemplateRef;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Output() valueChange: EventEmitter = new EventEmitter();\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` for invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if dropdown is in invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef;\n\t/**\n\t * Set to `true` to show a warning (contents set by warnText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef;\n\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef;\n\n\t@Input() skeleton = false;\n\n\t@Input() value = \"\";\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@ViewChild(\"input\") input: ElementRef;\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.valueChange.emit(this.value);\n\t\tthis.propagateChange(this.value);\n\t\tthis.onTouched();\n\t}\n\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" } ], "line": 167, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [] }, { "name": "Dialog", "id": "component-Dialog-78fa174ac55726502cf620d6d5fea230c55f469e684b6e041efb264594396f000c7a8860251cef55fc8bf0f2d6c5528da23aca7f8b2dd07e95f7d8a32140f25d", "file": "src/dialog/dialog.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-dialog, ibm-dialog", "styleUrls": [], "styles": [], "template": "", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "dialogConfig", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReceives `DialogConfig` interface object with properties of `Dialog`\nexplicitly defined.\n", "description": "

Receives DialogConfig interface object with properties of Dialog\nexplicitly defined.

\n", "line": 41, "type": "DialogConfig", "decorators": [] } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits event that handles the closing of a `Dialog` object.\n", "description": "

Emits event that handles the closing of a Dialog object.

\n", "line": 36, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "data", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "

Stores the data received from dialogConfig.

\n", "line": 50, "rawdescription": "\n\nStores the data received from `dialogConfig`.\n", "modifierKind": [ 125 ] }, { "name": "dialog", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "

Maintains a reference to the view DOM element of the Dialog.

\n", "line": 45, "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Dialog`.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'dialog'" } ], "modifierKind": [ 170 ] }, { "name": "placement", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

The placement of the Dialog is received from the Position service.

\n", "line": 55, "rawdescription": "\n\nThe placement of the `Dialog` is received from the `Position` service.\n", "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "afterDialogViewInit", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 157, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmpty method to be overridden by consuming classes to run any additional initialization code after the view is available.\nNOTE: this does _not_ guarantee the dialog will be positioned, simply that it will exist in the DOM\n", "description": "

Empty method to be overridden by consuming classes to run any additional initialization code after the view is available.\nNOTE: this does not guarantee the dialog will be positioned, simply that it will exist in the DOM

\n" }, { "name": "clickClose", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 229, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets up a event Listener to close `Dialog` if click event occurs outside\n`Dialog` object.\n", "description": "

Sets up a event Listener to close Dialog if click event occurs outside\nDialog object.

\n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'document:click', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": { "pos": 6684, "end": 6689, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 6678, "end": 6683, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, { "name": "doClose", "args": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 242, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCloses `Dialog` object by emitting the close event upwards to parents.\n", "description": "

Closes Dialog object by emitting the close event upwards to parents.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }", "tagName": { "text": "param" } } ] }, { "name": "escapeClose", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 206, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets up a KeyboardEvent to close `Dialog` with Escape key.\n", "description": "

Sets up a KeyboardEvent to close Dialog with Escape key.

\n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": { "pos": 6201, "end": 6206, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 6195, "end": 6200, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, { "name": "onDialogInit", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 151, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmpty method to be overridden by consuming classes to run any additional initialization code.\n", "description": "

Empty method to be overridden by consuming classes to run any additional initialization code.

\n" }, { "name": "placeDialog", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 162, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUses the position service to position the `Dialog` in screen space\n", "description": "

Uses the position service to position the Dialog in screen space

\n" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "document:click", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets up a event Listener to close `Dialog` if click event occurs outside\n`Dialog` object.\n", "description": "

Sets up a event Listener to close Dialog if click event occurs outside\nDialog object.

\n", "jsdoctags": [ { "pos": 6677, "end": 6692, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 6678, "end": 6683, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "", "name": { "pos": 6684, "end": 6689, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "isNameFirst": true, "isBracketed": false } ], "line": 229 }, { "name": "keydown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets up a KeyboardEvent to close `Dialog` with Escape key.\n", "description": "

Sets up a KeyboardEvent to close Dialog with Escape key.

\n", "jsdoctags": [ { "pos": 6194, "end": 6209, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 6195, "end": 6200, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "", "name": { "pos": 6201, "end": 6206, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "isNameFirst": true, "isBracketed": false } ], "line": 206 } ], "standalone": false, "imports": [], "description": "

Implements a Dialog that can be positioned anywhere on the page.\nUsed to implement a popover or tooltip.

\n", "rawdescription": "\n\nImplements a `Dialog` that can be positioned anywhere on the page.\nUsed to implement a popover or tooltip.\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tViewChild,\n\tOnInit,\n\tAfterViewInit,\n\tOnDestroy,\n\tHostListener,\n\tOptional\n} from \"@angular/core\";\nimport {\n\tObservable,\n\tSubscription\n} from \"rxjs\";\n// the AbsolutePosition is required to import the declaration correctly\nimport Position, { position, AbsolutePosition, Positions } from \"@carbon/utils-position\";\nimport { cycleTabs, getFocusElementList } from \"carbon-components-angular/common\";\nimport { CloseMeta, CloseReasons, DialogConfig } from \"./dialog-config.interface\";\nimport { AnimationFrameService, ElementService } from \"carbon-components-angular/utils\";\n\n/**\n * Implements a `Dialog` that can be positioned anywhere on the page.\n * Used to implement a popover or tooltip.\n */\n@Component({\n\tselector: \"cds-dialog, ibm-dialog\",\n\ttemplate: \"\"\n})\nexport class Dialog implements OnInit, AfterViewInit, OnDestroy {\n\t/**\n\t * Emits event that handles the closing of a `Dialog` object.\n\t */\n\t@Output() close: EventEmitter = new EventEmitter();\n\t/**\n\t * Receives `DialogConfig` interface object with properties of `Dialog`\n\t * explicitly defined.\n\t */\n\t@Input() dialogConfig: DialogConfig;\n\t/**\n\t * Maintains a reference to the view DOM element of the `Dialog`.\n\t */\n\t@ViewChild(\"dialog\") dialog: ElementRef;\n\n\t/**\n\t * Stores the data received from `dialogConfig`.\n\t */\n\tpublic data = {};\n\n\t/**\n\t * The placement of the `Dialog` is received from the `Position` service.\n\t */\n\tpublic placement: string;\n\n\tprotected visibilitySubscription = new Subscription();\n\n\tprotected animationFrameSubscription = new Subscription();\n\n\t/**\n\t * Handles offsetting the `Dialog` item based on the defined position\n\t * to not obscure the content beneath.\n\t */\n\tprotected addGap = {\n\t\t\"left\": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),\n\t\t\"right\": pos => position.addOffset(pos, 0, this.dialogConfig.gap),\n\t\t\"top\": pos => position.addOffset(pos, -this.dialogConfig.gap),\n\t\t\"bottom\": pos => position.addOffset(pos, this.dialogConfig.gap),\n\t\t\"left-bottom\": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),\n\t\t\"right-bottom\": pos => position.addOffset(pos, 0, this.dialogConfig.gap)\n\t};\n\n\t/**\n\t * Extra placements. Child classes can add to this for use in `placeDialog`.\n\t */\n\tprotected placements: Positions = {};\n\n\t/**\n\t * Creates an instance of `Dialog`.\n\t * @param elementRef\n\t * @param elementService\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected elementService: ElementService,\n\t\t@Optional() protected animationFrameService: AnimationFrameService = null\n\t) {}\n\n\t/**\n\t * Initialize the `Dialog`, set the placement and gap, and add a `Subscription` to resize events.\n\t */\n\tngOnInit() {\n\t\tthis.placement = this.dialogConfig.placement.split(\",\")[0];\n\t\tthis.data = this.dialogConfig.data;\n\n\t\t// run any additional initialization code that consuming classes may have\n\t\tthis.onDialogInit();\n\t}\n\n\t/**\n\t * After the DOM is ready, focus is set and dialog is placed\n\t * in respect to the parent element.\n\t */\n\tngAfterViewInit() {\n\t\tconst dialogElement = this.dialog.nativeElement;\n\t\t// split the wrapper class list and apply separately to avoid IE\n\t\t// 1. throwing an error due to assigning a readonly property (classList)\n\t\t// 2. throwing a SyntaxError due to passing an empty string to `add`\n\t\tif (this.dialogConfig.wrapperClass) {\n\t\t\tfor (const extraClass of this.dialogConfig.wrapperClass.split(\" \")) {\n\t\t\t\tdialogElement.classList.add(extraClass);\n\t\t\t}\n\t\t}\n\n\t\t// only focus the dialog if there are focusable elements within the dialog\n\t\tif (getFocusElementList(this.dialog.nativeElement).length > 0) {\n\t\t\tdialogElement.focus();\n\t\t}\n\n\t\tconst parentElement = this.dialogConfig.parentRef.nativeElement;\n\n\t\tif (this.animationFrameService) {\n\t\t\tthis.animationFrameSubscription = this.animationFrameService.tick.subscribe(() => {\n\t\t\t\tthis.placeDialog();\n\t\t\t});\n\t\t}\n\n\t\tif (this.dialogConfig.closeWhenHidden) {\n\t\t\tthis.visibilitySubscription = this.elementService\n\t\t\t\t.visibility(parentElement, parentElement)\n\t\t\t\t.subscribe(value => {\n\t\t\t\t\tthis.placeDialog();\n\t\t\t\t\tif (!value.visible) {\n\t\t\t\t\t\tthis.doClose({\n\t\t\t\t\t\t\treason: CloseReasons.hidden\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\n\t\tthis.placeDialog();\n\t\t// run afterDialogViewInit on the next tick\n\t\tsetTimeout(() => this.afterDialogViewInit());\n\t}\n\n\t/**\n\t * Empty method to be overridden by consuming classes to run any additional initialization code.\n\t */\n\tonDialogInit() {}\n\n\t/**\n\t * Empty method to be overridden by consuming classes to run any additional initialization code after the view is available.\n\t * NOTE: this does _not_ guarantee the dialog will be positioned, simply that it will exist in the DOM\n\t */\n\tafterDialogViewInit() {}\n\n\t/**\n\t * Uses the position service to position the `Dialog` in screen space\n\t */\n\tplaceDialog(): void {\n\t\tconst positionService = new Position(this.placements);\n\t\t// helper to find the position based on the current/given environment\n\t\tconst findPosition = (reference, target, placement) => {\n\t\t\tlet pos;\n\t\t\tif (this.dialogConfig.appendInline) {\n\t\t\t\tpos = this.addGap[placement](positionService.findRelative(reference, target, placement));\n\t\t\t} else {\n\t\t\t\tpos = this.addGap[placement](positionService.findAbsolute(reference, target, placement));\n\t\t\t}\n\n\t\t\tif (this.dialogConfig.offset) {\n\t\t\t\t// Apply vertical and horizontal offsets given through the dialogConfig\n\t\t\t\tpos.top = pos.top + this.dialogConfig.offset.y;\n\t\t\t\tpos.left = pos.left + this.dialogConfig.offset.x;\n\t\t\t}\n\n\t\t\treturn pos;\n\t\t};\n\n\t\tlet parentEl = this.dialogConfig.parentRef.nativeElement;\n\t\tlet el = this.dialog.nativeElement;\n\t\tlet dialogPlacement = this.placement;\n\n\t\t// split always returns an array, so we can just use the auto position logic\n\t\t// for single positions too\n\t\tconst placements = this.dialogConfig.placement.split(\",\");\n\n\t\t// find the best placement\n\t\tdialogPlacement = positionService.findBestPlacement(parentEl, el, placements);\n\n\t\t// calculate the final position\n\t\tconst pos = findPosition(parentEl, el, dialogPlacement);\n\n\t\t// update the element\n\t\tpositionService.setElement(el, pos);\n\t\tsetTimeout(() => { this.placement = dialogPlacement; });\n\t}\n\n\t/**\n\t * Sets up a KeyboardEvent to close `Dialog` with Escape key.\n\t * @param event\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tescapeClose(event: KeyboardEvent) {\n\t\tswitch (event.key) {\n\t\t\tcase \"Escape\": {\n\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\tthis.doClose({\n\t\t\t\t\treason: CloseReasons.interaction,\n\t\t\t\t\ttarget: event.target\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"Tab\": {\n\t\t\t\tcycleTabs(event, this.elementRef.nativeElement);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets up a event Listener to close `Dialog` if click event occurs outside\n\t * `Dialog` object.\n\t * @param event\n\t */\n\t@HostListener(\"document:click\", [\"$event\"])\n\tclickClose(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target)\n\t\t\t&& !this.dialogConfig.parentRef.nativeElement.contains(event.target) ) {\n\t\t\tthis.doClose({\n\t\t\t\treason: CloseReasons.interaction,\n\t\t\t\ttarget: event.target\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Closes `Dialog` object by emitting the close event upwards to parents.\n\t */\n\tpublic doClose(meta: CloseMeta = { reason: CloseReasons.interaction }) {\n\t\tthis.close.emit(meta);\n\t}\n\n\t/**\n\t * At destruction of component, `Dialog` unsubscribes from all the subscriptions.\n\t */\n\tngOnDestroy() {\n\t\tthis.visibilitySubscription.unsubscribe();\n\t\tif (this.animationFrameSubscription) {\n\t\t\tthis.animationFrameSubscription.unsubscribe();\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

Creates an instance of Dialog.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "elementService", "type": "ElementService", "deprecated": false, "deprecationMessage": "" }, { "name": "animationFrameService", "type": "AnimationFrameService", "deprecated": false, "deprecationMessage": "", "defaultValue": "null" } ], "line": 77, "rawdescription": "\n\nCreates an instance of `Dialog`.\n", "jsdoctags": [ { "name": { "pos": 2350, "end": 2360, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "elementRef" }, "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 2344, "end": 2349, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" }, { "name": { "pos": 2372, "end": 2386, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "elementService" }, "type": "ElementService", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 2366, "end": 2371, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" }, { "name": "animationFrameService", "type": "AnimationFrameService", "deprecated": false, "deprecationMessage": "", "defaultValue": "null", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit", "AfterViewInit", "OnDestroy" ] }, { "name": "Documentation", "id": "component-Documentation-39d169bdff0a7af97caff93a6d4bc8a60e2a95f8bf2c95750e656fcfb927c13cd341eb20353eccdffb708fe8cc326db943cef4293c93906babea69c81f3f309c", "file": "src/documentation-component/documentation.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-documentation", "styleUrls": [], "styles": [], "template": "\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "src", "deprecated": false, "deprecationMessage": "", "line": 27, "type": "string", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "onLoad", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 47, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Documentation component that is no longer used as we switch from typedoc to compodoc.\nKeeping component for documentation specific use cases.

\n", "rawdescription": "\n\nDocumentation component that is no longer used as we switch from typedoc to compodoc.\nKeeping component for documentation specific use cases.\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tElementRef,\n\tOnInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\n\n/**\n * @Ignore\n * Documentation component that is no longer used as we switch from typedoc to compodoc.\n * Keeping component for documentation specific use cases.\n */\n@Component({\n\tselector: \"cds-documentation\",\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})\nexport class Documentation implements OnInit, OnDestroy {\n\t@Input() set src(src: string) {\n\t\tthis._src = this.sanitizer.bypassSecurityTrustResourceUrl(src);\n\t}\n\tget src() {\n\t\treturn this._src;\n\t}\n\n\tprotected _src;\n\n\tconstructor(protected elementRef: ElementRef, protected sanitizer: DomSanitizer) {}\n\n\tngOnInit() {\n\t\tdocument.querySelector(\"html\").style.overflow = \"hidden\";\n\t\tdocument.querySelector(\".sb-show-main\").classList.add(\"full-page\");\n\t}\n\tngOnDestroy() {\n\t\tdocument.querySelector(\"html\").style.overflow = \"auto\";\n\t\tdocument.querySelector(\".sb-show-main\").classList.remove(\"full-page\");\n\t}\n\n\tonLoad() {\n\t\tconst docsIframe = this.elementRef.nativeElement.querySelector(\"#docsIframe\");\n\t\tconst docsDocument = docsIframe.contentDocument || docsIframe.contentWindow.document;\n\t\tconst docsBody = docsDocument.querySelector(\"body\");\n\n\t\tconst mainContent = docsBody.querySelector(\".content\");\n\t\tmainContent.style.width = \"100%\";\n\t\tmainContent.style.left = 0;\n\n\t\tconst menuContent = docsBody.querySelector(\".hidden-xs.menu\");\n\t\tmenuContent.style.display = \"none\";\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "sanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "" } ], "line": 34, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "sanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit", "OnDestroy" ], "accessors": { "src": { "name": "src", "setSignature": { "name": "src", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "src", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 27, "jsdoctags": [ { "name": "src", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "src", "type": "", "returnType": "", "line": 30 } } } }, { "name": "DragAndDropStory", "id": "component-DragAndDropStory-a1eea9a2ed6efe2a95d27cbf6b516c679b295c61d34febb87d34025f36fbdcf0a3bf6ab000c5d32fd27e6717b34208a9bfe47a03a88ea5ab81d76e7bbf7fa4bb", "file": "src/file-uploader/stories/drag-drop.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-drop-file-uploader", "styleUrls": [], "styles": [], "template": "\n\n 0\"\n\t(click)=\"onUpload()\"\n\tstyle=\"margin-top:20px\">\n\tUpload\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "accept", "defaultValue": "[\".jpg\", \".png\"]", "deprecated": false, "deprecationMessage": "", "line": 37, "type": "{}", "decorators": [] }, { "name": "description", "deprecated": false, "deprecationMessage": "", "line": 36, "type": "any", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 40, "type": "boolean", "decorators": [] }, { "name": "dropText", "defaultValue": "\"Drag and drop files here of upload\"", "deprecated": false, "deprecationMessage": "", "line": 39, "type": "string", "decorators": [] }, { "name": "fileItemSize", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "line": 41, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "files", "defaultValue": "new Set()", "deprecated": false, "deprecationMessage": "", "line": 34, "type": "any", "decorators": [] }, { "name": "multiple", "deprecated": false, "deprecationMessage": "", "line": 38, "type": "any", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "line": 35, "type": "any", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "onDropped", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 47, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onUpload", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 92, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\nimport { FileItem } from \"../\";\nimport * as fileType from \"file-type\";\n\n@Component({\n\tselector: \"app-drop-file-uploader\",\n\ttemplate: `\n\t\t\n\t\t\n\t\t 0\"\n\t\t\t(click)=\"onUpload()\"\n\t\t\tstyle=\"margin-top:20px\">\n\t\t\tUpload\n\t\t\n\t`\n})\nexport class DragAndDropStory {\n\t@Input() files = new Set();\n\t@Input() title;\n\t@Input() description;\n\t@Input() accept = [\".jpg\", \".png\"];\n\t@Input() multiple;\n\t@Input() dropText = \"Drag and drop files here of upload\";\n\t@Input() disabled = false;\n\t@Input() fileItemSize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\tprotected maxSize = 500000;\n\n\t// This is an example of further filtration which can take place after\n\t// preliminary filtration and is optional.\n\tonDropped(event) {\n\t\tconst transferredFiles = Array.from(event);\n\n\t\t// Creates a promise which resolves to a file and whether or not the file should be accepted.\n\t\tconst readFileAndCheckType = fileObj => {\n\t\t\treturn new Promise<{ file: File, accept: boolean }>((resolve, reject) => {\n\t\t\t\tlet fileExtension, mime;\n\t\t\t\tlet reader = new FileReader();\n\t\t\t\treader.readAsArrayBuffer(fileObj.file);\n\t\t\t\treader.onload = () => {\n\t\t\t\t\tif (reader.result) {\n\t\t\t\t\t\t// Checks the type of file based on magic numbers.\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\tconst type = fileType(reader.result);\n\t\t\t\t\t\tif (type) {\n\t\t\t\t\t\t\tfileExtension = type.ext.replace(/^/, \".\");\n\t\t\t\t\t\t\tmime = type.mime;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t// If a file type can not be determined using magic numbers\n\t\t\t\t\t\t\t// then use file extension or mime type.\n\t\t\t\t\t\t\tfileExtension = fileObj.file.name.split(\".\").pop().replace(/^/, \".\");\n\t\t\t\t\t\t\tmime = fileObj.file.type;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tresolve({\n\t\t\t\t\t\tfile: fileObj,\n\t\t\t\t\t\taccept: (this.accept.includes(fileExtension) || this.accept.includes(mime) || !this.accept.length)\n\t\t\t\t\t});\n\t\t\t\t};\n\n\t\t\t\treader.onerror = error => {\n\t\t\t\t\treject(error);\n\t\t\t\t};\n\t\t\t});\n\t\t};\n\n\t\tconst promises = transferredFiles.map(file => readFileAndCheckType(file));\n\n\t\tPromise.all(promises).then(filePromiseArray =>\n\t\t\tfilePromiseArray.filter(filePromise => filePromise.accept)\n\t\t\t\t.map(acceptedFile => acceptedFile.file))\n\t\t\t.then(acceptedFiles => this.files = new Set(acceptedFiles))\n\t\t\t.catch(error => console.log(error));\n\t}\n\n\tonUpload() {\n\t\tthis.files.forEach(fileItem => {\n\t\t\tif (!fileItem.uploaded) {\n\t\t\t\tif (fileItem.file.size < this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"complete\";\n\t\t\t\t\t\tfileItem.uploaded = true;\n\t\t\t\t\t\tconsole.log(fileItem);\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\n\t\t\t\tif (fileItem.file.size > this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"edit\";\n\t\t\t\t\t\tfileItem.invalid = true;\n\t\t\t\t\t\tfileItem.invalidText = \"File size exceeds limit\";\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "Dropdown", "id": "component-Dropdown-63f44af5e6ad9ac5122d6ecf45223ecf29c119482e7fd0214a9b525564e1992686ae651041d0e8bb0a86c4689c871b701568da96c7264a7d951123b2733e1635", "file": "src/dropdown/dropdown.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: Dropdown, multi: true\n}" } ], "selector": "cds-dropdown, ibm-dropdown", "styleUrls": [], "styles": [], "template": "\n\t{{label}}\n\t\n\n 0,\n\t\t'cds--dropdown--light': theme === 'light',\n\t\t'cds--list-box--light': theme === 'light',\n\t\t'cds--list-box--inline': inline,\n\t\t'cds--skeleton': skeleton,\n\t\t'cds--dropdown--disabled cds--list-box--disabled': disabled,\n\t\t'cds--dropdown--readonly': readonly,\n\t\t'cds--dropdown--invalid': invalid,\n\t\t'cds--dropdown--warning cds--list-box--warning': warn,\n\t\t'cds--dropdown--sm cds--list-box--sm': size === 'sm',\n\t\t'cds--dropdown--md cds--list-box--md': size === 'md',\n\t\t'cds--dropdown--lg cds--list-box--lg': size === 'lg',\n\t\t'cds--list-box--expanded': !menuIsClosed,\n\t\t'cds--list-box--invalid': invalid\n\t}\"\n\t[attr.data-invalid]=\"invalid ? true : null\">\n\t
\n\t\n\t\t 0\"\n\t\t\tclass=\"cds--list-box__selection cds--tag--filter cds--list-box__selection--multi\"\n\t\t\ttabindex=\"0\"\n\t\t\t[title]=\"clearText\">\n\t\t\t{{getSelectedCount()}}\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t{{getDisplayStringValue() | async}}\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\n\n
\n\n\t{{helperText}}\n\t\n\n
\n\t{{ invalidText }}\n\t\n
\n
\n\t{{warnText}}\n\t\n
\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "appendInline", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nset to `true` to place the dropdown view inline with the component\n", "description": "

set to true to place the dropdown view inline with the component

\n", "line": 287, "type": "boolean", "decorators": [] }, { "name": "clearText", "defaultValue": "this.i18n.get().DROPDOWN.CLEAR", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the optional clear button tooltip text.\n", "description": "

Sets the optional clear button tooltip text.

\n", "line": 233, "type": "string", "decorators": [] }, { "name": "disableArrowKeys", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a dropdown without arrow key activation.\n", "description": "

Set to true for a dropdown without arrow key activation.

\n", "line": 267, "type": "boolean", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to disable the dropdown.\n", "description": "

Set to true to disable the dropdown.

\n", "line": 251, "type": "boolean", "decorators": [] }, { "name": "displayValue", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe selected value from the `Dropdown`. Can be a string or template.\n", "description": "

The selected value from the Dropdown. Can be a string or template.

\n", "line": 229, "type": "string | TemplateRef", "decorators": [] }, { "name": "dropUp", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOverrides the automatic dropUp.\n", "description": "

Overrides the automatic dropUp.

\n", "line": 317, "type": "boolean", "decorators": [] }, { "name": "fluid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExperimental: enable fluid state\n", "description": "

Experimental: enable fluid state

\n", "line": 350, "type": "boolean", "decorators": [] }, { "name": "helperText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the optional helper text.\n", "description": "

Sets the optional helper text.

\n", "line": 221, "type": "string | TemplateRef", "decorators": [] }, { "name": "hideLabel", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHide label while keeping it accessible for screen readers\n", "description": "

Hide label while keeping it accessible for screen readers

\n", "line": 217, "type": "boolean", "decorators": [] }, { "name": "id", "defaultValue": "`dropdown-${Dropdown.dropdownCount++}`", "deprecated": false, "deprecationMessage": "", "line": 209, "type": "string", "decorators": [] }, { "name": "inline", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for an inline dropdown.\n", "description": "

Set to true for an inline dropdown.

\n", "line": 263, "type": "boolean", "decorators": [] }, { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for invalid state.\n", "description": "

Set to true for invalid state.

\n", "line": 271, "type": "boolean", "decorators": [] }, { "name": "invalidText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue displayed if dropdown is in invalid state.\n", "description": "

Value displayed if dropdown is in invalid state.

\n", "line": 275, "type": "string | TemplateRef", "decorators": [] }, { "name": "itemValueKey", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecifies the property to be used as the return value to `ngModel`\n", "description": "

Specifies the property to be used as the return value to ngModel

\n", "line": 296, "type": "string", "decorators": [] }, { "name": "label", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nLabel for the dropdown.\n", "description": "

Label for the dropdown.

\n", "line": 213, "type": "string | TemplateRef", "decorators": [] }, { "name": "menuButtonLabel", "defaultValue": "this.i18n.get().DROPDOWN.OPEN", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAccessible label for the button that opens the dropdown list.\nDefaults to the `DROPDOWN.OPEN` value from the i18n service.\n", "description": "

Accessible label for the button that opens the dropdown list.\nDefaults to the DROPDOWN.OPEN value from the i18n service.

\n", "line": 308, "type": "any", "decorators": [] }, { "name": "placeholder", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue displayed if no item is selected.\n", "description": "

Value displayed if no item is selected.

\n", "line": 225, "type": "string", "decorators": [] }, { "name": "readonly", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a readonly state.\n", "description": "

Set to true for a readonly state.

\n", "line": 255, "type": "boolean", "decorators": [] }, { "name": "scrollableContainer", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nQuery string for the element that contains the `Dropdown`.\nUsed to trigger closing the dropdown if it scrolls outside of the viewport of the `scrollableContainer`.\n", "description": "

Query string for the element that contains the Dropdown.\nUsed to trigger closing the dropdown if it scrolls outside of the viewport of the scrollableContainer.

\n", "line": 292, "type": "string", "decorators": [] }, { "name": "selectedLabel", "defaultValue": "this.i18n.get().DROPDOWN.SELECTED", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nProvides the label for the \"# selected\" text.\nDefaults to the `DROPDOWN.SELECTED` value from the i18n service.\n", "description": "

Provides the label for the "# selected" text.\nDefaults to the DROPDOWN.SELECTED value from the i18n service.

\n", "line": 313, "type": "any", "decorators": [] }, { "name": "selectionFeedback", "defaultValue": "\"top-after-reopen\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify feedback (mode) of the selection.\n`top`: selected item jumps to top\n`fixed`: selected item stays at it's position\n`top-after-reopen`: selected item jump to top after reopen dropdown\n", "description": "

Specify feedback (mode) of the selection.\ntop: selected item jumps to top\nfixed: selected item stays at it's position\ntop-after-reopen: selected item jump to top after reopen dropdown

\n", "line": 303, "type": "\"top\" | \"fixed\" | \"top-after-reopen\"", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSize to render the dropdown field.\n", "description": "

Size to render the dropdown field.

\n", "line": 237, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a loading dropdown.\n", "description": "

Set to true for a loading dropdown.

\n", "line": 259, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` dropdown theme", "jsdoctags": [ { "pos": 7741, "end": 7836, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 7742, "end": 7752, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5 - Use cdsLayer directive instead\nlight or dark dropdown theme

\n" } ], "line": 247, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "type", "defaultValue": "\"single\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefines whether or not the `Dropdown` supports selecting multiple items as opposed to single\nitem selection.\n", "description": "

Defines whether or not the Dropdown supports selecting multiple items as opposed to single\nitem selection.

\n", "line": 242, "type": "\"single\" | \"multi\"", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n", "description": "

Set to true to show a warning (contents set by warningText)

\n", "line": 279, "type": "boolean", "decorators": [] }, { "name": "warnText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the warning text\n", "description": "

Sets the warning text

\n", "line": 283, "type": "string | TemplateRef", "decorators": [] } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n", "description": "

Emits event notifying to other classes that the Dropdown has been closed (collapsed).

\n", "line": 329, "type": "EventEmitter" }, { "name": "onClose", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n", "description": "

Emits event notifying to other classes that the Dropdown has been closed (collapsed).

\n", "line": 325, "type": "EventEmitter" }, { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits selection events.\n", "description": "

Emits selection events.

\n", "line": 321, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "_dropUp", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

controls whether the drop-up class is applied

\n", "line": 360, "rawdescription": "\n\ncontrols whether the `drop-up` class is applied\n" }, { "name": "dropdownButton", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Maintains a reference to the view DOM element of the Dropdown button.

\n", "line": 338, "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Dropdown` button.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'dropdownButton', {static: true}" } ], "modifierKind": [ 170 ] }, { "name": "dropdownCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 189, "modifierKind": [ 126 ] }, { "name": "dropdownMenu", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

ViewChid of the dropdown view.

\n", "line": 342, "rawdescription": "\n\nViewChid of the dropdown view.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'dropdownMenu', {static: true}" } ], "modifierKind": [ 170 ] }, { "name": "hostClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 344, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--dropdown__wrapper'" } ], "modifierKind": [ 170 ] }, { "name": "hostWrapperClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 346, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--list-box__wrapper'" } ], "modifierKind": [ 170 ] }, { "name": "keyboardNav", "defaultValue": "this._keyboardNav.bind(this)", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 367 }, { "name": "menuIsClosed", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Set to true if the dropdown is closed (not expanded).

\n", "line": 355, "rawdescription": "\n\nSet to `true` if the dropdown is closed (not expanded).\n" }, { "name": "noop", "defaultValue": "this._noop.bind(this)", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 364 }, { "name": "outsideClick", "defaultValue": "this._outsideClick.bind(this)", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 365 }, { "name": "outsideKey", "defaultValue": "this._outsideKey.bind(this)", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 366 }, { "name": "propagateChange", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

function passed in by registerOnChange

\n", "line": 528, "rawdescription": "\n\nfunction passed in by `registerOnChange`\n" }, { "name": "view", "deprecated": false, "deprecationMessage": "", "type": "AbstractDropdownView", "optional": false, "description": "

Maintains a reference to the AbstractDropdownView object within the content DOM.

\n", "line": 334, "rawdescription": "\n\nMaintains a reference to the `AbstractDropdownView` object within the content DOM.\n", "decorators": [ { "name": "ContentChild", "stringifiedArguments": "AbstractDropdownView, {static: true}" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "_appendToBody", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 707, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates the `Dropdown` list as an element that is appended to the DOM body.\n", "description": "

Creates the Dropdown list as an element that is appended to the DOM body.

\n" }, { "name": "_appendToDropdown", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 699, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n", "description": "

Creates the Dropdown list appending it to the dropdown parent object instead of the body.

\n" }, { "name": "_keyboardNav", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 679, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n", "description": "

Handles keyboard events so users are controlling the Dropdown instead of unintentionally controlling outside elements.

\n", "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "_noop", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 659, "deprecated": false, "deprecationMessage": "" }, { "name": "_outsideClick", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 663, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles clicks outside of the `Dropdown`.\n", "description": "

Handles clicks outside of the Dropdown.

\n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "_outsideKey", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 671, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "_shouldDropUp", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 721, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDetects whether or not the `Dropdown` list is visible within all scrollable parents.\nThis can be overridden by passing in a value to the `dropUp` input.\n", "description": "

Detects whether or not the Dropdown list is visible within all scrollable parents.\nThis can be overridden by passing in a value to the dropUp input.

\n" }, { "name": "clearSelected", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 640, "deprecated": false, "deprecationMessage": "" }, { "name": "closedDropdownNavigation", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 580, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "closeMenu", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 785, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCollapsing the dropdown menu and removing unnecessary `EventListeners`.\n", "description": "

Collapsing the dropdown menu and removing unnecessary EventListeners.

\n" }, { "name": "getDisplayStringValue", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 599, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the display value if there is a selection and displayValue is set,\nif there is just a selection the ListItem content property will be returned,\notherwise the placeholder will be returned.\n", "description": "

Returns the display value if there is a selection and displayValue is set,\nif there is just a selection the ListItem content property will be returned,\notherwise the placeholder will be returned.

\n" }, { "name": "getRenderTemplateContext", "args": [], "optional": false, "returnType": "{ items: any; item?: undefined; } | { item: any; items?: undefined; } | { items?: undefined; item?: undefined; }", "typeParameters": [], "line": 620, "deprecated": false, "deprecationMessage": "" }, { "name": "getSelectedCount", "args": [], "optional": false, "returnType": "number", "typeParameters": [], "line": 634, "deprecated": false, "deprecationMessage": "" }, { "name": "handleFocus", "args": [ { "name": "event", "type": "FocusEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 827, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "FocusEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isRenderString", "args": [], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 616, "deprecated": false, "deprecationMessage": "" }, { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 823, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onBlur", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 510, "deprecated": false, "deprecationMessage": "" }, { "name": "onKeyDown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 545, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAdds keyboard functionality for navigation, selection and closing of the `Dropdown`.\n", "description": "

Adds keyboard functionality for navigation, selection and closing of the Dropdown.

\n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "openMenu", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 741, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExpands the dropdown menu in the view.\n", "description": "

Expands the dropdown menu in the view.

\n" }, { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 514, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 521, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRegistering the function injected to control the touch use of the `Dropdown`.\n", "description": "

Registering the function injected to control the touch use of the Dropdown.

\n", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "setDisabledState", "args": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 537, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the dropdown.\n\nex: `this.formGroup.get(\"myDropdown\").disable();`\n\n", "description": "

ControlValueAccessor method to programmatically disable the dropdown.

\n

ex: this.formGroup.get("myDropdown").disable();

\n", "jsdoctags": [ { "name": { "pos": 16354, "end": 16364, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "isDisabled" }, "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 16348, "end": 16353, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

true to disable the input

\n" } ] }, { "name": "toggleMenu", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 815, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls toggling menu states between open/expanded and closed/collapsed.\n", "description": "

Controls toggling menu states between open/expanded and closed/collapsed.

\n" }, { "name": "valueSelected", "args": [], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 654, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns `true` if there is a value selected.\n", "description": "

Returns true if there is a value selected.

\n" }, { "name": "writeValue", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 471, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nPropagates the injected `value`.\n", "description": "

Propagates the injected value.

\n", "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--dropdown__wrapper", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 344, "type": "boolean", "decorators": [] }, { "name": "class.cds--list-box__wrapper", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 346, "type": "boolean", "decorators": [] }, { "name": "class.cds--list-box__wrapper--fluid--focus", "deprecated": false, "deprecationMessage": "", "line": 194, "type": "boolean", "decorators": [] }, { "name": "class.cds--list-box__wrapper--fluid--invalid", "deprecated": false, "deprecationMessage": "", "line": 190, "type": "boolean", "decorators": [] } ], "hostListeners": [ { "name": "keydown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAdds keyboard functionality for navigation, selection and closing of the `Dropdown`.\n", "description": "

Adds keyboard functionality for navigation, selection and closing of the Dropdown.

\n", "line": 545 } ], "standalone": false, "imports": [], "description": "

Drop-down lists enable users to select one or more items from a list.

\n

Opening behavior/List DOM placement

\n

By default the dropdown will try to figure out the best placement for the dropdown list.

\n

If it's not contained within any scrolling elements, it will open inline, if it is\ncontained within a scrolling container it will try to open in the body, or an cds-placeholder.

\n

To control this behavior you can use the appendInline input:

\n
    \n
  • [appendInline]="null" is the default (auto detection)
    • \n
  • [appendInline]="false" will always append to the body/cds-placeholder
    • \n
  • [appendInline]="true" will always append inline (next to the dropdown button)
    • \n
\n

Get started with importing the module:

\nExample :
import { DropdownModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nDrop-down lists enable users to select one or more items from a list.\n\n#### Opening behavior/List DOM placement\nBy default the dropdown will try to figure out the best placement for the dropdown list.\n\nIf it's not contained within any scrolling elements, it will open inline, if it _is_\ncontained within a scrolling container it will try to open in the body, or an `cds-placeholder`.\n\nTo control this behavior you can use the `appendInline` input:\n- `[appendInline]=\"null\"` is the default (auto detection)\n- `[appendInline]=\"false\"` will always append to the body/`cds-placeholder`\n- `[appendInline]=\"true\"` will always append inline (next to the dropdown button)\n\nGet started with importing the module:\n\n```typescript\nimport { DropdownModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-dropdown--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tContentChild,\n\tOnInit,\n\tViewChild,\n\tAfterContentInit,\n\tHostListener,\n\tOnDestroy,\n\tHostBinding,\n\tTemplateRef,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n// Observable import is required here so typescript can compile correctly\nimport {\n\tObservable,\n\tof,\n\tSubscription\n} from \"rxjs\";\n\nimport { AbstractDropdownView } from \"./abstract-dropdown-view.class\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { ListItem } from \"./list-item.interface\";\nimport { DropdownService } from \"./dropdown.service\";\nimport { ElementService, getScrollableParents } from \"carbon-components-angular/utils\";\nimport { hasScrollableParents } from \"carbon-components-angular/utils\";\n\n/**\n * Drop-down lists enable users to select one or more items from a list.\n *\n * #### Opening behavior/List DOM placement\n * By default the dropdown will try to figure out the best placement for the dropdown list.\n *\n * If it's not contained within any scrolling elements, it will open inline, if it _is_\n * contained within a scrolling container it will try to open in the body, or an `cds-placeholder`.\n *\n * To control this behavior you can use the `appendInline` input:\n * - `[appendInline]=\"null\"` is the default (auto detection)\n * - `[appendInline]=\"false\"` will always append to the body/`cds-placeholder`\n * - `[appendInline]=\"true\"` will always append inline (next to the dropdown button)\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { DropdownModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-dropdown--basic)\n */\n@Component({\n\tselector: \"cds-dropdown, ibm-dropdown\",\n\ttemplate: `\n\t\n\t\t{{label}}\n\t\t\n\t\n\t 0,\n\t\t\t'cds--dropdown--light': theme === 'light',\n\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t'cds--list-box--inline': inline,\n\t\t\t'cds--skeleton': skeleton,\n\t\t\t'cds--dropdown--disabled cds--list-box--disabled': disabled,\n\t\t\t'cds--dropdown--readonly': readonly,\n\t\t\t'cds--dropdown--invalid': invalid,\n\t\t\t'cds--dropdown--warning cds--list-box--warning': warn,\n\t\t\t'cds--dropdown--sm cds--list-box--sm': size === 'sm',\n\t\t\t'cds--dropdown--md cds--list-box--md': size === 'md',\n\t\t\t'cds--dropdown--lg cds--list-box--lg': size === 'lg',\n\t\t\t'cds--list-box--expanded': !menuIsClosed,\n\t\t\t'cds--list-box--invalid': invalid\n\t\t}\"\n\t\t[attr.data-invalid]=\"invalid ? true : null\">\n\t\t
\n\t\t\n\t\t\t 0\"\n\t\t\t\tclass=\"cds--list-box__selection cds--tag--filter cds--list-box__selection--multi\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[title]=\"clearText\">\n\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t{{getDisplayStringValue() | async}}\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\n\t
\n\t\n\t\t{{helperText}}\n\t\t\n\t\n\t
\n\t\t{{ invalidText }}\n\t\t\n\t
\n\t
\n\t\t{{warnText}}\n\t\t\n\t
\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Dropdown,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor {\n\tstatic dropdownCount = 0;\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid--invalid\") get fluidInvalidClass() {\n\t\treturn this.invalid && this.fluid;\n\t}\n\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid--focus\") get fluidFocusClass() {\n\t\treturn this.fluid && this._isFocused && this.menuIsClosed;\n\t}\n\n\tprotected get writtenValue() {\n\t\treturn this._writtenValue;\n\t}\n\n\tprotected set writtenValue(val: any[]) {\n\t\tif (val && val.length === 0) {\n\t\t\tthis.clearSelected();\n\t\t}\n\t\tthis._writtenValue = val;\n\t}\n\n\t@Input() id = `dropdown-${Dropdown.dropdownCount++}`;\n\t/**\n\t * Label for the dropdown.\n\t */\n\t@Input() label: string | TemplateRef;\n\t/**\n\t * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef;\n\t/**\n\t * Value displayed if no item is selected.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * The selected value from the `Dropdown`. Can be a string or template.\n\t */\n\t@Input() displayValue: string | TemplateRef = \"\";\n\t/**\n\t * Sets the optional clear button tooltip text.\n\t */\n\t@Input() clearText: string = this.i18n.get().DROPDOWN.CLEAR;\n\t/**\n\t * Size to render the dropdown field.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Defines whether or not the `Dropdown` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` dropdown theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` to disable the dropdown.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a readonly state.\n\t */\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` for a loading dropdown.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an inline dropdown.\n\t */\n\t@Input() inline = false;\n\t/**\n\t * Set to `true` for a dropdown without arrow key activation.\n\t */\n\t@Input() disableArrowKeys = false;\n\t/**\n\t * Set to `true` for invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if dropdown is in invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Query string for the element that contains the `Dropdown`.\n\t * Used to trigger closing the dropdown if it scrolls outside of the viewport of the `scrollableContainer`.\n\t */\n\t@Input() scrollableContainer: string;\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at it's position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Accessible label for the button that opens the dropdown list.\n\t * Defaults to the `DROPDOWN.OPEN` value from the i18n service.\n\t */\n\t@Input() menuButtonLabel = this.i18n.get().DROPDOWN.OPEN;\n\t/**\n\t * Provides the label for the \"# selected\" text.\n\t * Defaults to the `DROPDOWN.SELECTED` value from the i18n service.\n\t */\n\t@Input() selectedLabel = this.i18n.get().DROPDOWN.SELECTED;\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Emits selection events.\n\t */\n\t@Output() selected: EventEmitter = new EventEmitter();\n\t/**\n\t * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n\t */\n\t@Output() onClose: EventEmitter = new EventEmitter();\n\t/**\n\t * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n\t */\n\t@Output() close: EventEmitter = new EventEmitter();\n\n\t/**\n\t * Maintains a reference to the `AbstractDropdownView` object within the content DOM.\n\t */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t/**\n\t * Maintains a reference to the view DOM element of the `Dropdown` button.\n\t */\n\t@ViewChild(\"dropdownButton\", { static: true }) dropdownButton;\n\t/**\n\t * ViewChid of the dropdown view.\n\t */\n\t@ViewChild(\"dropdownMenu\", { static: true }) dropdownMenu;\n\n\t@HostBinding(\"class.cds--dropdown__wrapper\") hostClass = true;\n\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostWrapperClass = true;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid\") @Input() fluid = false;\n\n\t/**\n\t * Set to `true` if the dropdown is closed (not expanded).\n\t */\n\tmenuIsClosed = true;\n\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\t// .bind creates a new function, so we declare the methods below\n\t// but .bind them up here\n\tnoop = this._noop.bind(this);\n\toutsideClick = this._outsideClick.bind(this);\n\toutsideKey = this._outsideKey.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\n\tprotected visibilitySubscription = new Subscription();\n\n\tprotected onTouchedCallback: () => void = this._noop;\n\n\tprotected _isFocused = false;\n\n\t// primarily used to capture and propagate input to `writeValue` before the content is available\n\tprivate _writtenValue: any = [];\n\n\t/**\n\t * Creates an instance of Dropdown.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected elementService: ElementService) {}\n\n\t/**\n\t * Updates the `type` property in the `@ContentChild`.\n\t * The `type` property specifies whether the `Dropdown` allows single selection or multi selection.\n\t */\n\tngOnInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\t\t}\n\t}\n\n\t/**\n\t * Initializes classes and subscribes to events for single or multi selection.\n\t */\n\tngAfterContentInit() {\n\t\tif (!this.view) {\n\t\t\treturn;\n\t\t}\n\t\tif ((this.writtenValue && this.writtenValue.length) || typeof this.writtenValue === \"number\") {\n\t\t\tthis.writeValue(this.writtenValue);\n\t\t}\n\t\tthis.view.type = this.type;\n\t\tthis.view.size = this.size;\n\n\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\tthis.view.select.subscribe(event => {\n\t\t\tif (this.type === \"single\" && !isUpdate(event) && !Array.isArray(event)) {\n\t\t\t\tthis.closeMenu();\n\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\tthis.propagateChange(event.item[this.itemValueKey]);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.propagateChange(event.item);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.propagateChange(null);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this.type === \"multi\" && !isUpdate(event)) {\n\t\t\t\t// if we have a `value` selector and selected items map them appropriately\n\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\tthis.propagateChange(values);\n\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t} else {\n\t\t\t\t\tthis.propagateChange(this.view.getSelected());\n\t\t\t\t}\n\t\t\t}\n\t\t\t// only emit selected for \"organic\" selections\n\t\t\tif (!isUpdate(event)) {\n\t\t\t\tthis.checkForReorder();\n\t\t\t\tthis.selected.emit(event);\n\t\t\t}\n\t\t});\n\t}\n\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t// this should also cover the case where the dropdown is in a modal\n\t\t// (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t\tthis.checkForReorder();\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Propagates the injected `value`.\n\t */\n\twriteValue(value: any) {\n\t\t// cache the written value so we can use it in `AfterContentInit`\n\t\tthis.writtenValue = value;\n\t\tthis.view.onItemsReady(() => {\n\t\t\t// propagate null/falsey as an array (deselect everything)\n\t\t\tif (!value) {\n\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t} else if (this.type === \"single\") {\n\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t// clone the specified item and update its state\n\t\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\t\tnewValue.selected = true;\n\t\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t\t} else {\n\t\t\t\t\t// pass the singular value as an array of ListItem\n\t\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\t\tlet newValues = [];\n\t\t\t\t\tfor (const v of value) {\n\t\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t\t} else {\n\t\t\t\t\t// we can safely assume we're passing an array of `ListItem`s\n\t\t\t\t\tthis.view.propagateSelected(value);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.checkForReorder();\n\t\t});\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registering the function injected to control the touch use of the `Dropdown`.\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * function passed in by `registerOnChange`\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the dropdown.\n\t *\n\t * ex: `this.formGroup.get(\"myDropdown\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the input\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Adds keyboard functionality for navigation, selection and closing of the `Dropdown`.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tonKeyDown(event: KeyboardEvent) {\n\t\tif (this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ((event.key === \"Escape\") && !this.menuIsClosed) {\n\t\t\tevent.stopImmediatePropagation(); // don't unintentionally close other widgets that listen for Escape\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeMenu();\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t} else if (this.menuIsClosed && (event.key === \" \" || event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) {\n\t\t\tif (this.disableArrowKeys && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tevent.preventDefault();\n\t\t\tthis.openMenu();\n\t\t}\n\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && this.dropdownMenu.nativeElement.contains(event.target as Node)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && event.shiftKey) {\n\t\t\tthis.closeMenu();\n\t\t}\n\n\t\tif (this.type === \"multi\") { return; }\n\n\t\tif (this.menuIsClosed) {\n\t\t\tthis.closedDropdownNavigation(event);\n\t\t}\n\t}\n\n\tclosedDropdownNavigation(event) {\n\t\tif (event.key === \"ArrowDown\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.view.getCurrentItem().selected = false;\n\t\t\tlet item = this.view.getNextItem();\n\t\t\tif (item) { item.selected = true; }\n\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.view.getCurrentItem().selected = false;\n\t\t\tlet item = this.view.getPrevItem();\n\t\t\tif (item) { item.selected = true; }\n\t\t}\n\t}\n\n\t/**\n\t * Returns the display value if there is a selection and displayValue is set,\n\t * if there is just a selection the ListItem content property will be returned,\n\t * otherwise the placeholder will be returned.\n\t */\n\tgetDisplayStringValue(): Observable {\n\t\tif (!this.view || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\t\tlet selected = this.view.getSelected();\n\t\tif (selected.length && (!this.displayValue || !this.isRenderString())) {\n\t\t\tif (this.type === \"multi\") {\n\t\t\t\treturn of(this.placeholder);\n\t\t\t} else {\n\t\t\t\treturn of(selected[0].content);\n\t\t\t}\n\t\t} else if (selected.length && this.isRenderString()) {\n\t\t\treturn of(this.displayValue as string);\n\t\t}\n\t\treturn of(this.placeholder);\n\t}\n\n\tisRenderString(): boolean {\n\t\treturn typeof this.displayValue === \"string\";\n\t}\n\n\tgetRenderTemplateContext() {\n\t\tif (!this.view) {\n\t\t\treturn;\n\t\t}\n\t\tlet selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\treturn { items: selected };\n\t\t} else if (selected && selected.length > 0) {\n\t\t\treturn { item: selected[0] }; // this is to be compatible with the dropdown-list template\n\t\t} else {\n\t\t\treturn {};\n\t\t}\n\t}\n\n\tgetSelectedCount(): number {\n\t\tif (this.view.getSelected()) {\n\t\t\treturn this.view.getSelected().length;\n\t\t}\n\t}\n\n\tclearSelected() {\n\t\tif (this.disabled || this.getSelectedCount() === 0) {\n\t\t\treturn;\n\t\t}\n\t\tfor (const item of this.view.getListItems()) {\n\t\t\titem.selected = false;\n\t\t}\n\t\tthis.selected.emit([]);\n\t\tthis.propagateChange([]);\n\t}\n\n\t/**\n\t * Returns `true` if there is a value selected.\n\t */\n\tvalueSelected(): boolean {\n\t\tif (this.view.getSelected()) { return true; }\n\t\treturn false;\n\t}\n\n\t_noop() { }\n\t/**\n\t * Handles clicks outside of the `Dropdown`.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\n\t_outsideKey(event) {\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && this.dropdownMenu.nativeElement.contains(event.target as Node)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif (event.key === \"Escape\" && !this.menuIsClosed) {\n\t\t\tevent.stopImmediatePropagation(); // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeMenu();\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t} else if (!this.menuIsClosed && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t\tthis.dropdownButton.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tconst lightClass = this.theme === \"light\" ? \" cds--list-box--light\" : \"\";\n\t\tconst expandedClass = !this.menuIsClosed ? \" cds--list-box--expanded\" : \"\";\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.dropdownButton.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${lightClass}${expandedClass}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Expands the dropdown menu in the view.\n\t */\n\topenMenu() {\n\t\t// prevents the dropdown from opening when list of items is empty\n\t\tif (this.view.getListItems().length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dropUp = false;\n\t\tthis.menuIsClosed = false;\n\n\t\t// move the dropdown list to the body if we're not appending inline\n\t\t// and position it relative to the dropdown wrapper\n\t\tif (!this.appendInline) {\n\t\t\tconst target = this.dropdownButton.nativeElement;\n\t\t\tconst parent = this.elementRef.nativeElement;\n\t\t\tthis.visibilitySubscription = this.elementService\n\t\t\t\t.visibility(target, parent)\n\t\t\t\t.subscribe(value => {\n\t\t\t\t\tif (!value.visible) {\n\t\t\t\t\t\tthis.closeMenu();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\t// set the dropdown menu to drop up if it's near the bottom of the screen\n\t\t// setTimeout lets us measure after it's visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\n\t\t// we bind noop to document.body.firstElementChild to allow safari to fire events\n\t\t// from document. Then we unbind everything later to keep things light.\n\t\tdocument.body.firstElementChild.addEventListener(\"click\", this.noop, true);\n\t\tdocument.body.firstElementChild.addEventListener(\"keydown\", this.noop, true);\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\t\tdocument.addEventListener(\"keydown\", this.outsideKey, true);\n\t\tsetTimeout(() => this.view.initFocus(), 0);\n\t}\n\n\t/**\n\t * Collapsing the dropdown menu and removing unnecessary `EventListeners`.\n\t */\n\tcloseMenu() {\n\t\t// return early if the menu is already closed\n\t\tif (this.menuIsClosed) { return; }\n\t\tthis.menuIsClosed = true;\n\t\tthis.checkForReorder();\n\t\tthis.onClose.emit();\n\t\tthis.close.emit();\n\n\t\t// focus the trigger button when we close ...\n\t\tthis.dropdownButton.nativeElement.focus();\n\n\t\t// remove the conditional once this api is settled and part of abstract-dropdown-view.class\n\t\tif (this.view[\"disableScroll\"]) {\n\t\t\tthis.view[\"disableScroll\"]();\n\t\t}\n\n\t\t// move the list back in the component on close\n\t\tif (!this.appendInline) {\n\t\t\tthis.visibilitySubscription.unsubscribe();\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t\tdocument.body.firstElementChild.removeEventListener(\"click\", this.noop, true);\n\t\tdocument.body.firstElementChild.removeEventListener(\"keydown\", this.noop, true);\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t\tdocument.removeEventListener(\"keydown\", this.outsideKey, true);\n\t}\n\n\t/**\n\t * Controls toggling menu states between open/expanded and closed/collapsed.\n\t */\n\ttoggleMenu() {\n\t\tif (this.menuIsClosed) {\n\t\t\tthis.openMenu();\n\t\t} else {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\n\t\tif (event.type === \"blur\") {\n\t\t\tthis.onBlur();\n\t\t}\n\t}\n\n\t/**\n\t * Controls when it's needed to apply the selection feedback\n\t */\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = this.menuIsClosed && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected();\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

Creates an instance of Dropdown.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" }, { "name": "dropdownService", "type": "DropdownService", "deprecated": false, "deprecationMessage": "" }, { "name": "elementService", "type": "ElementService", "deprecated": false, "deprecationMessage": "" } ], "line": 376, "rawdescription": "\n\nCreates an instance of Dropdown.\n", "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "dropdownService", "type": "DropdownService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "elementService", "type": "ElementService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit", "AfterContentInit", "AfterViewInit", "OnDestroy", "ControlValueAccessor" ], "accessors": { "fluidInvalidClass": { "name": "fluidInvalidClass", "getSignature": { "name": "fluidInvalidClass", "type": "", "returnType": "", "line": 190 } }, "fluidFocusClass": { "name": "fluidFocusClass", "getSignature": { "name": "fluidFocusClass", "type": "", "returnType": "", "line": 194 } } } }, { "name": "DropdownList", "id": "component-DropdownList-2962a296e4b76167cde4c2e261085e0728345b5a38b21703280b336d812f03e0af28abd7428b954103fbf3988dba72cd0b6a658eeb927759801fb662d167d727", "file": "src/dropdown/list/dropdown-list.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: AbstractDropdownView, useExisting: DropdownList\n}" } ], "selector": "cds-dropdown-list, ibm-dropdown-list", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{item.content}}\n\t\t\t\t\n\t\t\t\n\t\t\t{{item.content}}\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "defaultValue": "this.i18n.get().DROPDOWN_LIST.LABEL", "deprecated": false, "deprecationMessage": "", "line": 121, "type": "any", "decorators": [] }, { "name": "items", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe list items belonging to the `DropdownList`.\n", "description": "

The list items belonging to the DropdownList.

\n", "line": 125, "type": "Array | Observable", "decorators": [] }, { "name": "listTpl", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTemplate to bind to items in the `DropdownList` (optional).\n", "description": "

Template to bind to items in the DropdownList (optional).

\n", "line": 150, "type": "string | TemplateRef", "decorators": [] }, { "name": "showTitles", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefines whether to show title attribute or not\n", "description": "

Defines whether to show title attribute or not

\n", "line": 182, "type": "boolean", "decorators": [] }, { "name": "type", "defaultValue": "\"single\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefines whether or not the `DropdownList` supports selecting multiple items as opposed to single\nitem selection.\n", "description": "

Defines whether or not the DropdownList supports selecting multiple items as opposed to single\nitem selection.

\n", "line": 177, "type": "\"single\" | \"multi\"", "decorators": [] } ], "outputsClass": [ { "name": "blurIntent", "defaultValue": "new EventEmitter<\"top\" | \"bottom\">()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEvent to suggest a blur on the view.\nEmits _after_ the first/last item has been focused.\nex.\nArrowUp -> focus first item\nArrowUp -> emit event\n\nWhen this event fires focus should be placed on some element outside of the list - blurring the list as a result\n", "description": "

Event to suggest a blur on the view.\nEmits after the first/last item has been focused.\nex.\nArrowUp -> focus first item\nArrowUp -> emit event

\n

When this event fires focus should be placed on some element outside of the list - blurring the list as a result

\n", "line": 168, "type": "EventEmitter" }, { "name": "scroll", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEvent to emit scroll event of a list within the `DropdownList`.\n", "description": "

Event to emit scroll event of a list within the DropdownList.

\n", "line": 158, "type": "EventEmitter" }, { "name": "select", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEvent to emit selection of a list item within the `DropdownList`.\n", "description": "

Event to emit selection of a list item within the DropdownList.

\n", "line": 154, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "displayItems", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "Array", "optional": false, "description": "

Holds the list of items that will be displayed in the DropdownList.\nIt differs from the the complete set of items when filtering is used (but\nit is always a subset of the total items in DropdownList).

\n", "line": 195, "rawdescription": "\n\nHolds the list of items that will be displayed in the `DropdownList`.\nIt differs from the the complete set of items when filtering is used (but\nit is always a subset of the total items in `DropdownList`).\n", "modifierKind": [ 125 ] }, { "name": "elementRef", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 228, "modifierKind": [ 125 ] }, { "name": "highlightedItem", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "null", "optional": false, "description": "", "line": 189, "modifierKind": [ 125 ] }, { "name": "list", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "

Maintains a reference to the view DOM element for the unordered list of items within the DropdownList.

\n", "line": 172, "rawdescription": "\n\nMaintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'list', {static: true}" } ], "modifierKind": [ 170 ] }, { "name": "listCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 120, "modifierKind": [ 126 ] }, { "name": "listId", "defaultValue": "`listbox-${DropdownList.listCount++}`", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 188, "modifierKind": [ 125 ] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "type": "\"sm\" | \"md\" | \"lg\"", "optional": false, "description": "

Defines the rendering size of the DropdownList input component.

\n", "line": 187, "rawdescription": "\n\nDefines the rendering size of the `DropdownList` input component.\n", "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "doClick", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "item", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 552, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the selected item or items after a mouse click event has occurred.\n", "description": "

Emits the selected item or items after a mouse click event has occurred.

\n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "item", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "doEmitSelect", "args": [ { "name": "isUpdate", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 254, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "isUpdate", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true", "tagName": { "text": "param" } } ] }, { "name": "emitScroll", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 587, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the scroll event of the options list\n", "description": "

Emits the scroll event of the options list

\n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "filterBy", "args": [ { "name": "query", "type": "string", "deprecated": false, "deprecationMessage": "", "defaultValue": "\"\"" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 284, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFilters the items being displayed in the DOM list.\n", "description": "

Filters the items being displayed in the DOM list.

\n", "jsdoctags": [ { "name": "query", "type": "string", "deprecated": false, "deprecationMessage": "", "defaultValue": "\"\"", "tagName": { "text": "param" } } ] }, { "name": "getCurrentElement", "args": [], "optional": false, "returnType": "HTMLElement", "typeParameters": [], "line": 415, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the `HTMLElement` for the item that is selected within the `DropdownList`.\n", "description": "

Returns the HTMLElement for the item that is selected within the DropdownList.

\n" }, { "name": "getCurrentItem", "args": [], "optional": false, "returnType": "ListItem", "typeParameters": [], "line": 405, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the `ListItem` that is selected within `DropdownList`.\n", "description": "

Returns the ListItem that is selected within DropdownList.

\n" }, { "name": "getItemId", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "string", "typeParameters": [], "line": 266, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "getListItems", "args": [], "optional": false, "returnType": "Array", "typeParameters": [], "line": 425, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the items as an Array\n", "description": "

Returns the items as an Array

\n" }, { "name": "getNextElement", "args": [], "optional": false, "returnType": "HTMLElement", "typeParameters": [], "line": 336, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the `HTMLElement` for the item that is subsequent to the selected item.\n", "description": "

Returns the HTMLElement for the item that is subsequent to the selected item.

\n" }, { "name": "getNextItem", "args": [], "optional": false, "returnType": "ListItem", "typeParameters": [], "line": 318, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n", "description": "

Returns the ListItem that is subsequent to the selected item in the DropdownList.

\n" }, { "name": "getPrevElement", "args": [], "optional": false, "returnType": "HTMLElement", "typeParameters": [], "line": 379, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the `HTMLElement` for the item that precedes the selected item.\n", "description": "

Returns the HTMLElement for the item that precedes the selected item.

\n" }, { "name": "getPrevItem", "args": [], "optional": false, "returnType": "ListItem", "typeParameters": [], "line": 362, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the `ListItem` that precedes the selected item within `DropdownList`.\n", "description": "

Returns the ListItem that precedes the selected item within DropdownList.

\n" }, { "name": "getSelected", "args": [], "optional": false, "returnType": "ListItem[]", "typeParameters": [], "line": 432, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns a list containing the selected item(s) in the `DropdownList`.\n", "description": "

Returns a list containing the selected item(s) in the DropdownList.

\n" }, { "name": "hasNextElement", "args": [], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 328, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns `true` if the selected item is not the last item in the `DropdownList`.\n", "description": "

Returns true if the selected item is not the last item in the DropdownList.

\n" }, { "name": "hasPrevElement", "args": [], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 372, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns `true` if the selected item is not the first in the list.\n", "description": "

Returns true if the selected item is not the first in the list.

\n" }, { "name": "initFocus", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 494, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nInitializes focus in the list, effectively a wrapper for `getCurrentElement().focus()`\n", "description": "

Initializes focus in the list, effectively a wrapper for getCurrentElement().focus()

\n" }, { "name": "navigateList", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 520, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nManages the keyboard accessibility for navigation and selection within a `DropdownList`.\n", "description": "

Manages the keyboard accessibility for navigation and selection within a DropdownList.

\n", "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onItemBlur", "args": [ { "name": "index", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 578, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onItemFocus", "args": [ { "name": "index", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 572, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onItemsReady", "args": [ { "name": "subcription", "type": "function", "deprecated": false, "deprecationMessage": "", "function": [] } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 597, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSubscribe the function passed to an internal observable that will resolve once the items are ready\n", "description": "

Subscribe the function passed to an internal observable that will resolve once the items are ready

\n", "jsdoctags": [ { "name": "subcription", "type": "function", "deprecated": false, "deprecationMessage": "", "function": [], "tagName": { "text": "param" } } ] }, { "name": "propagateSelected", "args": [ { "name": "value", "type": "Array", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 443, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTransforms array input list of items to the correct state by updating the selected item(s).\n", "description": "

Transforms array input list of items to the correct state by updating the selected item(s).

\n", "jsdoctags": [ { "name": "value", "type": "Array", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "reorderSelected", "args": [ { "name": "moveFocus", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 602, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "moveFocus", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true", "tagName": { "text": "param" } } ] }, { "name": "setupFocusObservable", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 303, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nInitializes (or re-initializes) the Observable that handles switching focus to an element based on\nkey input matching the first letter of the item in the list.\n", "description": "

Initializes (or re-initializes) the Observable that handles switching focus to an element based on\nkey input matching the first letter of the item in the list.

\n" }, { "name": "updateIndex", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 505, "deprecated": false, "deprecationMessage": "" }, { "name": "updateList", "args": [ { "name": "items", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 273, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUpdates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.\n", "description": "

Updates the displayed list of items and then retrieves the most current properties for the DropdownList from the DOM.

\n", "jsdoctags": [ { "name": "items", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "Example :
<cds-dropdown-list [items]="listItems"></cds-dropdown-list>
Example :
listItems = [\n    {\n        content: "item one",\n        selected: false\n    },\n    {\n        content: "item two",\n        selected: false,\n    },\n    {\n        content: "item three",\n        selected: false\n    },\n    {\n        content: "item four",\n        selected: false\n    }\n];
", "rawdescription": "\n\n```html\n\n```\n```typescript\nlistItems = [\n\t{\n\t\tcontent: \"item one\",\n\t\tselected: false\n\t},\n\t{\n\t\tcontent: \"item two\",\n\t\tselected: false,\n\t},\n\t{\n\t\tcontent: \"item three\",\n\t\tselected: false\n\t},\n\t{\n\t\tcontent: \"item four\",\n\t\tselected: false\n\t}\n];\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tOnDestroy,\n\tEventEmitter,\n\tTemplateRef,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tViewChildren,\n\tQueryList,\n\tApplicationRef\n} from \"@angular/core\";\nimport { Observable, isObservable, Subscription, of } from \"rxjs\";\nimport { first } from \"rxjs/operators\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { AbstractDropdownView } from \"../abstract-dropdown-view.class\";\nimport { ListItem } from \"../list-item.interface\";\nimport { watchFocusJump } from \"../dropdowntools\";\nimport { ScrollCustomEvent } from \"./scroll-custom-event.interface\";\n\n\n/**\n * ```html\n * \n * ```\n * ```typescript\n * listItems = [\n * \t{\n * \t\tcontent: \"item one\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item two\",\n * \t\tselected: false,\n * \t},\n * \t{\n * \t\tcontent: \"item three\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item four\",\n * \t\tselected: false\n * \t}\n * ];\n * ```\n */\n@Component({\n\tselector: \"cds-dropdown-list, ibm-dropdown-list\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{item.content}}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t{{item.content}}\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: AbstractDropdownView,\n\t\t\tuseExisting: DropdownList\n\t\t}\n\t]\n})\nexport class DropdownList implements AbstractDropdownView, AfterViewInit, OnDestroy {\n\tstatic listCount = 0;\n\t@Input() ariaLabel = this.i18n.get().DROPDOWN_LIST.LABEL;\n\t/**\n\t * The list items belonging to the `DropdownList`.\n\t */\n\t@Input() set items(value: Array | Observable>) {\n\t\tif (isObservable(value)) {\n\t\t\tif (this._itemsSubscription) {\n\t\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t\t}\n\t\t\tthis._itemsReady = new Observable((observer) => {\n\t\t\t\tthis._itemsSubscription = value.subscribe(v => {\n\t\t\t\t\tthis.updateList(v);\n\t\t\t\t\tobserver.next(true);\n\t\t\t\t\tobserver.complete();\n\t\t\t\t});\n\t\t\t});\n\t\t\tthis.onItemsReady(null);\n\t\t} else {\n\t\t\tthis.updateList(value);\n\t\t}\n\t\tthis._originalItems = value;\n\t}\n\n\tget items(): Array | Observable> {\n\t\treturn this._originalItems;\n\t}\n\t/**\n\t * Template to bind to items in the `DropdownList` (optional).\n\t */\n\t@Input() listTpl: string | TemplateRef = null;\n\t/**\n\t * Event to emit selection of a list item within the `DropdownList`.\n\t */\n\t@Output() select: EventEmitter<{ item: ListItem, isUpdate?: boolean } | ListItem[]> = new EventEmitter();\n\t/**\n\t * Event to emit scroll event of a list within the `DropdownList`.\n\t */\n\t@Output() scroll: EventEmitter = new EventEmitter();\n\t/**\n\t * Event to suggest a blur on the view.\n\t * Emits _after_ the first/last item has been focused.\n\t * ex.\n\t * ArrowUp -> focus first item\n\t * ArrowUp -> emit event\n\t *\n\t * When this event fires focus should be placed on some element outside of the list - blurring the list as a result\n\t */\n\t@Output() blurIntent = new EventEmitter<\"top\" | \"bottom\">();\n\t/**\n\t * Maintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.\n\t */\n\t@ViewChild(\"list\", { static: true }) list: ElementRef;\n\t/**\n\t * Defines whether or not the `DropdownList` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\n\t/**\n\t * Defines whether to show title attribute or not\n\t */\n\t@Input() showTitles = true;\n\n\t/**\n\t * Defines the rendering size of the `DropdownList` input component.\n\t */\n\tpublic size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\tpublic listId = `listbox-${DropdownList.listCount++}`;\n\tpublic highlightedItem = null;\n\t/**\n\t * Holds the list of items that will be displayed in the `DropdownList`.\n\t * It differs from the the complete set of items when filtering is used (but\n\t * it is always a subset of the total items in `DropdownList`).\n\t */\n\tpublic displayItems: Array = [];\n\t/**\n\t * Maintains the index for the selected item within the `DropdownList`.\n\t */\n\tprotected index = -1;\n\t/**\n\t * An array holding the HTML list elements in the view.\n\t */\n\t@ViewChildren(\"listItem\") protected listElementList: QueryList;\n\t/**\n\t * Observable bound to keydown events to control filtering.\n\t */\n\tprotected focusJump;\n\t/**\n\t * Tracks the current (if any) subscription to the items observable so we can clean up when the input is updated.\n\t */\n\tprotected _itemsSubscription: Subscription;\n\t/**\n\t * Used to retain the original items passed to the setter.\n\t */\n\tprotected _originalItems: Array | Observable>;\n\t/**\n\t * Useful representation of the items, should be accessed via `getListItems`.\n\t */\n\tprotected _items: Array = [];\n\t/**\n\t * Used to wait for items in case they are passed through an observable.\n\t */\n\tprotected _itemsReady: Observable;\n\n\t/**\n\t * Creates an instance of `DropdownList`.\n\t */\n\tconstructor(public elementRef: ElementRef, protected i18n: I18n, protected appRef: ApplicationRef) {}\n\n\t/**\n\t * Retrieves array of list items and index of the selected item after view has rendered.\n\t * Additionally, any Observables for the `DropdownList` are initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.index = this.getListItems().findIndex(item => item.selected);\n\t\tthis.setupFocusObservable();\n\t\tsetTimeout(() => {\n\t\t\tthis.doEmitSelect(true);\n\t\t});\n\t}\n\n\t/**\n\t * Removes any Observables on destruction of the component.\n\t */\n\tngOnDestroy() {\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tif (this._itemsSubscription) {\n\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t}\n\t}\n\n\tdoEmitSelect(isUpdate = true) {\n\t\tif (this.type === \"single\") {\n\t\t\tthis.select.emit({ item: this._items.find(item => item.selected), isUpdate: isUpdate });\n\t\t} else {\n\t\t\t// abuse javascripts object mutability until we can break the API and switch to\n\t\t\t// { items: [], isUpdate: true }\n\t\t\tconst selected = this.getSelected() || [];\n\t\t\tselected[\"isUpdate\"] = isUpdate;\n\t\t\tthis.select.emit(selected);\n\t\t}\n\t}\n\n\tgetItemId(index: number) {\n\t\treturn `${this.listId}-${index}`;\n\t}\n\n\t/**\n\t * Updates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.\n\t */\n\tupdateList(items) {\n\t\tthis._items = items.map(item => Object.assign({}, item));\n\t\tthis.displayItems = this._items;\n\t\tthis.updateIndex();\n\t\tthis.setupFocusObservable();\n\t\tthis.doEmitSelect();\n\t}\n\n\t/**\n\t * Filters the items being displayed in the DOM list.\n\t */\n\tfilterBy(query = \"\") {\n\t\tif (query) {\n\t\t\tthis.displayItems = this.getListItems().filter(item => item.content.toLowerCase().includes(query.toLowerCase()));\n\t\t\t// Reset index if items were found\n\t\t\t// Prevent selecting index in list that are undefined.\n\t\t\tif (this.displayItems) {\n\t\t\t\tthis.index = 0;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.displayItems = this.getListItems();\n\t\t}\n\n\t\tthis.updateIndex();\n\t}\n\n\t/**\n\t * Initializes (or re-initializes) the Observable that handles switching focus to an element based on\n\t * key input matching the first letter of the item in the list.\n\t */\n\tsetupFocusObservable() {\n\t\tif (!this.list) { return; }\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tlet elList = Array.from(this.list.nativeElement.querySelectorAll(\"li\"));\n\t\tthis.focusJump = watchFocusJump(this.list.nativeElement, elList)\n\t\t\t.subscribe(el => {\n\t\t\t\tel.focus();\n\t\t\t});\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n\t */\n\tgetNextItem(): ListItem {\n\t\tif (this.index < this.displayItems.length - 1) {\n\t\t\tthis.index++;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the last item in the `DropdownList`.\n\t */\n\thasNextElement(): boolean {\n\t\treturn this.index < this.displayItems.length - 1 &&\n\t\t\t(!(this.index === this.displayItems.length - 2) || !this.displayItems[this.index + 1].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is subsequent to the selected item.\n\t */\n\tgetNextElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index + 1; i < elemList.length; i++) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index]?.nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that precedes the selected item within `DropdownList`.\n\t */\n\tgetPrevItem(): ListItem {\n\t\tif (this.index > 0) {\n\t\t\tthis.index--;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the first in the list.\n\t */\n\thasPrevElement(): boolean {\n\t\treturn this.index > 0 && (!(this.index === 1) || !this.displayItems[0].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that precedes the selected item.\n\t */\n\tgetPrevElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index - 1; i < this.index && i >= 0; i--) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is selected within `DropdownList`.\n\t */\n\tgetCurrentItem(): ListItem {\n\t\tif (this.index < 0) {\n\t\t\treturn this.displayItems[0];\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is selected within the `DropdownList`.\n\t */\n\tgetCurrentElement(): HTMLElement {\n\t\tif (this.index < 0) {\n\t\t\treturn this.listElementList.first.nativeElement;\n\t\t}\n\t\treturn this.listElementList.toArray()[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the items as an Array\n\t */\n\tgetListItems(): Array {\n\t\treturn this._items;\n\t}\n\n\t/**\n\t * Returns a list containing the selected item(s) in the `DropdownList`.\n\t */\n\tgetSelected(): ListItem[] {\n\t\tlet selected = this.getListItems().filter(item => item.selected);\n\t\tif (selected.length === 0) {\n\t\t\treturn [];\n\t\t}\n\t\treturn selected;\n\t}\n\n\t/**\n\t * Transforms array input list of items to the correct state by updating the selected item(s).\n\t */\n\tpropagateSelected(value: Array): void {\n\t\t// if we get a non-array, log out an error (since it is one)\n\t\tif (!Array.isArray(value)) {\n\t\t\tconsole.error(`${this.constructor.name}.propagateSelected expects an Array, got ${JSON.stringify(value)}`);\n\t\t}\n\t\tthis.onItemsReady(() => {\n\t\t\tconst selectedNewItems = [];\n\t\t\tfor (let newItem of value) {\n\t\t\t\tif (newItem && newItem.selected) {\n\t\t\t\t\t// copy the item\n\t\t\t\t\tlet tempNewItem: string | ListItem = Object.assign({}, newItem);\n\t\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\t\tdelete tempNewItem.selected;\n\t\t\t\t\t// stringify for compare later\n\t\t\t\t\ttempNewItem = JSON.stringify(tempNewItem);\n\t\t\t\t\t// add to the list of selected items\n\t\t\t\t\tselectedNewItems.push(tempNewItem);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// loop through the list items and update the `selected` state for matching items in `value`\n\t\t\tfor (let oldItem of this.getListItems()) {\n\t\t\t\t// fast path when no items are selected\n\t\t\t\tif (selectedNewItems.length === 0) {\n\t\t\t\t\toldItem.selected = false;\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// copy the item\n\t\t\t\tlet tempOldItem: string | ListItem = Object.assign({}, oldItem);\n\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\tdelete tempOldItem.selected;\n\t\t\t\t// stringify for compare\n\t\t\t\ttempOldItem = JSON.stringify(tempOldItem);\n\t\t\t\tfor (let selectedNewItem of selectedNewItems) {\n\t\t\t\t\t// do the compare\n\t\t\t\t\tif (tempOldItem.includes(selectedNewItem)) {\n\t\t\t\t\t\toldItem.selected = true;\n\t\t\t\t\t\t// if we've found a matching item, we can stop looping\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t} else {\n\t\t\t\t\t\toldItem.selected = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Initializes focus in the list, effectively a wrapper for `getCurrentElement().focus()`\n\t */\n\tinitFocus() {\n\t\tif (this.index < 0) {\n\t\t\tthis.updateIndex();\n\t\t}\n\n\t\tthis.list.nativeElement.focus();\n\t\tsetTimeout(() => {\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t});\n\t}\n\n\tupdateIndex() {\n\t\t// initialize index on the first selected item or\n\t\t// on the next non disabled item if no items are selected\n\t\t// in case, if all items are disabled, the index value will remain same\n\t\tconst selected = this.getSelected();\n\t\tif (selected.length) {\n\t\t\tthis.index = this.displayItems.indexOf(selected[0]);\n\t\t} else if (this.index < 0 && this.hasNextElement()) {\n\t\t\tthis.getNextElement();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for navigation and selection within a `DropdownList`.\n\t */\n\tnavigateList(event: KeyboardEvent) {\n\t\tif (event.key === \"Enter\" || event.key === \" \") {\n\t\t\tif (this.listElementList.some(option => option.nativeElement === event.target)) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tif (event.key === \"Enter\") {\n\t\t\t\tthis.doClick(event, this.getCurrentItem());\n\t\t\t}\n\t\t} else if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\tif (this.hasNextElement()) {\n\t\t\t\t\tthis.getNextElement()?.scrollIntoView({ block: \"end\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"bottom\");\n\t\t\t\t}\n\t\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\t\tif (this.hasPrevElement()) {\n\t\t\t\t\tthis.getPrevElement().scrollIntoView({ block: \"nearest\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"top\");\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Emits the selected item or items after a mouse click event has occurred.\n\t */\n\tdoClick(event, item) {\n\t\tevent.preventDefault();\n\t\tif (item && !item.disabled) {\n\t\t\tthis.list.nativeElement.focus();\n\t\t\tif (this.type === \"single\") {\n\t\t\t\titem.selected = true;\n\t\t\t\t// reset the selection\n\t\t\t\tfor (let otherItem of this.getListItems()) {\n\t\t\t\t\tif (item !== otherItem) { otherItem.selected = false; }\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\titem.selected = !item.selected;\n\t\t\t}\n\t\t\tthis.index = this.displayItems.indexOf(item);\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\tthis.doEmitSelect(false);\n\t\t\tthis.appRef.tick();\n\t\t}\n\t}\n\n\tonItemFocus(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.add(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = 0;\n\t}\n\n\tonItemBlur(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.remove(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = -1;\n\t}\n\n\t/**\n\t * Emits the scroll event of the options list\n\t */\n\temitScroll(event) {\n\t\tconst atTop: boolean = event.srcElement.scrollTop === 0;\n\t\tconst atBottom: boolean = event.srcElement.scrollHeight - event.srcElement.scrollTop === event.srcElement.clientHeight;\n\t\tconst customScrollEvent = { atTop, atBottom, event };\n\t\tthis.scroll.emit(customScrollEvent);\n\t}\n\n\t/**\n\t * Subscribe the function passed to an internal observable that will resolve once the items are ready\n\t */\n\tonItemsReady(subcription: () => void): void {\n\t\t// this subscription will auto unsubscribe because of the `first()` pipe\n\t\t(this._itemsReady || of(true)).pipe(first()).subscribe(subcription);\n\t}\n\n\treorderSelected(moveFocus = true): void {\n\t\tthis.displayItems = [...this.getSelected(), ...this.getListItems().filter(item => !item.selected)];\n\t\tif (moveFocus) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateIndex();\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

Creates an instance of DropdownList.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" }, { "name": "appRef", "type": "ApplicationRef", "deprecated": false, "deprecationMessage": "" } ], "line": 223, "rawdescription": "\n\nCreates an instance of `DropdownList`.\n", "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "appRef", "type": "ApplicationRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AbstractDropdownView", "AfterViewInit", "OnDestroy" ], "accessors": { "items": { "name": "items", "setSignature": { "name": "items", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "Array | Observable>", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 125, "rawdescription": "\n\nThe list items belonging to the `DropdownList`.\n", "description": "

The list items belonging to the DropdownList.

\n", "jsdoctags": [ { "name": "value", "type": "Array | Observable>", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "items", "type": "", "returnType": "Array | Observable", "line": 144 } } } }, { "name": "DyanmicActionableStory", "id": "component-DyanmicActionableStory-7c289f0189446e6263b6ffed08cdac5c44a90b979ad1fbb38bb890ae71811743b2e4c7f4061cc9ecba6444da3ce572640149e346cfd4e635ec45a60740d65af5", "file": "src/notification/stories/dynamic-actionable.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "NotificationService", "type": "injectable" } ], "selector": "app-dynamic-actionable-story", "styleUrls": [], "styles": [], "template": "\n
\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "actionSubject", "defaultValue": "new Subject()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 14 } ], "methodsClass": [ { "name": "showNotification", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 17, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component } from \"@angular/core\";\nimport { Subject } from \"rxjs\";\nimport { NotificationService } from \"../\";\n\n@Component({\n\tselector: \"app-dynamic-actionable-story\",\n\ttemplate: `\n\t\t\n\t\t
\n\t`,\n\tproviders: [NotificationService]\n})\nexport class DyanmicActionableStory {\n\tactionSubject = new Subject();\n\tconstructor(protected notificationService: NotificationService) { }\n\n\tshowNotification() {\n\t\tthis.notificationService.showActionable({\n\t\t\ttype: \"info\",\n\t\t\ttitle: \"Actionable notification\",\n\t\t\tmessage: \"Sample info message\",\n\t\t\ttarget: \".notification-container\",\n\t\t\tactions: [\n\t\t\t\t{\n\t\t\t\t\ttext: \"Action\",\n\t\t\t\t\tclick: this.actionSubject\n\t\t\t\t}\n\t\t\t]\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "notificationService", "type": "NotificationService", "deprecated": false, "deprecationMessage": "" } ], "line": 14, "jsdoctags": [ { "name": "notificationService", "type": "NotificationService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [] }, { "name": "DynamicListComboBox", "id": "component-DynamicListComboBox-a884061eb02e30165efa134891662a9533806f1b8d5e759da5fc49006255d37e26ea777533920b08c54e3c79687bb29d10f6041c5dc2702d020109fb43781f49", "file": "src/combobox/stories/app-dynamic-list-combobox.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-dynamic-list-combobox", "styleUrls": [], "styles": [], "template": "\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "items", "defaultValue": "[\n\t\t{\n\t\t\tcontent: \"one\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"two\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"three\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"four\"\n\t\t}\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 15 } ], "methodsClass": [ { "name": "updateSelected", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 30, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, AfterViewInit } from \"@angular/core\";\n\n@Component({\n\tselector: \"app-dynamic-list-combobox\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class DynamicListComboBox implements AfterViewInit {\n\titems = [\n\t\t{\n\t\t\tcontent: \"one\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"two\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"three\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"four\"\n\t\t}\n\t];\n\n\tupdateSelected(event) {\n\t\tthis.items.forEach((item: any) => {\n\t\t\tif (event.some(selectedItem => selectedItem.content === item.content)) {\n\t\t\t\titem.selected = true;\n\t\t\t} else {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tconst newItems = JSON.parse(JSON.stringify(this.items));\n\t\t\tnewItems.push({ content: `New ${newItems.length}` });\n\t\t\tthis.items = newItems;\n\t\t}, 4000);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "AfterViewInit" ] }, { "name": "DynamicTableStory", "id": "component-DynamicTableStory-43dec1fee39d015661af87a2e0758230b3fe81f583b813b9295a920fa61c1f02e93d480424afab37673e46ee64fddb53093c74715a7b4269e5e642504d5fa75b", "file": "src/table/stories/app-custom-table.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-custom-table", "styleUrls": [], "styles": [], "template": "\n\t\n\t\n\n\n\n\t{{data.name}} {{data.surname}}\n\n\n\t{{data.name}}\n\n\n\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "isDataGrid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 63, "type": "boolean", "decorators": [] }, { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "line": 59, "type": "any", "decorators": [] }, { "name": "showSelectionColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 61, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 60, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 66, "type": "boolean", "decorators": [] }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 64, "type": "boolean", "decorators": [] }, { "name": "stickyHeader", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 65, "type": "boolean", "decorators": [] }, { "name": "striped", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 62, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "addColumn", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 112, "deprecated": false, "deprecationMessage": "" }, { "name": "addRow", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 107, "deprecated": false, "deprecationMessage": "" }, { "name": "customSort", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 95, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onRowClick", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 117, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "sort", "args": [ { "name": "model", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 99, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "model", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tTemplateRef,\n\tComponent,\n\tViewChild,\n\tInput,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\nimport { clone } from \"../../utils/index\";\n\nexport class CustomHeaderItem extends TableHeaderItem {\n\t// used for custom sorting\n\tcompare(one: TableItem, two: TableItem) {\n\t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n\t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n\t\tif (stringOne > stringTwo) {\n\t\t\treturn 1;\n\t\t} else if (stringOne < stringTwo) {\n\t\t\treturn -1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n}\n\n@Component({\n\tselector: \"app-custom-table\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t{{data.name}} {{data.surname}}\n\t\t\n\t\t\n\t\t\t{{data.name}}\n\t\t\n\n\t\t\n\t\t\n\t`\n})\nexport class DynamicTableStory implements AfterViewInit {\n\t@Input() model = new TableModel();\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() striped = true;\n\t@Input() isDataGrid = false;\n\t@Input() sortable = true;\n\t@Input() stickyHeader = false;\n\t@Input() skeleton = false;\n\n\t@ViewChild(\"customHeaderTemplate\")\n\tprotected customHeaderTemplate: TemplateRef;\n\n\t@ViewChild(\"customTableItemTemplate\")\n\tprotected customTableItemTemplate: TemplateRef;\n\n\tngAfterViewInit() {\n\t\tthis.model.data = [\n\t\t\t[new TableItem({ data: \"Name 1\" }), new TableItem({ data: { name: \"Lessy\", link: \"#\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: \"swer\" })],\n\t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: { name: \"Alice\", surname: \"Bob\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 7\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 8\" }), new TableItem({ data: \"twer\" })]\n\t\t];\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({ data: \"Very long title indeed\" }),\n\t\t\tnew CustomHeaderItem({\n\t\t\t\tdata: { name: \"Custom header\", link: \"#\" },\n\t\t\t\ttemplate: this.customHeaderTemplate,\n\t\t\t\tariaSortLabel: \"Custom header\"\n\t\t\t})\n\t\t];\n\t}\n\n\tcustomSort(index: number) {\n\t\tthis.sort(this.model, index);\n\t}\n\n\tsort(model, index: number) {\n\t\tif (model.header[index].sorted) {\n\t\t\t// if already sorted flip sorting direction\n\t\t\tmodel.header[index].ascending = model.header[index].descending;\n\t\t}\n\t\tmodel.sort(index);\n\t}\n\n\taddRow() {\n\t\tconst lastRowCopy = clone(this.model.row(this.model.data.length - 1));\n\t\tthis.model.addRow(lastRowCopy);\n\t}\n\n\taddColumn() {\n\t\tlet column = Array(this.model.data.length).fill(null).map(() => new TableItem({ data: `Column ${this.model.row(0).length}` }));\n\t\tthis.model.addColumn(column);\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "AfterViewInit" ] }, { "name": "ExpandableTile", "id": "component-ExpandableTile-4e3f205f1d28aed7b4db46864b34a465540c07c6010cf5057e03b8fc995cbcc2b274cec35bc6fe12509329d79b8660765740d78f8ffeaea1b931a941b7752077", "file": "src/tiles/expandable-tile.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-expandable-tile, ibm-expandable-tile", "styleUrls": [], "styles": [], "template": "\n\t\t\n\n\n\n\t\n\n\n\n\t\n\n\n\n\t
\n\t\t
\n\t\t\t\n\t\t
\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t
\n\t
\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "expanded", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the expanded state\n", "description": "

Controls the expanded state

\n", "line": 93, "type": "boolean", "decorators": [] }, { "name": "interactive", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the interactive state\n", "description": "

Controls the interactive state

\n", "line": 97, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style", "jsdoctags": [ { "pos": 2515, "end": 2619, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 2516, "end": 2526, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5 - Use cdsLayer directive instead\nSet to "light" to apply the light style

\n" } ], "line": 88, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "translations", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"EXPAND\": \"Expand\",\n\t\t\"COLLAPSE\": \"Collapse\",\n}\n```\n", "description": "

Expects an object that contains some or all of:

\nExample :
{\n        "EXPAND": "Expand",\n        "COLLAPSE": "Collapse",\n}
", "line": 108, "type": "ExpandableTileTranslations", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "collapse", "defaultValue": "this.i18n.getOverridable(\"TILES.COLLAPSE\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 120 }, { "name": "currentExpandedHeight", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 117 }, { "name": "expand", "defaultValue": "this.i18n.getOverridable(\"TILES.EXPAND\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 119 }, { "name": "tileContainer", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 114, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'container'" } ], "modifierKind": [ 170 ] }, { "name": "tileMaxHeight", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 116 } ], "methodsClass": [ { "name": "onClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 147, "deprecated": false, "deprecationMessage": "" }, { "name": "updateMaxHeight", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 139, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { TilesModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { TilesModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-tiles-expandable--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tElementRef,\n\tAfterViewInit,\n\tViewChild\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface ExpandableTileTranslations {\n\tEXPAND: string;\n\tCOLLAPSE: string;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TilesModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tiles-expandable--basic)\n */\n@Component({\n\tselector: \"cds-expandable-tile, ibm-expandable-tile\",\n\ttemplate: `\n\t\t\n\t\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`\n})\nexport class ExpandableTile implements AfterViewInit {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Controls the expanded state\n\t */\n\t@Input() expanded = false;\n\t/**\n\t * Controls the interactive state\n\t */\n\t@Input() interactive = false;\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"EXPAND\": \"Expand\",\n\t *\t\t\"COLLAPSE\": \"Collapse\",\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value: ExpandableTileTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"TILES\"), value);\n\t\tthis.expand.override(valueWithDefaults.EXPAND);\n\t\tthis.collapse.override(valueWithDefaults.COLLAPSE);\n\t}\n\n\t@ViewChild(\"container\") tileContainer: ElementRef;\n\n\ttileMaxHeight = 0;\n\tcurrentExpandedHeight = 0;\n\n\texpand = this.i18n.getOverridable(\"TILES.EXPAND\");\n\tcollapse = this.i18n.getOverridable(\"TILES.COLLAPSE\");\n\n\tconstructor(protected i18n: I18n, protected element: ElementRef) {}\n\n\tngAfterViewInit() {\n\t\tthis.updateMaxHeight();\n\t}\n\n\tget expandedHeight() {\n\t\tconst tile = this.element.nativeElement.querySelector(\".cds--tile\");\n\t\tconst tilePadding\n\t\t\t= parseInt(getComputedStyle(tile).paddingBottom, 10) + parseInt(getComputedStyle(tile).paddingTop, 10);\n\t\tconst expandedHeight = this.tileMaxHeight + tilePadding;\n\t\tif (!isNaN(expandedHeight)) {\n\t\t\tthis.currentExpandedHeight = expandedHeight;\n\t\t}\n\t\treturn this.currentExpandedHeight;\n\t}\n\n\tupdateMaxHeight() {\n\t\tif (this.expanded) {\n\t\t\tthis.tileMaxHeight = this.tileContainer.nativeElement.getBoundingClientRect().height;\n\t\t} else {\n\t\t\tthis.tileMaxHeight = this.element.nativeElement.querySelector(\".cds--tile-content__above-the-fold\").getBoundingClientRect().height;\n\t\t}\n\t}\n\n\tonClick() {\n\t\tthis.expanded = !this.expanded;\n\t\tthis.updateMaxHeight();\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" }, { "name": "element", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" } ], "line": 120, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "element", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AfterViewInit" ], "accessors": { "translations": { "name": "translations", "setSignature": { "name": "translations", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "ExpandableTileTranslations", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 108, "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"EXPAND\": \"Expand\",\n\t\t\"COLLAPSE\": \"Collapse\",\n}\n```\n", "description": "

Expects an object that contains some or all of:

\nExample :
{\n        "EXPAND": "Expand",\n        "COLLAPSE": "Collapse",\n}
", "jsdoctags": [ { "name": "value", "type": "ExpandableTileTranslations", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "expandedHeight": { "name": "expandedHeight", "getSignature": { "name": "expandedHeight", "type": "", "returnType": "", "line": 128 } } } }, { "name": "ExpansionTableStory", "id": "component-ExpansionTableStory-d20442e134f01e6097b5e23512d1691f788ea184e02b786f8cb22254ae63e7ec7a5b81956ec8f361838c63ed0c9eb64d182ad838d446aec119a04b09f74bd4d2", "file": "src/table/stories/app-expansion-table.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-expansion-table", "styleUrls": [], "styles": [], "template": "\n\t{{data.name}} {{data.surname}}\n\n\n\t{{data.name}}\n\n\n\n\n\n
\n\n\n\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "isDataGrid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 64, "type": "boolean", "decorators": [] }, { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "line": 60, "type": "any", "decorators": [] }, { "name": "showExpandAllToggle", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 68, "type": "boolean", "decorators": [] }, { "name": "showSelectionColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 62, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 61, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 67, "type": "boolean", "decorators": [] }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 65, "type": "boolean", "decorators": [] }, { "name": "stickyHeader", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 66, "type": "boolean", "decorators": [] }, { "name": "striped", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 63, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "customSort", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 121, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onRowClick", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 125, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "sort", "args": [ { "name": "model", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 129, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "model", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tTemplateRef,\n\tComponent,\n\tViewChild,\n\tInput,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\n\nclass CustomHeaderItem extends TableHeaderItem {\n\t// used for custom sorting\n\tcompare(one: TableItem, two: TableItem) {\n\t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n\t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n\t\tif (stringOne > stringTwo) {\n\t\t\treturn 1;\n\t\t} else if (stringOne < stringTwo) {\n\t\t\treturn -1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n}\n\n@Component({\n\tselector: \"app-expansion-table\",\n\ttemplate: `\n\t\t\n\t\t\t{{data.name}} {{data.surname}}\n\t\t\n\t\t\n\t\t\t{{data.name}}\n\t\t\n\n\t\t\n\t\t\n\n\t\t
\n\n\t\t\n\n\t\t\n\t`\n})\nexport class ExpansionTableStory implements AfterViewInit {\n\t@Input() model = new TableModel();\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() striped = true;\n\t@Input() isDataGrid = false;\n\t@Input() sortable = true;\n\t@Input() stickyHeader = false;\n\t@Input() skeleton = false;\n\t@Input() showExpandAllToggle = false;\n\n\t@ViewChild(\"customHeaderTemplate\")\n\tprotected customHeaderTemplate: TemplateRef;\n\t@ViewChild(\"customTableItemTemplate\")\n\tprotected customTableItemTemplate: TemplateRef;\n\n\tngAfterViewInit() {\n\t\tthis.model.data = [\n\t\t\t[\n\t\t\t\tnew TableItem({ data: \"Name 1\", expandedData: \"No template\" }),\n\t\t\t\tnew TableItem({ data: { name: \"Lessy\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t],\n\t\t\t[\n\t\t\t\tnew TableItem({\n\t\t\t\t\tdata: \"Name 3\",\n\t\t\t\t\texpandedData: { name: \"In\", surname: \"Template\" },\n\t\t\t\t\texpandedTemplate: this.customTableItemTemplate\n\t\t\t\t}),\n\t\t\t\tnew TableItem({ data: \"swer\" })\n\t\t\t],\n\t\t\t[\n\t\t\t\tnew TableItem({\n\t\t\t\t\tdata: \"Name 3.1\",\n\t\t\t\t\texpandedData: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tnew TableItem({ data: \"More names\", expandedData: \"No template\" }),\n\t\t\t\t\t\t\tnew TableItem({ data: { name: \"Morey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t\t\t],\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tnew TableItem({ data: \"Core names\", expandedData: \"No template\" }),\n\t\t\t\t\t\t\tnew TableItem({ data: { name: \"Corey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t\t\t]\n\t\t\t\t\t],\n\t\t\t\t\texpandAsTable: true\n\t\t\t\t}),\n\t\t\t\tnew TableItem({ data: \"swer\" })\n\t\t\t],\n\t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: { name: \"Alice\", surname: \"Bob\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 7\" }), new TableItem({data: \"twer\"})]\n\t\t];\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({ data: \"Very long title indeed\" }),\n\t\t\tnew CustomHeaderItem({\n\t\t\t\tdata: { name: \"Custom header\", link: \"#\" },\n\t\t\t\ttemplate: this.customHeaderTemplate\n\t\t\t})\n\t\t];\n\t}\n\n\tcustomSort(index: number) {\n\t\tthis.sort(this.model, index);\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n\n\tsort(model, index: number) {\n\t\tif (model.header[index].sorted) {\n\t\t\t// if already sorted flip sorting direction\n\t\t\tmodel.header[index].ascending = model.header[index].descending;\n\t\t}\n\t\tmodel.sort(index);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "AfterViewInit" ] }, { "name": "FileComponent", "id": "component-FileComponent-440115d0b6a1699c9f9ba3afba9480f35137ac947fc32748424cfe59df7a65bb98ffb9040c93924b474f4baeb50d2d3ec7e350407e2c17583347548f24dfcac6", "file": "src/file-uploader/file.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-file, ibm-file", "styleUrls": [], "styles": [], "template": "

\n\t\n\t\n\t{{ fileItem.file.name }}\n

\n\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\t\n\t\t\n\t\n\n\n\t
\n\t\t\n\t
\n\n\n\t\n\t\n\n\n\t
\n\t\t{{ fileItem.invalidTitle }}\n\t
\n\t

\n\t\t{{ fileItem.invalidText }}\n\t

\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "actionsTpl", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nA custom template for the available file actions\n", "description": "

A custom template for the available file actions

\n", "line": 99, "type": "TemplateRef<>", "decorators": [] }, { "name": "fileItem", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nA single `FileItem` from the set of `FileItem`s\n", "description": "

A single FileItem from the set of FileItems

\n", "line": 87, "type": "FileItem", "decorators": [] }, { "name": "nameTpl", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nA custom template for the file name\n", "description": "

A custom template for the file name

\n", "line": 94, "type": "TemplateRef<>", "decorators": [] }, { "name": "size", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "line": 89, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "translations", "defaultValue": "this.i18n.get().FILE_UPLOADER", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAccessible translations for the close and complete icons\n", "description": "

Accessible translations for the close and complete icons

\n", "line": 83, "type": "any", "decorators": [] } ], "outputsClass": [ { "name": "remove", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 101, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "selectedFile", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 103, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--file__selected-file'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 123, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--file__selected-file", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 103, "type": "boolean", "decorators": [] }, { "name": "class.cds--file__selected-file--invalid", "deprecated": false, "deprecationMessage": "", "line": 105, "type": "any", "decorators": [] }, { "name": "class.cds--file__selected-file--lg", "deprecated": false, "deprecationMessage": "", "line": 117, "type": "boolean", "decorators": [] }, { "name": "class.cds--file__selected-file--md", "deprecated": false, "deprecationMessage": "", "line": 113, "type": "boolean", "decorators": [] }, { "name": "class.cds--file__selected-file--sm", "deprecated": false, "deprecationMessage": "", "line": 109, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOnDestroy,\n\tOutput,\n\tTemplateRef\n} from \"@angular/core\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { FileItem } from \"./file-item.interface\";\n\n@Component({\n\tselector: \"cds-file, ibm-file\",\n\ttemplate: `\n\t\t

\n\t\t\t\n\t\t\t\n\t\t\t{{ fileItem.file.name }}\n\t\t

\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t
\n\t\t\t\t{{ fileItem.invalidTitle }}\n\t\t\t
\n\t\t\t

\n\t\t\t\t{{ fileItem.invalidText }}\n\t\t\t

\n\t\t\n\t`\n})\nexport class FileComponent implements OnDestroy {\n\t/**\n\t * Accessible translations for the close and complete icons\n\t */\n\t@Input() translations = this.i18n.get().FILE_UPLOADER;\n\t/**\n\t * A single `FileItem` from the set of `FileItem`s\n\t */\n\t@Input() fileItem: FileItem;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t/**\n\t * A custom template for the file name\n\t */\n\t@Input() nameTpl: TemplateRef;\n\n\t/**\n\t * A custom template for the available file actions\n\t */\n\t@Input() actionsTpl: TemplateRef;\n\n\t@Output() remove = new EventEmitter();\n\n\t@HostBinding(\"class.cds--file__selected-file\") selectedFile = true;\n\n\t@HostBinding(\"class.cds--file__selected-file--invalid\") get isInvalidText() {\n\t\treturn this.fileItem.invalidText;\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--sm\") get fileSizeSmall() {\n\t\treturn this.size === \"sm\";\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--md\") get fileSizeMedium() {\n\t\treturn this.size === \"md\";\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--lg\") get fileSizeLarge() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\tconstructor(protected i18n: I18n) {}\n\n\tpublic isTemplate(value: unknown): boolean {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tngOnDestroy() {\n\t\tthis.remove.emit();\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 119, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnDestroy" ], "accessors": { "isInvalidText": { "name": "isInvalidText", "getSignature": { "name": "isInvalidText", "type": "", "returnType": "", "line": 105 } }, "fileSizeSmall": { "name": "fileSizeSmall", "getSignature": { "name": "fileSizeSmall", "type": "", "returnType": "", "line": 109 } }, "fileSizeMedium": { "name": "fileSizeMedium", "getSignature": { "name": "fileSizeMedium", "type": "", "returnType": "", "line": 113 } }, "fileSizeLarge": { "name": "fileSizeLarge", "getSignature": { "name": "fileSizeLarge", "type": "", "returnType": "", "line": 117 } } } }, { "name": "FileUploader", "id": "component-FileUploader-7e6fd3268b7a391e56fb37cfbb6ae42c5997c8c342b99d54029ca64ffa9a5934a0b615e6b6a84450cacfef01da535e7a4cf3bfd45cf0e846958b9879e8aa4566", "file": "src/file-uploader/file-uploader.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: FileUploader, multi: true\n}" } ], "selector": "cds-file-uploader, ibm-file-uploader", "styleUrls": [], "styles": [], "template": "\n\t\n\t

{{description}}

\n\t
\n\t\t\n\t\t\t\n\t\t\t\t{{dropText}}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\t{{buttonText}}\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\n\n\n\n\t
\n\t
\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "accept", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the types of files that the input should be able to receive\n", "description": "

Specify the types of files that the input should be able to receive

\n", "line": 126, "type": "{}", "decorators": [] }, { "name": "buttonText", "defaultValue": "this.i18n.get().FILE_UPLOADER.OPEN", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAccessible text for the button that opens the upload window.\n\nDefaults to the `FILE_UPLOADER.OPEN` value from the i18n service\n", "description": "

Accessible text for the button that opens the upload window.

\n

Defaults to the FILE_UPLOADER.OPEN value from the i18n service

\n", "line": 110, "type": "any", "decorators": [] }, { "name": "buttonType", "defaultValue": "\"primary\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nType set for button\n", "description": "

Type set for button

\n", "line": 114, "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\"", "decorators": [] }, { "name": "description", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nText set to the description\n", "description": "

Text set to the description

\n", "line": 122, "type": "string", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to disable upload button\n", "description": "

Set to true to disable upload button

\n", "line": 168, "type": "boolean", "decorators": [] }, { "name": "drop", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to enable drag and drop.\n", "description": "

Set to true to enable drag and drop.

\n", "line": 148, "type": "boolean", "decorators": [] }, { "name": "dropText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the text shown in drag and drop box.\n", "description": "

Sets the text shown in drag and drop box.

\n", "line": 152, "type": "string | TemplateRef", "decorators": [] }, { "name": "fileActionsTpl", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCustom template used to render the file actions of uploaded files\n", "description": "

Custom template used to render the file actions of uploaded files

\n", "line": 176, "type": "TemplateRef<>", "decorators": [] }, { "name": "fileItemSize", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the size of the file items\n", "description": "

Sets the size of the file items

\n", "line": 144, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "fileNameTpl", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCustom template used to render the file name of uploaded files\n", "description": "

Custom template used to render the file name of uploaded files

\n", "line": 172, "type": "TemplateRef<>", "decorators": [] }, { "name": "files", "defaultValue": "new Set()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe list of files that have been submitted to be uploaded\n", "description": "

The list of files that have been submitted to be uploaded

\n", "line": 164, "type": "any", "decorators": [] }, { "name": "fileUploaderId", "defaultValue": "`file-uploader-${FileUploader.fileUploaderCount}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nProvides a unique id for the underlying `` node\n", "description": "

Provides a unique id for the underlying <input> node

\n", "line": 156, "type": "string", "decorators": [] }, { "name": "multiple", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to tell the component to only accept a single file on upload.\n\nDefaults to `true`. Accepts multiple files.\n", "description": "

Set to false to tell the component to only accept a single file on upload.

\n

Defaults to true. Accepts multiple files.

\n", "line": 132, "type": "boolean", "decorators": [] }, { "name": "size", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the size of the button.\n", "description": "

Sets the size of the button.

\n", "line": 140, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a loading file uploader.\n", "description": "

Set to true for a loading file uploader.

\n", "line": 136, "type": "boolean", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nText set to the title\n", "description": "

Text set to the title

\n", "line": 118, "type": "string", "decorators": [] } ], "outputsClass": [ { "name": "filesChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 178, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "dragOver", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Controls the state of the drag and drop file container

\n", "line": 183, "rawdescription": "\n\nControls the state of the drag and drop file container\n", "modifierKind": [ 125 ] }, { "name": "fileInput", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Maintains a reference to the view DOM element of the underlying node

\n", "line": 160, "rawdescription": "\n\nMaintains a reference to the view DOM element of the underlying node\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'fileInput'" } ], "modifierKind": [ 170 ] }, { "name": "fileUploaderCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

Counter used to create unique ids for file-uploader components

\n", "line": 104, "rawdescription": "\n\nCounter used to create unique ids for file-uploader components\n", "modifierKind": [ 126 ] } ], "methodsClass": [ { "name": "createFileItem", "args": [ { "name": "file", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "FileItem", "typeParameters": [], "line": 223, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "file", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 302, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onBlur", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 206, "deprecated": false, "deprecationMessage": "" }, { "name": "onDragLeave", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 256, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onDragOver", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 247, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onDrop", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 262, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onFilesAdded", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 233, "deprecated": false, "deprecationMessage": "" }, { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 315, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n", "description": "

Sets a method in order to propagate changes back to the form.

\n", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 309, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRegisters the injected function to control the touch use of the `FileUploader`.\n", "description": "

Registers the injected function to control the touch use of the FileUploader.

\n", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "removeFile", "args": [ { "name": "fileItem", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 289, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "fileItem", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "setDisabledState", "args": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 326, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the checkbox.\n\nex: `this.formGroup.get(\"myFileUploader\").disable();`\n\n", "description": "

ControlValueAccessor method to programmatically disable the checkbox.

\n

ex: this.formGroup.get("myFileUploader").disable();

\n", "jsdoctags": [ { "name": { "pos": 8198, "end": 8208, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "isDisabled" }, "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 8192, "end": 8197, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

true to disable the file uploader

\n" } ] }, { "name": "writeValue", "args": [ { "name": "value", "type": "Set", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 217, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nPropagates the injected `value`.\n", "description": "

Propagates the injected value.

\n", "jsdoctags": [ { "name": "value", "type": "Set", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { FileUploaderModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { FileUploaderModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-file-uploader--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tViewChild,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { FileItem } from \"./file-item.interface\";\n\nconst noop = () => { };\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { FileUploaderModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-file-uploader--basic)\n */\n@Component({\n\tselector: \"cds-file-uploader, ibm-file-uploader\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t

{{description}}

\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{{dropText}}\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{buttonText}}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\n\t\t\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: FileUploader,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class FileUploader implements ControlValueAccessor {\n\t/**\n\t * Counter used to create unique ids for file-uploader components\n\t */\n\tstatic fileUploaderCount = 0;\n\t/**\n\t * Accessible text for the button that opens the upload window.\n\t *\n\t * Defaults to the `FILE_UPLOADER.OPEN` value from the i18n service\n\t */\n\t@Input() buttonText = this.i18n.get().FILE_UPLOADER.OPEN;\n\t/**\n\t * Type set for button\n\t */\n\t@Input() buttonType: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" = \"primary\";\n\t/**\n\t * Text set to the title\n\t */\n\t@Input() title: string;\n\t/**\n\t * Text set to the description\n\t */\n\t@Input() description: string;\n\t/**\n\t * Specify the types of files that the input should be able to receive\n\t */\n\t@Input() accept = [];\n\t/**\n\t * Set to `false` to tell the component to only accept a single file on upload.\n\t *\n\t * Defaults to `true`. Accepts multiple files.\n\t */\n\t@Input() multiple = true;\n\t/**\n\t * Set to `true` for a loading file uploader.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Sets the size of the button.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\";\n\t/**\n\t * Sets the size of the file items\n\t */\n\t@Input() fileItemSize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\t/**\n\t * Set to `true` to enable drag and drop.\n\t */\n\t@Input() drop = false;\n\t/**\n\t * Sets the text shown in drag and drop box.\n\t */\n\t@Input() dropText: string | TemplateRef;\n\t/**\n\t * Provides a unique id for the underlying `` node\n\t */\n\t@Input() fileUploaderId = `file-uploader-${FileUploader.fileUploaderCount}`;\n\t/**\n\t * Maintains a reference to the view DOM element of the underlying node\n\t */\n\t@ViewChild(\"fileInput\") fileInput;\n\t/**\n\t * The list of files that have been submitted to be uploaded\n\t */\n\t@Input() files = new Set();\n\t/**\n\t * Set to `true` to disable upload button\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Custom template used to render the file name of uploaded files\n\t */\n\t@Input() fileNameTpl: TemplateRef;\n\t/**\n\t * Custom template used to render the file actions of uploaded files\n\t */\n\t@Input() fileActionsTpl: TemplateRef;\n\n\t@Output() filesChange = new EventEmitter();\n\n\t/**\n\t * Controls the state of the drag and drop file container\n\t */\n\tpublic dragOver = false;\n\n\tprotected onTouchedCallback: () => void = noop;\n\tprotected onChangeCallback: (_: Set) => void = noop;\n\n\tconstructor(protected i18n: I18n) {\n\t\tFileUploader.fileUploaderCount++;\n\t}\n\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel` and reactive forms.\n\t * Updates `this.files`.\n\t */\n\tget value(): Set {\n\t\treturn this.files;\n\t}\n\tset value(v: Set) {\n\t\tif (v !== this.files) {\n\t\t\tthis.files = v;\n\t\t\tthis.onChangeCallback(v);\n\t\t}\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tget fileList() {\n\t\treturn Array.from(this.fileInput.nativeElement.files);\n\t}\n\n\t/**\n\t * Propagates the injected `value`.\n\t */\n\twriteValue(value: Set) {\n\t\tif (value !== this.value) {\n\t\t\tthis.files = value;\n\t\t}\n\t}\n\n\tcreateFileItem(file): FileItem {\n\t\treturn {\n\t\t\tuploaded: false,\n\t\t\tstate: \"edit\",\n\t\t\tinvalid: false,\n\t\t\tinvalidText: \"\",\n\t\t\tfile: file\n\t\t};\n\t}\n\n\tonFilesAdded() {\n\t\tconst newFiles = new Set(this.files);\n\t\tif (!this.multiple) {\n\t\t\tnewFiles.clear();\n\t\t}\n\t\tfor (let file of this.fileList) {\n\t\t\tconst fileItem = this.createFileItem(file);\n\t\t\tnewFiles.add(fileItem);\n\t\t}\n\n\t\tthis.value = newFiles;\n\t\tthis.filesChange.emit(newFiles);\n\t}\n\n\tonDragOver(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tthis.dragOver = true;\n\t}\n\n\tonDragLeave(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tthis.dragOver = false;\n\t}\n\n\tonDrop(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst transferredFiles: Array = Array.from(event.dataTransfer.files);\n\t\tconst newFiles = new Set(this.files);\n\n\t\ttransferredFiles.filter(({ name, type }) => {\n\t\t\t// Get the file extension and add a \".\" to the beginning.\n\t\t\tconst fileExtension = name.split(\".\").pop().replace(/^/, \".\");\n\t\t\t// Check if the accept array contains the mime type or extension of the file.\n\t\t\treturn this.accept.includes(type) || this.accept.includes(fileExtension) || !this.accept.length;\n\t\t}).forEach(file => {\n\t\t\tif (!newFiles.size || this.multiple) {\n\t\t\t\tconst fileItem = this.createFileItem(file);\n\t\t\t\tnewFiles.add(fileItem);\n\t\t\t}\n\t\t});\n\n\t\tthis.value = newFiles;\n\t\tthis.filesChange.emit(newFiles);\n\t\tthis.dragOver = false;\n\t}\n\n\tremoveFile(fileItem) {\n\t\t// Deleting an item from this.files removes the component,\n\t\t// which triggers its ngOnDestroy(), which fires the (remove) event again.\n\t\t// So, (remove) may double-fire and we need to handle it here.\n\t\tif (this.files && this.files.has(fileItem)) {\n\t\t\tconst newFiles = new Set(this.files);\n\t\t\tnewFiles.delete(fileItem);\n\t\t\tthis.filesChange.emit(newFiles);\n\t\t\tthis.value = newFiles;\n\t\t}\n\t\tthis.fileInput.nativeElement.value = \"\";\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Registers the injected function to control the touch use of the `FileUploader`.\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the checkbox.\n\t *\n\t * ex: `this.formGroup.get(\"myFileUploader\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the file uploader\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 186, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "ControlValueAccessor" ], "accessors": { "value": { "name": "value", "setSignature": { "name": "value", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "Set", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 199, "jsdoctags": [ { "name": "v", "type": "Set", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "value", "type": "", "returnType": "Set", "line": 196, "rawdescription": "\n\nSpecifies the property to be used as the return value to `ngModel` and reactive forms.\nUpdates `this.files`.\n", "description": "

Specifies the property to be used as the return value to ngModel and reactive forms.\nUpdates this.files.

\n" } }, "fileList": { "name": "fileList", "getSignature": { "name": "fileList", "type": "", "returnType": "", "line": 210 } } } }, { "name": "FileUploaderStory", "id": "component-FileUploaderStory-720947bdd4529522dfa972ea0802eae6419fe6e1886d12707f16b04ac66fc74c4fecd250d274b0ac3f338dd9d0b3673eee4a734b4eeab27f0314edd950c464c1", "file": "src/file-uploader/stories/uploader.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-file-uploader", "styleUrls": [], "styles": [], "template": "\n\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "accept", "defaultValue": "[\".jpg\", \".png\"]", "deprecated": false, "deprecationMessage": "", "line": 32, "type": "{}", "decorators": [] }, { "name": "buttonText", "deprecated": false, "deprecationMessage": "", "line": 30, "type": "any", "decorators": [] }, { "name": "buttonType", "defaultValue": "\"primary\"", "deprecated": false, "deprecationMessage": "", "line": 31, "type": "string", "decorators": [] }, { "name": "description", "deprecated": false, "deprecationMessage": "", "line": 29, "type": "any", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 36, "type": "boolean", "decorators": [] }, { "name": "fileItemSize", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "line": 37, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "files", "defaultValue": "new Set()", "deprecated": false, "deprecationMessage": "", "line": 27, "type": "any", "decorators": [] }, { "name": "multiple", "deprecated": false, "deprecationMessage": "", "line": 33, "type": "any", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 35, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 34, "type": "boolean", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "line": 28, "type": "any", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "onUpload", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 41, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\n\nimport { FileItem } from \"../\";\n\n@Component({\n\tselector: \"app-file-uploader\",\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})\nexport class FileUploaderStory {\n\t@Input() files = new Set();\n\t@Input() title;\n\t@Input() description;\n\t@Input() buttonText;\n\t@Input() buttonType = \"primary\";\n\t@Input() accept = [\".jpg\", \".png\"];\n\t@Input() multiple;\n\t@Input() skeleton = false;\n\t@Input() size = \"md\";\n\t@Input() disabled = false;\n\t@Input() fileItemSize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\tprotected maxSize = 500000;\n\n\tonUpload() {\n\t\tthis.files.forEach(fileItem => {\n\t\t\tif (!fileItem.uploaded) {\n\t\t\t\tif (fileItem.file.size < this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"complete\";\n\t\t\t\t\t\tfileItem.uploaded = true;\n\t\t\t\t\t\tconsole.log(fileItem);\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\n\t\t\t\tif (fileItem.file.size > this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"edit\";\n\t\t\t\t\t\tfileItem.invalid = true;\n\t\t\t\t\t\tfileItem.invalidTitle = \"File size exceeds limit\";\n\t\t\t\t\t\tfileItem.invalidText = \"500kb max file size. Select a new file and try again.\";\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "FileUploaderWithCustomFileStory", "id": "component-FileUploaderWithCustomFileStory-0847324b80e43514c99f8d3049887fd5a8bab42e124aa234f95fb03e851093db1cfe78bce857276e36f3abc13f15e0f9488b20345b9ba859884e165ab9389f39", "file": "src/file-uploader/stories/uploader-custom-file.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-file-uploader-with-custom-file", "styleUrls": [], "styles": [], "template": "

Last viewed file: {{ lastViewedFile | json }}

\n

Last downloaded file: {{ lastDownloadedFile | json }}

\n\n\n 0\"\n\t(click)=\"onUpload()\"\n\tstyle=\"margin-top:20px\">\n\tUpload\n\n\n\n\t{{ fileItem.file.name }}\n\n\n\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "accept", "defaultValue": "[\".jpg\", \".png\"]", "deprecated": false, "deprecationMessage": "", "line": 66, "type": "{}", "decorators": [] }, { "name": "buttonText", "deprecated": false, "deprecationMessage": "", "line": 64, "type": "any", "decorators": [] }, { "name": "buttonType", "defaultValue": "\"primary\"", "deprecated": false, "deprecationMessage": "", "line": 65, "type": "string", "decorators": [] }, { "name": "description", "deprecated": false, "deprecationMessage": "", "line": 63, "type": "any", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 70, "type": "boolean", "decorators": [] }, { "name": "fileItemSize", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "line": 71, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "files", "defaultValue": "new Set()", "deprecated": false, "deprecationMessage": "", "line": 61, "type": "any", "decorators": [] }, { "name": "multiple", "deprecated": false, "deprecationMessage": "", "line": 67, "type": "any", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 69, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 68, "type": "boolean", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "line": 62, "type": "any", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "lastDownloadedFile", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "FileItem | null", "optional": false, "description": "", "line": 59 }, { "name": "lastViewedFile", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "FileItem | null", "optional": false, "description": "", "line": 58 } ], "methodsClass": [ { "name": "onDownloadClick", "args": [ { "name": "file", "type": "FileItem", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 79, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "file", "type": "FileItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onUpload", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 83, "deprecated": false, "deprecationMessage": "" }, { "name": "onViewClick", "args": [ { "name": "file", "type": "FileItem", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 75, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "file", "type": "FileItem", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\n\nimport { FileItem } from \"../\";\n\n@Component({\n\tselector: \"app-file-uploader-with-custom-file\",\n\ttemplate: `\n\t\t

Last viewed file: {{ lastViewedFile | json }}

\n\t\t

Last downloaded file: {{ lastDownloadedFile | json }}

\n\t\t\n\t\t\n\t\t 0\"\n\t\t\t(click)=\"onUpload()\"\n\t\t\tstyle=\"margin-top:20px\">\n\t\t\tUpload\n\t\t\n\n\t\t\n\t\t\t{{ fileItem.file.name }}\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class FileUploaderWithCustomFileStory {\n\tlastViewedFile: FileItem | null = null;\n\tlastDownloadedFile: FileItem | null = null;\n\n\t@Input() files = new Set();\n\t@Input() title;\n\t@Input() description;\n\t@Input() buttonText;\n\t@Input() buttonType = \"primary\";\n\t@Input() accept = [\".jpg\", \".png\"];\n\t@Input() multiple;\n\t@Input() skeleton = false;\n\t@Input() size = \"md\";\n\t@Input() disabled = false;\n\t@Input() fileItemSize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\tprotected maxSize = 500000;\n\n\tonViewClick(file: FileItem) {\n\t\tthis.lastViewedFile = file;\n\t}\n\n\tonDownloadClick(file: FileItem) {\n\t\tthis.lastDownloadedFile = file;\n\t}\n\n\tonUpload() {\n\t\tthis.files.forEach((fileItem) => {\n\t\t\tif (!fileItem.uploaded) {\n\t\t\t\tif (fileItem.file.size < this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"complete\";\n\t\t\t\t\t\tfileItem.uploaded = true;\n\t\t\t\t\t\tconsole.log(fileItem);\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\n\t\t\t\tif (fileItem.file.size > this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"edit\";\n\t\t\t\t\t\tfileItem.invalid = true;\n\t\t\t\t\t\tfileItem.invalidTitle = \"File size exceeds limit\";\n\t\t\t\t\t\tfileItem.invalidText =\n\t\t\t\t\t\t\t\"500kb max file size. Select a new file and try again.\";\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "FilterByFunctionOverrideStory", "id": "component-FilterByFunctionOverrideStory-527943cfdc873aa7a452dfc8fc245cdb254ca8392c5dac30f3a8bd9002af195091c9afd6018c5452c900c519f74c832dd643558f3644081047d9f7cb12a1123c", "file": "src/table/stories/app-function-override-filter-table.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-function-override-filter-table", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t

Filter table

\n\t\t

\n\t\t\tUse the toolbar's search functionality to filter node names\n\t\t\tor click the filter icon to filter country names\n\t\t

\n\t\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n\t\n\t\t\n\t\n\n\n\n\t
\n\t\t
Countries shown
\n\t\t\n\t\t\tUS\n\t\t\n\t\t\n\t\t\tFrance\n\t\t\n\t\t\n\t\t\tArgentina\n\t\t\n\t\t\n\t\t\tJapan\n\t\t\n\t
\n\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "enableSingleSelect", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 90, "type": "boolean", "decorators": [] }, { "name": "isDataGrid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 92, "type": "boolean", "decorators": [] }, { "name": "noData", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 93, "type": "boolean", "decorators": [] }, { "name": "showSelectionColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 89, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 88, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 95, "type": "boolean", "decorators": [] }, { "name": "stickyHeader", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 94, "type": "boolean", "decorators": [] }, { "name": "striped", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 91, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "dataset", "defaultValue": "[\n\t\t[\n\t\t\tnew TableItem({ data: \"800\" }),\n\t\t\tnew TableItem({ data: \"East Sadye\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"500\" }),\n\t\t\tnew TableItem({ data: \"Lueilwitzview\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"120\" }),\n\t\t\tnew TableItem({ data: \"East Arcelyside\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"France\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"119\" }),\n\t\t\tnew TableItem({ data: \"West Dylan\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Argentina\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"54\" }),\n\t\t\tnew TableItem({ data: \"Brandynberg\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Japan\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"15\" }),\n\t\t\tnew TableItem({ data: \"Stoltenbergport\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Canada\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"12\" }),\n\t\t\tnew TableItem({ data: \"Rheabury\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t]\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 101 }, { "name": "displayedCountries", "defaultValue": "[\"US\", \"France\", \"Argentina\", \"Japan\"]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 98 }, { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 97 }, { "name": "overflowOnClick", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 164 }, { "name": "searchValue", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 99 } ], "methodsClass": [ { "name": "filterCountries", "args": [ { "name": "countryName", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "checked", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 156, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "countryName", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "checked", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "filterNodeNames", "args": [ { "name": "searchString", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 152, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "searchString", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOnInit,\n\tInput\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\nimport { TableItem } from \"../table-item.class\";\n\nimport { IconService } from \"../../icon/icon.service\";\nimport Add16 from \"@carbon/icons/es/add/16\";\nimport Filter16 from \"@carbon/icons/es/filter/16\";\n\n@Component({\n\tselector: \"app-function-override-filter-table\",\n\ttemplate: `\n\t\n\t\t\n\t\t\t

Filter table

\n\t\t\t

\n\t\t\t\tUse the toolbar's search functionality to filter node names\n\t\t\t\tor click the filter icon to filter country names\n\t\t\t

\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\n\n\t\n\t\t
\n\t\t\t
Countries shown
\n\t\t\t\n\t\t\t\tUS\n\t\t\t\n\t\t\t\n\t\t\t\tFrance\n\t\t\t\n\t\t\t\n\t\t\t\tArgentina\n\t\t\t\n\t\t\t\n\t\t\t\tJapan\n\t\t\t\n\t\t
\n\t\n\t`\n})\nexport class FilterByFunctionOverrideStory implements OnInit {\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() enableSingleSelect = false;\n\t@Input() striped = true;\n\t@Input() isDataGrid = false;\n\t@Input() noData = false;\n\t@Input() stickyHeader = false;\n\t@Input() skeleton = false;\n\n\tmodel = new TableModel();\n\tdisplayedCountries = [\"US\", \"France\", \"Argentina\", \"Japan\"];\n\tsearchValue = \"\";\n\n\tdataset = [\n\t\t[\n\t\t\tnew TableItem({ data: \"800\" }),\n\t\t\tnew TableItem({ data: \"East Sadye\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"500\" }),\n\t\t\tnew TableItem({ data: \"Lueilwitzview\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"120\" }),\n\t\t\tnew TableItem({ data: \"East Arcelyside\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"France\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"119\" }),\n\t\t\tnew TableItem({ data: \"West Dylan\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Argentina\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"54\" }),\n\t\t\tnew TableItem({ data: \"Brandynberg\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Japan\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"15\" }),\n\t\t\tnew TableItem({ data: \"Stoltenbergport\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Canada\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"12\" }),\n\t\t\tnew TableItem({ data: \"Rheabury\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t]\n\t];\n\n\tconstructor(protected iconService: IconService) {\n\t\tthis.iconService.registerAll([\n\t\t\tAdd16, Filter16\n\t\t]);\n\t}\n\n\tfilterNodeNames(searchString: string) {\n\t\tthis.searchValue = searchString;\n\t}\n\n\tfilterCountries(countryName: string, checked: boolean) {\n\t\tif (checked) {\n\t\t\tthis.displayedCountries.push(countryName);\n\t\t} else {\n\t\t\tthis.displayedCountries.splice(this.displayedCountries.indexOf(countryName), 1);\n\t\t}\n\t}\n\n\toverflowOnClick = (event: any) => {\n\t\tevent.stopPropagation();\n\t}\n\n\tngOnInit() {\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Node ID\"\n\t\t\t}),\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Node name\"\n\t\t\t}),\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Node type\"\n\t\t\t}),\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Country\"\n\t\t\t})\n\t\t];\n\n\t\tthis.model.data = this.dataset;\n\n\t\tthis.model.isRowFiltered = (index: number) => {\n\t\t\tconst nodeName = this.model.row(index)[1].data;\n\t\t\tconst countryName = this.model.row(index)[3].data;\n\t\t\treturn !nodeName.toLowerCase().includes(this.searchValue.toLowerCase())\n\t\t\t\t|| !this.displayedCountries.includes(countryName);\n\t\t};\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "iconService", "type": "IconService", "deprecated": false, "deprecationMessage": "" } ], "line": 144, "jsdoctags": [ { "name": "iconService", "type": "IconService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit" ] }, { "name": "FilterWithModelStory", "id": "component-FilterWithModelStory-9d2bf3889bb6092ff6ba03b57ca96294731872d6b95c25e4cd31d4e43780da8c16a859b5d514cf0469f1407526e9e6a1538536d6d0764fcd501de1c29b824464", "file": "src/table/stories/app-model-filter-table.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-model-filter-table", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t

Filter table

\n\t\t

\n\t\t\tUse the toolbar's search functionality to filter node names\n\t\t\tor click the filter icon to filter country names\n\t\t

\n\t\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n\t\n\t\t\n\t\n\n\n\n\t
\n\t\t
Countries shown
\n\t\t\n\t\t\tUS\n\t\t\n\t\t\n\t\t\tFrance\n\t\t\n\t\t\n\t\t\tArgentina\n\t\t\n\t\t\n\t\t\tJapan\n\t\t\n\t
\n\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "enableSingleSelect", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 90, "type": "boolean", "decorators": [] }, { "name": "isDataGrid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 92, "type": "boolean", "decorators": [] }, { "name": "noData", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 93, "type": "boolean", "decorators": [] }, { "name": "showSelectionColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 89, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 88, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 95, "type": "boolean", "decorators": [] }, { "name": "stickyHeader", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 94, "type": "boolean", "decorators": [] }, { "name": "striped", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 91, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "dataset", "defaultValue": "[\n\t\t[\n\t\t\tnew TableItem({ data: \"800\" }),\n\t\t\tnew TableItem({ data: \"East Sadye\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"500\" }),\n\t\t\tnew TableItem({ data: \"Lueilwitzview\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"120\" }),\n\t\t\tnew TableItem({ data: \"East Arcelyside\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"France\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"119\" }),\n\t\t\tnew TableItem({ data: \"West Dylan\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Argentina\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"54\" }),\n\t\t\tnew TableItem({ data: \"Brandynberg\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Japan\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"15\" }),\n\t\t\tnew TableItem({ data: \"Stoltenbergport\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Canada\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"12\" }),\n\t\t\tnew TableItem({ data: \"Rheabury\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t]\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 100 }, { "name": "displayedCountries", "defaultValue": "[\"US\", \"France\", \"Argentina\", \"Japan\"]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 98 }, { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 97 }, { "name": "overflowOnClick", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 166 } ], "methodsClass": [ { "name": "filterCountries", "args": [ { "name": "countryName", "type": "string", "deprecated": false, "deprecationMessage": "" }, { "name": "checked", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 156, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "countryName", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "checked", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "filterNodeNames", "args": [ { "name": "searchString", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 151, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "searchString", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOnInit,\n\tInput\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\nimport { TableItem } from \"../table-item.class\";\n\nimport { IconService } from \"../../icon/icon.service\";\nimport Add16 from \"@carbon/icons/es/add/16\";\nimport Filter16 from \"@carbon/icons/es/filter/16\";\n\n@Component({\n\tselector: \"app-model-filter-table\",\n\ttemplate: `\n\t\n\t\t\n\t\t\t

Filter table

\n\t\t\t

\n\t\t\t\tUse the toolbar's search functionality to filter node names\n\t\t\t\tor click the filter icon to filter country names\n\t\t\t

\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\n\n\t\n\t\t
\n\t\t\t
Countries shown
\n\t\t\t\n\t\t\t\tUS\n\t\t\t\n\t\t\t\n\t\t\t\tFrance\n\t\t\t\n\t\t\t\n\t\t\t\tArgentina\n\t\t\t\n\t\t\t\n\t\t\t\tJapan\n\t\t\t\n\t\t
\n\t\n\t`\n})\nexport class FilterWithModelStory implements OnInit {\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() enableSingleSelect = false;\n\t@Input() striped = true;\n\t@Input() isDataGrid = false;\n\t@Input() noData = false;\n\t@Input() stickyHeader = false;\n\t@Input() skeleton = false;\n\n\tmodel = new TableModel();\n\tdisplayedCountries = [\"US\", \"France\", \"Argentina\", \"Japan\"];\n\n\tdataset = [\n\t\t[\n\t\t\tnew TableItem({ data: \"800\" }),\n\t\t\tnew TableItem({ data: \"East Sadye\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"500\" }),\n\t\t\tnew TableItem({ data: \"Lueilwitzview\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"120\" }),\n\t\t\tnew TableItem({ data: \"East Arcelyside\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"France\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"119\" }),\n\t\t\tnew TableItem({ data: \"West Dylan\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Argentina\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"54\" }),\n\t\t\tnew TableItem({ data: \"Brandynberg\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Japan\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"15\" }),\n\t\t\tnew TableItem({ data: \"Stoltenbergport\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Canada\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"12\" }),\n\t\t\tnew TableItem({ data: \"Rheabury\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t]\n\t];\n\n\tconstructor(protected iconService: IconService) {\n\t\tthis.iconService.registerAll([\n\t\t\tAdd16, Filter16\n\t\t]);\n\t}\n\n\tfilterNodeNames(searchString: string) {\n\t\tthis.model.data = this.dataset\n\t\t\t.filter((row: TableItem[]) => row[1].data.toLowerCase().includes(searchString.toLowerCase()));\n\t}\n\n\tfilterCountries(countryName: string, checked: boolean) {\n\t\tif (checked) {\n\t\t\tthis.displayedCountries.push(countryName);\n\t\t} else {\n\t\t\tthis.displayedCountries.splice(this.displayedCountries.indexOf(countryName), 1);\n\t\t}\n\n\t\tthis.model.data = this.dataset.filter((row: TableItem[]) => this.displayedCountries.includes(row[3].data));\n\t}\n\n\toverflowOnClick = (event: any) => {\n\t\tevent.stopPropagation();\n\t}\n\n\tngOnInit() {\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Node ID\"\n\t\t\t}),\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Node name\"\n\t\t\t}),\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Node type\"\n\t\t\t}),\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Country\"\n\t\t\t})\n\t\t];\n\n\t\tthis.model.data = this.dataset;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "iconService", "type": "IconService", "deprecated": false, "deprecationMessage": "" } ], "line": 143, "jsdoctags": [ { "name": "iconService", "type": "IconService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit" ] }, { "name": "FooComponent", "id": "component-FooComponent-7d0a371dfa3175a6fc9408d00f2bf8b177e529c127b3b7f88da2ceee09fbd4355672843dcfcebbdfdb999dd581e6456ced88698558dd85ff9d1167d53814be23", "file": "src/ui-shell/stories/header-fluid.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-foo", "styleUrls": [], "styles": [], "template": "

foo

", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\nimport { NavigationItem } from \"../\";\n\n@Component({\n\tselector: \"app-bar\",\n\ttemplate: \"

bar

\"\n})\nexport class BarComponent { }\n\n@Component({\n\tselector: \"app-foo\",\n\ttemplate: \"

foo

\"\n})\nexport class FooComponent { }\n\n@Component({\n\tselector: \"app-header-fluid\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class HeaderFluidComponent {\n\t@Input() headerItems: NavigationItem[];\n\thasHamburger = false;\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "Hamburger", "id": "component-Hamburger-ee42e761f8e5ddaa77ba0ce22087ef43711640c0f5c17eb6e91d38d90844446256c784045c38a10b865260759eb8e19a21c2c41b2325ff77d606fe6b6350b9b1", "file": "src/ui-shell/header/hamburger.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-hamburger, ibm-hamburger", "styleUrls": [], "styles": [], "template": "\n\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "active", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the active/selected state for the `Hamburger` menu.\n", "description": "

Controls the active/selected state for the Hamburger menu.

\n", "line": 31, "type": "boolean", "decorators": [] }, { "name": "activeTitle", "defaultValue": "this.i18n.get().UI_SHELL.HEADER.CLOSE_MENU", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet the title text when the hamburger is active\n", "description": "

Set the title text when the hamburger is active

\n", "line": 36, "type": "any", "decorators": [] }, { "name": "inactiveTitle", "defaultValue": "this.i18n.get().UI_SHELL.HEADER.OPEN_MENU", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet the title text when the hamburger is inactive\n", "description": "

Set the title text when the hamburger is inactive

\n", "line": 41, "type": "any", "decorators": [] } ], "outputsClass": [ { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n`EventEmitter` to notify parent components of menu click events.\n", "description": "

EventEmitter to notify parent components of menu click events.

\n", "line": 46, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "i18n", "deprecated": false, "deprecationMessage": "", "type": "I18n", "optional": false, "description": "", "line": 48, "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "doClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 53, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmit the Hamburger click event upwards.\n", "description": "

Emit the Hamburger click event upwards.

\n", "modifierKind": [ 125 ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

A toggle for the side navigation

\n", "rawdescription": "\n\nA toggle for the side navigation\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOutput,\n\tEventEmitter,\n\tInput\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * A toggle for the side navigation\n */\n@Component({\n\tselector: \"cds-hamburger, ibm-hamburger\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class Hamburger {\n\t/**\n\t * Controls the active/selected state for the `Hamburger` menu.\n\t */\n\t@Input() active = false;\n\n\t/**\n\t * Set the title text when the hamburger is active\n\t */\n\t@Input() activeTitle = this.i18n.get().UI_SHELL.HEADER.CLOSE_MENU;\n\n\t/**\n\t * Set the title text when the hamburger is inactive\n\t */\n\t@Input() inactiveTitle = this.i18n.get().UI_SHELL.HEADER.OPEN_MENU;\n\n\t/**\n\t * `EventEmitter` to notify parent components of menu click events.\n\t */\n\t@Output() selected: EventEmitter = new EventEmitter();\n\n\tconstructor(public i18n: I18n) {}\n\n\t/**\n\t * Emit the Hamburger click event upwards.\n\t */\n\tpublic doClick() {\n\t\tthis.selected.emit(this.active);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 46, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [] }, { "name": "Header", "id": "component-Header-930a61521b927a898b9ca6f9dce213bc8ec54e57c3feb940a8bdb589b75370b852704027839a2361b8ccadecc20f7fe213d26ecadc872d4841b6df7dde919842", "file": "src/ui-shell/header/header.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-header, ibm-header", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t{{ i18n.get(\"UI_SHELL.SKIP_TO\") | async }}\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\t{{brand}} \n\t\t\t{{name}}\n\t\t\n\t\t\n\t\t\t{{brand}} \n\t\t\t{{name}}\n\t\t\n\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "brand", "defaultValue": "\"IBM\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTop level branding. Defaults to \"IBM\"\n", "description": "

Top level branding. Defaults to "IBM"

\n", "line": 71, "type": "string | TemplateRef", "decorators": [] }, { "name": "href", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional link for the header\n", "description": "

Optional link for the header

\n", "line": 75, "type": "string", "decorators": [] }, { "name": "name", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nLabel that shows to the right of the `brand` text. Generally a product name.\n", "description": "

Label that shows to the right of the brand text. Generally a product name.

\n", "line": 67, "type": "string", "decorators": [] }, { "name": "route", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nArray of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate\n", "description": "

Array of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate

\n", "line": 87, "type": "any[]", "decorators": [] }, { "name": "routeExtras", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRouter options. Used in conjunction with `route`\nSee: https://angular.io/api/router/Router#navigate\n", "description": "

Router options. Used in conjunction with route\nSee: https://angular.io/api/router/Router#navigate

\n", "line": 93, "type": "any", "decorators": [] }, { "name": "skipTo", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nID in the main body content to jump to. Used by keyboard and screen reader users to skip the header content.\n", "description": "

ID in the main body content to jump to. Used by keyboard and screen reader users to skip the header content.

\n", "line": 63, "type": "string", "decorators": [] }, { "name": "useRouter", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUse the routerLink attribute on tag for navigation instead of using event handlers\n", "description": "

Use the routerLink attribute on tag for navigation instead of using event handlers

\n", "line": 98, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "navigation", "defaultValue": "new EventEmitter>()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the navigation status promise when the link is activated\n", "description": "

Emits the navigation status promise when the link is activated

\n", "line": 103, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "i18n", "deprecated": false, "deprecationMessage": "", "type": "I18n", "optional": false, "description": "", "line": 108, "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 112, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "navigate", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 116, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

A fixed header and navigation.\nHeader may contain a Hamburger menu to toggle the side navigation, navigation actions,\nand global actions (generally in the form of Panels).

\n

See demo

\n", "rawdescription": "\n\nA fixed header and navigation.\nHeader may contain a Hamburger menu to toggle the side navigation, navigation actions,\nand global actions (generally in the form of `Panel`s).\n\n[See demo](../../?path=/story/components-ui-shell--header)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOptional,\n\tOutput,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * A fixed header and navigation.\n * Header may contain a Hamburger menu to toggle the side navigation, navigation actions,\n * and global actions (generally in the form of `Panel`s).\n *\n * [See demo](../../?path=/story/components-ui-shell--header)\n */\n@Component({\n\tselector: \"cds-header, ibm-header\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t{{ i18n.get(\"UI_SHELL.SKIP_TO\") | async }}\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{brand}} \n\t\t\t\t\t{{name}}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{brand}} \n\t\t\t\t\t{{name}}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class Header {\n\t/**\n\t * ID in the main body content to jump to. Used by keyboard and screen reader users to skip the header content.\n\t */\n\t@Input() skipTo: string;\n\t/**\n\t * Label that shows to the right of the `brand` text. Generally a product name.\n\t */\n\t@Input() name: string;\n\t/**\n\t * Top level branding. Defaults to \"IBM\"\n\t */\n\t@Input() brand: string | TemplateRef = \"IBM\";\n\t/**\n\t * Optional link for the header\n\t */\n\t@Input() set href(v: string) {\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Use the routerLink attribute on tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = false;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter>();\n\n\tprotected _href = \"#\";\n\n\tconstructor(\n\t\tpublic i18n: I18n,\n\t\tprotected domSanitizer: DomSanitizer,\n\t\t@Optional() protected router: Router) { }\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tnavigate(event) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t} else if (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" }, { "name": "domSanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "" }, { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "" } ], "line": 105, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "domSanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "href": { "name": "href", "setSignature": { "name": "href", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 75, "rawdescription": "\n\nOptional link for the header\n", "description": "

Optional link for the header

\n", "jsdoctags": [ { "name": "v", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "href", "type": "", "returnType": "", "line": 79 } } } }, { "name": "HeaderAction", "id": "component-HeaderAction-7af7e604a3f4f2a4bfa072a5b8ed76d5aad28b0183d07398d3aa83527fc9f19bb62419676fb6868b1bd10684218b4f5598d500f5ad6623c42ca229093c610b45", "file": "src/ui-shell/header/header-action.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-header-action, ibm-header-action", "styleUrls": [], "styles": [], "template": "\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "active", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nToggles the active state. May be used to toggle a `Panel`s active state.\n", "description": "

Toggles the active state. May be used to toggle a Panels active state.

\n", "line": 49, "type": "boolean", "decorators": [] }, { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the aria label on the nav element.\n", "description": "

Sets the aria label on the nav element.

\n", "line": 45, "type": "string", "decorators": [] }, { "name": "description", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTooltip content to show on mouseenter\n", "description": "

Tooltip content to show on mouseenter

\n", "line": 41, "type": "string | TemplateRef", "decorators": [] }, { "name": "align", "defaultValue": "\"bottom\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet popover alignment\n", "description": "

Set popover alignment

\n", "line": 32, "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "autoAlign", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n**Experimental**: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once\n", "description": "

Experimental: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once

\n", "line": 40, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "caret", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide caret\n", "description": "

Set to false to hide caret

\n", "line": 16, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "dropShadow", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide shadow\n", "description": "

Set to false to hide shadow

\n", "line": 20, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "enterDelayMs", "defaultValue": "100", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet delay before tooltip is shown\n", "description": "

Set delay before tooltip is shown

\n", "line": 44, "type": "number", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "highContrast", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to enable high contrast\n", "description": "

Set to true to enable high contrast

\n", "line": 24, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "isOpen", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to have the popover open by default\n", "description": "

Set to true to have the popover open by default

\n", "line": 28, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "leaveDelayMs", "defaultValue": "300", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet delay when tooltip disappears\n", "description": "

Set delay when tooltip disappears

\n", "line": 48, "type": "number", "decorators": [], "inheritance": { "file": "BaseIconButton" } } ], "outputsClass": [ { "name": "activeChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n\"Change\" emitter to allow double binding to the `active` Input.\n", "description": "

"Change" emitter to allow double binding to the active Input.

\n", "line": 53, "type": "EventEmitter" }, { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits when the action has been clicked.\n", "description": "

Emits when the action has been clicked.

\n", "line": 57, "type": "EventEmitter" } ], "propertiesClass": [], "methodsClass": [ { "name": "onClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 59, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Contained by HeaderGlobal. Generally used to trigger Panels

\n", "rawdescription": "\n\nContained by `HeaderGlobal`. Generally used to trigger `Panel`s\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\n/**\n * Contained by `HeaderGlobal`. Generally used to trigger `Panel`s\n */\n@Component({\n\tselector: \"cds-header-action, ibm-header-action\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class HeaderAction extends BaseIconButton {\n\t/**\n\t * Tooltip content to show on mouseenter\n\t */\n\t@Input() description: string | TemplateRef;\n\t/**\n\t * Sets the aria label on the nav element.\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Toggles the active state. May be used to toggle a `Panel`s active state.\n\t */\n\t@Input() active = false;\n\t/**\n\t * \"Change\" emitter to allow double binding to the `active` Input.\n\t */\n\t@Output() activeChange = new EventEmitter();\n\t/**\n\t * Emits when the action has been clicked.\n\t */\n\t@Output() selected = new EventEmitter();\n\n\tonClick() {\n\t\tthis.active = !this.active;\n\t\tthis.selected.emit(this.active);\n\t\tthis.activeChange.emit(this.active);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [ "BaseIconButton" ] }, { "name": "HeaderFluidComponent", "id": "component-HeaderFluidComponent-7d0a371dfa3175a6fc9408d00f2bf8b177e529c127b3b7f88da2ceee09fbd4355672843dcfcebbdfdb999dd581e6456ced88698558dd85ff9d1167d53814be23", "file": "src/ui-shell/stories/header-fluid.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-header-fluid", "styleUrls": [], "styles": [], "template": "\n\t\n\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "headerItems", "deprecated": false, "deprecationMessage": "", "line": 32, "type": "NavigationItem[]", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "hasHamburger", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 33 } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\nimport { NavigationItem } from \"../\";\n\n@Component({\n\tselector: \"app-bar\",\n\ttemplate: \"

bar

\"\n})\nexport class BarComponent { }\n\n@Component({\n\tselector: \"app-foo\",\n\ttemplate: \"

foo

\"\n})\nexport class FooComponent { }\n\n@Component({\n\tselector: \"app-header-fluid\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class HeaderFluidComponent {\n\t@Input() headerItems: NavigationItem[];\n\thasHamburger = false;\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "HeaderGlobal", "id": "component-HeaderGlobal-a13532bc504dd3f683e1c283ef13f8f7dbfe18fbe3a8b2b9b65e53d7ccb741f2015237c390c59bfaaa644961541369c604f0033f83280075e048e1e97e73abe8", "file": "src/ui-shell/header/header-global.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-header-global, ibm-header-global", "styleUrls": [], "styles": [], "template": "\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "hostClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 13, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--header__global'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--header__global", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 13, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

Container for HeaderActions.

\n", "rawdescription": "\n\nContainer for `HeaderAction`s.\n", "type": "component", "sourceCode": "import { Component, HostBinding } from \"@angular/core\";\n\n/**\n * Container for `HeaderAction`s.\n */\n@Component({\n\tselector: \"cds-header-global, ibm-header-global\",\n\ttemplate: `\n\t\t\n\t`\n})\nexport class HeaderGlobal {\n\t@HostBinding(\"class.cds--header__global\") hostClass = true;\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "HeaderItem", "id": "component-HeaderItem-44010c71dbe58c381f9997dee0ad853ba966c3cbc97ba65a2443f008841737c0263b098a46d4c7e258c59c3303e202d3f8dba5bfe97a9e351b5dca071d27c359", "file": "src/ui-shell/header/header-item.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-header-item, ibm-header-item", "styleUrls": [], "styles": [ "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t" ], "template": "\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "activeLinkClass", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nString or array of string class names to apply when active\n", "description": "

String or array of string class names to apply when active

\n", "line": 69, "type": "string | string[]", "decorators": [] }, { "name": "href", "deprecated": false, "deprecationMessage": "", "line": 49, "type": "string", "decorators": [] }, { "name": "isCurrentPage", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nApplies selected styles to the item if a user sets this to true.\n", "description": "

Applies selected styles to the item if a user sets this to true.

\n", "line": 74, "type": "boolean", "decorators": [] }, { "name": "route", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nArray of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate\n", "description": "

Array of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate

\n", "line": 80, "type": "any[]", "decorators": [] }, { "name": "routeExtras", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRouter options. Used in conjunction with `route`\nSee: https://angular.io/api/router/Router#navigate\n", "description": "

Router options. Used in conjunction with route\nSee: https://angular.io/api/router/Router#navigate

\n", "line": 86, "type": "any", "decorators": [] }, { "name": "useRouter", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUse the routerLink attribute on tag for navigation instead of using event handlers\n", "description": "

Use the routerLink attribute on tag for navigation instead of using event handlers

\n", "line": 64, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "navigation", "defaultValue": "new EventEmitter>()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the navigation status promise when the link is activated\n", "description": "

Emits the navigation status promise when the link is activated

\n", "line": 91, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 48, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "navigate", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 97, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "line": 48, "type": "string", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

Individual item in the header. May be used a direct child of HeaderNavigation or HeaderMenu

\n", "rawdescription": "\n\nIndividual item in the header. May be used a direct child of `HeaderNavigation` or `HeaderMenu`\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOptional,\n\tEventEmitter,\n\tOutput,\n\tHostBinding\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\n\n/**\n * Individual item in the header. May be used a direct child of `HeaderNavigation` or `HeaderMenu`\n */\n@Component({\n\tselector: \"cds-header-item, ibm-header-item\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t`]\n})\nexport class HeaderItem {\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\t@Input() set href(v: string) {\n\t\t// Needed when component is created dynamically with a model.\n\t\tif (v === undefined) {\n\t\t\treturn;\n\t\t}\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t/**\n\t * Use the routerLink attribute on tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = false;\n\n\t/**\n\t * String or array of string class names to apply when active\n\t */\n\t@Input() activeLinkClass: string | string[];\n\n\t/**\n\t * Applies selected styles to the item if a user sets this to true.\n\t */\n\t@Input() isCurrentPage: boolean;\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter>();\n\n\tprotected _href = \"#\";\n\n\tconstructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) { }\n\n\tnavigate(event) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t} else if (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "domSanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "" }, { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "" } ], "line": 93, "jsdoctags": [ { "name": "domSanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "href": { "name": "href", "setSignature": { "name": "href", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 49, "jsdoctags": [ { "name": "v", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "href", "type": "", "returnType": "", "line": 57 } } } }, { "name": "HeaderMenu", "id": "component-HeaderMenu-14fa6c9e59e2b11424d146f90519e3c9f970f13bf3dc4654c53dcfdca849fb4da399a4e65e157acdf46df9e137141015b279954b1335bd1a0c4fc5fc0bb16a90", "file": "src/ui-shell/header/header-menu.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-header-menu, ibm-header-menu", "styleUrls": [], "styles": [ "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t" ], "template": "\n\t{{title}}\n\t\n\t\n\t\t\n\t\t\t\n\t\t\n\t\n\n
\n\t\n\t\n\t\t\n\t\t\t{{ headerItem.content }}\n\t\t\n\t\n
\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "headerItems", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to create header items through a model.\n", "description": "

Used to create header items through a model.

\n", "line": 72, "type": "HeaderItemInterface[]", "decorators": [] }, { "name": "href", "deprecated": false, "deprecationMessage": "", "line": 56, "type": "string", "decorators": [] }, { "name": "icon", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional icon\n", "description": "

Optional icon

\n", "line": 77, "type": "TemplateRef", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "line": 55, "type": "string", "decorators": [] }, { "name": "trigger", "defaultValue": "\"click\"", "deprecated": false, "deprecationMessage": "", "line": 67, "type": "\"click\" | \"mouseover\"", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "expanded", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 79, "modifierKind": [ 125 ] }, { "name": "role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 53, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] }, { "name": "subMenu", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 52, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--header__submenu'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "navigate", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 113, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 86, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'click'" } ], "modifierKind": [ 170 ] }, { "name": "onFocusOut", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 107, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusout', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onMouseOut", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 100, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'mouseout'" } ], "modifierKind": [ 170 ] }, { "name": "onMouseOver", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 93, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'mouseover'" } ], "modifierKind": [ 170 ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "line": 53, "type": "string", "decorators": [] }, { "name": "class.cds--header__submenu", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 52, "type": "boolean", "decorators": [] } ], "hostListeners": [ { "name": "click", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 86 }, { "name": "focusout", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 107 }, { "name": "mouseout", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 100 }, { "name": "mouseover", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 93 } ], "standalone": false, "imports": [], "description": "

Dropdown menu container for navigation items.

\n", "rawdescription": "\n\nDropdown menu container for navigation items.\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostListener,\n\tElementRef,\n\tTemplateRef,\n\tHostBinding\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { HeaderItemInterface } from \"./header-navigation-items.interface\";\n\n/**\n * Dropdown menu container for navigation items.\n */\n@Component({\n\tselector: \"cds-header-menu, ibm-header-menu\",\n\ttemplate: `\n\t\t\n\t\t\t{{title}}\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{ headerItem.content }}\n\t\t\t\t\n\t\t\t\n\t\t
\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t`]\n})\nexport class HeaderMenu {\n\t@HostBinding(\"class.cds--header__submenu\") subMenu = true;\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\t@Input() title: string;\n\t@Input() set href(v: string) {\n\t\t// Needed when component is created dynamically with a model.\n\t\tif (v === undefined) {\n\t\t\treturn;\n\t\t}\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\t@Input() trigger: \"click\" | \"mouseover\" = \"click\";\n\n\t/**\n\t * Used to create header items through a model.\n\t */\n\t@Input() headerItems: HeaderItemInterface[];\n\n\t/**\n\t * Optional icon\n\t */\n\t@Input() icon: TemplateRef;\n\n\tpublic expanded = false;\n\n\tprotected _href = \"#\";\n\n\tconstructor(protected domSanitizer: DomSanitizer, protected elementRef: ElementRef) { }\n\n\t@HostListener(\"click\")\n\tonClick() {\n\t\tif (this.trigger === \"click\") {\n\t\t\tthis.expanded = !this.expanded;\n\t\t}\n\t}\n\n\t@HostListener(\"mouseover\")\n\tonMouseOver() {\n\t\tif (this.trigger === \"mouseover\") {\n\t\t\tthis.expanded = true;\n\t\t}\n\t}\n\n\t@HostListener(\"mouseout\")\n\tonMouseOut() {\n\t\tif (this.trigger === \"mouseover\") {\n\t\t\tthis.expanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\", [\"$event\"])\n\tonFocusOut(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.relatedTarget)) {\n\t\t\tthis.expanded = false;\n\t\t}\n\t}\n\n\tnavigate(event) {\n\t\tif (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "domSanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "" }, { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" } ], "line": 81, "jsdoctags": [ { "name": "domSanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "href": { "name": "href", "setSignature": { "name": "href", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 56, "jsdoctags": [ { "name": "v", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "href", "type": "", "returnType": "", "line": 64 } } } }, { "name": "HeaderNavigation", "id": "component-HeaderNavigation-47f0db862a928edaa2667a2c582121971b5e51224fbbd41c7276b6af35f9e98cb9410417042f12939d37fb21d43b3ef7e8f46fe6b7dd3a0a814beba287570883", "file": "src/ui-shell/header/header-navigation.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-header-navigation, ibm-header-navigation", "styleUrls": [], "styles": [], "template": "\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "line": 40, "type": "string", "decorators": [] }, { "name": "navigationItems", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates the header navigation items and menu items through a list of navigation item objects.\nIn order for the navigation items to move to the side navigation when window size is less than 1056px,\nnavigation items need to be passed into both cds-header-navigation and cds-sidenav.\n", "description": "

Creates the header navigation items and menu items through a list of navigation item objects.\nIn order for the navigation items to move to the side navigation when window size is less than 1056px,\nnavigation items need to be passed into both cds-header-navigation and cds-sidenav.

\n", "line": 47, "type": "NavigationItem[]", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "height", "defaultValue": "100", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 38, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'style.height.%'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "style.height.%", "defaultValue": "100", "deprecated": false, "deprecationMessage": "", "line": 38, "type": "number", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

Container for header navigation items

\n", "rawdescription": "\n\nContainer for header navigation items\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\nimport { NavigationItem } from \"./header-navigation-items.interface\";\n/**\n * Container for header navigation items\n */\n@Component({\n\tselector: \"cds-header-navigation, ibm-header-navigation\",\n\ttemplate: `\n\t\t\n\t`\n})\nexport class HeaderNavigation {\n\t@HostBinding(\"style.height.%\") height = 100;\n\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Creates the header navigation items and menu items through a list of navigation item objects.\n\t * In order for the navigation items to move to the side navigation when window size is less than 1056px,\n\t * navigation items need to be passed into both cds-header-navigation and cds-sidenav.\n\t */\n\t@Input() navigationItems: NavigationItem[];\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "IconButton", "id": "component-IconButton-edf3bbe1c9106645ec3623e28d5b0e5714a657c6f37a1b87ed4006000faba99f48a0c3f833a653dd3dfa2f9774943aecdf505dfe418f5d2d4ff38baef63bedab", "file": "src/button/icon-button.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-icon-button, ibm-icon-button", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t\n\t\n\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "buttonAttributes", "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "pos": 1641, "end": 1847, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 1642, "end": 1647, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

: { [key: string]: string\nUser can pass additional button attributes if component property does not already exist\nKey is the attribute name & value is the attribute value for the button

\n", "name": { "pos": 1648, "end": 1651, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "obj" }, "isNameFirst": true, "isBracketed": false } ], "line": 75, "type": "literal type", "decorators": [] }, { "name": "buttonId", "defaultValue": "`icon-btn-${IconButton.iconButtonCounter++}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOverride id\n", "description": "

Override id

\n", "line": 101, "type": "string", "decorators": [] }, { "name": "buttonNgClass", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nPass global carbon classes to icon button\n", "description": "

Pass global carbon classes to icon button

\n", "line": 62, "type": "literal type", "decorators": [] }, { "name": "description", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe string or template content to be exposed by the tooltip.\n", "description": "

The string or template content to be exposed by the tooltip.

\n", "line": 125, "type": "string | TemplateRef", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to disable button\n", "description": "

Set to true to disable button

\n", "line": 121, "type": "boolean", "decorators": [] }, { "name": "isExpressive", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to make button expressive\n", "description": "

Set to true to make button expressive

\n", "line": 117, "type": "boolean", "decorators": [] }, { "name": "kind", "defaultValue": "\"primary\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the button type.\n", "description": "

Sets the button type.

\n", "line": 105, "type": "ButtonType", "decorators": [] }, { "name": "showTooltipWhenDisabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nIndicates whether the tooltip should be shown when the button is disabled\n", "description": "

Indicates whether the tooltip should be shown when the button is disabled

\n", "line": 129, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the size of the button.\n", "description": "

Specify the size of the button.

\n", "line": 109, "type": "ButtonSize", "decorators": [] }, { "name": "type", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet button type, `button` by default\n", "description": "

Set button type, button by default

\n", "line": 113, "type": "string", "decorators": [] }, { "name": "align", "defaultValue": "\"bottom\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet popover alignment\n", "description": "

Set popover alignment

\n", "line": 32, "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "autoAlign", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n**Experimental**: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once\n", "description": "

Experimental: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once

\n", "line": 40, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "caret", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide caret\n", "description": "

Set to false to hide caret

\n", "line": 16, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "dropShadow", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide shadow\n", "description": "

Set to false to hide shadow

\n", "line": 20, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "enterDelayMs", "defaultValue": "100", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet delay before tooltip is shown\n", "description": "

Set delay before tooltip is shown

\n", "line": 44, "type": "number", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "highContrast", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to enable high contrast\n", "description": "

Set to true to enable high contrast

\n", "line": 24, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "isOpen", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to have the popover open by default\n", "description": "

Set to true to have the popover open by default

\n", "line": 28, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "leaveDelayMs", "defaultValue": "300", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet delay when tooltip disappears\n", "description": "

Set delay when tooltip disappears

\n", "line": 48, "type": "number", "decorators": [], "inheritance": { "file": "BaseIconButton" } } ], "outputsClass": [ { "name": "blur", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 136, "type": "EventEmitter" }, { "name": "click", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCommon button events\n", "description": "

Common button events

\n", "line": 134, "type": "EventEmitter" }, { "name": "focus", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 135, "type": "EventEmitter" }, { "name": "tooltipClick", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEvent to emit when click event is fired from tooltip\n", "description": "

Event to emit when click event is fired from tooltip

\n", "line": 140, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "button", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 96, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'button'" } ], "modifierKind": [ 170 ] }, { "name": "iconButtonCounter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 94, "modifierKind": [ 126 ] } ], "methodsClass": [ { "name": "emitClickEvent", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "element", "type": "\"tooltip\" | \"button\"", "deprecated": false, "deprecationMessage": "", "defaultValue": "\"button\"" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 158, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nStop propogation of click event\nElse double fires (click) event\n", "description": "

Stop propogation of click event\nElse double fires (click) event

\n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "element", "type": "\"tooltip\" | \"button\"", "deprecated": false, "deprecationMessage": "", "defaultValue": "\"button\"", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { ButtonModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ButtonModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-button-icon-button--basic)\n", "type": "component", "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tElementRef,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tRenderer2,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { BaseIconButton } from \"./base-icon-button.component\";\nimport { ButtonSize, ButtonType } from \"./button.types\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ButtonModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-button-icon-button--basic)\n */\n@Component({\n\tselector: \"cds-icon-button, ibm-icon-button\",\n\ttemplate: `\n\t\n\t\t\n\t\t\t\n\t\t\n\t\n\t`\n})\nexport class IconButton extends BaseIconButton implements AfterViewInit {\n\t/**\n\t * Pass global carbon classes to icon button\n\t */\n\t@Input() set buttonNgClass(obj: { [key: string]: boolean }) {\n\t\tthis.classList = Object.assign({ \"cds--btn--disabled\": this.disabled }, obj);\n\t}\n\n\tget buttonNgClass() {\n\t\treturn this.classList;\n\t}\n\n\t/**\n\t * @param obj: { [key: string]: string\n\t * User can pass additional button attributes if component property does not already exist\n\t * Key is the attribute name & value is the attribute value for the button\n\t */\n\t@Input() set buttonAttributes(obj: { [key: string]: string }) {\n\t\tif (this.button) {\n\t\t\t// Remove old attributes\n\t\t\tObject.keys(this.attributeList).forEach((key: string) => {\n\t\t\t\tthis.renderer.removeAttribute(this.button.nativeElement, key);\n\t\t\t});\n\t\t\t// Set new attributes\n\t\t\tObject.keys(obj).forEach((key: string) => {\n\t\t\t\tthis.renderer.setAttribute(this.button.nativeElement, key, obj[key]);\n\t\t\t});\n\t\t}\n\t\t// Set new attributes\n\t\tthis.attributeList = obj;\n\t}\n\n\tget buttonAttributes() {\n\t\treturn this.buttonAttributes;\n\t}\n\n\tstatic iconButtonCounter = 0;\n\n\t@ViewChild(\"button\") button: ElementRef;\n\n\t/**\n\t * Override id\n\t */\n\t@Input() buttonId = `icon-btn-${IconButton.iconButtonCounter++}`;\n\t/**\n\t * Sets the button type.\n\t */\n\t@Input() kind: ButtonType = \"primary\";\n\t/**\n\t * Specify the size of the button.\n\t */\n\t@Input() size: ButtonSize = \"lg\";\n\t/**\n\t * Set button type, `button` by default\n\t */\n\t@Input() type = \"button\";\n\t/**\n\t * Set to `true` to make button expressive\n\t */\n\t@Input() isExpressive = false;\n\t/**\n\t * Set to `true` to disable button\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * The string or template content to be exposed by the tooltip.\n\t */\n\t@Input() description: string | TemplateRef;\n\t/**\n\t * Indicates whether the tooltip should be shown when the button is disabled\n\t */\n\t@Input() showTooltipWhenDisabled = false;\n\n\t/**\n\t * Common button events\n\t */\n\t@Output() click = new EventEmitter();\n\t@Output() focus = new EventEmitter();\n\t@Output() blur = new EventEmitter();\n\t/**\n\t * Event to emit when click event is fired from tooltip\n\t */\n\t@Output() tooltipClick = new EventEmitter();\n\n\tprivate classList: { [key: string]: boolean } = {};\n\tprivate attributeList: { [key: string]: string } = {};\n\n\tconstructor(private renderer: Renderer2) {\n\t\tsuper();\n\t}\n\n\tngAfterViewInit(): void {\n\t\t// Set attributes once element is found\n\t\tthis.buttonAttributes = this.attributeList;\n\t}\n\n\t/**\n\t * Stop propogation of click event\n\t * Else double fires (click) event\n\t */\n\temitClickEvent(event, element: \"tooltip\" | \"button\" = \"button\") {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\t// Prevents (click) event from bubbling since it would appear user clicked the `button`\n\t\tif (element === \"tooltip\") {\n\t\t\tthis.tooltipClick.emit(event);\n\t\t\treturn;\n\t\t}\n\t\tthis.click.emit(event);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "" } ], "line": 143, "jsdoctags": [ { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [ "BaseIconButton" ], "implements": [ "AfterViewInit" ], "accessors": { "buttonNgClass": { "name": "buttonNgClass", "setSignature": { "name": "buttonNgClass", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "obj", "type": "literal type", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 62, "rawdescription": "\n\nPass global carbon classes to icon button\n", "description": "

Pass global carbon classes to icon button

\n", "jsdoctags": [ { "name": "obj", "type": "literal type", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "buttonNgClass", "type": "", "returnType": "", "line": 66 } }, "buttonAttributes": { "name": "buttonAttributes", "setSignature": { "name": "buttonAttributes", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "obj", "type": "literal type", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 75, "rawdescription": "\n\nUser can pass additional button attributes if component property does not already exist\nKey is the attribute name & value is the attribute value for the button\n", "description": "

User can pass additional button attributes if component property does not already exist\nKey is the attribute name & value is the attribute value for the button

\n", "jsdoctags": [ { "name": { "pos": 1648, "end": 1651, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "obj" }, "type": "literal type", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 1642, "end": 1647, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

: { [key: string]: string\nUser can pass additional button attributes if component property does not already exist\nKey is the attribute name & value is the attribute value for the button

\n" } ] }, "getSignature": { "name": "buttonAttributes", "type": "", "returnType": "", "line": 90 } } } }, { "name": "IconDemo", "id": "component-IconDemo-0ac3271172caab404d9fe294184ac5022d4e89f27d8d500fa5de7e1c5faecdee20346b193038b614bdecbca7b4229a710d5f6973913efe2603282bb5b1df3479", "file": "src/icon/stories/icon-demo.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-demo-icon", "styleUrls": [], "styles": [], "template": "\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, OnInit } from \"@angular/core\";\nimport { Accessibility16 } from \"@carbon/icons\";\n\nimport { IconService } from \"../\";\n\n@Component({\n\tselector: \"app-demo-icon\",\n\ttemplate: `\n\t\t\n\t`\n})\nexport class IconDemo implements OnInit {\n\tconstructor(protected iconService: IconService) { }\n\n\tngOnInit() {\n\t\tthis.iconService.register(Accessibility16);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "iconService", "type": "IconService", "deprecated": false, "deprecationMessage": "" } ], "line": 12, "jsdoctags": [ { "name": "iconService", "type": "IconService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit" ] }, { "name": "IconTreeviewDemoComponent", "id": "component-IconTreeviewDemoComponent-c9d14ac59874ce7682f582e4f38f34088eb917bc0d60939c9c8bafcab6d54649d41bbf41a59b88622f1bcc438b355a3766900533f633c9cf5260e0ec950861ef", "file": "src/treeview/stories/app-treeview-icons.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-treeview-icon-component", "styleUrls": [], "styles": [], "template": "\n\n\n\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "documentIcon", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "", "line": 21, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'document'" } ], "modifierKind": [ 170 ] }, { "name": "tree", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "Node[]", "optional": false, "description": "", "line": 19 } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { AfterViewInit, Component, TemplateRef, ViewChild } from \"@angular/core\";\nimport { Node } from \"../tree-node.types\";\n\n@Component({\n\tselector: \"app-treeview-icon-component\",\n\ttemplate: `\n\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class IconTreeviewDemoComponent implements AfterViewInit {\n\ttree: Node[] = [];\n\n\t@ViewChild(\"document\") documentIcon: TemplateRef;\n\n\tngAfterViewInit() {\n\t\t// Wait for the view child to be picked up\n\t\tthis.tree = [\n\t\t\t{\n\t\t\t\tid: \"1\",\n\t\t\t\tvalue: \"Artificial intelligence\",\n\t\t\t\tlabel: \"Artificial intelligence\",\n\t\t\t\ticon: this.documentIcon\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"2\",\n\t\t\t\tvalue: \"Blockchain\",\n\t\t\t\tlabel: \"Blockchain\",\n\t\t\t\ticon: this.documentIcon\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"3\",\n\t\t\t\tvalue: \"Business automation\",\n\t\t\t\tlabel: \"Business automation\",\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"3-1\",\n\t\t\t\t\t\tvalue: \"Business process automation\",\n\t\t\t\t\t\tlabel: \"Business process automation\",\n\t\t\t\t\t\ticon: this.documentIcon\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"3-2\",\n\t\t\t\t\t\tvalue: \"Business process mapping\",\n\t\t\t\t\t\tlabel: \"Business process mapping\",\n\t\t\t\t\t\ticon: this.documentIcon\n\t\t\t\t\t}\n\t\t\t\t],\n\t\t\t\ticon: \"folder\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"4\",\n\t\t\t\tvalue: \"Business operations\",\n\t\t\t\tlabel: \"Business operations\",\n\t\t\t\ticon: this.documentIcon\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"5\",\n\t\t\t\tvalue: \"Cloud computing\",\n\t\t\t\tlabel: \"Cloud computing\",\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-1\",\n\t\t\t\t\t\tvalue: \"Containers\",\n\t\t\t\t\t\tlabel: \"Containers\",\n\t\t\t\t\t\ticon: this.documentIcon\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-2\",\n\t\t\t\t\t\tvalue: \"Databases\",\n\t\t\t\t\t\tlabel: \"Databases\",\n\t\t\t\t\t\ticon: this.documentIcon\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-3\",\n\t\t\t\t\t\tvalue: \"DevOps\",\n\t\t\t\t\t\tlabel: \"DevOps\",\n\t\t\t\t\t\texpanded: true,\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: \"5-4\",\n\t\t\t\t\t\t\t\tvalue: \"Solutions\",\n\t\t\t\t\t\t\t\tlabel: \"Solutions\",\n\t\t\t\t\t\t\t\ticon: this.documentIcon\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: \"5-5\",\n\t\t\t\t\t\t\t\tvalue: \"Case studies\",\n\t\t\t\t\t\t\t\tlabel: \"Case studies\",\n\t\t\t\t\t\t\t\texpanded: true,\n\t\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tid: \"5-6\",\n\t\t\t\t\t\t\t\t\t\tvalue: \"Resources\",\n\t\t\t\t\t\t\t\t\t\tlabel: \"Resources\",\n\t\t\t\t\t\t\t\t\t\ticon: this.documentIcon\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\ticon: \"folder\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t],\n\t\t\t\t\t\ticon: \"folder\"\n\t\t\t\t\t}\n\t\t\t\t],\n\t\t\t\ticon: \"folder\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"6\",\n\t\t\t\tvalue: \"Data & Analytics\",\n\t\t\t\tlabel: \"Data & Analytics\",\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"6-1\",\n\t\t\t\t\t\tvalue: \"Big data\",\n\t\t\t\t\t\tlabel: \"Big data\",\n\t\t\t\t\t\ticon: this.documentIcon\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"6-2\",\n\t\t\t\t\t\tvalue: \"Business intelligence\",\n\t\t\t\t\t\tlabel: \"Business intelligence\",\n\t\t\t\t\t\ticon: this.documentIcon\n\t\t\t\t\t}\n\t\t\t\t],\n\t\t\t\ticon: \"folder\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"7\",\n\t\t\t\tvalue: \"IT infrastructure\",\n\t\t\t\tlabel: \"IT infrastructure\",\n\t\t\t\texpanded: true,\n\t\t\t\tdisabled: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"7-1\",\n\t\t\t\t\t\tvalue: \"Data storage\",\n\t\t\t\t\t\tlabel: \"Data storage\",\n\t\t\t\t\t\ticon: this.documentIcon\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"7-2\",\n\t\t\t\t\t\tvalue: \"Enterprise servers\",\n\t\t\t\t\t\tlabel: \"Enterprise servers\",\n\t\t\t\t\t\ticon: this.documentIcon\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"8\",\n\t\t\t\t\t\tvalue: \"Hybrid cloud infrastructure\",\n\t\t\t\t\t\tlabel: \"Hybrid cloud infrastructure\",\n\t\t\t\t\t\texpanded: true,\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: \"8-1\",\n\t\t\t\t\t\t\t\tvalue: \"Insights\",\n\t\t\t\t\t\t\t\tlabel: \"Insights\",\n\t\t\t\t\t\t\t\ticon: this.documentIcon\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: \"8-2\",\n\t\t\t\t\t\t\t\tvalue: \"Benefits\",\n\t\t\t\t\t\t\t\tlabel: \"Benefits\",\n\t\t\t\t\t\t\t\ticon: this.documentIcon\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t],\n\t\t\t\t\t\ticon: \"folder\"\n\t\t\t\t\t}\n\t\t\t\t],\n\t\t\t\ticon: \"folder\"\n\t\t\t}\n\t\t];\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "AfterViewInit" ] }, { "name": "InlineLoading", "id": "component-InlineLoading-7eb0ebf7e42df7d57033c642d8bb3edf47249ae8462723b788b6b41ba2255d7162782a2d7e33ee037793f9ff78fc96b3b50e347265d36409c627794eab2fce93", "file": "src/inline-loading/inline-loading.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-inline-loading, ibm-inline-loading", "styleUrls": [], "styles": [], "template": "
\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t
\n\t\n\t\n\t\n\t\n\n{{loadingText}}

\n

{{successText}}

\n

{{errorText}}

\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "errorText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the text description for the error state.\n", "description": "

Specify the text description for the error state.

\n", "line": 89, "type": "string", "decorators": [] }, { "name": "isActive", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nset to `false` to stop the loading animation\n", "description": "

set to false to stop the loading animation

\n", "line": 93, "type": "boolean", "decorators": [] }, { "name": "loadingText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the text description for the loading state.\n", "description": "

Specify the text description for the loading state.

\n", "line": 77, "type": "string", "decorators": [] }, { "name": "state", "defaultValue": "InlineLoadingState.Active", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the text description for the loading state.\n", "description": "

Specify the text description for the loading state.

\n", "line": 73, "type": "InlineLoadingState | string", "decorators": [] }, { "name": "success", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns value `true` if the component is in the success state.\n", "description": "

Returns value true if the component is in the success state.

\n", "line": 103, "type": "boolean", "decorators": [] }, { "name": "successDelay", "defaultValue": "1500", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nProvide a delay for the `setTimeout` for success.\n", "description": "

Provide a delay for the setTimeout for success.

\n", "line": 85, "type": "number", "decorators": [] }, { "name": "successText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the text description for the success state.\n", "description": "

Specify the text description for the success state.

\n", "line": 81, "type": "string", "decorators": [] } ], "outputsClass": [ { "name": "onSuccess", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits event after the success state is active\n", "description": "

Emits event after the success state is active

\n", "line": 121, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "InlineLoadingState", "defaultValue": "InlineLoadingState", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 68 }, { "name": "loadingClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 123, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--inline-loading'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--inline-loading", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 123, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { InlineLoadingModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InlineLoadingModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-inline-loading--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding\n} from \"@angular/core\";\n\nexport enum InlineLoadingState {\n\t/** It hides the whole component. */\n\tHidden = \"hidden\",\n\t/** It shows the `loadingText` but no loading animation. */\n\tInactive = \"inactive\",\n\t/** It shows the `loadingText` with loading animation. */\n\tActive = \"active\",\n\t/** It shows the `successText` with a success state. */\n\tFinished = \"finished\",\n\t/** It shows the `errorText` with an error state. */\n\tError = \"error\"\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InlineLoadingModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-inline-loading--basic)\n */\n@Component({\n\tselector: \"cds-inline-loading, ibm-inline-loading\",\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t{{loadingText}}

\n\t\t

{{successText}}

\n\t\t

{{errorText}}

\n\t`\n})\nexport class InlineLoading {\n\tInlineLoadingState = InlineLoadingState;\n\n\t/**\n\t * Specify the text description for the loading state.\n\t */\n\t@Input() state: InlineLoadingState | string = InlineLoadingState.Active;\n\t/**\n\t * Specify the text description for the loading state.\n\t */\n\t@Input() loadingText: string;\n\t/**\n\t * Specify the text description for the success state.\n\t */\n\t@Input() successText: string;\n\t/**\n\t * Provide a delay for the `setTimeout` for success.\n\t */\n\t@Input() successDelay = 1500;\n\t/**\n\t * Specify the text description for the error state.\n\t */\n\t@Input() errorText: string;\n\t/**\n\t * set to `false` to stop the loading animation\n\t */\n\t@Input() get isActive() {\n\t\treturn this.state === InlineLoadingState.Active;\n\t}\n\tset isActive(active: boolean) {\n\t\tthis.state = active ? InlineLoadingState.Active : InlineLoadingState.Inactive;\n\t}\n\n\t/**\n\t * Returns value `true` if the component is in the success state.\n\t */\n\t@Input() get success() {\n\t\treturn this.state === InlineLoadingState.Finished;\n\t}\n\t/**\n\t * Set the component's state to match the parameter and emits onSuccess if it exits.\n\t */\n\tset success(success: boolean) {\n\t\tthis.state = success ? InlineLoadingState.Finished : InlineLoadingState.Error;\n\t\tif (this.state === InlineLoadingState.Finished) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.onSuccess.emit();\n\t\t\t}, this.successDelay);\n\t\t}\n\t}\n\n\t/**\n\t * Emits event after the success state is active\n\t */\n\t@Output() onSuccess: EventEmitter = new EventEmitter();\n\n\t@HostBinding(\"class.cds--inline-loading\") loadingClass = true;\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "accessors": { "isActive": { "name": "isActive", "setSignature": { "name": "isActive", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "active", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 96, "jsdoctags": [ { "name": "active", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "isActive", "type": "", "returnType": "", "line": 93, "rawdescription": "\n\nset to `false` to stop the loading animation\n", "description": "

set to false to stop the loading animation

\n" } }, "success": { "name": "success", "setSignature": { "name": "success", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "success", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 109, "rawdescription": "\n\nSet the component's state to match the parameter and emits onSuccess if it exits.\n", "description": "

Set the component's state to match the parameter and emits onSuccess if it exits.

\n", "jsdoctags": [ { "name": "success", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "success", "type": "", "returnType": "", "line": 103, "rawdescription": "\n\nReturns value `true` if the component is in the success state.\n", "description": "

Returns value true if the component is in the success state.

\n" } } } }, { "name": "InlineLoadingStory", "id": "component-InlineLoadingStory-a40929357360b25f9745d7a25b50d3591dfe2c1db74e76b569dcb769edd4d2d1f8a69681cac798fd6bf903933624d6475d33a6d3ad45bc20425f4e30e747087e", "file": "src/inline-loading/stories/inline.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-inline-loading", "styleUrls": [], "styles": [], "template": "\n\n\n

State: {{ state }}

\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "errorText", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 21, "type": "string", "decorators": [] }, { "name": "loadingText", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 19, "type": "string", "decorators": [] }, { "name": "successText", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 20, "type": "string", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "state", "defaultValue": "InlineLoadingState.Active", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 23 } ], "methodsClass": [ { "name": "toggleState", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 25, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\nimport { InlineLoadingState } from \"../\";\n\n@Component({\n\tselector: \"app-inline-loading\",\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t\t

State: {{ state }}

\n\t`\n})\nexport class InlineLoadingStory {\n\t@Input() loadingText = \"\";\n\t@Input() successText = \"\";\n\t@Input() errorText = \"\";\n\n\tstate = InlineLoadingState.Active;\n\n\ttoggleState() {\n\t\tswitch (this.state) {\n\t\t\tcase InlineLoadingState.Inactive: this.state = InlineLoadingState.Active; break;\n\t\t\tcase InlineLoadingState.Active: this.state = InlineLoadingState.Finished; break;\n\t\t\tcase InlineLoadingState.Finished: this.state = InlineLoadingState.Error; break;\n\t\t\tcase InlineLoadingState.Error: this.state = InlineLoadingState.Inactive; break;\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "InputModal", "id": "component-InputModal-d3f51a9cfea2d558ae673cf1f154ccf7fd89a0e8bff36beec53075173e3f65ce4ea225308ff18abdd0e8edfc2f84250cc0ac723428aa9a099a64e0a7241ea361", "file": "src/modal/stories/input-modal.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-input-modal", "styleUrls": [], "styles": [], "template": "\n\tEdit account name\n\t
\n\t\t\n\t\t\tAccount name\n\t\t\t\n\t\t\n\t
\n\t\n\t\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the open state of the modal\n", "description": "

Controls the open state of the modal

\n", "line": 25, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseModal" } } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nBase event emitter to propagate close events\n", "description": "

Base event emitter to propagate close events

\n", "line": 20, "type": "EventEmitter", "inheritance": { "file": "BaseModal" } } ], "propertiesClass": [ { "name": "data", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 32, "decorators": [ { "name": "Inject", "stringifiedArguments": "'data'" } ], "modifierKind": [ 170, 125 ] }, { "name": "inputValue", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 33, "decorators": [ { "name": "Inject", "stringifiedArguments": "'inputValue'" } ], "modifierKind": [ 170, 125 ] }, { "name": "modalText", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 30, "decorators": [ { "name": "Inject", "stringifiedArguments": "'modalText'" } ], "modifierKind": [ 170, 125 ] }, { "name": "size", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 31, "decorators": [ { "name": "Inject", "stringifiedArguments": "'size'" } ], "modifierKind": [ 170, 125 ] } ], "methodsClass": [ { "name": "onChange", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 38, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "closeModal", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 30, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefault method to handle closing the modal\n", "description": "

Default method to handle closing the modal

\n", "inheritance": { "file": "BaseModal" } } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Inject } from \"@angular/core\";\nimport { ModalService, BaseModal } from \"../\";\n\n@Component({\n\tselector: \"app-input-modal\",\n\ttemplate: `\n\t\t\n\t\t\tEdit account name\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\tAccount name\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class InputModal extends BaseModal {\n\tconstructor(\n\t\t@Inject(\"modalText\") public modalText,\n\t\t@Inject(\"size\") public size,\n\t\t@Inject(\"data\") public data,\n\t\t@Inject(\"inputValue\") public inputValue,\n\t\tprotected modalService: ModalService) {\n\t\tsuper();\n\t}\n\n\tonChange(event) {\n\t\tthis.data.next(event.target.value);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "modalText", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "size", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "data", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "inputValue", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "modalService", "type": "ModalService", "deprecated": false, "deprecationMessage": "" } ], "line": 28, "jsdoctags": [ { "name": "modalText", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "size", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "data", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "inputValue", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "modalService", "type": "ModalService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [ "BaseModal" ] }, { "name": "Label", "id": "component-Label-2dce4c35bb1cb112658f703213d666ef4e4029dfc622657a14a2b43ae75596cf1c294778b9818ee3c3cc65399afe75aa0776e947ba35a21a5f03b85112acf731", "file": "src/input/label.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-label, ibm-label", "styleUrls": [], "styles": [], "template": "\n\t\n\n\n\n\t\n\n\n\n\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\n\n\n\n\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n\t\n\t\t{{helperText}}\n\t\t\n\t\n\t
\n\t\t{{invalidText}}\n\t\t\n\t
\n\t
\n\t\t{{warnText}}\n\t\t\n\t
\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet the arialabel for label\n", "description": "

Set the arialabel for label

\n", "line": 189, "type": "string", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for disabled state.\n", "description": "

Set to true for disabled state.

\n", "line": 161, "type": "boolean", "decorators": [] }, { "name": "helperText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional helper text that appears under the label.\n", "description": "

Optional helper text that appears under the label.

\n", "line": 169, "type": "string | TemplateRef", "decorators": [] }, { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for an invalid label component.\n", "description": "

Set to true for an invalid label component.

\n", "line": 177, "type": "boolean", "decorators": [] }, { "name": "invalidText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the invalid text.\n", "description": "

Sets the invalid text.

\n", "line": 173, "type": "string | TemplateRef", "decorators": [] }, { "name": "labelInputID", "defaultValue": "`cds-label-${Label.labelCounter++}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe id of the input item associated with the `Label`. This value is also used to associate the `Label` with\nits input counterpart through the 'for' attribute.\n", "description": "

The id of the input item associated with the Label. This value is also used to associate the Label with\nits input counterpart through the 'for' attribute.

\n", "line": 157, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a loading label.\n", "description": "

Set to true for a loading label.

\n", "line": 165, "type": "boolean", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n", "description": "

Set to true to show a warning (contents set by warningText)

\n", "line": 181, "type": "boolean", "decorators": [] }, { "name": "warnText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the warning text\n", "description": "

Sets the warning text

\n", "line": 185, "type": "string | TemplateRef", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "labelCounter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

Used to build the id of the input item associated with the Label.

\n", "line": 152, "rawdescription": "\n\nUsed to build the id of the input item associated with the `Label`.\n", "modifierKind": [ 126 ] }, { "name": "passwordInput", "deprecated": false, "deprecationMessage": "", "type": "PasswordInput", "optional": false, "description": "", "line": 199, "decorators": [ { "name": "ContentChild", "stringifiedArguments": "PasswordInput, {static: false}" } ], "modifierKind": [ 170 ] }, { "name": "textArea", "deprecated": false, "deprecationMessage": "", "type": "TextArea", "optional": false, "description": "", "line": 193, "decorators": [ { "name": "ContentChild", "stringifiedArguments": "TextArea" } ], "modifierKind": [ 170 ] }, { "name": "textInput", "deprecated": false, "deprecationMessage": "", "type": "TextInput", "optional": false, "description": "", "line": 196, "decorators": [ { "name": "ContentChild", "stringifiedArguments": "TextInput, {static: false}" } ], "modifierKind": [ 170 ] }, { "name": "type", "deprecated": false, "deprecationMessage": "", "type": "\"TextArea\" | \"TextInput\" | \"PasswordInput\"", "optional": false, "description": "", "line": 205 }, { "name": "wrapper", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 191, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'wrapper'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 254, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--form-item", "deprecated": false, "deprecationMessage": "", "line": 201, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { InputModule } from 'carbon-components-angular';

To prevent attribute drilling, use ibm-text-label or ibm-textarea-label components

\nExample :
<cds-label>\n    Label\n    <input cdsText type="text" class="input-field">\n</cds-label>

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InputModule } from 'carbon-components-angular';\n```\n\nTo prevent attribute drilling, use `ibm-text-label` or `ibm-textarea-label` components\n\n```html\n\n\tLabel\n\t\n\n```\n\n[See demo](../../?path=/story/components-input--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tContentChild,\n\tAfterContentInit,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\nimport { TextInput } from \"./input.directive\";\nimport { PasswordInput } from \"./password.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * To prevent attribute drilling, use `ibm-text-label` or `ibm-textarea-label` components\n *\n * ```html\n * \n * \tLabel\n * \t\n * \n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-label, ibm-label\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t{{helperText}}\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t{{invalidText}}\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t{{warnText}}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`\n})\nexport class Label implements AfterContentInit, AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t */\n\t@Input() labelInputID = `cds-label-${Label.labelCounter++}`;\n\t/**\n\t * Set to `true` for disabled state.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef;\n\t/**\n\t * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t@ViewChild(\"wrapper\") wrapper: ElementRef;\n\n\t@ContentChild(TextArea) textArea: TextArea;\n\n\t// @ts-ignore\n\t@ContentChild(TextInput, { static: false }) textInput: TextInput;\n\n\t@ContentChild(PasswordInput, { static: false })\n\tpasswordInput: PasswordInput;\n\n\t@HostBinding(\"class.cds--form-item\") get labelClass() {\n\t\treturn this.type === undefined;\n\t}\n\n\ttype: \"TextArea\" | \"TextInput\" | \"PasswordInput\";\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Update wrapper class if a textarea is hosted.\n\t */\n\tngAfterContentInit() {\n\t\tif (this.textArea) {\n\t\t\tthis.type = \"TextArea\";\n\t\t} else if (this.textInput) {\n\t\t\tthis.type = \"TextInput\";\n\t\t} else if (this.passwordInput) {\n\t\t\tthis.type = \"PasswordInput\";\n\t\t}\n\t}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\t// Will only be called when `default` template is being used\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` & `textarea` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input,textarea\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

Creates an instance of Label.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "" } ], "line": 205, "rawdescription": "\n\nCreates an instance of Label.\n", "jsdoctags": [ { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AfterContentInit", "AfterViewInit" ], "accessors": { "labelClass": { "name": "labelClass", "getSignature": { "name": "labelClass", "type": "", "returnType": "", "line": 201 } } } }, { "name": "ListColumn", "id": "component-ListColumn-3b31a41a2a7b2bcd98305a07dd7f10c6ac0734763d74a7b5ea3874ddd7b8aa4a0ce1c3bdf4e5b98d045cbabd816d1c2c8e4c3ccbe69e4bb2f7f671a2ca8faf74", "file": "src/structured-list/list-column.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-list-column, ibm-list-column", "styleUrls": [], "styles": [], "template": "\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "nowrap", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nApplies `white-space: nowrap` to the content of this `ListColumn`\n", "description": "

Applies white-space: nowrap to the content of this ListColumn

\n", "line": 29, "type": "boolean", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 21, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "isBodyColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 25, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--structured-list-td'" } ], "modifierKind": [ 170 ] }, { "name": "isHeaderColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 24, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--structured-list-th'" } ], "modifierKind": [ 170 ] }, { "name": "role", "defaultValue": "\"cell\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 23, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"cell\"", "deprecated": false, "deprecationMessage": "", "line": 23, "type": "string", "decorators": [] }, { "name": "class.cds--structured-list-td", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 25, "type": "boolean", "decorators": [] }, { "name": "class.cds--structured-list-th", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 24, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

ListColumn represents a single column in a StructuredList.

\n

ListColumns can be used in a ListHeader to specify the column headers, or in ListRows to specify the column data.

\n

Example:

\nExample :
<cds-list-column nowrap="true">Column 1</cds-list-column>
", "rawdescription": "\n\n`ListColumn` represents a single column in a `StructuredList`.\n\n`ListColumn`s can be used in a `ListHeader` to specify the column headers, or in `ListRow`s to specify the column data.\n\nExample:\n```html\nColumn 1\n```\n", "type": "component", "sourceCode": "import { Component, HostBinding, Input } from \"@angular/core\";\n\n/**\n * `ListColumn` represents a single column in a `StructuredList`.\n *\n * `ListColumn`s can be used in a `ListHeader` to specify the column headers, or in `ListRow`s to specify the column data.\n *\n * Example:\n * ```html\n * Column 1\n * ```\n */\n@Component({\n\tselector: \"cds-list-column, ibm-list-column\",\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})\nexport class ListColumn {\n\t@Input() skeleton = false;\n\n\t@HostBinding(\"attr.role\") role = \"cell\";\n\t@HostBinding(\"class.cds--structured-list-th\") isHeaderColumn = true;\n\t@HostBinding(\"class.cds--structured-list-td\") isBodyColumn = true;\n\t/**\n\t * Applies `white-space: nowrap` to the content of this `ListColumn`\n\t */\n\t@HostBinding(\"class.cds--structured-list-content--nowrap\") @Input() nowrap = false;\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "ListHeader", "id": "component-ListHeader-0a1298494f1f890101125ea3439f3c088a448d769de2673c3f21345b545705d8a6eca116488067bab2936bd2c501d7d1ac42d2155684bc22c4702cfc30d14ada", "file": "src/structured-list/list-header.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-list-header, ibm-list-header", "styleUrls": [], "styles": [], "template": "
\n\t\n\t
\n
\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "skeleton", "deprecated": false, "deprecationMessage": "", "line": 37, "type": "any", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "columns", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "", "line": 46, "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "ListColumn" } ], "modifierKind": [ 170 ] }, { "name": "role", "defaultValue": "\"rowgroup\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 34, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] }, { "name": "selection", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Set by the containing StructuredList. Adds a dummy header for the selection column when set to true.

\n", "line": 51, "rawdescription": "\n\nSet by the containing `StructuredList`. Adds a dummy header for the selection column when set to true.\n" }, { "name": "wrapper", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 33, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--structured-list-thead'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"rowgroup\"", "deprecated": false, "deprecationMessage": "", "line": 34, "type": "string", "decorators": [] }, { "name": "class.cds--structured-list-thead", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 33, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

ListHeader provides a container for the ListColumns that make up the header of a structured list.

\n

Example:

\nExample :
    <cds-list-header>\n        <cds-list-column nowrap="true">Column 1</cds-list-column>\n        <cds-list-column nowrap="true">Column 2</cds-list-column>\n        <cds-list-column>Column 3</cds-list-column>\n    </cds-list-header>
", "rawdescription": "\n\n`ListHeader` provides a container for the `ListColumn`s that make up the header of a structured list.\n\nExample:\n```html\n\t\n\t\tColumn 1\n\t\tColumn 2\n\t\tColumn 3\n\t\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tInput\n} from \"@angular/core\";\nimport { ListColumn } from \"./list-column.component\";\n\n/**\n * `ListHeader` provides a container for the `ListColumn`s that make up the header of a structured list.\n *\n * Example:\n * ```html\n * \t\n *\t\tColumn 1\n *\t\tColumn 2\n *\t\tColumn 3\n *\t\n * ```\n */\n@Component({\n\tselector: \"cds-list-header, ibm-list-header\",\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t
\n\t`\n})\nexport class ListHeader implements AfterContentInit {\n\t@HostBinding(\"class.cds--structured-list-thead\") wrapper = true;\n\t@HostBinding(\"attr.role\") role = \"rowgroup\";\n\n\t@Input()\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t@ContentChildren(ListColumn) columns: QueryList;\n\n\t/**\n\t * Set by the containing `StructuredList`. Adds a dummy header for the selection column when set to true.\n\t */\n\tselection = false;\n\n\tprotected _skeleton = false;\n\n\tngAfterContentInit() {\n\t\tthis.columns.forEach(column => {\n\t\t\tcolumn.isBodyColumn = false;\n\t\t\tcolumn.isHeaderColumn = true;\n\t\t});\n\t\tthis.updateChildren();\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.columns) {\n\t\t\tthis.columns.toArray().forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "AfterContentInit" ], "accessors": { "skeleton": { "name": "skeleton", "setSignature": { "name": "skeleton", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 37, "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "skeleton", "type": "any", "returnType": "any", "line": 42 } } } }, { "name": "ListRow", "id": "component-ListRow-f0012d4f39660aab1eaadab444c33388b76c8676e6f7f27424b27672a115ff901dd52d638fd867189e5f05a38898f5baf387b7d7f1f2669e08d8f7390ce89a6c", "file": "src/structured-list/list-row.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-list-row, ibm-list-row", "styleUrls": [], "styles": [], "template": "\n\n\t\n\t
\n\t\t\n\t
\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "label", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nApplies an accessible label to the row. Defaults to no label.\n", "description": "

Applies an accessible label to the row. Defaults to no label.

\n", "line": 64, "type": "any", "decorators": [] }, { "name": "selected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 60, "type": "boolean", "decorators": [] }, { "name": "value", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe value for the row. Returned via `ngModel` or `selected` event on the containing `StructuredList`.\n", "description": "

The value for the row. Returned via ngModel or selected event on the containing StructuredList.

\n", "line": 68, "type": "any", "decorators": [] } ], "outputsClass": [ { "name": "change", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nInternal event used to notify the containing `StructuredList` of changes.\n", "description": "

Internal event used to notify the containing StructuredList of changes.

\n", "line": 72, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "columns", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "", "line": 86, "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "ListColumn" } ], "modifierKind": [ 170 ] }, { "name": "input", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 88, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'input'" } ], "modifierKind": [ 170 ] }, { "name": "name", "defaultValue": "\"list\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

Set by the containing StructuredList. When selection = true, used for the name property on the radio input.

\n", "line": 81, "rawdescription": "\n\nSet by the containing `StructuredList`. When `selection = true`, used for the `name` property on the radio input.\n" }, { "name": "role", "defaultValue": "\"row\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 84, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] }, { "name": "selection", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Set by the containing StructuredList. Enables or disables row level selection features.

\n", "line": 77, "rawdescription": "\n\nSet by the containing `StructuredList`. Enables or disables row level selection features.\n" }, { "name": "wrapper", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 83, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--structured-list-row'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "handleFocus", "args": [ { "name": "isFocused", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 110, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "isFocused", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onChange", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 106, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onclick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 100, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'click'" } ], "modifierKind": [ 170 ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"row\"", "deprecated": false, "deprecationMessage": "", "line": 84, "type": "string", "decorators": [] }, { "name": "class.cds--structured-list-row", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 83, "type": "boolean", "decorators": [] }, { "name": "class.cds--structured-list-row--focused-within", "deprecated": false, "deprecationMessage": "", "line": 57, "type": "boolean", "decorators": [] } ], "hostListeners": [ { "name": "click", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 100 } ], "standalone": false, "imports": [], "description": "

ListRow provides a container for the ListColumns that make up the body of a structured list.

\n

Example:

\nExample :
    <cds-list-row>\n        <cds-list-column>Row 1</cds-list-column>\n        <cds-list-column nowrap="true">Row One</cds-list-column>\n        <cds-list-column>\n            Lorem ipsum dolor sit amet,\n            consectetur adipiscing elit. Nunc dui magna,\n            finibus id tortor sed, aliquet bibendum augue.\n            Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n            Pellentesque vulputate nisl a porttitor interdum.\n        </cds-list-column>\n    </cds-list-row>
", "rawdescription": "\n\n`ListRow` provides a container for the `ListColumn`s that make up the body of a structured list.\n\nExample:\n```html\n\t\n\t\tRow 1\n\t\tRow One\n\t\t\n\t\t\tLorem ipsum dolor sit amet,\n\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\n\t\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tInput,\n\tHostListener,\n\tViewChild,\n\tElementRef,\n\tEventEmitter,\n\tOutput\n} from \"@angular/core\";\nimport { ListColumn } from \"./list-column.component\";\n\n/**\n * `ListRow` provides a container for the `ListColumn`s that make up the body of a structured list.\n *\n * Example:\n * ```html\n * \t\n *\t\tRow 1\n *\t\tRow One\n *\t\t\n *\t\t\tLorem ipsum dolor sit amet,\n *\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t\n *\t\n * ```\n */\n@Component({\n\tselector: \"cds-list-row, ibm-list-row\",\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`\n})\nexport class ListRow implements AfterContentInit {\n\t@HostBinding(\"class.cds--structured-list-row--focused-within\") get focusClass() {\n\t\treturn this.isFocused;\n\t}\n\t@Input() @HostBinding(\"class.cds--structured-list-row--selected\") selected = false;\n\t/**\n\t * Applies an accessible label to the row. Defaults to no label.\n\t */\n\t@Input() @HostBinding(\"attr.aria-label\") label;\n\t/**\n\t * The value for the row. Returned via `ngModel` or `selected` event on the containing `StructuredList`.\n\t */\n\t@Input() value;\n\t/**\n\t * Internal event used to notify the containing `StructuredList` of changes.\n\t */\n\t@Output() change: EventEmitter = new EventEmitter();\n\n\t/**\n\t * Set by the containing `StructuredList`. Enables or disables row level selection features.\n\t */\n\tselection = false;\n\t/**\n\t * Set by the containing `StructuredList`. When `selection = true`, used for the `name` property on the radio input.\n\t */\n\tname = \"list\";\n\n\t@HostBinding(\"class.cds--structured-list-row\") wrapper = true;\n\t@HostBinding(\"attr.role\") role = \"row\";\n\n\t@ContentChildren(ListColumn) columns: QueryList;\n\n\t@ViewChild(\"input\") input: ElementRef;\n\n\tprivate isFocused = false;\n\n\tngAfterContentInit() {\n\t\tthis.columns.forEach(column => {\n\t\t\tcolumn.isBodyColumn = true;\n\t\t\tcolumn.isHeaderColumn = false;\n\t\t});\n\t}\n\n\t@HostListener(\"click\")\n\tonclick() {\n\t\tif (this.selection) {\n\t\t\tthis.input.nativeElement.click();\n\t\t}\n\t}\n\n\tonChange(event) {\n\t\tthis.change.emit(event);\n\t}\n\n\thandleFocus(isFocused) {\n\t\tif (this.selection) {\n\t\t\tthis.isFocused = isFocused;\n\t\t\tif (this.isFocused) {\n\t\t\t\tthis.input.nativeElement.click();\n\t\t\t}\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "AfterContentInit" ], "accessors": { "focusClass": { "name": "focusClass", "getSignature": { "name": "focusClass", "type": "", "returnType": "", "line": 57 } } } }, { "name": "Loading", "id": "component-Loading-fdcb08f285c993a03799975ce101c1f2a788673964df95f2544c887306656091f4562bc49c5410c305fac94e980e2fe6b12897d6f7da9af10b2fb2bbabc475b1", "file": "src/loading/loading.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-loading, ibm-loading", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t{{title}}\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "isActive", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nset to `false` to stop the loading animation\n", "description": "

set to false to stop the loading animation

\n", "line": 40, "type": "boolean", "decorators": [] }, { "name": "overlay", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to make loader with an overlay.\n", "description": "

Set to true to make loader with an overlay.

\n", "line": 50, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"normal\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify the size of the button\n", "description": "

Specify the size of the button

\n", "line": 45, "type": "\"normal\" | \"sm\"", "decorators": [] }, { "name": "title", "defaultValue": "this.i18n.get().LOADING.TITLE", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAccessible title for the loading circle.\nDefaults to the `LOADING.TITLE` value from the i18n service.\n", "description": "

Accessible title for the loading circle.\nDefaults to the LOADING.TITLE value from the i18n service.

\n", "line": 35, "type": "any", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { LoadingModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { LoadingModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-loading--basic)\n", "type": "component", "sourceCode": "import { Component, Input, HostBinding } from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { LoadingModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-loading--basic)\n */\n@Component({\n\tselector: \"cds-loading, ibm-loading\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t{{title}}\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class Loading {\n\t/**\n\t * Accessible title for the loading circle.\n\t * Defaults to the `LOADING.TITLE` value from the i18n service.\n\t */\n\t@Input() title = this.i18n.get().LOADING.TITLE;\n\n\t/**\n\t * set to `false` to stop the loading animation\n\t */\n\t@Input() isActive = true;\n\n\t/**\n\t * Specify the size of the button\n\t */\n\t@Input() size: \"normal\" | \"sm\" = \"normal\";\n\n\t/**\n\t * Set to `true` to make loader with an overlay.\n\t */\n\t@Input() @HostBinding(\"class.cds--loading-overlay\") overlay = false;\n\n\tconstructor(protected i18n: I18n) {}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 50, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [] }, { "name": "ManyIconDemo", "id": "component-ManyIconDemo-4dc8e54ce44830aee1cad09a9f037497b8b861fd6a6917d49f10cb673a952246016d4f9aa756b8df7073ec4aaacde3c7bb6715519b386351ec01a88ad4740482", "file": "src/icon/stories/many-icons-demo.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-demo-many-icon", "styleUrls": [], "styles": [ "\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t" ], "template": "\n\t\n\t\t\n\t\n
\n\t\t\t\n\t\t\t
name: {{icon.name}}
\n\t\t\t
size: {{icon.size}}
\n\t\t
\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "groupedIcons", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "", "line": 29 } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, OnInit } from \"@angular/core\";\nimport * as Icons from \"@carbon/icons\";\n\nimport { IconService } from \"../\";\n\n@Component({\n\tselector: \"app-demo-many-icon\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
name: {{icon.name}}
\n\t\t\t\t\t
size: {{icon.size}}
\n\t\t\t\t
\n\t`,\n\tstyles: [\n\t\t`\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class ManyIconDemo implements OnInit {\n\tgroupedIcons: any = [];\n\n\tconstructor(protected iconService: IconService) { }\n\n\tngOnInit() {\n\t\tconst iconMap = new Map();\n\t\tfor (const descriptor of Object.values(Icons)) {\n\t\t\tthis.iconService.register(descriptor as any);\n\t\t\tif (typeof descriptor === \"object\" && descriptor) {\n\t\t\t\tif (!iconMap.has(descriptor[\"name\"])) {\n\t\t\t\t\ticonMap.set(descriptor[\"name\"], []);\n\t\t\t\t}\n\t\t\t\ticonMap.get(descriptor[\"name\"]).push(descriptor);\n\t\t\t}\n\t\t}\n\t\t// Render after a delay to prevent page from freezing\n\t\tsetTimeout(() => {\n\t\t\tthis.groupedIcons = Array.from(iconMap.values());\n\t\t}, 1000);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "iconService", "type": "IconService", "deprecated": false, "deprecationMessage": "" } ], "line": 29, "jsdoctags": [ { "name": "iconService", "type": "IconService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit" ] }, { "name": "MenuButtonComponent", "id": "component-MenuButtonComponent-9930be4d7a0a7029a44411b876444d2b329d5dfe4714db04569b8838e668d77eaee458b75bbc2e968b59a2393034a35f50f3183ad7d2728f6b1ade8ef57ee08d", "file": "src/menu-button/menu-button.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-menu-button", "styleUrls": [], "styles": [], "template": "\n\t{{label}}\n\t\n\t\n\n\n\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "buttonTabIndex", "defaultValue": "\"0\"", "deprecated": false, "deprecationMessage": "", "line": 96, "type": "\"0\" | \"1\" | \"-1\" | string", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 97, "type": "boolean", "decorators": [] }, { "name": "kind", "defaultValue": "\"primary\"", "deprecated": false, "deprecationMessage": "", "line": 93, "type": "\"primary\" | \"tertiary\" | \"ghost\"", "decorators": [] }, { "name": "label", "deprecated": false, "deprecationMessage": "", "line": 99, "type": "string", "decorators": [] }, { "name": "menuAlignment", "defaultValue": "\"bottom\"", "deprecated": false, "deprecationMessage": "", "line": 95, "type": "MenuButtonPlacement", "decorators": [] }, { "name": "menuId", "defaultValue": "`menu-button-${MenuButtonComponent.menuButtonCounter++}`", "deprecated": false, "deprecationMessage": "", "line": 77, "type": "string", "decorators": [] }, { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 98, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "line": 94, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "containerClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 91, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--menu-button__container'" } ], "modifierKind": [ 170 ] }, { "name": "menuButtonCounter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 76, "modifierKind": [ 126 ] }, { "name": "menuTemplate", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "", "line": 102, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'menuTemplate'" } ], "modifierKind": [ 170 ] }, { "name": "referenceElement", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 101, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'reference', {static: true}" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "cleanUp", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 180, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nClean up `autoUpdate` if auto alignment is enabled\n", "description": "

Clean up autoUpdate if auto alignment is enabled

\n" }, { "name": "handleFocusOut", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 169, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOn body click, close the menu\n", "description": "

On body click, close the menu

\n", "jsdoctags": [ { "name": { "pos": 4403, "end": 4408, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 4397, "end": 4402, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ] }, { "name": "handleMenuItemClick", "args": [ { "name": "event", "type": "ItemClickEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 156, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAs of now, menu button does not support nexted menu, on button click it should close\n", "description": "

As of now, menu button does not support nexted menu, on button click it should close

\n", "jsdoctags": [ { "name": "event", "type": "ItemClickEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "recomputePosition", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 238, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCompute position of menu\n", "description": "

Compute position of menu

\n" }, { "name": "roundByDPR", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 228, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "toggleMenu", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 197, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles emitting open/close event\n", "description": "

Handles emitting open/close event

\n" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--menu-button__container", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 91, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tContentChildren,\n\tElementRef,\n\tforwardRef,\n\tHostBinding,\n\tInput,\n\tNgZone,\n\tOnChanges,\n\tOnDestroy,\n\tQueryList,\n\tRenderer2,\n\tSimpleChanges,\n\tTemplateRef,\n\tViewChild,\n\tViewContainerRef\n} from \"@angular/core\";\n\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip\n} from \"@floating-ui/dom\";\nimport { ContextMenuItemComponent, ItemClickEvent } from \"carbon-components-angular/context-menu\";\nimport { Subscription } from \"rxjs\";\n\ntype MenuButtonPlacement = \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\";\n\n@Component({\n\tselector: \"cds-menu-button\",\n\ttemplate: `\n\t\t\n\t\t\t{{label}}\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MenuButtonComponent implements OnChanges, AfterViewInit, OnDestroy {\n\tstatic menuButtonCounter = 0;\n\t@Input() menuId = `menu-button-${MenuButtonComponent.menuButtonCounter++}`;\n\n\t// Listen for click & determine if menu should close\n\t@ContentChildren(ContextMenuItemComponent) set projectedMenuItems(itemList: QueryList) {\n\t\t// Reset in case user dynamically updates menu item\n\t\tthis.subscriptions.forEach((sub) => sub?.unsubscribe());\n\t\tthis.subscriptions = [];\n\t\titemList.forEach((item) => {\n\t\t\tthis.subscriptions.push(\n\t\t\t\titem.itemClick.subscribe((clickEvent) => this.handleMenuItemClick(clickEvent))\n\t\t\t);\n\t\t});\n\t}\n\n\t@HostBinding(\"class.cds--menu-button__container\") containerClass = true;\n\n\t@Input() kind: \"primary\" | \"tertiary\" | \"ghost\" = \"primary\";\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\t@Input() menuAlignment: MenuButtonPlacement = \"bottom\";\n\t@Input() buttonTabIndex: \"0\" | \"1\" | \"-1\" | string = \"0\";\n\t@Input() disabled = false;\n\t@Input() open = false;\n\t@Input() label: string;\n\n\t@ViewChild(\"reference\", { static: true }) referenceElement: ElementRef;\n\t@ViewChild(\"menuTemplate\") menuTemplate: TemplateRef;\n\n\tprotected documentClick = this.handleFocusOut.bind(this);\n\tprotected unmountFloatingElement: Function;\n\n\tprivate subscriptions: Subscription[] = [];\n\tprivate _alignment: MenuButtonPlacement = \"bottom\";\n\tprivate menuRef: HTMLElement;\n\n\tconstructor(\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected hostElement: ElementRef,\n\t\tprotected viewContainerRef: ViewContainerRef,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) { }\n\n\n\t/**\n\t * In case user updates alignment, store initial value.\n\t * This allows us to test user passed alignment on each open\n\t */\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes.menuAlignment) {\n\t\t\tthis._alignment = changes.menuAlignment.currentValue;\n\t\t}\n\t}\n\n\n\n\t/**\n\t * If user has passed in true for open, we dynamically open the menu\n\t */\n\tngAfterViewInit(): void {\n\t\tif (this.open) {\n\t\t\tthis.open = !this.open;\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t* Clean up Floating-ui & subscriptions\n\t*/\n\tngOnDestroy(): void {\n\t\tthis.cleanUp();\n\t\tthis.subscriptions.forEach((sub) => sub.unsubscribe());\n\t}\n\n\n\t/**\n\t * As of now, menu button does not support nexted menu, on button click it should close\n\t */\n\thandleMenuItemClick(event: ItemClickEvent) {\n\t\t// If event is not type radio/checkbox, we close the menu\n\t\tif (!event.type) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t * On body click, close the menu\n\t * @param event\n\t */\n\thandleFocusOut(event) {\n\t\tif (!this.hostElement.nativeElement.contains(event.target)) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t * Clean up `autoUpdate` if auto alignment is enabled\n\t */\n\tcleanUp() {\n\t\tdocument.removeEventListener(\"click\", this.documentClick);\n\t\tif (this.unmountFloatingElement) {\n\t\t\tthis.menuRef.remove();\n\t\t\tthis.viewContainerRef.clear();\n\t\t\tthis.unmountFloatingElement();\n\t\t}\n\t\tthis.unmountFloatingElement = undefined;\n\t\t// On all instances of menu closing, make sure icon direction is correct\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n\n\n\n\t/**\n\t * Handles emitting open/close event\n\t */\n\ttoggleMenu() {\n\t\tthis.open = !this.open;\n\t\tif (this.open) {\n\t\t\t// Render the template & append to view\n\t\t\tconst view = this.viewContainerRef.createEmbeddedView(this.menuTemplate);\n\t\t\tthis.menuRef = document.body.appendChild(view.rootNodes[0] as HTMLElement);\n\t\t\t// Assign button width to the menu ref to align with button\n\t\t\tObject.assign(this.menuRef.style, {\n\t\t\t\twidth: `${this.referenceElement.nativeElement.clientWidth}px`,\n\t\t\t\ttop: \"0\",\n\t\t\t\tleft: \"0\"\n\t\t\t});\n\n\t\t\t// Reset & test alignment every open\n\t\t\tthis.menuAlignment = this._alignment;\n\n\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\n\t\t\t// Listen for events such as scrolling to keep menu aligned\n\t\t\tthis.unmountFloatingElement = autoUpdate(\n\t\t\t\tthis.referenceElement.nativeElement,\n\t\t\t\tthis.menuRef,\n\t\t\t\tthis.recomputePosition.bind(this)\n\t\t\t);\n\t\t} else {\n\t\t\tthis.cleanUp();\n\t\t}\n\t}\n\n\n\n\troundByDPR(value) {\n\t\tconst dpr = window.devicePixelRatio || 1;\n\t\treturn Math.round(value * dpr) / dpr;\n\t}\n\n\n\n\t/**\n\t * Compute position of menu\n\t */\n\trecomputePosition() {\n\t\tif (this.menuTemplate && this.referenceElement) {\n\t\t\t// Run outside of angular zone to avoid unnecessary change detection and rely on floating-ui\n\t\t\tthis.ngZone.runOutsideAngular(async () => {\n\t\t\t\tconst { x, y, placement } = await computePosition(\n\t\t\t\t\tthis.referenceElement.nativeElement,\n\t\t\t\t\tthis.menuRef,\n\t\t\t\t\t{\n\t\t\t\t\t\tplacement: this.menuAlignment,\n\t\t\t\t\t\tstrategy: \"fixed\",\n\t\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\t\tflip({ crossAxis: false })\n\t\t\t\t\t\t]\n\t\t\t\t\t});\n\n\t\t\t\tthis.menuAlignment = placement as MenuButtonPlacement;\n\n\t\t\t\t// Using CSSOM to manipulate CSS to avoid content security policy inline-src\n\t\t\t\t// https://github.com/w3c/webappsec-csp/issues/212\n\t\t\t\tObject.assign(this.menuRef.style, {\n\t\t\t\t\tposition: \"fixed\",\n\t\t\t\t\t// Using transform instead of top/left position to improve performance\n\t\t\t\t\ttransform: `translate(${this.roundByDPR(x)}px,${this.roundByDPR(y)}px)`\n\t\t\t\t});\n\t\t\t\tthis.changeDetectorRef.markForCheck();\n\t\t\t});\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "" }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "" }, { "name": "hostElement", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "viewContainerRef", "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "" }, { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "" } ], "line": 109, "jsdoctags": [ { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "hostElement", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "viewContainerRef", "type": "ViewContainerRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnChanges", "AfterViewInit", "OnDestroy" ], "accessors": { "projectedMenuItems": { "name": "projectedMenuItems", "setSignature": { "name": "projectedMenuItems", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "itemList", "type": "QueryList", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 80, "jsdoctags": [ { "name": "itemList", "type": "QueryList", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } } } }, { "name": "MockQueryCombobox", "id": "component-MockQueryCombobox-87d1f26349c813e36ca2b19d0e7cb9ff5690dd69abba140e1debc7229ebd981131f8cc38bc647b1e0d58efecb873a83465cdde7d68564cdc21309bb408ee9a59", "file": "src/combobox/stories/app-mock-query-search.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-mock-query-search", "styleUrls": [], "styles": [], "template": "\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "currentlySelected", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "", "line": 17 }, { "name": "filterItems", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "", "line": 16 } ], "methodsClass": [ { "name": "onSearch", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 19, "deprecated": false, "deprecationMessage": "" }, { "name": "selected", "args": [ { "name": "event", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 37, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component } from \"@angular/core\";\n\n@Component({\n\tselector: \"app-mock-query-search\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class MockQueryCombobox {\n\tfilterItems: any = [];\n\tcurrentlySelected: any;\n\n\tonSearch() {\n\t\t// Call API or search through items list\n\t\tsetTimeout(() => {\n\t\t\tconst array = [\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t];\n\n\t\t\t// Include current selected in the list to avoid auto clear\n\t\t\tif (this.currentlySelected) {\n\t\t\t\tarray.push(this.currentlySelected)\n\t\t\t}\n\t\t\tthis.filterItems = array;\n\t\t}, 1000);\n\t}\n\n\tselected(event: any) {\n\t\t/**\n\t\t * #ref-1245723\n\t\t * Update this on major release\n\t\t */\n\t\tif (Array.isArray(event) && !event.length) {\n\t\t\tthis.currentlySelected = undefined;\n\t\t} else {\n\t\t\tthis.currentlySelected = event;\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "Modal", "id": "component-Modal-d663fa490124907b8f4786b306e4f13e35fa203fdb5b0803e85cc9992b3e894706f64d58c9e98c6ed81a94ed4b85633f2965afdcd6910d7ae15822ada350fe54", "file": "src/modal/modal.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-modal, ibm-modal", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "defaultValue": "\"default\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nLabel for the modal.\n", "description": "

Label for the modal.

\n", "line": 116, "type": "string", "decorators": [] }, { "name": "hasScrollingContent", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecify whether the modal contains scrolling content. This property overrides the automatic\ndetection of the existence of scrolling content. Set this property to `true` to force\noverflow indicator to show up or to `false` to force overflow indicator to disappear.\nIt is set to `null` by default which indicates not to override automatic detection.\n", "description": "

Specify whether the modal contains scrolling content. This property overrides the automatic\ndetection of the existence of scrolling content. Set this property to true to force\noverflow indicator to show up or to false to force overflow indicator to disappear.\nIt is set to null by default which indicates not to override automatic detection.

\n", "line": 134, "type": "boolean", "decorators": [] }, { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the visibility of the modal when used directly in a template\n", "description": "

Controls the visibility of the modal when used directly in a template

\n", "line": 121, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSize of the modal to display.\n", "description": "

Size of the modal to display.

\n", "line": 107, "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "theme", "defaultValue": "\"default\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nClassification of the modal.\n", "description": "

Classification of the modal.

\n", "line": 111, "type": "\"default\" | \"danger\"", "decorators": [] }, { "name": "trigger", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe element that triggers the modal, which should receive focus when the modal closes\n", "description": "

The element that triggers the modal, which should receive focus when the modal closes

\n", "line": 126, "type": "HTMLElement", "decorators": [] } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTo emit the closing event of the modal window.\n", "description": "

To emit the closing event of the modal window.

\n", "line": 143, "type": "EventEmitter" }, { "name": "overlaySelected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits event when click occurs within `n-overlay` element. This is to track click events occurring outside bounds of the `Modal` object.\n", "description": "

Emits event when click occurs within n-overlay element. This is to track click events occurring outside bounds of the Modal object.

\n", "line": 139, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "modal", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "

Maintains a reference to the view DOM element of the Modal.

\n", "line": 147, "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Modal`.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'modal', {static: true}" } ], "modifierKind": [ 170 ] }, { "name": "modalService", "deprecated": false, "deprecationMessage": "", "type": "BaseModalService", "optional": false, "description": "", "line": 158, "modifierKind": [ 125 ] }, { "name": "selectorPrimaryFocus", "defaultValue": "\"[modal-primary-focus]\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

An element should have 'modal-primary-focus' as an attribute to receive initial focus within the Modal component.

\n", "line": 152, "rawdescription": "\n\nAn element should have 'modal-primary-focus' as an attribute to receive initial focus within the `Modal` component.\n" } ], "methodsClass": [ { "name": "handleKeyboardEvent", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 195, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandle keyboard events to close modal and tab through the content within the modal.\n", "description": "

Handle keyboard events to close modal and tab through the content within the modal.

\n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "keydown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandle keyboard events to close modal and tab through the content within the modal.\n", "description": "

Handle keyboard events to close modal and tab through the content within the modal.

\n", "line": 195 } ], "standalone": false, "imports": [], "description": "

Component to create modals for presenting content.

\n

See demo

\n

Using a modal in your application requires cds-placeholder which would generally be\nplaced near the end of your app component template (app.component.ts or app.component.html) as:

\nExample :
<cds-placeholder></cds-placeholder>

A more complete example for Modal is given as follows:

\n

Example modal definition:

\nExample :
@Component({\nselector: "app-sample-modal",\ntemplate: `\n<cds-modal size="xl" (overlaySelected)="closeModal()">\n<cds-modal-header (closeSelect)="closeModal()">Header text</cds-modal-header>\n<section class="modal-body">\n<h1>Sample modal works.</h1>\n<button class="btn--icon-link" nPopover="Hello there" title="Popover title" placement="right" appendInline="true">\n<svg cdsIcon="info" size="sm"></svg>\n</button>\n{{modalText}}\n</section>\n<cds-modal-footer><button cdsButton="primary" (click)="closeModal()">Close</button></cds-modal-footer>\n</cds-modal>`,\nstyleUrls: ["./sample-modal.component.scss"]\n})\nexport class SampleModal extends BaseModal {\nmodalText: string;\nconstructor(protected injector: Injector) {\nsuper();\nthis.modalText = this.injector.get("modalText");\n}\n}

Example of opening the modal:

\nExample :
@Component({\nselector: "app-modal-demo",\ntemplate: `\n<button cdsButton="primary" (click)="openModal('drill')">Drill-down modal</button>\n<cds-placeholder></cds-placeholder>`\n})\nexport class ModalDemo {\nopenModal() {\nthis.modalService.create({component: SampleModal, inputs: {modalText: "Hello universe."}});\n}\n}
", "rawdescription": "\n\nComponent to create modals for presenting content.\n\n[See demo](../../?path=/story/components-modal--basic)\n\nUsing a modal in your application requires `cds-placeholder` which would generally be\nplaced near the end of your app component template (app.component.ts or app.component.html) as:\n\n```html\n\n```\n\nA more complete example for `Modal` is given as follows:\n\nExample modal definition:\n\n```typescript\n@Component({\nselector: \"app-sample-modal\",\ntemplate: `\n\nHeader text\n
\n

Sample modal works.

\n\n{{modalText}}\n
\n\n`,\nstyleUrls: [\"./sample-modal.component.scss\"]\n})\nexport class SampleModal extends BaseModal {\nmodalText: string;\nconstructor(protected injector: Injector) {\nsuper();\nthis.modalText = this.injector.get(\"modalText\");\n}\n}\n```\n\nExample of opening the modal:\n\n```typescript\n@Component({\nselector: \"app-modal-demo\",\ntemplate: `\n\n`\n})\nexport class ModalDemo {\nopenModal() {\nthis.modalService.create({component: SampleModal, inputs: {modalText: \"Hello universe.\"}});\n}\n}\n```\n", "type": "component", "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tEventEmitter,\n\tHostListener,\n\tInput,\n\tOutput,\n\tElementRef,\n\tViewChild,\n\tSimpleChanges,\n\tOnChanges,\n\tRenderer2,\n\tInject,\n\tOnDestroy\n} from \"@angular/core\";\nimport { DOCUMENT } from \"@angular/common\";\nimport { cycleTabs, getFocusElementList } from \"carbon-components-angular/common\";\nimport { BaseModalService } from \"./base-modal.service\";\n\n/**\n * Component to create modals for presenting content.\n *\n * [See demo](../../?path=/story/components-modal--basic)\n *\n * Using a modal in your application requires `cds-placeholder` which would generally be\n * placed near the end of your app component template (app.component.ts or app.component.html) as:\n *\n```html\n\n```\n *\n * A more complete example for `Modal` is given as follows:\n *\n * Example modal definition:\n *\n```typescript\n@Component({\n\tselector: \"app-sample-modal\",\n\ttemplate: `\n\t\t\t\t\n\t\t\t\t\tHeader text\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Sample modal works.

\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{modalText}}\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t`,\n\tstyleUrls: [\"./sample-modal.component.scss\"]\n})\nexport class SampleModal extends BaseModal {\n\tmodalText: string;\n\tconstructor(protected injector: Injector) {\n\t\tsuper();\n\t\tthis.modalText = this.injector.get(\"modalText\");\n\t}\n}\n```\n *\n * Example of opening the modal:\n *\n```typescript\n@Component({\n\tselector: \"app-modal-demo\",\n\ttemplate: `\n\t\t\t\t\n\t\t\t\t`\n})\nexport class ModalDemo {\n\topenModal() {\n\t\tthis.modalService.create({component: SampleModal, inputs: {modalText: \"Hello universe.\"}});\n\t}\n}\n```\n */\n@Component({\n\tselector: \"cds-modal, ibm-modal\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class Modal implements AfterViewInit, OnChanges, OnDestroy {\n\t/**\n\t * Size of the modal to display.\n\t */\n\t@Input() size: \"xs\" | \"sm\"| \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Classification of the modal.\n\t */\n\t@Input() theme: \"default\" | \"danger\" = \"default\";\n\n\t/**\n\t * Label for the modal.\n\t */\n\t@Input() ariaLabel = \"default\";\n\n\t/**\n\t * Controls the visibility of the modal when used directly in a template\n\t */\n\t@Input() open = false;\n\n\t/**\n\t * The element that triggers the modal, which should receive focus when the modal closes\n\t */\n\t@Input() trigger: HTMLElement;\n\n\t/**\n\t * Specify whether the modal contains scrolling content. This property overrides the automatic\n\t * detection of the existence of scrolling content. Set this property to `true` to force\n\t * overflow indicator to show up or to `false` to force overflow indicator to disappear.\n\t * It is set to `null` by default which indicates not to override automatic detection.\n\t */\n\t@Input() hasScrollingContent: boolean = null;\n\n\t/**\n\t * Emits event when click occurs within `n-overlay` element. This is to track click events occurring outside bounds of the `Modal` object.\n\t */\n\t@Output() overlaySelected = new EventEmitter();\n\t/**\n\t * To emit the closing event of the modal window.\n\t */\n\t@Output() close = new EventEmitter();\n\t/**\n\t * Maintains a reference to the view DOM element of the `Modal`.\n\t */\n\t@ViewChild(\"modal\", { static: true }) modal: ElementRef;\n\n\t/**\n\t * An element should have 'modal-primary-focus' as an attribute to receive initial focus within the `Modal` component.\n\t */\n\tselectorPrimaryFocus = \"[modal-primary-focus]\";\n\n\t/**\n\t * Creates an instance of `Modal`.\n\t */\n\tconstructor(\n\t\tpublic modalService: BaseModalService,\n\t\t@Inject(DOCUMENT) private document: Document,\n\t\tprivate renderer: Renderer2\n\t) { }\n\n\tngOnChanges({ open, hasScrollingContent }: SimpleChanges) {\n\t\tif (open) {\n\t\t\tif (open.currentValue) {\n\t\t\t\t// `100` is just enough time to allow the modal\n\t\t\t\t// to become visible, so that we can set focus\n\t\t\t\tsetTimeout(() => this.focusInitialElement(), 100);\n\t\t\t\t// Prevent scrolling on open\n\t\t\t\tthis.renderer.addClass(this.document.body, \"cds--body--with-modal-open\");\n\t\t\t} else if (!open.currentValue) {\n\t\t\t\t// Enable scrolling on close\n\t\t\t\tthis.renderer.removeClass(this.document.body, \"cds--body--with-modal-open\");\n\t\t\t} else if (this.trigger) {\n\t\t\t\tthis.trigger.focus();\n\t\t\t}\n\t\t}\n\t\tif (hasScrollingContent) {\n\t\t\tthis.updateScrollbar();\n\t\t}\n\t}\n\n\t/**\n\t * Set document focus to be on the modal component after it is initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.focusInitialElement();\n\t\tthis.updateScrollbar();\n\t}\n\n\t/**\n\t * Handle keyboard events to close modal and tab through the content within the modal.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thandleKeyboardEvent(event: KeyboardEvent) {\n\t\tswitch (event.key) {\n\t\t\tcase \"Escape\": {\n\t\t\t\tevent.stopImmediatePropagation(); // prevents events being fired for multiple modals if more than 2 open\n\t\t\t\t// Manually close modal\n\t\t\t\tthis.open = false;\n\t\t\t\tthis.close.emit();\n\t\t\t\tthis.modalService.destroy(); // destroy top (latest) modal\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase \"Tab\": {\n\t\t\t\tcycleTabs(event, this.modal.nativeElement);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * This detects whether or not the modal contains scrolling content.\n\t *\n\t * To force trigger a detection (ie. on window resize), change or reset the value of the modal content.\n\t *\n\t * Use the `hasScrollingContent` input to manually override the overflow indicator.\n\t */\n\tget shouldShowScrollbar() {\n\t\tconst modalContent = this.modal ? this.modal.nativeElement.querySelector(\".cds--modal-content\") : null;\n\t\tif (modalContent) {\n\t\t\t// get rounded value from height to match integer returned from scrollHeight\n\t\t\tconst modalContentHeight = Math.ceil(modalContent.getBoundingClientRect().height);\n\t\t\tconst modalContentScrollHeight = modalContent.scrollHeight;\n\t\t\treturn modalContentScrollHeight > modalContentHeight;\n\t\t} else {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t// Remove class preventing scrolling\n\tngOnDestroy() {\n\t\tthis.renderer.removeClass(this.document.body, \"cds--body--with-modal-open\");\n\t}\n\n\tprotected focusInitialElement() {\n\t\tconst primaryFocusElement = this.modal.nativeElement.querySelector(this.selectorPrimaryFocus);\n\t\tif (primaryFocusElement && primaryFocusElement.focus) {\n\t\t\tsetTimeout(() => primaryFocusElement.focus());\n\t\t} else if (getFocusElementList(this.modal.nativeElement).length > 0) {\n\t\t\tsetTimeout(() => getFocusElementList(this.modal.nativeElement)[0].focus());\n\t\t} else {\n\t\t\tsetTimeout(() => this.modal.nativeElement.focus());\n\t\t}\n\t}\n\n\tprivate updateScrollbar() {\n\t\tconst modalContent = this.modal ? this.modal.nativeElement.querySelector(\".cds--modal-content\") : null;\n\t\tconst showScrollbar = this.hasScrollingContent !== null ? this.hasScrollingContent : this.shouldShowScrollbar;\n\t\tif (modalContent) {\n\t\t\tif (showScrollbar) {\n\t\t\t\tthis.renderer.addClass(modalContent, \"cds--modal-scroll-content\");\n\t\t\t} else {\n\t\t\t\tthis.renderer.removeClass(modalContent, \"cds--modal-scroll-content\");\n\t\t\t}\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

Creates an instance of Modal.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "modalService", "type": "BaseModalService", "deprecated": false, "deprecationMessage": "" }, { "name": "document", "type": "Document", "deprecated": false, "deprecationMessage": "" }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "" } ], "line": 152, "rawdescription": "\n\nCreates an instance of `Modal`.\n", "jsdoctags": [ { "name": "modalService", "type": "BaseModalService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "document", "type": "Document", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AfterViewInit", "OnChanges", "OnDestroy" ], "accessors": { "shouldShowScrollbar": { "name": "shouldShowScrollbar", "getSignature": { "name": "shouldShowScrollbar", "type": "", "returnType": "", "line": 220, "rawdescription": "\n\nThis detects whether or not the modal contains scrolling content.\n\nTo force trigger a detection (ie. on window resize), change or reset the value of the modal content.\n\nUse the `hasScrollingContent` input to manually override the overflow indicator.\n", "description": "

This detects whether or not the modal contains scrolling content.

\n

To force trigger a detection (ie. on window resize), change or reset the value of the modal content.

\n

Use the hasScrollingContent input to manually override the overflow indicator.

\n" } } } }, { "name": "ModalFooter", "id": "component-ModalFooter-54d6afcc5c34693096fc4a4f0c36c63f6e7ac4ca15dfc4172ba9b472f7545aa41f7ba43b258df60fc2cf4b9016efe41923e807d03425f376a60115940a7c0f2d", "file": "src/modal/modal-footer.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-modal-footer, ibm-modal-footer", "styleUrls": [], "styles": [], "template": "
\n\t\n
\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component } from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-modal-footer, ibm-modal-footer\",\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t
\n\t`\n})\nexport class ModalFooter {}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "ModalHeader", "id": "component-ModalHeader-0077de62bf66929baacca6dab2b12ad8f98c62bec63adc4d64b87eb1b791122185412aca8d8884243c4e13bcd33b9b7b133c2008f11826608fc665bcfa86c723", "file": "src/modal/modal-header.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-modal-header, ibm-modal-header", "styleUrls": [], "styles": [], "template": "
\n\t\n\t
\n\t\t\n\t\t\t\n\t\t\n\t
\n
\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "closeLabel", "defaultValue": "this.i18n.get().MODAL.CLOSE", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAccessible label for the header close button.\nDefaults to the `MODAL.CLOSE` value from the i18n service.\n", "description": "

Accessible label for the header close button.\nDefaults to the MODAL.CLOSE value from the i18n service.

\n", "line": 51, "type": "any", "decorators": [] }, { "name": "showCloseButton", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide the close button.\n", "description": "

Set to false to hide the close button.

\n", "line": 55, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"default\"", "deprecated": true, "deprecationMessage": "since v5\nSets the style on the modal heading based on its category.", "jsdoctags": [ { "pos": 924, "end": 1010, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 925, "end": 935, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5\nSets the style on the modal heading based on its category.

\n" } ], "line": 46, "type": "string", "decorators": [] } ], "outputsClass": [ { "name": "closeSelect", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTo emit the event of clicking on the close icon within the modal.\n", "description": "

To emit the event of clicking on the close icon within the modal.

\n", "line": 60, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "buttonAttributes", "defaultValue": "{\n\t\t\"aria-label\": this.i18n.get().MODAL.CLOSE\n\t}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "", "line": 66 }, { "name": "buttonNgClass", "defaultValue": "{\n\t\t\"cds--modal-close\": true\n\t}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "", "line": 62 } ], "methodsClass": [ { "name": "onClose", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 75, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles click for the close icon button within the `Modal`.\n", "description": "

Handles click for the close icon button within the Modal.

\n", "modifierKind": [ 125 ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Inputs

\nExample :
<cds-modal-header>Header text</cds-modal-header>

Outputs

\nExample :
<cds-modal-header (closeSelect)="closeModal()">Header text</cds-modal-header>
", "rawdescription": "\n\n***Inputs***\n```html\nHeader text\n```\n\n***Outputs***\n```html\nHeader text\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOutput,\n\tEventEmitter,\n\tInput\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * ***Inputs***\n * ```html\n * Header text\n * ```\n *\n * ***Outputs***\n * ```html\n * Header text\n * ```\n */\n@Component({\n\tselector: \"cds-modal-header, ibm-modal-header\",\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\n\t`\n})\nexport class ModalHeader {\n\t/**\n\t * @deprecated since v5\n\t * Sets the style on the modal heading based on its category.\n\t */\n\t@Input() theme = \"default\";\n\t/**\n\t * Accessible label for the header close button.\n\t * Defaults to the `MODAL.CLOSE` value from the i18n service.\n\t */\n\t@Input() closeLabel = this.i18n.get().MODAL.CLOSE;\n\t/**\n\t * Set to `false` to hide the close button.\n\t */\n\t@Input() showCloseButton = true;\n\n\t/**\n\t * To emit the event of clicking on the close icon within the modal.\n\t */\n\t@Output() closeSelect = new EventEmitter();\n\n\tbuttonNgClass = {\n\t\t\"cds--modal-close\": true\n\t};\n\n\tbuttonAttributes = {\n\t\t\"aria-label\": this.i18n.get().MODAL.CLOSE\n\t};\n\n\tconstructor(protected i18n: I18n) {}\n\n\t/**\n\t * Handles click for the close icon button within the `Modal`.\n\t */\n\tpublic onClose() {\n\t\tthis.closeSelect.emit();\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 68, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [] }, { "name": "ModalStory", "id": "component-ModalStory-be8da42033114ee27199ad2dd382ae5da8a4fdb1c5340049c45a5f5114c3adbd7bb89a11430e5a43161c9a670fcc44badc674646dcfa8008085fedf2555ad612", "file": "src/modal/stories/modal.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-modal-story", "styleUrls": [], "styles": [], "template": "\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "modalText", "defaultValue": "\"Hello, World\"", "deprecated": false, "deprecationMessage": "", "line": 13, "type": "string", "decorators": [] }, { "name": "showCloseButton", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 15, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 14, "type": "string", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "openModal", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 19, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\nimport { ModalService } from \"../\";\n\nimport { SampleModal } from \"./sample-modal.component\";\n\n@Component({\n\tselector: \"app-modal-story\",\n\ttemplate: `\n\t\t\n\t`\n})\nexport class ModalStory {\n\t@Input() modalText = \"Hello, World\";\n\t@Input() size = \"md\";\n\t@Input() showCloseButton = true;\n\n\tconstructor(protected modalService: ModalService) { }\n\n\topenModal() {\n\t\tthis.modalService.create({\n\t\t\tcomponent: SampleModal,\n\t\t\tinputs: {\n\t\t\t\tmodalText: this.modalText,\n\t\t\t\tsize: this.size,\n\t\t\t\tshowCloseButton: this.showCloseButton\n\t\t\t}\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "modalService", "type": "ModalService", "deprecated": false, "deprecationMessage": "" } ], "line": 15, "jsdoctags": [ { "name": "modalService", "type": "ModalService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [] }, { "name": "ModalWithTableStory", "id": "component-ModalWithTableStory-c97f7af9ebd4bc139949c8f6d4a8fbee69328efb903e007718122c0578fdf5a06c4c2aee85ad8c5a879c52b71e7c4a366981c314d045a80455f3fd5a1e0df5d1", "file": "src/patterns/dialogs/modal-with-table.stories.ts", "encapsulation": [ "ViewEncapsulation.None" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-modal-with-table", "styleUrls": [], "styles": [ "\n\t\t.cds--modal-content {\n\t\t\t/* !important is needed to prevent override from media queries. */\n\t\t\tpadding-left: 0 !important;\n\t\t\tpadding-right: 0 !important;\n\t\t}\n\n\t\t.progress-wrapper {\n\t\t\tmargin-top: 2rem;\n\t\t\tmargin-bottom: 1rem;\n\t\t\tpadding-left: 1rem;\n\t\t\tpadding-right: 1rem;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.buttons-wrapper {\n\t\t\twidth: 50%;\n\t\t}\n\n\t\t.modal-button{\n\t\t\twidth: 50%;\n\t\t}\n\n\t\t.cds--link {\n\t\t\tposition: absolute;\n\t\t\talign-self: center;\n\t\t\tleft: 1rem;\n\t\t}\n\t" ], "template": "\n\t\n\t\t

Create workspace

\n\t\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t
\n\t\n\t\tCancel\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the open state of the modal\n", "description": "

Controls the open state of the modal

\n", "line": 25, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseModal" } } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nBase event emitter to propagate close events\n", "description": "

Base event emitter to propagate close events

\n", "line": 20, "type": "EventEmitter", "inheritance": { "file": "BaseModal" } } ], "propertiesClass": [ { "name": "current", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 119 }, { "name": "dataset", "defaultValue": "[\n\t\t[\n\t\t\tnew TableItem({ data: \"800\" }),\n\t\t\tnew TableItem({ data: \"East Sadye\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"500\" }),\n\t\t\tnew TableItem({ data: \"Lueilwitzview\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"120\" }),\n\t\t\tnew TableItem({ data: \"East Arcelyside\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"France\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"119\" }),\n\t\t\tnew TableItem({ data: \"West Dylan\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Argentina\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"54\" }),\n\t\t\tnew TableItem({ data: \"Brandynberg\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Japan\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"15\" }),\n\t\t\tnew TableItem({ data: \"Stoltenbergport\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Canada\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"12\" }),\n\t\t\tnew TableItem({ data: \"Rheabury\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t]\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 123 }, { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 121 }, { "name": "steps", "defaultValue": "[\n\t\t{\n\t\t\ttext: \"General\",\n\t\t\tstate: [\"complete\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Select nodes\",\n\t\t\tstate: [\"current\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Select widgets\",\n\t\t\tstate: [\"incomplete\"]\n\t\t}\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 104 } ], "methodsClass": [ { "name": "onSearch", "args": [ { "name": "searchString", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 187, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "searchString", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "closeModal", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 30, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefault method to handle closing the modal\n", "description": "

Default method to handle closing the modal

\n", "inheritance": { "file": "BaseModal" } } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOnInit,\n\tViewEncapsulation\n} from \"@angular/core\";\nimport { moduleMetadata, Meta } from \"@storybook/angular\";\nimport { BaseModal, ModalModule } from \"../../modal\";\nimport {\n\tTableHeaderItem,\n\tTableItem,\n\tTableModel,\n\tTableModule\n} from \"../../table/index\";\nimport { ButtonModule } from \"../../button\";\nimport { ProgressIndicatorModule } from \"../../progress-indicator\";\nimport { LinkModule } from \"../../link\";\n\n@Component({\n\tselector: \"app-modal-with-table\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

Create workspace

\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\tCancel\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t`,\n\tencapsulation: ViewEncapsulation.None,\n\tstyles: [`\n\t\t.cds--modal-content {\n\t\t\t/* !important is needed to prevent override from media queries. */\n\t\t\tpadding-left: 0 !important;\n\t\t\tpadding-right: 0 !important;\n\t\t}\n\n\t\t.progress-wrapper {\n\t\t\tmargin-top: 2rem;\n\t\t\tmargin-bottom: 1rem;\n\t\t\tpadding-left: 1rem;\n\t\t\tpadding-right: 1rem;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.buttons-wrapper {\n\t\t\twidth: 50%;\n\t\t}\n\n\t\t.modal-button{\n\t\t\twidth: 50%;\n\t\t}\n\n\t\t.cds--link {\n\t\t\tposition: absolute;\n\t\t\talign-self: center;\n\t\t\tleft: 1rem;\n\t\t}\n\t`\n\t]\n})\nclass ModalWithTableStory extends BaseModal implements OnInit {\n\tsteps = [\n\t\t{\n\t\t\ttext: \"General\",\n\t\t\tstate: [\"complete\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Select nodes\",\n\t\t\tstate: [\"current\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Select widgets\",\n\t\t\tstate: [\"incomplete\"]\n\t\t}\n\t];\n\n\tcurrent = 1;\n\n\tmodel = new TableModel();\n\n\tdataset = [\n\t\t[\n\t\t\tnew TableItem({ data: \"800\" }),\n\t\t\tnew TableItem({ data: \"East Sadye\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"500\" }),\n\t\t\tnew TableItem({ data: \"Lueilwitzview\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"120\" }),\n\t\t\tnew TableItem({ data: \"East Arcelyside\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"France\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"119\" }),\n\t\t\tnew TableItem({ data: \"West Dylan\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Argentina\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"54\" }),\n\t\t\tnew TableItem({ data: \"Brandynberg\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Japan\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"15\" }),\n\t\t\tnew TableItem({ data: \"Stoltenbergport\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"Canada\" })\n\t\t],\n\t\t[\n\t\t\tnew TableItem({ data: \"12\" }),\n\t\t\tnew TableItem({ data: \"Rheabury\" }),\n\t\t\tnew TableItem({ data: \"Store\" }),\n\t\t\tnew TableItem({ data: \"US\" })\n\t\t]\n\t];\n\n\tngOnInit() {\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Node ID\"\n\t\t\t}),\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Node name\"\n\t\t\t}),\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Node type\"\n\t\t\t}),\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Country\"\n\t\t\t})\n\t\t];\n\n\t\tthis.model.data = this.dataset;\n\t}\n\n\tonSearch(searchString: string) {\n\t\tthis.model.data = this.dataset.filter(row => row[0].data.toLowerCase().includes(searchString));\n\t}\n}\n\n// Storybook starts here\nexport default {\n\ttitle: \"Pattern/Dialogs\",\n\tdecorators: [\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [ModalWithTableStory],\n\t\t\timports: [\n\t\t\t\tModalModule,\n\t\t\t\tTableModule,\n\t\t\t\tButtonModule,\n\t\t\t\tProgressIndicatorModule,\n\t\t\t\tLinkModule\n\t\t\t]\n\t\t})\n\t]\n} as Meta;\n\nconst Template = (args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n});\nexport const WithDataTable = Template.bind({});\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t.cds--modal-content {\n\t\t\t/* !important is needed to prevent override from media queries. */\n\t\t\tpadding-left: 0 !important;\n\t\t\tpadding-right: 0 !important;\n\t\t}\n\n\t\t.progress-wrapper {\n\t\t\tmargin-top: 2rem;\n\t\t\tmargin-bottom: 1rem;\n\t\t\tpadding-left: 1rem;\n\t\t\tpadding-right: 1rem;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.buttons-wrapper {\n\t\t\twidth: 50%;\n\t\t}\n\n\t\t.modal-button{\n\t\t\twidth: 50%;\n\t\t}\n\n\t\t.cds--link {\n\t\t\tposition: absolute;\n\t\t\talign-self: center;\n\t\t\tleft: 1rem;\n\t\t}\n\t\n", "extends": [ "BaseModal" ], "implements": [ "OnInit" ] }, { "name": "MultiStepFormStory", "id": "component-MultiStepFormStory-75613380ff6f52c2bf18317bb358bd1627e8ba0d6f5db0d88ba531b40b6fbc0226990a8b0bc632bc7ffd29d4b77fea4ff22ca72558cd8d871837ebcd6139af68", "file": "src/patterns/forms/multi-step-form.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-multi-step-form", "styleUrls": [], "styles": [ "\n\t\t.header {\n\t\t\tmargin-bottom: 5rem;\n\t\t}\n\n\t\t.indicator-wrapper {\n\t\t\tbackground-color: #f4f4f4;\n\t\t}\n\n\t\t.sub-heading {\n\t\t\tmargin-bottom: 1.5rem;\n\t\t}\n\n\t\t.indicator {\n\t\t\tmargin-top: 1rem;\n\t\t}\n\n\t\t.form-label {\n\t\t\tmargin-top: 0.7rem;\n\t\t\tmargin-bottom: 0.5rem;\n\t\t}\n\n\t\t.dropdown {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.form-item {\n\t\t\tmargin-top: 1.5rem;\n\t\t}\n\t" ], "template": "
\n\t
\n\t\t\n\t\t\t\n\t\t\n\t
\n\t
\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tDashboard\n\t\t\t\t\n\t\t\t\n\t\t
\n\t
\n\t
\n\t\t
\n\t\t\t

Vertical multi-step form

\n\t\t
\n\t
\n\t
\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t\t
\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t

Create a new workspace

\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tWorkspace name\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tDescription (optional)\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\tStep 3 form!\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t
\n\t
\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "currentStep", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 179 }, { "name": "resourceGroups", "defaultValue": "[\n\t\t{ content: \"None\" },\n\t\t{ content: \"Resource group 1\" },\n\t\t{ content: \"Resource group 2\" }\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 173 }, { "name": "step2FormGroup", "deprecated": false, "deprecationMessage": "", "type": "FormGroup", "optional": false, "description": "", "line": 149, "modifierKind": [ 125 ] }, { "name": "steps", "defaultValue": "[\n\t\t{\n\t\t\tlabel: \"Step 1\",\n\t\t\tcomplete: true\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 2\",\n\t\t\tcurrent: true,\n\t\t\tcomplete: false\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 3\",\n\t\t\tcomplete: false,\n\t\t\tinvalid: true\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 4\",\n\t\t\tcomplete: false,\n\t\t\tsecondaryLabel: \"Optional\"\n\t\t}\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 151 } ], "methodsClass": [ { "name": "changeStep", "args": [ { "name": "step", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 199, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "step", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, OnInit, OnDestroy } from \"@angular/core\";\nimport { moduleMetadata, Meta } from \"@storybook/angular\";\nimport { GridModule } from \"../../grid\";\nimport { UIShellModule } from \"../../ui-shell\";\nimport { DropdownModule } from \"../../dropdown\";\nimport { ButtonModule } from \"../../button\";\nimport { InputModule } from \"../../input\";\nimport { ProgressIndicatorModule } from \"../../progress-indicator\";\nimport { BreadcrumbModule } from \"../../breadcrumb\";\nimport {\n\tFormBuilder,\n\tFormControl,\n\tFormGroup,\n\tReactiveFormsModule\n} from \"@angular/forms\";\n\n@Component({\n\tselector: \"app-multi-step-form\",\n\ttemplate: `\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tDashboard\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Vertical multi-step form

\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Create a new workspace

\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tWorkspace name\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tDescription (optional)\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tStep 3 form!\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t`,\n\tstyles: [`\n\t\t.header {\n\t\t\tmargin-bottom: 5rem;\n\t\t}\n\n\t\t.indicator-wrapper {\n\t\t\tbackground-color: #f4f4f4;\n\t\t}\n\n\t\t.sub-heading {\n\t\t\tmargin-bottom: 1.5rem;\n\t\t}\n\n\t\t.indicator {\n\t\t\tmargin-top: 1rem;\n\t\t}\n\n\t\t.form-label {\n\t\t\tmargin-top: 0.7rem;\n\t\t\tmargin-bottom: 0.5rem;\n\t\t}\n\n\t\t.dropdown {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.form-item {\n\t\t\tmargin-top: 1.5rem;\n\t\t}\n\t`]\n})\nclass MultiStepFormStory implements OnInit, OnDestroy {\n\tpublic step2FormGroup: FormGroup;\n\n\tsteps = [\n\t\t{\n\t\t\tlabel: \"Step 1\",\n\t\t\tcomplete: true\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 2\",\n\t\t\tcurrent: true,\n\t\t\tcomplete: false\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 3\",\n\t\t\tcomplete: false,\n\t\t\tinvalid: true\n\t\t},\n\t\t{\n\t\t\tlabel: \"Step 4\",\n\t\t\tcomplete: false,\n\t\t\tsecondaryLabel: \"Optional\"\n\t\t}\n\t];\n\n\tresourceGroups = [\n\t\t{ content: \"None\" },\n\t\t{ content: \"Resource group 1\" },\n\t\t{ content: \"Resource group 2\" }\n\t];\n\n\tcurrentStep = 1;\n\n\tconstructor(protected formBuilder: FormBuilder) { }\n\n\tngOnInit() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.add(\"full-page\");\n\n\t\tthis.step2FormGroup = this.formBuilder.group({\n\t\t\tworkspaceName: new FormControl(),\n\t\t\tresourceGroup: new FormControl(),\n\t\t\tpurpose: new FormControl()\n\t\t});\n\n\t\tthis.step2FormGroup.get(\"resourceGroup\")?.setValue(\"None\");\n\t}\n\n\tngOnDestroy() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.remove(\"full-page\");\n\t}\n\n\tchangeStep(step: number) {\n\t\tthis.currentStep = step;\n\t}\n}\n\n// Storybook starts here\nexport default {\n\ttitle: \"Pattern/Forms\",\n\tdecorators: [\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [ MultiStepFormStory ],\n\t\t\timports: [\n\t\t\t\tButtonModule,\n\t\t\t\tGridModule,\n\t\t\t\tUIShellModule,\n\t\t\t\tProgressIndicatorModule,\n\t\t\t\tBreadcrumbModule,\n\t\t\t\tReactiveFormsModule,\n\t\t\t\tInputModule,\n\t\t\t\tDropdownModule\n\t\t\t]\n\t\t})\n\t]\n} as Meta;\n\nconst Template = (args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n});\nexport const MultiStep = Template.bind({});\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t.header {\n\t\t\tmargin-bottom: 5rem;\n\t\t}\n\n\t\t.indicator-wrapper {\n\t\t\tbackground-color: #f4f4f4;\n\t\t}\n\n\t\t.sub-heading {\n\t\t\tmargin-bottom: 1.5rem;\n\t\t}\n\n\t\t.indicator {\n\t\t\tmargin-top: 1rem;\n\t\t}\n\n\t\t.form-label {\n\t\t\tmargin-top: 0.7rem;\n\t\t\tmargin-bottom: 0.5rem;\n\t\t}\n\n\t\t.dropdown {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.form-item {\n\t\t\tmargin-top: 1.5rem;\n\t\t}\n\t\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "formBuilder", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "" } ], "line": 179, "jsdoctags": [ { "name": "formBuilder", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit", "OnDestroy" ] }, { "name": "NgModelFileUploaderStory", "id": "component-NgModelFileUploaderStory-646cb511c1d129b7c77176a7e419236cd3ea6b053011fcc748c9899e5d354f0da7a46053f7f952ce138f39bc394952e87a859a19a8647383aae9458a2abd437c", "file": "src/file-uploader/stories/uploader-form.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-ngmodel-file-uploader", "styleUrls": [], "styles": [], "template": "\n\n 0\"\n\t(click)=\"onUpload()\"\n\tstyle=\"margin-top:20px\">\n\tUpload\n\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "accept", "deprecated": false, "deprecationMessage": "", "line": 35, "type": "any", "decorators": [] }, { "name": "buttonText", "deprecated": false, "deprecationMessage": "", "line": 33, "type": "any", "decorators": [] }, { "name": "buttonType", "defaultValue": "\"primary\"", "deprecated": false, "deprecationMessage": "", "line": 34, "type": "string", "decorators": [] }, { "name": "description", "deprecated": false, "deprecationMessage": "", "line": 32, "type": "any", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 38, "type": "boolean", "decorators": [] }, { "name": "fileItemSize", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "line": 39, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "multiple", "deprecated": false, "deprecationMessage": "", "line": 36, "type": "any", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 37, "type": "string", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "line": 31, "type": "any", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "onUpload", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 48, "deprecated": false, "deprecationMessage": "" }, { "name": "removeFiles", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 44, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\n\nimport { FileItem } from \"../\";\n\n@Component({\n\tselector: \"app-ngmodel-file-uploader\",\n\ttemplate: `\n\t\t\n\t\t\n\t\t 0\"\n\t\t\t(click)=\"onUpload()\"\n\t\t\tstyle=\"margin-top:20px\">\n\t\t\tUpload\n\t\t\n\t\t\n\t`\n})\nexport class NgModelFileUploaderStory {\n\t@Input() title;\n\t@Input() description;\n\t@Input() buttonText;\n\t@Input() buttonType = \"primary\";\n\t@Input() accept;\n\t@Input() multiple;\n\t@Input() size = \"md\";\n\t@Input() disabled = false;\n\t@Input() fileItemSize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\tprotected model = new Set();\n\tprotected maxSize = 500000;\n\n\tremoveFiles() {\n\t\tthis.model = new Set();\n\t}\n\n\tonUpload() {\n\t\tthis.model.forEach(fileItem => {\n\t\t\tif (!fileItem.uploaded) {\n\t\t\t\tif (fileItem.file.size < this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"complete\";\n\t\t\t\t\t\tfileItem.uploaded = true;\n\t\t\t\t\t\tconsole.log(fileItem);\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\n\t\t\t\tif (fileItem.file.size > this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"edit\";\n\t\t\t\t\t\tfileItem.invalid = true;\n\t\t\t\t\t\tfileItem.invalidTitle = \"File size exceeds limit\";\n\t\t\t\t\t\tfileItem.invalidText = \"500kb max file size. Select a new file and try again.\";\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "Notification", "id": "component-Notification-07629cc065856bfd8dabc21a6b334615def759c00da1054674f13666364d961e594cc4958734ed251dac15e7c424acef301f2128b847a00f6701c8dd09be1ed4", "file": "src/notification/notification.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", "styleUrls": [], "styles": [], "template": "
\n\t\n\t\n\t
\n\t\t\n\t\t
\n\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\n\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "notificationObj", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCan have `type`, `title`, and `message` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\n`message` is the message to display\n", "description": "

Can have type, title, and message members.

\n

type can be one of "error", "info", "info-square", "warning", "warning-alt", or "success"

\n

message is the message to display

\n", "line": 60, "type": "NotificationContent", "decorators": [] } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits on close.\n", "description": "

Emits on close.

\n", "line": 41, "type": "EventEmitter", "inheritance": { "file": "BaseNotification" } } ], "propertiesClass": [ { "name": "notificationClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 72, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--inline-notification'" } ], "modifierKind": [ 170 ] }, { "name": "notificationID", "defaultValue": "`notification-${Notification.notificationCount++}`", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 70 }, { "name": "notificationLabel", "defaultValue": "this.notificationID", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 71, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.aria-labelledBy'" } ], "modifierKind": [ 170 ] }, { "name": "componentRef", "deprecated": false, "deprecationMessage": "", "type": "ComponentRef", "optional": false, "description": "", "line": 44, "inheritance": { "file": "BaseNotification" } }, { "name": "iconDictionary", "defaultValue": "{\n\t\t\"error\": \"error--filled\",\n\t\t\"info\": \"information--filled\",\n\t\t\"info-square\": \"information--square--filled\",\n\t\t\"success\": \"checkmark--filled\",\n\t\t\"warning\": \"warning--filled\",\n\t\t\"warning-alt\": \"warning--alt--filled\"\n\t}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "", "line": 47, "modifierKind": [ 148 ], "inheritance": { "file": "BaseNotification" } } ], "methodsClass": [ { "name": "destroy", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 90, "deprecated": false, "deprecationMessage": "", "inheritance": { "file": "BaseNotification" } }, { "name": "onClick", "args": [ { "name": "action", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 79, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "action", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "BaseNotification" } }, { "name": "onClose", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 75, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits close event.\n", "description": "

Emits close event.

\n", "inheritance": { "file": "BaseNotification" } } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.aria-labelledBy", "defaultValue": "this.notificationID", "deprecated": false, "deprecationMessage": "", "line": 71, "type": "string", "decorators": [] }, { "name": "class.cds--inline-notification", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 72, "type": "boolean", "decorators": [] }, { "name": "class.cds--inline-notification--error", "deprecated": false, "deprecationMessage": "", "line": 73, "type": "boolean", "decorators": [] }, { "name": "class.cds--inline-notification--hide-close-button", "deprecated": false, "deprecationMessage": "", "line": 80, "type": "boolean", "decorators": [] }, { "name": "class.cds--inline-notification--info", "deprecated": false, "deprecationMessage": "", "line": 74, "type": "boolean", "decorators": [] }, { "name": "class.cds--inline-notification--info-square", "deprecated": false, "deprecationMessage": "", "line": 75, "type": "boolean", "decorators": [] }, { "name": "class.cds--inline-notification--low-contrast", "deprecated": false, "deprecationMessage": "", "line": 79, "type": "any", "decorators": [] }, { "name": "class.cds--inline-notification--success", "deprecated": false, "deprecationMessage": "", "line": 76, "type": "boolean", "decorators": [] }, { "name": "class.cds--inline-notification--warning", "deprecated": false, "deprecationMessage": "", "line": 77, "type": "boolean", "decorators": [] }, { "name": "class.cds--inline-notification--warning-alt", "deprecated": false, "deprecationMessage": "", "line": 78, "type": "boolean", "decorators": [] }, { "name": "attr.role", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet role attribute for component\n`Status` is default for inline-notification & toast component\n`alertdialog` is default for actionable-notification\n", "description": "

Set role attribute for component\nStatus is default for inline-notification & toast component\nalertdialog is default for actionable-notification

\n", "line": 34, "type": "string", "decorators": [], "inheritance": { "file": "BaseNotification" } } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

Notification messages are displayed toward the top of the UI and do not interrupt user’s work.

\n

See demo

\n", "rawdescription": "\n\nNotification messages are displayed toward the top of the UI and do not interrupt user’s work.\n\n[See demo](../../?path=/story/components-notification--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { NotificationContent } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { isObservable, of } from \"rxjs\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Notification messages are displayed toward the top of the UI and do not interrupt user’s work.\n *\n * [See demo](../../?path=/story/components-notification--basic)\n */\n@Component({\n\tselector: \"cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification\",\n\ttemplate: `\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class Notification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): NotificationContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: NotificationContent) {\n\t\tif (obj.closeLabel && !isObservable(obj.closeLabel)) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\tnotificationID = `notification-${Notification.notificationCount++}`;\n\t@HostBinding(\"attr.aria-labelledBy\") notificationLabel = this.notificationID;\n\t@HostBinding(\"class.cds--inline-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--inline-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--inline-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--inline-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--inline-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--inline-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--inline-notification--hide-close-button\") get isCloseHidden() { return !this.notificationObj.showClose; }\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "notificationDisplayService", "type": "NotificationDisplayService", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 80, "jsdoctags": [ { "name": "notificationDisplayService", "type": "NotificationDisplayService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [ "BaseNotification" ], "accessors": { "notificationObj": { "name": "notificationObj", "setSignature": { "name": "notificationObj", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "obj", "type": "NotificationContent", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 63, "jsdoctags": [ { "name": "obj", "type": "NotificationContent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "notificationObj", "type": "", "returnType": "NotificationContent", "line": 60, "rawdescription": "\n\nCan have `type`, `title`, and `message` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\n`message` is the message to display\n", "description": "

Can have type, title, and message members.

\n

type can be one of "error", "info", "info-square", "warning", "warning-alt", or "success"

\n

message is the message to display

\n" } }, "isError": { "name": "isError", "getSignature": { "name": "isError", "type": "", "returnType": "", "line": 73 } }, "isInfo": { "name": "isInfo", "getSignature": { "name": "isInfo", "type": "", "returnType": "", "line": 74 } }, "isInfoSquare": { "name": "isInfoSquare", "getSignature": { "name": "isInfoSquare", "type": "", "returnType": "", "line": 75 } }, "isSuccess": { "name": "isSuccess", "getSignature": { "name": "isSuccess", "type": "", "returnType": "", "line": 76 } }, "isWarning": { "name": "isWarning", "getSignature": { "name": "isWarning", "type": "", "returnType": "", "line": 77 } }, "isWarningAlt": { "name": "isWarningAlt", "getSignature": { "name": "isWarningAlt", "type": "", "returnType": "", "line": 78 } }, "isLowContrast": { "name": "isLowContrast", "getSignature": { "name": "isLowContrast", "type": "", "returnType": "", "line": 79 } }, "isCloseHidden": { "name": "isCloseHidden", "getSignature": { "name": "isCloseHidden", "type": "", "returnType": "", "line": 80 } } } }, { "name": "NotificationStory", "id": "component-NotificationStory-ecdaa853869cbe84c382209c8d7753ac75b13ea4dcd4f1b25e90afab3dcd999bf540abf3b8a696d52d81ffa18686ebfd6b88ca251195cc57881d45a7b15c8c36", "file": "src/notification/stories/notification.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "NotificationService", "type": "injectable" } ], "selector": "app-notification-story", "styleUrls": [], "styles": [], "template": "\n
\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "showNotification", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 15, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component } from \"@angular/core\";\nimport { NotificationService } from \"../\";\n\n@Component({\n\tselector: \"app-notification-story\",\n\ttemplate: `\n\t\t\n\t\t
\n\t`,\n\tproviders: [NotificationService]\n})\nexport class NotificationStory {\n\tconstructor(protected notificationService: NotificationService) { }\n\n\tshowNotification() {\n\t\tthis.notificationService.showNotification({\n\t\t\ttype: \"info\",\n\t\t\ttitle: \"Sample notification\",\n\t\t\tmessage: \"Sample info message\",\n\t\t\ttarget: \".notification-container\"\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "notificationService", "type": "NotificationService", "deprecated": false, "deprecationMessage": "" } ], "line": 12, "jsdoctags": [ { "name": "notificationService", "type": "NotificationService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [] }, { "name": "NumberComponent", "id": "component-NumberComponent-fe20fe65939c8d249815e7b930825da7d9229c32f54dbd3496ec81d6605b4b2f291e5ea9d9ed648e5d850c504af01a335a7caf96b73baaad8c4717ab91830c1f", "file": "src/number-input/number.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: NumberComponent, multi: true\n}", "type": "component" } ], "selector": "cds-number, ibm-number", "styleUrls": [], "styles": [], "template": "\n\n\t\n\t\t{{label}}\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t
\n\t\n\t
\n\t\n\t\t{{helperText}}\n\t\t\n\t\n\t
\n\t\t{{invalidText}}\n\t\t\n\t
\n\t
\n\t\t{{warnText}}\n\t\t\n\t
\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the arialabel for input\n", "description": "

Sets the arialabel for input

\n", "line": 247, "type": "string", "decorators": [] }, { "name": "decrementLabel", "deprecated": false, "deprecationMessage": "", "line": 254, "type": "string | Observable", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a disabled number input.\n", "description": "

Set to true for a disabled number input.

\n", "line": 169, "type": "boolean", "decorators": [] }, { "name": "fluid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExperimental: enable fluid state\n", "description": "

Experimental: enable fluid state

\n", "line": 274, "type": "boolean", "decorators": [] }, { "name": "helperText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the optional helper text.\n", "description": "

Sets the optional helper text.

\n", "line": 223, "type": "string | TemplateRef", "decorators": [] }, { "name": "id", "defaultValue": "`number-${NumberComponent.numberCount}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe unique id for the number component.\n", "description": "

The unique id for the number component.

\n", "line": 181, "type": "string", "decorators": [] }, { "name": "incrementLabel", "deprecated": false, "deprecationMessage": "", "line": 263, "type": "string | Observable", "decorators": [] }, { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for an invalid number component.\n", "description": "

Set to true for an invalid number component.

\n", "line": 177, "type": "boolean", "decorators": [] }, { "name": "invalidText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the invalid text.\n", "description": "

Sets the invalid text.

\n", "line": 227, "type": "string | TemplateRef", "decorators": [] }, { "name": "label", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the text inside the `label` tag.\n", "description": "

Sets the text inside the label tag.

\n", "line": 219, "type": "string | TemplateRef", "decorators": [] }, { "name": "max", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the max attribute on the `input` element.\n", "description": "

Sets the max attribute on the input element.

\n", "line": 215, "type": "any", "decorators": [] }, { "name": "min", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the min attribute on the `input` element.\n", "description": "

Sets the min attribute on the input element.

\n", "line": 211, "type": "any", "decorators": [] }, { "name": "placeholder", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the placeholder attribute on the `input` element.\n", "description": "

Sets the placeholder attribute on the input element.

\n", "line": 185, "type": "string", "decorators": [] }, { "name": "precision", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nIf `step` is a decimal, we may want precision to be set to go around floating point precision.\n", "description": "

If step is a decimal, we may want precision to be set to go around floating point precision.

\n", "line": 235, "type": "number", "decorators": [] }, { "name": "readonly", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for readonly state.\n", "description": "

Set to true for readonly state.

\n", "line": 160, "type": "boolean", "decorators": [] }, { "name": "required", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReflects the required attribute of the `input` element.\n", "description": "

Reflects the required attribute of the input element.

\n", "line": 193, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nNumber input field render size\n", "description": "

Number input field render size

\n", "line": 189, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a loading number component.\n", "description": "

Set to true for a loading number component.

\n", "line": 173, "type": "boolean", "decorators": [] }, { "name": "step", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the amount the number controls increment and decrement by.\n", "description": "

Sets the amount the number controls increment and decrement by.

\n", "line": 231, "type": "number", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` number input theme.", "jsdoctags": [ { "pos": 4737, "end": 4837, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 4738, "end": 4748, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

since v5 - Use cdsLayer directive instead\nlight or dark number input theme.

\n" } ], "line": 165, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "value", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the value attribute on the `input` element.\n", "description": "

Sets the value attribute on the input element.

\n", "line": 197, "type": "any", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n", "description": "

Set to true to show a warning (contents set by warningText)

\n", "line": 239, "type": "boolean", "decorators": [] }, { "name": "warnText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the warning text\n", "description": "

Sets the warning text

\n", "line": 243, "type": "string | TemplateRef", "decorators": [] } ], "outputsClass": [ { "name": "change", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits event notifying other classes when a change in state occurs in the input.\n", "description": "

Emits event notifying other classes when a change in state occurs in the input.

\n", "line": 251, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "containerClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 155, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--form-item'" } ], "modifierKind": [ 170 ] }, { "name": "numberCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

Variable used for creating unique ids for number input components.

\n", "line": 153, "rawdescription": "\n\nVariable used for creating unique ids for number input components.\n", "modifierKind": [ 126 ] }, { "name": "onTouched", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": false, "description": "

Called when number input is blurred. Needed to properly implement ControlValueAccessor.

\n", "line": 344, "rawdescription": "\n\nCalled when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n" }, { "name": "propagateChange", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

Method set in registerOnChange to propagate changes back to the form.

\n", "line": 349, "rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n" } ], "methodsClass": [ { "name": "emitChangeEvent", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 418, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates a class of `NumberChange` to emit the change in the `Number`.\n", "description": "

Creates a class of NumberChange to emit the change in the Number.

\n" }, { "name": "focusOut", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 330, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusout'" } ], "modifierKind": [ 170 ] }, { "name": "getDecrementLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 407, "deprecated": false, "deprecationMessage": "" }, { "name": "getIncrementLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 411, "deprecated": false, "deprecationMessage": "" }, { "name": "handleFocus", "args": [ { "name": "event", "type": "FocusEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 435, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "FocusEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 431, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onDecrement", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 382, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSubtracts `step` to the current `value`.\n", "description": "

Subtracts step to the current value.

\n" }, { "name": "onIncrement", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 354, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAdds `step` to the current `value`.\n", "description": "

Adds step to the current value.

\n" }, { "name": "onNumberInputChange", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 426, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 317, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n", "description": "

Sets a method in order to propagate changes back to the form.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 325, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n", "description": "

Registers a callback to be triggered when the control has been touched.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 8554, "end": 8556, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "fn" }, "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 8548, "end": 8553, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

Callback to be triggered when the number input is touched.

\n" } ] }, { "name": "setDisabledState", "args": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 337, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the disabled state through the model\n", "description": "

Sets the disabled state through the model

\n", "jsdoctags": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "writeValue", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 310, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThis is the initial value set to the component\n", "description": "

This is the initial value set to the component

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 8230, "end": 8235, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "value" }, "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 8224, "end": 8229, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

The input value.

\n" } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--form-item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 155, "type": "boolean", "decorators": [] }, { "name": "class.cds--number-input--fluid--disabled", "deprecated": false, "deprecationMessage": "", "line": 280, "type": "boolean", "decorators": [] }, { "name": "class.cds--number-input--fluid--focus", "deprecated": false, "deprecationMessage": "", "line": 284, "type": "boolean", "decorators": [] }, { "name": "class.cds--number-input--fluid--invalid", "deprecated": false, "deprecationMessage": "", "line": 276, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input--fluid__skeleton", "deprecated": false, "deprecationMessage": "", "line": 288, "type": "boolean", "decorators": [] } ], "hostListeners": [ { "name": "focusout", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 330 } ], "standalone": false, "imports": [], "description": "

Get started with importing the module:

\nExample :
import { NumberModule } from 'carbon-components-angular';

See demo

\n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { NumberModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-number--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t{{label}}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\t{{helperText}}\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t{{invalidText}}\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t{{warnText}}\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() @HostBinding(\"class.cds--number--readonly\") readonly = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef;\n\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--number-input--fluid\") @Input() fluid = false;\n\n\t@HostBinding(\"class.cds--number-input--fluid--invalid\") get fluidInvalid() {\n\t\treturn this.fluid && this.invalid;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--disabled\") get fluidDisabled() {\n\t\treturn this.fluid && this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--focus\") get fluidFocus() {\n\t\treturn this.fluid && this._isFocused;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeleton() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\tprotected _isFocused = false;\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\t// if max is set and value + step is greater than max, set value to max\n\t\t// example: max = 100, step = 10, value = 95 , value + step = 105, value will be set to 100 (max) instead of 105\n\t\tif (this.max !== null && this.value + this.step > this.max) {\n\t\t\tthis.value = this.max;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if min is set and value + step is less than min, set value to min\n\t\t// example: min = 5, step = 2, value = 0, value + step = 2, value will be set to 5 (min) instead of 2\n\t\tif (this.min !== null && this.value + this.step < this.min) {\n\t\t\tthis.value = this.min;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if max is not set or value + step is less than max, increment value by step\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\t// if max is set and value - step is greater than max, set value to max\n\t\t// example: max = 15, step = 2, value = 20, value - step = 18, value will be set to 15 (max) instead of 18\n\t\tif (this.max !== null && this.value - this.step > this.max) {\n\t\t\tthis.value = this.max;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if min is set and value - step is less than min, set value to min\n\t\t// example: min = 5, step = 2, value = 6, value - step = 4, value will be set to 5 (min) instead of 4\n\t\tif (this.min !== null && this.value - this.step < this.min) {\n\t\t\tthis.value = this.min;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if min is not set or value - step is greater than min, decrement value by step\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tif (\"type\" in event.target && (event.target).type === \"button\") {\n\t\t\tthis._isFocused = false;\n\t\t} else {\n\t\t\tthis._isFocused = event.type === \"focus\";\n\t\t}\n\t}\n}\nexport { NumberComponent as Number };\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

Creates an instance of Number.

\n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 297, "rawdescription": "\n\nCreates an instance of `Number`.\n", "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "ControlValueAccessor" ], "accessors": { "value": { "name": "value", "setSignature": { "name": "value", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 197, "rawdescription": "\n\nSets the value attribute on the `input` element.\n", "description": "

Sets the value attribute on the input element.

\n", "jsdoctags": [ { "name": "v", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "value", "type": "", "returnType": "", "line": 205 } }, "decrementLabel": { "name": "decrementLabel", "setSignature": { "name": "decrementLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 254, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "decrementLabel", "type": "", "returnType": "", "line": 258 } }, "incrementLabel": { "name": "incrementLabel", "setSignature": { "name": "incrementLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 263, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "incrementLabel", "type": "", "returnType": "", "line": 267 } }, "fluidInvalid": { "name": "fluidInvalid", "getSignature": { "name": "fluidInvalid", "type": "", "returnType": "", "line": 276 } }, "fluidDisabled": { "name": "fluidDisabled", "getSignature": { "name": "fluidDisabled", "type": "", "returnType": "", "line": 280 } }, "fluidFocus": { "name": "fluidFocus", "getSignature": { "name": "fluidFocus", "type": "", "returnType": "", "line": 284 } }, "fluidSkeleton": { "name": "fluidSkeleton", "getSignature": { "name": "fluidSkeleton", "type": "", "returnType": "", "line": 288 } } } }, { "name": "OverflowMenu", "id": "component-OverflowMenu-19ac7f2ad058f9a75a8eb0526944ec063447cc38440e53dd5a561a814a7e64e3481166f9db45c0357aac85635a566805fe75e361bb682aa79674882ad105d79d", "file": "src/dialog/overflow-menu/overflow-menu.component.ts", "encapsulation": [ "ViewEncapsulation.None" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-overflow-menu, ibm-overflow-menu", "styleUrls": [], "styles": [ "\n\t\t.cds--overflow-menu--open {\n\t\t\topacity: 1\n\t\t}\n\n\t\t/*\n\t\tRotate the overflow menu container as well as the icon, since\n\t\twe calculate our menu position based on the container, not the icon.\n\t\t*/\n\t\t.cds--data-table-v2 .cds--overflow-menu {\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t.cds--data-table-v2 .cds--overflow-menu__icon {\n\t\t\ttransform: rotate(180deg);\n\t\t}\n\t" ], "template": "\n\t\n\t\t\n\t\n\n\n\n\t\n\n\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "buttonLabel", "defaultValue": "this.i18n.get().OVERFLOW_MENU.OVERFLOW", "deprecated": false, "deprecationMessage": "", "line": 93, "type": "any", "decorators": [] }, { "name": "customTrigger", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the custom overflow menu trigger\n", "description": "

Sets the custom overflow menu trigger

\n", "line": 107, "type": "TemplateRef", "decorators": [] }, { "name": "description", "defaultValue": "this.i18n.get().OVERFLOW_MENU.ICON_DESCRIPTION", "deprecated": false, "deprecationMessage": "", "line": 95, "type": "any", "decorators": [] }, { "name": "flip", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 97, "type": "boolean", "decorators": [] }, { "name": "offset", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThis specifies any vertical and horizontal offset for the position of the dialog\n", "description": "

This specifies any vertical and horizontal offset for the position of the dialog

\n", "line": 112, "type": "literal type", "decorators": [] }, { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 101, "type": "boolean", "decorators": [] }, { "name": "placement", "defaultValue": "\"bottom\"", "deprecated": false, "deprecationMessage": "", "line": 99, "type": "\"bottom\" | \"top\" | \"bottom,top\" | \"top,bottom\"", "decorators": [] }, { "name": "triggerClass", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThis appends additional classes to the overflow trigger/button.\n", "description": "

This appends additional classes to the overflow trigger/button.

\n", "line": 119, "type": "string", "decorators": [] }, { "name": "wrapperClass", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 114, "type": "string", "decorators": [] }, { "name": "align", "defaultValue": "\"bottom\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet popover alignment\n", "description": "

Set popover alignment

\n", "line": 32, "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "autoAlign", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n**Experimental**: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once\n", "description": "

Experimental: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once

\n", "line": 40, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "caret", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide caret\n", "description": "

Set to false to hide caret

\n", "line": 16, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "dropShadow", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide shadow\n", "description": "

Set to false to hide shadow

\n", "line": 20, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "enterDelayMs", "defaultValue": "100", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet delay before tooltip is shown\n", "description": "

Set delay before tooltip is shown

\n", "line": 44, "type": "number", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "highContrast", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to enable high contrast\n", "description": "

Set to true to enable high contrast

\n", "line": 24, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "isOpen", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to have the popover open by default\n", "description": "

Set to true to have the popover open by default

\n", "line": 28, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "leaveDelayMs", "defaultValue": "300", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet delay when tooltip disappears\n", "description": "

Set delay when tooltip disappears

\n", "line": 48, "type": "number", "decorators": [], "inheritance": { "file": "BaseIconButton" } } ], "outputsClass": [ { "name": "openChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 103, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "overflowMenuDirective", "deprecated": false, "deprecationMessage": "", "type": "OverflowMenuDirective", "optional": false, "description": "", "line": 121, "decorators": [ { "name": "ContentChild", "stringifiedArguments": "OverflowMenuDirective" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "handleOpenChange", "args": [ { "name": "event", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 127, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component.

\n

Get started with importing the module:

\nExample :
import { DialogModule } from 'carbon-components-angular';
Example :
<cds-overflow-menu>\n    <cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n    <cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n</cds-overflow-menu>

See demo

\n", "rawdescription": "\n\nThe OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component.\n\nGet started with importing the module:\n\n```typescript\nimport { DialogModule } from 'carbon-components-angular';\n```\n\n```html\n\n\tOption 1\n\tOption 2\n\n```\n\n[See demo](../../?path=/story/components-overflow-menu--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tContentChild,\n\tElementRef,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tViewEncapsulation\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { OverflowMenuDirective } from \"./overflow-menu.directive\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\n/**\n * The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { DialogModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * \n *\tOption 1\n *\tOption 2\n * \n * ```\n *\n * [See demo](../../?path=/story/components-overflow-menu--basic)\n */\n@Component({\n\tselector: \"cds-overflow-menu, ibm-overflow-menu\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t`,\n\tstyles: [`\n\t\t.cds--overflow-menu--open {\n\t\t\topacity: 1\n\t\t}\n\n\t\t/*\n\t\tRotate the overflow menu container as well as the icon, since\n\t\twe calculate our menu position based on the container, not the icon.\n\t\t*/\n\t\t.cds--data-table-v2 .cds--overflow-menu {\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t.cds--data-table-v2 .cds--overflow-menu__icon {\n\t\t\ttransform: rotate(180deg);\n\t\t}\n\t`],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class OverflowMenu extends BaseIconButton {\n\t@Input() buttonLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;\n\n\t@Input() description = this.i18n.get().OVERFLOW_MENU.ICON_DESCRIPTION;\n\n\t@Input() flip = false;\n\n\t@Input() placement: \"bottom\" | \"top\" | \"bottom,top\" | \"top,bottom\" = \"bottom\";\n\n\t@Input() open = false;\n\n\t@Output() openChange = new EventEmitter();\n\t/**\n\t * Sets the custom overflow menu trigger\n\t */\n\t@Input() customTrigger: TemplateRef;\n\n\t/**\n\t * This specifies any vertical and horizontal offset for the position of the dialog\n\t */\n\t@Input() offset: { x: number, y: number };\n\n\t@Input() wrapperClass = \"\";\n\n\t/**\n\t * This appends additional classes to the overflow trigger/button.\n\t */\n\t@Input() triggerClass = \"\";\n\n\t@ContentChild(OverflowMenuDirective) overflowMenuDirective: OverflowMenuDirective;\n\n\tconstructor(protected elementRef: ElementRef, protected i18n: I18n) {\n\t\tsuper();\n\t}\n\n\thandleOpenChange(event: boolean) {\n\t\tthis.open = event;\n\t\tthis.openChange.emit(event);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t.cds--overflow-menu--open {\n\t\t\topacity: 1\n\t\t}\n\n\t\t/*\n\t\tRotate the overflow menu container as well as the icon, since\n\t\twe calculate our menu position based on the container, not the icon.\n\t\t*/\n\t\t.cds--data-table-v2 .cds--overflow-menu {\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t.cds--data-table-v2 .cds--overflow-menu__icon {\n\t\t\ttransform: rotate(180deg);\n\t\t}\n\t\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 121, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [ "BaseIconButton" ] }, { "name": "OverflowMenuCustomPane", "id": "component-OverflowMenuCustomPane-7d8462941c0a59b57a325974f7f714f40a63d6809870fbe98180d7db70d34859ba9faf6a2ebbb114dca1ae3a7f9331630fa81d2380ac2b657ada90bd0ec332fe", "file": "src/dialog/overflow-menu/overflow-menu-custom-pane.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane", "styleUrls": [], "styles": [], "template": "\n\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "dialogConfig", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReceives `DialogConfig` interface object with properties of `Dialog`\nexplicitly defined.\n", "description": "

Receives DialogConfig interface object with properties of Dialog\nexplicitly defined.

\n", "line": 41, "type": "DialogConfig", "decorators": [], "inheritance": { "file": "Dialog" } } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits event that handles the closing of a `Dialog` object.\n", "description": "

Emits event that handles the closing of a Dialog object.

\n", "line": 36, "type": "EventEmitter", "inheritance": { "file": "Dialog" } } ], "propertiesClass": [ { "name": "data", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "

Stores the data received from dialogConfig.

\n", "line": 50, "rawdescription": "\n\nStores the data received from `dialogConfig`.\n", "modifierKind": [ 125 ], "inheritance": { "file": "Dialog" } }, { "name": "dialog", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "

Maintains a reference to the view DOM element of the Dialog.

\n", "line": 45, "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Dialog`.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'dialog'" } ], "modifierKind": [ 170 ], "inheritance": { "file": "Dialog" } }, { "name": "placement", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

The placement of the Dialog is received from the Position service.

\n", "line": 55, "rawdescription": "\n\nThe placement of the `Dialog` is received from the `Position` service.\n", "modifierKind": [ 125 ], "inheritance": { "file": "Dialog" } } ], "methodsClass": [ { "name": "onClick", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 44, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onDialogInit", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 51, "deprecated": false, "deprecationMessage": "", "inheritance": { "file": "Dialog" } }, { "name": "afterDialogViewInit", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 157, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmpty method to be overridden by consuming classes to run any additional initialization code after the view is available.\nNOTE: this does _not_ guarantee the dialog will be positioned, simply that it will exist in the DOM\n", "description": "

Empty method to be overridden by consuming classes to run any additional initialization code after the view is available.\nNOTE: this does not guarantee the dialog will be positioned, simply that it will exist in the DOM

\n", "inheritance": { "file": "Dialog" } }, { "name": "clickClose", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 229, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets up a event Listener to close `Dialog` if click event occurs outside\n`Dialog` object.\n", "description": "

Sets up a event Listener to close Dialog if click event occurs outside\nDialog object.

\n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'document:click', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": { "pos": 6684, "end": 6689, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 6678, "end": 6683, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ], "inheritance": { "file": "Dialog" } }, { "name": "doClose", "args": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 242, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCloses `Dialog` object by emitting the close event upwards to parents.\n", "description": "

Closes Dialog object by emitting the close event upwards to parents.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }", "tagName": { "text": "param" } } ], "inheritance": { "file": "Dialog" } }, { "name": "escapeClose", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 206, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets up a KeyboardEvent to close `Dialog` with Escape key.\n", "description": "

Sets up a KeyboardEvent to close Dialog with Escape key.

\n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": { "pos": 6201, "end": 6206, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 6195, "end": 6200, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ], "inheritance": { "file": "Dialog" } }, { "name": "placeDialog", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 162, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUses the position service to position the `Dialog` in screen space\n", "description": "

Uses the position service to position the Dialog in screen space

\n", "inheritance": { "file": "Dialog" } } ], "deprecated": true, "deprecationMessage": "as of v5\nUse Toggletip or Popover components instead", "hostBindings": [], "hostListeners": [ { "name": "document:click", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets up a event Listener to close `Dialog` if click event occurs outside\n`Dialog` object.\n", "description": "

Sets up a event Listener to close Dialog if click event occurs outside\nDialog object.

\n", "jsdoctags": [ { "pos": 6677, "end": 6692, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 6678, "end": 6683, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "", "name": { "pos": 6684, "end": 6689, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "isNameFirst": true, "isBracketed": false } ], "line": 229, "inheritance": { "file": "Dialog" } }, { "name": "keydown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets up a KeyboardEvent to close `Dialog` with Escape key.\n", "description": "

Sets up a KeyboardEvent to close Dialog with Escape key.

\n", "jsdoctags": [ { "pos": 6194, "end": 6209, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 6195, "end": 6200, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "", "name": { "pos": 6201, "end": 6206, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "isNameFirst": true, "isBracketed": false } ], "line": 206, "inheritance": { "file": "Dialog" } } ], "standalone": false, "imports": [], "description": "

Use Toggletip or Popover components instead

\n", "rawdescription": "\n\nUse Toggletip or Popover components instead\n", "type": "component", "sourceCode": "import { AfterViewInit, Component, ElementRef, Optional } from \"@angular/core\";\nimport { position } from \"@carbon/utils-position\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { AnimationFrameService, ElementService } from \"carbon-components-angular/utils\";\nimport { closestAttr } from \"carbon-components-angular/utils\";\nimport { CloseReasons } from \"../dialog-config.interface\";\nimport { Dialog } from \"../dialog.component\";\n\n/**\n * @deprecated as of v5\n * Use Toggletip or Popover components instead\n */\n@Component({\n\tselector: \"cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class OverflowMenuCustomPane extends Dialog implements AfterViewInit {\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n,\n\t\t@Optional() protected animationFrameService: AnimationFrameService = null,\n\t\t// mark `elementService` as optional since making it mandatory would be a breaking change\n\t\t@Optional() protected elementService: ElementService = null\n\t) {\n\t\tsuper(elementRef, elementService, animationFrameService);\n\t}\n\n\tonClick(event) {\n\t\tthis.doClose({\n\t\t\treason: CloseReasons.interaction,\n\t\t\ttarget: event.target\n\t\t});\n\t}\n\n\tonDialogInit() {\n\t\tconst positionOverflowMenu = pos => {\n\t\t\tlet offset;\n\t\t\t/*\n\t\t\t* 20 is half the width of the overflow menu trigger element.\n\t\t\t* we also move the element by half of it's own width, since\n\t\t\t* position service will try and center everything\n\t\t\t*/\n\t\t\tconst closestRel = closestAttr(\"position\", [\"relative\", \"fixed\", \"absolute\"], this.elementRef.nativeElement);\n\t\t\tconst topFix = closestRel ? closestRel.getBoundingClientRect().top * -1 : 0;\n\t\t\tconst leftFix = closestRel ? closestRel.getBoundingClientRect().left * -1 : 0;\n\n\t\t\toffset = Math.round(this.dialog.nativeElement.offsetWidth / 2) - 20;\n\t\t\tif (this.dialogConfig.flip) {\n\t\t\t\treturn position.addOffset(pos, topFix, (-offset + leftFix));\n\t\t\t}\n\t\t\treturn position.addOffset(pos, topFix, (offset + leftFix));\n\t\t};\n\n\t\tthis.addGap[\"bottom\"] = positionOverflowMenu;\n\n\t\tthis.addGap[\"top\"] = positionOverflowMenu;\n\n\t\tif (!this.dialogConfig.menuLabel) {\n\t\t\tthis.dialogConfig.menuLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" }, { "name": "animationFrameService", "type": "AnimationFrameService", "deprecated": false, "deprecationMessage": "", "defaultValue": "null" }, { "name": "elementService", "type": "ElementService", "deprecated": false, "deprecationMessage": "", "defaultValue": "null" } ], "line": 33, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "animationFrameService", "type": "AnimationFrameService", "deprecated": false, "deprecationMessage": "", "defaultValue": "null", "tagName": { "text": "param" } }, { "name": "elementService", "type": "ElementService", "deprecated": false, "deprecationMessage": "", "defaultValue": "null", "tagName": { "text": "param" } } ] }, "extends": [ "Dialog" ], "implements": [ "AfterViewInit" ] }, { "name": "OverflowMenuOption", "id": "component-OverflowMenuOption-f6fd364977ec501cb161ada61bdfbe74a271382f8552fb43b45453c76c63ff6f03e74bf9e128c96d2ddd7a75c66821dbd4a919bb91c077e255931b09d1c9a3c7", "file": "src/dialog/overflow-menu/overflow-menu-option.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-overflow-menu-option, ibm-overflow-menu-option", "styleUrls": [], "styles": [], "template": "\n\t\n\n\n\n\t\n\n\n\n\t
\n\t\t\n\t
\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\ndisable/enable interactions\n", "description": "

disable/enable interactions

\n", "line": 101, "type": "boolean", "decorators": [] }, { "name": "divider", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to display a dividing line above this option\n", "description": "

Set to true to display a dividing line above this option

\n", "line": 93, "type": "boolean", "decorators": [] }, { "name": "href", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nIf it's an anchor, this is its location\n", "description": "

If it's an anchor, this is its location

\n", "line": 105, "type": "string", "decorators": [] }, { "name": "innerClass", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nApply a custom class to the inner button/anchor\n", "description": "

Apply a custom class to the inner button/anchor

\n", "line": 122, "type": "string", "decorators": [] }, { "name": "target", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAllows to add a target to the anchor\n", "description": "

Allows to add a target to the anchor

\n", "line": 109, "type": "Target", "decorators": [] }, { "name": "type", "defaultValue": "\"normal\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\ntoggles between `normal` and `danger` states\n", "description": "

toggles between normal and danger states

\n", "line": 97, "type": "\"normal\" | \"danger\"", "decorators": [] } ], "outputsClass": [ { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 134, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "optionClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 78, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--overflow-menu-options__option'" } ], "modifierKind": [ 170 ] }, { "name": "role", "defaultValue": "\"presentation\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 79, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] }, { "name": "tabIndex", "defaultValue": "-1", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 136, "modifierKind": [ 125 ] }, { "name": "title", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "null", "optional": false, "description": "", "line": 139, "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "onBlur", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 153, "deprecated": false, "deprecationMessage": "" }, { "name": "onClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 145, "deprecated": false, "deprecationMessage": "" }, { "name": "onFocus", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 149, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"presentation\"", "deprecated": false, "deprecationMessage": "", "line": 79, "type": "string", "decorators": [] }, { "name": "class.cds--overflow-menu-options__option", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 78, "type": "boolean", "decorators": [] }, { "name": "class.cds--overflow-menu-options__option--danger", "deprecated": false, "deprecationMessage": "", "line": 82, "type": "Boolean", "decorators": [] }, { "name": "class.cds--overflow-menu-options__option--disabled", "deprecated": false, "deprecationMessage": "", "line": 87, "type": "Boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

OverflowMenuOption represents a single option in an overflow menu

\n

Presently it has three possible states - normal, disabled, and danger:

\nExample :
<cds-overflow-menu-option>Simple option</cds-overflow-menu-option>\n<cds-overflow-menu-option disabled="true">Disabled</cds-overflow-menu-option>\n<cds-overflow-menu-option type="danger">Danger option</cds-overflow-menu-option>

For content that expands beyond the overflow menu OverflowMenuOption automatically adds a title attribute.

\n", "rawdescription": "\n\n`OverflowMenuOption` represents a single option in an overflow menu\n\nPresently it has three possible states - normal, disabled, and danger:\n```\nSimple option\nDisabled\nDanger option\n```\n\nFor content that expands beyond the overflow menu `OverflowMenuOption` automatically adds a title attribute.\n", "type": "component", "sourceCode": "import {\n\tHostBinding,\n\tComponent,\n\tInput,\n\tElementRef,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit\n} from \"@angular/core\";\n\n/**\n * Available HTML anchor targets\n */\nexport enum Target {\n\tself = \"_self\",\n\tblank = \"_blank\",\n\tparent = \"_parent\",\n\ttop = \"_top\"\n}\n\n/**\n * Security HTML anchor rel when target is set\n */\nconst REL = \"noreferrer noopener\";\n\n/**\n * `OverflowMenuOption` represents a single option in an overflow menu\n *\n * Presently it has three possible states - normal, disabled, and danger:\n * ```\n * Simple option\n * Disabled\n * Danger option\n * ```\n *\n * For content that expands beyond the overflow menu `OverflowMenuOption` automatically adds a title attribute.\n */\n@Component({\n\tselector: \"cds-overflow-menu-option, ibm-overflow-menu-option\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\n\t`\n})\nexport class OverflowMenuOption implements AfterViewInit {\n\t@HostBinding(\"class.cds--overflow-menu-options__option\") optionClass = true;\n\t@HostBinding(\"attr.role\") role = \"presentation\";\n\n\t@HostBinding(\"class.cds--overflow-menu-options__option--danger\")\n\tpublic get isDanger(): Boolean {\n\t\treturn this.type === \"danger\";\n\t}\n\n\t@HostBinding(\"class.cds--overflow-menu-options__option--disabled\")\n\tpublic get isDisabled(): Boolean {\n\t\treturn this.disabled;\n\t}\n\t/**\n\t * Set to `true` to display a dividing line above this option\n\t */\n\t@HostBinding(\"class.cds--overflow-menu--divider\") @Input() divider = false;\n\t/**\n\t * toggles between `normal` and `danger` states\n\t */\n\t@Input() type: \"normal\" | \"danger\" = \"normal\";\n\t/**\n\t * disable/enable interactions\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * If it's an anchor, this is its location\n\t */\n\t@Input() href: string;\n\t/**\n\t * Allows to add a target to the anchor\n\t */\n\t@Input() set target(value: Target) {\n\t\tif (!Object.values(Target).includes(value)) {\n\t\t\tconsole.warn(\n`\\`target\\` must have one of the following values: ${Object.values(Target).join(\", \")}.\nPlease use the \\`Target\\` enum exported by carbon-components-angular`);\n\t\t\treturn;\n\t\t}\n\n\t\tthis._target = value;\n\t}\n\t/**\n\t * Apply a custom class to the inner button/anchor\n\t */\n\t@Input() innerClass = \"\";\n\n\tget target() {\n\t\treturn this._target;\n\t}\n\t/**\n\t * rel only returns its value if target is defined\n\t */\n\tget rel() {\n\t\treturn this._target ? REL : null;\n\t}\n\n\t@Output() selected: EventEmitter = new EventEmitter();\n\n\tpublic tabIndex = -1;\n\t// note: title must be a real attribute (i.e. not a getter) as of Angular@6 due to\n\t// change after checked errors\n\tpublic title = null;\n\n\tprotected _target: Target;\n\n\tconstructor(protected elementRef: ElementRef) {}\n\n\tonClick() {\n\t\tthis.selected.emit();\n\t}\n\n\tonFocus() {\n\t\tsetTimeout(() => this.tabIndex = 0);\n\t}\n\n\tonBlur() {\n\t\tsetTimeout(() => this.tabIndex = -1);\n\t}\n\n\tngAfterViewInit() {\n\t\tconst button = this.elementRef.nativeElement.querySelector(\"button, a\");\n\t\tconst textContainer = button.querySelector(\".cds--overflow-menu-options__option-content\");\n\t\tif (textContainer.scrollWidth > textContainer.offsetWidth) {\n\t\t\tthis.title = button.textContent;\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" } ], "line": 141, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AfterViewInit" ], "accessors": { "isDanger": { "name": "isDanger", "getSignature": { "name": "isDanger", "type": "", "returnType": "Boolean", "line": 82 } }, "isDisabled": { "name": "isDisabled", "getSignature": { "name": "isDisabled", "type": "", "returnType": "Boolean", "line": 87 } }, "target": { "name": "target", "setSignature": { "name": "target", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "Target", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 109, "rawdescription": "\n\nAllows to add a target to the anchor\n", "description": "

Allows to add a target to the anchor

\n", "jsdoctags": [ { "name": "value", "type": "Target", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "target", "type": "", "returnType": "", "line": 124 } }, "rel": { "name": "rel", "getSignature": { "name": "rel", "type": "", "returnType": "", "line": 130, "rawdescription": "\n\nrel only returns its value if target is defined\n", "description": "

rel only returns its value if target is defined

\n" } } } }, { "name": "OverflowMenuPane", "id": "component-OverflowMenuPane-de38180df6ccfd6b7b854b9a062459afc9a0245968b12ad142abe3e72593ef1b21c148c986aebe17ec5062e95a6e4c8a090481bfd65ab0090def7c1d12fe531e", "file": "src/dialog/overflow-menu/overflow-menu-pane.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-overflow-menu-pane, ibm-overflow-menu-pane", "styleUrls": [], "styles": [], "template": "\n\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "dialogConfig", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReceives `DialogConfig` interface object with properties of `Dialog`\nexplicitly defined.\n", "description": "

Receives DialogConfig interface object with properties of Dialog\nexplicitly defined.

\n", "line": 41, "type": "DialogConfig", "decorators": [], "inheritance": { "file": "Dialog" } } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits event that handles the closing of a `Dialog` object.\n", "description": "

Emits event that handles the closing of a Dialog object.

\n", "line": 36, "type": "EventEmitter", "inheritance": { "file": "Dialog" } } ], "propertiesClass": [ { "name": "data", "defaultValue": "{}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "

Stores the data received from dialogConfig.

\n", "line": 50, "rawdescription": "\n\nStores the data received from `dialogConfig`.\n", "modifierKind": [ 125 ], "inheritance": { "file": "Dialog" } }, { "name": "dialog", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "

Maintains a reference to the view DOM element of the Dialog.

\n", "line": 45, "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Dialog`.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'dialog'" } ], "modifierKind": [ 170 ], "inheritance": { "file": "Dialog" } }, { "name": "placement", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

The placement of the Dialog is received from the Position service.

\n", "line": 55, "rawdescription": "\n\nThe placement of the `Dialog` is received from the `Position` service.\n", "modifierKind": [ 125 ], "inheritance": { "file": "Dialog" } } ], "methodsClass": [ { "name": "afterDialogViewInit", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 135, "deprecated": false, "deprecationMessage": "", "inheritance": { "file": "Dialog" } }, { "name": "hostkeys", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 82, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onClose", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 128, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onDialogInit", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 53, "deprecated": false, "deprecationMessage": "", "inheritance": { "file": "Dialog" } }, { "name": "clickClose", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 229, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets up a event Listener to close `Dialog` if click event occurs outside\n`Dialog` object.\n", "description": "

Sets up a event Listener to close Dialog if click event occurs outside\nDialog object.

\n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'document:click', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": { "pos": 6684, "end": 6689, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 6678, "end": 6683, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ], "inheritance": { "file": "Dialog" } }, { "name": "doClose", "args": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 242, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCloses `Dialog` object by emitting the close event upwards to parents.\n", "description": "

Closes Dialog object by emitting the close event upwards to parents.

\n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "meta", "type": "CloseMeta", "deprecated": false, "deprecationMessage": "", "defaultValue": "{ reason: CloseReasons.interaction }", "tagName": { "text": "param" } } ], "inheritance": { "file": "Dialog" } }, { "name": "escapeClose", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 206, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets up a KeyboardEvent to close `Dialog` with Escape key.\n", "description": "

Sets up a KeyboardEvent to close Dialog with Escape key.

\n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": { "pos": 6201, "end": 6206, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 6195, "end": 6200, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "" } ], "inheritance": { "file": "Dialog" } }, { "name": "placeDialog", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 162, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUses the position service to position the `Dialog` in screen space\n", "description": "

Uses the position service to position the Dialog in screen space

\n", "inheritance": { "file": "Dialog" } } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "keydown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 82, "inheritance": { "file": "Dialog" } }, { "name": "document:click", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets up a event Listener to close `Dialog` if click event occurs outside\n`Dialog` object.\n", "description": "

Sets up a event Listener to close Dialog if click event occurs outside\nDialog object.

\n", "jsdoctags": [ { "pos": 6677, "end": 6692, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 6678, "end": 6683, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "", "name": { "pos": 6684, "end": 6689, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "event" }, "isNameFirst": true, "isBracketed": false } ], "line": 229, "inheritance": { "file": "Dialog" } } ], "standalone": false, "imports": [], "description": "

Extend the Dialog component to create an overflow menu.

\n

Not used directly. See overflow-menu.component and overflow-menu.directive for more

\n", "rawdescription": "\n\nExtend the `Dialog` component to create an overflow menu.\n\nNot used directly. See overflow-menu.component and overflow-menu.directive for more\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tHostListener,\n\tElementRef,\n\tAfterViewInit,\n\tOptional\n} from \"@angular/core\";\nimport { Dialog } from \"../dialog.component\";\nimport { position } from \"@carbon/utils-position\";\nimport { isFocusInLastItem, isFocusInFirstItem } from \"carbon-components-angular/common\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { AnimationFrameService, ElementService } from \"carbon-components-angular/utils\";\nimport { CloseReasons } from \"../dialog-config.interface\";\nimport { closestAttr } from \"carbon-components-angular/utils\";\n\n/**\n * Extend the `Dialog` component to create an overflow menu.\n *\n * Not used directly. See overflow-menu.component and overflow-menu.directive for more\n */\n@Component({\n\tselector: \"cds-overflow-menu-pane, ibm-overflow-menu-pane\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class OverflowMenuPane extends Dialog implements AfterViewInit {\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n,\n\t\tprotected experimental: ExperimentalService,\n\t\t@Optional() protected animationFrameService: AnimationFrameService = null,\n\t\t// mark `elementService` as optional since making it mandatory would be a breaking change\n\t\t@Optional() protected elementService: ElementService = null) {\n\t\tsuper(elementRef, elementService, animationFrameService);\n\t}\n\n\tonDialogInit() {\n\t\tconst positionOverflowMenu = pos => {\n\t\t\tlet offset;\n\t\t\t/*\n\t\t\t* 20 is half the width of the overflow menu trigger element.\n\t\t\t* we also move the element by half of it's own width, since\n\t\t\t* position service will try and center everything\n\t\t\t*/\n\t\t\tconst closestRel = closestAttr(\"position\", [\"relative\", \"fixed\", \"absolute\"], this.elementRef.nativeElement);\n\t\t\tconst topFix = closestRel ? closestRel.getBoundingClientRect().top * -1 : 0;\n\t\t\tconst leftFix = closestRel ? closestRel.getBoundingClientRect().left * -1 : 0;\n\n\t\t\toffset = Math.round(this.dialog.nativeElement.offsetWidth / 2) - 20;\n\t\t\tif (this.dialogConfig.flip) {\n\t\t\t\treturn position.addOffset(pos, topFix, (-offset + leftFix));\n\t\t\t}\n\t\t\treturn position.addOffset(pos, topFix, (offset + leftFix));\n\t\t};\n\n\t\tthis.addGap[\"bottom\"] = positionOverflowMenu;\n\n\t\tthis.addGap[\"top\"] = positionOverflowMenu;\n\n\t\tif (!this.dialogConfig.menuLabel) {\n\t\t\tthis.dialogConfig.menuLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;\n\t\t}\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tconst listItems = this.listItems();\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowDown\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInLastItem(event, listItems)) {\n\t\t\t\t\tconst index = listItems.findIndex(item => item === event.target);\n\t\t\t\t\tlistItems[index + 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tlistItems[0].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"ArrowUp\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInFirstItem(event, listItems)) {\n\t\t\t\t\tconst index = listItems.findIndex(item => item === event.target);\n\t\t\t\t\tlistItems[index - 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tlistItems[listItems.length - 1].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"Home\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tlistItems[0].focus();\n\t\t\t\tbreak;\n\n\t\t\tcase \"End\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tlistItems[listItems.length - 1].focus();\n\t\t\t\tbreak;\n\n\t\t\tcase \"Escape\":\n\t\t\tcase \"Tab\":\n\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\tthis.doClose({\n\t\t\t\t\treason: CloseReasons.interaction,\n\t\t\t\t\ttarget: event.target\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\tdefault: break;\n\t\t}\n\t}\n\n\tonClose(event) {\n\t\tthis.doClose({\n\t\t\treason: CloseReasons.interaction,\n\t\t\ttarget: event.target\n\t\t});\n\t}\n\n\tafterDialogViewInit() {\n\t\tconst focusElementList = this.listItems();\n\t\tfocusElementList.forEach(button => {\n\t\t\t// Allows user to set tabindex to 0.\n\t\t\tif (button.getAttribute(\"tabindex\") === null) {\n\t\t\t\tbutton.tabIndex = -1;\n\t\t\t}\n\t\t});\n\t\tif (focusElementList[0]) {\n\t\t\tfocusElementList[0].tabIndex = 0;\n\t\t\tfocusElementList[0].focus();\n\t\t}\n\t}\n\n\tprotected listItems() {\n\t\tconst selector = \".cds--overflow-menu-options__option:not([disabled]) .cds--overflow-menu-options__btn\";\n\t\treturn Array.from(this.elementRef.nativeElement.querySelectorAll(selector));\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" }, { "name": "experimental", "type": "ExperimentalService", "deprecated": false, "deprecationMessage": "" }, { "name": "animationFrameService", "type": "AnimationFrameService", "deprecated": false, "deprecationMessage": "", "defaultValue": "null" }, { "name": "elementService", "type": "ElementService", "deprecated": false, "deprecationMessage": "", "defaultValue": "null" } ], "line": 42, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "experimental", "type": "ExperimentalService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "animationFrameService", "type": "AnimationFrameService", "deprecated": false, "deprecationMessage": "", "defaultValue": "null", "tagName": { "text": "param" } }, { "name": "elementService", "type": "ElementService", "deprecated": false, "deprecationMessage": "", "defaultValue": "null", "tagName": { "text": "param" } } ] }, "extends": [ "Dialog" ], "implements": [ "AfterViewInit" ] }, { "name": "OverflowTableStory", "id": "component-OverflowTableStory-b9b232c3e6f67a80254a69816305e3e26320496ee28b804e33a753ecd40311617cab22d8c7a0dcd807fb4d61aa8003e528c19e3bf75e910cccbf77cd4d2e8200", "file": "src/table/stories/app-overflow-table.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-overflow-table", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t\n\t\t\tFirst Option\n\t\t\n\t\t\n\t\t\tSecond Option\n\t\t\n\t\t\n\t\t\tThird Option\n\t\t\n\t\n\n\n\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "isDataGrid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 47, "type": "boolean", "decorators": [] }, { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "line": 43, "type": "any", "decorators": [] }, { "name": "showSelectionColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 45, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 44, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 50, "type": "boolean", "decorators": [] }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 48, "type": "boolean", "decorators": [] }, { "name": "stickyHeader", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 49, "type": "boolean", "decorators": [] }, { "name": "striped", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 46, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "onRowClick", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 73, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tTemplateRef,\n\tComponent,\n\tViewChild,\n\tAfterViewInit,\n\tInput\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\n\n@Component({\n\tselector: \"app-overflow-table\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tFirst Option\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tSecond Option\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tThird Option\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\n\t`\n})\nexport class OverflowTableStory implements AfterViewInit {\n\t@Input() model = new TableModel();\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() striped = true;\n\t@Input() isDataGrid = false;\n\t@Input() sortable = true;\n\t@Input() stickyHeader = false;\n\t@Input() skeleton = false;\n\n\t@ViewChild(\"overflowMenuItemTemplate\", { static: false })\n\tprotected overflowMenuItemTemplate: TemplateRef;\n\n\tngAfterViewInit() {\n\t\tthis.model.data = [\n\t\t\t[new TableItem({ data: \"Name 1\" }), new TableItem({ data: { id: \"1\" }, template: this.overflowMenuItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: { id: \"2\" }, template: this.overflowMenuItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: { id: \"3\" }, template: this.overflowMenuItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({ data: { id: \"4\" }, template: this.overflowMenuItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({ data: { id: \"4\" }, template: this.overflowMenuItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({ data: { id: \"4\" }, template: this.overflowMenuItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 7\" }), new TableItem({ data: { id: \"4\" }, template: this.overflowMenuItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 8\" }), new TableItem({ data: { id: \"4\" }, template: this.overflowMenuItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 9\" }), new TableItem({ data: { id: \"4\" }, template: this.overflowMenuItemTemplate })]\n\t\t];\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({ data: \"Name\" }),\n\t\t\tnew TableHeaderItem({ data: \"Actions\" })\n\t\t];\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "AfterViewInit" ] }, { "name": "Overlay", "id": "component-Overlay-42b8af4bdde8309163c5a3a0b94a56e1354905e12d790c49277f6696733b3bd0d8be288a86bdad30e1752fb3525aab1a198e0632220be85a653b8e09ebb96ec3", "file": "src/modal/overlay.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-overlay, ibm-overlay", "styleUrls": [], "styles": [], "template": "\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 37, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"default\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nClassification of the modal.\n", "description": "

Classification of the modal.

\n", "line": 36, "type": "\"default\" | \"danger\"", "decorators": [] } ], "outputsClass": [ { "name": "overlaySelect", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTo emit the event where the user selects the overlay behind the `Modal`.\n", "description": "

To emit the event where the user selects the overlay behind the Modal.

\n", "line": 41, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "overlay", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "

Maintains a reference to the view DOM element of the Overlay.

\n", "line": 45, "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Overlay`.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'overlay', {static: true}" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "overlayClick", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 50, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles the user clicking on the `Overlay` which resides outside the `Modal` object.\n", "description": "

Handles the user clicking on the Overlay which resides outside the Modal object.

\n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Component for the overlay object that acts as a backdrop to the Modal component.

\n

The main purpose for this component is to be able to handle click events that fall outside\nthe bounds of the Modal component.

\n", "rawdescription": "\n\nComponent for the overlay object that acts as a backdrop to the `Modal` component.\n\nThe main purpose for this component is to be able to handle click events that fall outside\nthe bounds of the `Modal` component.\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOutput,\n\tEventEmitter,\n\tViewChild,\n\tElementRef,\n\tInput\n} from \"@angular/core\";\n\n\n/**\n * Component for the overlay object that acts as a backdrop to the `Modal` component.\n *\n * The main purpose for this component is to be able to handle click events that fall outside\n * the bounds of the `Modal` component.\n */\n@Component({\n\tselector: \"cds-overlay, ibm-overlay\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class Overlay {\n\t/**\n\t * Classification of the modal.\n\t */\n\t@Input() theme: \"default\" | \"danger\" = \"default\";\n\t@Input() open = false;\n\t/**\n\t * To emit the event where the user selects the overlay behind the `Modal`.\n\t */\n\t@Output() overlaySelect = new EventEmitter();\n\t/**\n\t * Maintains a reference to the view DOM element of the `Overlay`.\n\t */\n\t@ViewChild(\"overlay\", { static: true }) overlay: ElementRef;\n\n\t/**\n\t * Handles the user clicking on the `Overlay` which resides outside the `Modal` object.\n\t */\n\toverlayClick(event) {\n\t\tif (event.target !== this.overlay.nativeElement) { return; }\n\t\tevent.stopPropagation();\n\t\tthis.overlaySelect.emit(event);\n\t}\n\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "Pagination", "id": "component-Pagination-498d1b7f28e249198f36024770e3da5187e679e1768caa47ddf368ad36aa53a0e28dba75abac78353c5268a39a0c508412543491b68c3cfb9614f95b44306089", "file": "src/pagination/pagination.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-pagination, ibm-pagination", "styleUrls": [], "styles": [], "template": "\n\t\n\t
\n\t\t

\n\t\t

\n\t\t

\n\t
\n\n\t
\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\n\t\t 1\" class=\"cds--pagination__text cds--pagination__items-count\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\n\t\t\n\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\n\t\n\n\t\n\t
\n\t\t

\n\t
\n\n\t
\n\t\t\n\t\t\t{{currentPage}}\n\t\t\t{{pageText.subject | async}}\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t pageSelectThreshold\"\n\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\n\t\t\n\t\t\t{{currentPage}}\n\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\n\t\t 1\" class=\"cds--pagination__text\">\n\t\t\t{{currentPage}}\n\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\n\n\t\t\t= lastPage || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\n\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to disable the backward/forward buttons.\n", "description": "

Set to true to disable the backward/forward buttons.

\n", "line": 207, "type": "boolean", "decorators": [] }, { "name": "itemsPerPageOptions", "defaultValue": "[10, 20, 30, 40, 50]", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptions for items per page select\n\nA default array of options will be defined: [10, 20, 30, 40, 50]\n", "description": "

Options for items per page select

\n

A default array of options will be defined: [10, 20, 30, 40, 50]

\n", "line": 258, "type": "number[]", "decorators": [] }, { "name": "model", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n`PaginationModel` with the information about pages you're controlling.\n", "description": "

PaginationModel with the information about pages you're controlling.

\n", "line": 203, "type": "PaginationModel", "decorators": [] }, { "name": "pageInputDisabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to disable the select box that changes the page.\n", "description": "

Set to true to disable the select box that changes the page.

\n", "line": 211, "type": "boolean", "decorators": [] }, { "name": "pageSelectThreshold", "defaultValue": "1000", "deprecated": false, "deprecationMessage": "", "line": 220, "type": "number", "decorators": [] }, { "name": "pagesUnknown", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` if the total number of items is unknown.\n", "description": "

Set to true if the total number of items is unknown.

\n", "line": 219, "type": "boolean", "decorators": [] }, { "name": "showPageInput", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls wether or not to show the page selects\n", "description": "

Controls wether or not to show the page selects

\n", "line": 215, "type": "boolean", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a loading pagination component.\n", "description": "

Set to true for a loading pagination component.

\n", "line": 199, "type": "boolean", "decorators": [] }, { "name": "translations", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"ITEMS_PER_PAGE\": \"Items per page:\",\n\t\t\"OPEN_LIST_OF_OPTIONS\": \"Open list of options\",\n\t\t\"BACKWARD\": \"Backward\",\n\t\t\"FORWARD\": \"Forward\",\n\t\t\"TOTAL_ITEMS_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n}\n```\n", "description": "

Expects an object that contains some or all of:

\nExample :
{\n        "ITEMS_PER_PAGE": "Items per page:",\n        "OPEN_LIST_OF_OPTIONS": "Open list of options",\n        "BACKWARD": "Backward",\n        "FORWARD": "Forward",\n        "TOTAL_ITEMS_UNKNOWN": "{{start}}-{{end}} items",\n        "TOTAL_ITEMS": "{{start}}-{{end}} of {{total}} items",\n        "TOTAL_ITEM": "{{start}}-{{end}} of {{total}} item",\n        "OF_LAST_PAGES": "of {{last}} pages",\n        "OF_LAST_PAGE": "of {{last}} page"\n}
", "line": 239, "type": "PaginationTranslations", "decorators": [] } ], "outputsClass": [ { "name": "selectPage", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the new page number.\n\nYou should tie into this and update `model.currentPage` once the fresh\ndata is finally loaded.\n", "description": "

Emits the new page number.

\n

You should tie into this and update model.currentPage once the fresh\ndata is finally loaded.

\n", "line": 266, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "backwardText", "defaultValue": "this.i18n.getOverridable(\"PAGINATION.BACKWARD\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 340 }, { "name": "currentPageSelectId", "defaultValue": "`pagination-select-current-page-${Pagination.paginationCounter}`", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 336 }, { "name": "forwardText", "defaultValue": "this.i18n.getOverridable(\"PAGINATION.FORWARD\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 341 }, { "name": "itemsPerPageSelectId", "defaultValue": "`pagination-select-items-per-page-${Pagination.paginationCounter}`", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 335 }, { "name": "itemsPerPageText", "defaultValue": "this.i18n.getOverridable(\"PAGINATION.ITEMS_PER_PAGE\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 338 }, { "name": "ofLastPagesText", "defaultValue": "this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGES\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 346 }, { "name": "ofLastPageText", "defaultValue": "this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGE\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 347 }, { "name": "optionsListText", "defaultValue": "this.i18n.getOverridable(\"PAGINATION.OPEN_LIST_OF_OPTIONS\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 339 }, { "name": "pageText", "defaultValue": "this.i18n.getOverridable(\"PAGINATION.PAGE\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 345 }, { "name": "paginationCounter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 194, "modifierKind": [ 126 ] }, { "name": "totalItemsText", "defaultValue": "this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 342 }, { "name": "totalItemsUnknownText", "defaultValue": "this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS_UNKNOWN\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 344 }, { "name": "totalItemText", "defaultValue": "this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEM\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 343 } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

Use pagination when you have multiple pages of data to handle. Get started with importing the module:

\nExample :
import { PaginationModule } from 'carbon-components-angular';
Example :
    <cds-pagination [model]="model" (selectPage)="selectPage($event)"></cds-pagination>

In your selectPage() method set the model.currentPage to selected page, after\nyou load the page.

\nExample :
selectPage(page) {\n    // ... your code to load the page goes here\n\n    this.model.currentPage = page;\n\n    // ... anything you want to do after page selection changes goes here\n}

See demo

\n", "rawdescription": "\n\nUse pagination when you have multiple pages of data to handle. Get started with importing the module:\n\n```typescript\nimport { PaginationModule } from 'carbon-components-angular';\n```\n\n```html\n\t\n```\n\nIn your `selectPage()` method set the `model.currentPage` to selected page, _after_\nyou load the page.\n\n```typescript\nselectPage(page) {\n\t// ... your code to load the page goes here\n\n\tthis.model.currentPage = page;\n\n\t// ... anything you want to do after page selection changes goes here\n}\n```\n\n[See demo](../../?path=/story/components-pagination--basic)\n", "type": "component", "sourceCode": "import { PaginationModel } from \"./pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface PaginationTranslations {\n\tITEMS_PER_PAGE: string;\n\tOPEN_LIST_OF_OPTIONS: string;\n\tBACKWARD: string;\n\tFORWARD: string;\n\tTOTAL_ITEMS_UNKNOWN: string;\n\tTOTAL_ITEMS: string;\n\tTOTAL_ITEM: string;\n\tOF_LAST_PAGES: string;\n\tOF_LAST_PAGE: string;\n}\n\n/**\n * Use pagination when you have multiple pages of data to handle. Get started with importing the module:\n *\n * ```typescript\n * import { PaginationModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n *\t\n * ```\n *\n * In your `selectPage()` method set the `model.currentPage` to selected page, _after_\n * you load the page.\n *\n * ```typescript\n * selectPage(page) {\n * \t// ... your code to load the page goes here\n *\n * \tthis.model.currentPage = page;\n *\n * \t// ... anything you want to do after page selection changes goes here\n * }\n * ```\n *\n * [See demo](../../?path=/story/components-pagination--basic)\n */\n@Component({\n\tselector: \"cds-pagination, ibm-pagination\",\n\ttemplate: `\n\t\n\t\t\n\t\t
\n\t\t\t

\n\t\t\t

\n\t\t\t

\n\t\t
\n\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t\n\t\t\t 1\" class=\"cds--pagination__text cds--pagination__items-count\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t\n\t\t\t\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t\n\t\t\n\n\t\t\n\t\t
\n\t\t\t

\n\t\t
\n\n\t\t
\n\t\t\t\n\t\t\t\t{{currentPage}}\n\t\t\t\t{{pageText.subject | async}}\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t pageSelectThreshold\"\n\t\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\n\t\t\t\n\t\t\t\t{{currentPage}}\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t\n\t\t\t 1\" class=\"cds--pagination__text\">\n\t\t\t\t{{currentPage}}\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\n\t\t\t\t= lastPage || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t\n\t`\n})\nexport class Pagination {\n\tstatic paginationCounter = 0;\n\n\t/**\n\t * Set to `true` for a loading pagination component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * `PaginationModel` with the information about pages you're controlling.\n\t */\n\t@Input() model: PaginationModel;\n\t/**\n \t * Set to `true` to disable the backward/forward buttons.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to disable the select box that changes the page.\n\t */\n\t@Input() pageInputDisabled = false;\n\t/**\n\t * Controls wether or not to show the page selects\n\t */\n\t@Input() showPageInput = true;\n\t/**\n\t * Set to `true` if the total number of items is unknown.\n\t */\n\t@Input() pagesUnknown = false;\n\t@Input() pageSelectThreshold = 1000;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"ITEMS_PER_PAGE\": \"Items per page:\",\n\t *\t\t\"OPEN_LIST_OF_OPTIONS\": \"Open list of options\",\n\t *\t\t\"BACKWARD\": \"Backward\",\n\t *\t\t\"FORWARD\": \"Forward\",\n\t *\t\t\"TOTAL_ITEMS_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t *\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t *\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t *\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t *\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations (value: PaginationTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE);\n\t\tthis.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS);\n\t\tthis.backwardText.override(valueWithDefaults.BACKWARD);\n\t\tthis.forwardText.override(valueWithDefaults.FORWARD);\n\t\tthis.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS);\n\t\tthis.totalItemText.override(valueWithDefaults.TOTAL_ITEM);\n\t\tthis.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN);\n\t\tthis.pageText.override(valueWithDefaults.PAGE);\n\t\tthis.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES);\n\t\tthis.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE);\n\t}\n\n\t/**\n\t * Options for items per page select\n\t *\n\t * A default array of options will be defined: [10, 20, 30, 40, 50]\n\t */\n\t@Input() itemsPerPageOptions: number[] = [10, 20, 30, 40, 50];\n\n\t/**\n\t * Emits the new page number.\n\t *\n\t * You should tie into this and update `model.currentPage` once the fresh\n\t * data is finally loaded.\n\t */\n\t@Output() selectPage = new EventEmitter();\n\n\tget itemsPerPage() {\n\t\treturn this.model.pageLength;\n\t}\n\tset itemsPerPage(value) {\n\t\tthis.model.pageLength = Number(value);\n\t\tthis.currentPage = 1; // reset page\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\tset currentPage(value) {\n\t\tvalue = Number(value);\n\t\t// emits the value to allow the user to update current page\n\t\t// in the model once the page is loaded\n\t\tthis.selectPage.emit(value);\n\t}\n\n\tget totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\t/**\n\t * The last page number to display in the pagination view.\n\t */\n\tget lastPage(): number {\n\t\tconst last = Math.ceil(this.totalDataLength / this.itemsPerPage);\n\t\treturn last > 0 ? last : 1;\n\t}\n\n\tget startItemIndex() {\n\t\treturn this.endItemIndex > 0 ? (this.currentPage - 1) * this.itemsPerPage + 1 : 0;\n\t}\n\n\tget endItemIndex() {\n\t\tconst projectedEndItemIndex = this.currentPage * this.itemsPerPage;\n\n\t\treturn projectedEndItemIndex < this.totalDataLength ? projectedEndItemIndex : this.totalDataLength;\n\t}\n\n\t/**\n\t * The previous page number to navigate to, from the current page.\n\t */\n\tget previousPage(): number {\n\t\treturn this.currentPage <= 1 ? 1 : this.currentPage - 1;\n\t}\n\n\t/**\n\t * The next page number to navigate to, from the current page.\n\t */\n\tget nextPage(): number {\n\t\tconst lastPage = this.lastPage;\n\t\treturn this.currentPage >= lastPage ? lastPage : this.currentPage + 1;\n\t}\n\n\tget pageOptions() {\n\t\t/**\n\t\t * Calculate number of pages based on totalDataLength and itemsPerPage.\n\t\t * Even if totalDataLength is 0, numberOfPages should be always at least 1.\n\t\t * New array will be constructed only if number of pages changes.\n\t\t */\n\t\tconst numberOfPages = Math.max(Math.ceil(this.totalDataLength / this.itemsPerPage), 1);\n\t\tif (this._pageOptions.length !== numberOfPages) {\n\t\t\tthis._pageOptions = Array(numberOfPages);\n\t\t}\n\t\treturn this._pageOptions;\n\t}\n\n\titemsPerPageSelectId = `pagination-select-items-per-page-${Pagination.paginationCounter}`;\n\tcurrentPageSelectId = `pagination-select-current-page-${Pagination.paginationCounter}`;\n\n\titemsPerPageText = this.i18n.getOverridable(\"PAGINATION.ITEMS_PER_PAGE\");\n\toptionsListText = this.i18n.getOverridable(\"PAGINATION.OPEN_LIST_OF_OPTIONS\");\n\tbackwardText = this.i18n.getOverridable(\"PAGINATION.BACKWARD\");\n\tforwardText = this.i18n.getOverridable(\"PAGINATION.FORWARD\");\n\ttotalItemsText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS\");\n\ttotalItemText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEM\");\n\ttotalItemsUnknownText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS_UNKNOWN\");\n\tpageText = this.i18n.getOverridable(\"PAGINATION.PAGE\");\n\tofLastPagesText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGES\");\n\tofLastPageText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGE\");\n\n\tprotected _pageOptions = [];\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPagination.paginationCounter++;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" }, { "name": "experimental", "type": "ExperimentalService", "deprecated": false, "deprecationMessage": "" } ], "line": 349, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "experimental", "type": "ExperimentalService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "translations": { "name": "translations", "setSignature": { "name": "translations", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "PaginationTranslations", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 239, "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"ITEMS_PER_PAGE\": \"Items per page:\",\n\t\t\"OPEN_LIST_OF_OPTIONS\": \"Open list of options\",\n\t\t\"BACKWARD\": \"Backward\",\n\t\t\"FORWARD\": \"Forward\",\n\t\t\"TOTAL_ITEMS_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n}\n```\n", "description": "

Expects an object that contains some or all of:

\nExample :
{\n        "ITEMS_PER_PAGE": "Items per page:",\n        "OPEN_LIST_OF_OPTIONS": "Open list of options",\n        "BACKWARD": "Backward",\n        "FORWARD": "Forward",\n        "TOTAL_ITEMS_UNKNOWN": "{{start}}-{{end}} items",\n        "TOTAL_ITEMS": "{{start}}-{{end}} of {{total}} items",\n        "TOTAL_ITEM": "{{start}}-{{end}} of {{total}} item",\n        "OF_LAST_PAGES": "of {{last}} pages",\n        "OF_LAST_PAGE": "of {{last}} page"\n}
", "jsdoctags": [ { "name": "value", "type": "PaginationTranslations", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "itemsPerPage": { "name": "itemsPerPage", "setSignature": { "name": "itemsPerPage", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 271, "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "itemsPerPage", "type": "", "returnType": "", "line": 268 } }, "currentPage": { "name": "currentPage", "setSignature": { "name": "currentPage", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 279, "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "currentPage", "type": "", "returnType": "", "line": 276 } }, "totalDataLength": { "name": "totalDataLength", "getSignature": { "name": "totalDataLength", "type": "", "returnType": "", "line": 286 } }, "lastPage": { "name": "lastPage", "getSignature": { "name": "lastPage", "type": "number", "returnType": "number", "line": 292, "rawdescription": "\n\nThe last page number to display in the pagination view.\n", "description": "

The last page number to display in the pagination view.

\n" } }, "startItemIndex": { "name": "startItemIndex", "getSignature": { "name": "startItemIndex", "type": "", "returnType": "", "line": 297 } }, "endItemIndex": { "name": "endItemIndex", "getSignature": { "name": "endItemIndex", "type": "", "returnType": "", "line": 301 } }, "previousPage": { "name": "previousPage", "getSignature": { "name": "previousPage", "type": "number", "returnType": "number", "line": 310, "rawdescription": "\n\nThe previous page number to navigate to, from the current page.\n", "description": "

The previous page number to navigate to, from the current page.

\n" } }, "nextPage": { "name": "nextPage", "getSignature": { "name": "nextPage", "type": "number", "returnType": "number", "line": 317, "rawdescription": "\n\nThe next page number to navigate to, from the current page.\n", "description": "

The next page number to navigate to, from the current page.

\n" } }, "pageOptions": { "name": "pageOptions", "getSignature": { "name": "pageOptions", "type": "", "returnType": "", "line": 322 } } } }, { "name": "PaginationNav", "id": "component-PaginationNav-02747b3f02dda4195eb9b8d17de227f10ddb93cd71d7303c3e81567547ccb446b5f32191b820b258e4c180ac7d7172629000d09893bd3b623c8f47837e111b52", "file": "src/pagination/pagination-nav/pagination-nav.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-pagination-nav, ibm-pagination-navm", "styleUrls": [], "styles": [], "template": "
\n\t
\n\t\t
    \n\t\t\t
  • \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    • \n\t\t\t= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)\"\n\t\t\t\tpage=\"1\"\n\t\t\t\t(click)=\"currentPage = 1\"\n\t\t\t\t[isActive]=\"currentPage == 1\">\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t 1\"\n\t\t\t\t[page]=\"totalNumbersArray.length\"\n\t\t\t\t(click)=\"currentPage = totalNumbersArray.length\"\n\t\t\t\t[isActive]=\"currentPage == totalNumbersArray.length\">\n\t\t\t\n\t\t\t
  • \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    • \n\t\t
\n\t
\n
\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to disable the backward/forward buttons.\n", "description": "

Set to true to disable the backward/forward buttons.

\n", "line": 124, "type": "boolean", "decorators": [] }, { "name": "model", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n`PaginationNavModel` with the information about pages you're controlling.\n", "description": "

PaginationNavModel with the information about pages you're controlling.

\n", "line": 120, "type": "PaginationModel", "decorators": [] }, { "name": "numOfItemsToShow", "defaultValue": "4", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nNumber of items to show in pagination. Minimum is 4.\n", "description": "

Number of items to show in pagination. Minimum is 4.

\n", "line": 128, "type": "number", "decorators": [] }, { "name": "size", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the pagination nav size\n", "description": "

Sets the pagination nav size

\n", "line": 149, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "translations", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"NEXT\": \"Next\",\n\t\t\"PREVIOUS\": \"Previous\",\n}\n```\n", "description": "

Expects an object that contains some or all of:

\nExample :
{\n        "NEXT": "Next",\n        "PREVIOUS": "Previous",\n}
", "line": 140, "type": "PaginationNavTranslations", "decorators": [] } ], "outputsClass": [ { "name": "selectPage", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the new page number.\n\nYou should tie into this and update `model.currentPage` once the fresh\ndata is finally loaded.\n", "description": "

Emits the new page number.

\n

You should tie into this and update model.currentPage once the fresh\ndata is finally loaded.

\n", "line": 168, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "nextItemText", "defaultValue": "this.i18n.getOverridable(\"PAGINATION.NEXT\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 211 }, { "name": "paginationCounter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 116, "modifierKind": [ 126 ] }, { "name": "previousItemText", "defaultValue": "this.i18n.getOverridable(\"PAGINATION.PREVIOUS\")", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 212 } ], "methodsClass": [ { "name": "getPages", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 232, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ] }, { "name": "handleOverflowSelection", "args": [ { "name": "page", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 218, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "page", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "jumpToNext", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 224, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ] }, { "name": "jumpToPrevious", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 228, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--layout--size-lg", "deprecated": false, "deprecationMessage": "", "line": 158, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-md", "deprecated": false, "deprecationMessage": "", "line": 155, "type": "boolean", "decorators": [] }, { "name": "class.cds--layout--size-sm", "deprecated": false, "deprecationMessage": "", "line": 152, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

Use pagination when you have multiple pages of data to handle. Get started with importing the module:

\nExample :
import { PaginationModule } from 'carbon-components-angular';
Example :
<cds-pagination-nav [model]="model" (selectPage)="selectPage($event)"></cds-pagination-nav>

In your selectPage() method set the model.currentPage to selected page, after\nyou load the page.

\nExample :
selectPage(page) {\n    // ... your code to load the page goes here\n\n    this.model.currentPage = page;\n\n    // ... anything you want to do after page selection changes goes here\n}

See demo

\n", "rawdescription": "\n\nUse pagination when you have multiple pages of data to handle. Get started with importing the module:\n\n```typescript\nimport { PaginationModule } from 'carbon-components-angular';\n```\n\n```html\n\n```\n\nIn your `selectPage()` method set the `model.currentPage` to selected page, _after_\nyou load the page.\n\n```typescript\nselectPage(page) {\n\t// ... your code to load the page goes here\n\n\tthis.model.currentPage = page;\n\n\t// ... anything you want to do after page selection changes goes here\n}\n```\n\n[See demo](../../?path=/story/components-pagination-nav--basic)\n", "type": "component", "sourceCode": "import { PaginationModel } from \"../pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { merge } from \"carbon-components-angular/utils\";\nimport { range } from \"carbon-components-angular/common\";\n\nexport interface PaginationNavTranslations {\n\tNEXT: string;\n\tPREVIOUS: string;\n}\n\n/**\n * Use pagination when you have multiple pages of data to handle. Get started with importing the module:\n *\n * ```typescript\n * import { PaginationModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * \n * ```\n *\n * In your `selectPage()` method set the `model.currentPage` to selected page, _after_\n * you load the page.\n *\n * ```typescript\n * selectPage(page) {\n * \t// ... your code to load the page goes here\n *\n * \tthis.model.currentPage = page;\n *\n * \t// ... anything you want to do after page selection changes goes here\n * }\n * ```\n *\n * [See demo](../../?path=/story/components-pagination-nav--basic)\n */\n@Component({\n\tselector: \"cds-pagination-nav, ibm-pagination-navm\",\n\ttemplate: `\n\t
\n\t\t
\n\t\t\t
    \n\t\t\t\t
  • \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    • \n\t\t\t\t= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)\"\n\t\t\t\t\tpage=\"1\"\n\t\t\t\t\t(click)=\"currentPage = 1\"\n\t\t\t\t\t[isActive]=\"currentPage == 1\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t 1\"\n\t\t\t\t\t[page]=\"totalNumbersArray.length\"\n\t\t\t\t\t(click)=\"currentPage = totalNumbersArray.length\"\n\t\t\t\t\t[isActive]=\"currentPage == totalNumbersArray.length\">\n\t\t\t\t\n\t\t\t\t
  • \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    • \n\t\t\t
\n\t\t
\n\t
\n\t`\n})\nexport class PaginationNav {\n\tstatic paginationCounter = 0;\n\t/**\n\t * `PaginationNavModel` with the information about pages you're controlling.\n\t */\n\t@Input() model: PaginationModel;\n\t/**\n\t * Set to `true` to disable the backward/forward buttons.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Number of items to show in pagination. Minimum is 4.\n\t */\n\t@Input() numOfItemsToShow = 4;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"NEXT\": \"Next\",\n\t *\t\t\"PREVIOUS\": \"Previous\",\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value: PaginationNavTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.nextItemText.override(valueWithDefaults.NEXT);\n\t\tthis.previousItemText.override(valueWithDefaults.PREVIOUS);\n\t}\n\n\t/**\n\t * Sets the pagination nav size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t// Size\n\t@HostBinding(\"class.cds--layout--size-sm\") get smallLayoutSize() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get mediumLayoutSize() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get largeLayoutSize() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t/**\n\t * Emits the new page number.\n\t *\n\t * You should tie into this and update `model.currentPage` once the fresh\n\t * data is finally loaded.\n\t */\n\t@Output() selectPage = new EventEmitter();\n\n\tget totalNumbersArray() {\n\t\treturn range(this.totalDataLength + 1, 1);\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\n\tset currentPage(value) {\n\t\tvalue = Number(value);\n\t\t// emits the value to allow the user to update current page\n\t\t// in the model once the page is loaded\n\t\tthis.selectPage.emit(value);\n\t}\n\n\tget totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\n\tget startOffset() {\n\t\treturn this.numOfItemsToShow <= 4 && this.currentPage > 1 ? 0 : 1;\n\t}\n\n\tget frontCuts() {\n\t\tconst cuts = this.getCuts();\n\t\treturn cuts.front;\n\t}\n\n\tget backCuts() {\n\t\tconst cuts = this.getCuts();\n\t\treturn cuts.back;\n\t}\n\n\tget leftArrowDisabled() {\n\t\treturn this.disabled || this.currentPage === 1;\n\t}\n\n\tget rightArrowDisabled() {\n\t\treturn this.disabled || this.currentPage === this.totalDataLength;\n\t}\n\n\tnextItemText = this.i18n.getOverridable(\"PAGINATION.NEXT\");\n\tpreviousItemText = this.i18n.getOverridable(\"PAGINATION.PREVIOUS\");\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPaginationNav.paginationCounter++;\n\t}\n\n\thandleOverflowSelection(page) {\n\t\tif (typeof page === \"number\") {\n\t\t\tthis.currentPage = page;\n\t\t}\n\t}\n\n\tpublic jumpToNext() {\n\t\tthis.currentPage = this.currentPage < this.totalDataLength ? this.currentPage + 1 : this.totalDataLength;\n\t}\n\n\tpublic jumpToPrevious() {\n\t\tthis.currentPage = this.currentPage > 1 ? this.currentPage - 1 : 1;\n\t}\n\n\tpublic getPages() {\n\t\tif (this.totalDataLength <= 1) {\n\t\t\treturn null;\n\t\t}\n\t\tconst cuts = this.getCuts();\n\t\treturn this.totalNumbersArray.slice(this.startOffset + cuts.front, (1 + cuts.back) * -1);\n\t}\n\n\tprivate getCuts(splitPoint = null) {\n\t\tconst page = this.currentPage - 1;\n\t\tconst totalItems = this.totalDataLength;\n\t\tconst itemsThatFit = this.numOfItemsToShow;\n\n\t\tif (itemsThatFit >= totalItems) {\n\t\t\treturn {\n\t\t\t\tfront: 0,\n\t\t\t\tback: 0\n\t\t\t};\n\t\t}\n\t\tconst split = splitPoint || Math.ceil(itemsThatFit / 2) - 1;\n\t\tlet frontHidden = page + 1 - split;\n\t\tlet backHidden = totalItems - page - (itemsThatFit - split) + 1;\n\n\t\tif (frontHidden <= 1) {\n\t\t\tbackHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;\n\t\t\tfrontHidden = 0;\n\t\t}\n\t\tif (backHidden <= 1) {\n\t\t\tfrontHidden -= backHidden <= 0 ? Math.abs(backHidden) + 1 : 0;\n\t\t\tbackHidden = 0;\n\t\t}\n\t\treturn {\n\t\t\tfront: frontHidden,\n\t\t\tback: backHidden\n\t\t};\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" }, { "name": "experimental", "type": "ExperimentalService", "deprecated": false, "deprecationMessage": "" } ], "line": 212, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "experimental", "type": "ExperimentalService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "translations": { "name": "translations", "setSignature": { "name": "translations", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "PaginationNavTranslations", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 140, "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"NEXT\": \"Next\",\n\t\t\"PREVIOUS\": \"Previous\",\n}\n```\n", "description": "

Expects an object that contains some or all of:

\nExample :
{\n        "NEXT": "Next",\n        "PREVIOUS": "Previous",\n}
", "jsdoctags": [ { "name": "value", "type": "PaginationNavTranslations", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "smallLayoutSize": { "name": "smallLayoutSize", "getSignature": { "name": "smallLayoutSize", "type": "", "returnType": "", "line": 152 } }, "mediumLayoutSize": { "name": "mediumLayoutSize", "getSignature": { "name": "mediumLayoutSize", "type": "", "returnType": "", "line": 155 } }, "largeLayoutSize": { "name": "largeLayoutSize", "getSignature": { "name": "largeLayoutSize", "type": "", "returnType": "", "line": 158 } }, "totalNumbersArray": { "name": "totalNumbersArray", "getSignature": { "name": "totalNumbersArray", "type": "", "returnType": "", "line": 170 } }, "currentPage": { "name": "currentPage", "setSignature": { "name": "currentPage", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 178, "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "currentPage", "type": "", "returnType": "", "line": 174 } }, "totalDataLength": { "name": "totalDataLength", "getSignature": { "name": "totalDataLength", "type": "", "returnType": "", "line": 185 } }, "startOffset": { "name": "startOffset", "getSignature": { "name": "startOffset", "type": "", "returnType": "", "line": 189 } }, "frontCuts": { "name": "frontCuts", "getSignature": { "name": "frontCuts", "type": "", "returnType": "", "line": 193 } }, "backCuts": { "name": "backCuts", "getSignature": { "name": "backCuts", "type": "", "returnType": "", "line": 198 } }, "leftArrowDisabled": { "name": "leftArrowDisabled", "getSignature": { "name": "leftArrowDisabled", "type": "", "returnType": "", "line": 203 } }, "rightArrowDisabled": { "name": "rightArrowDisabled", "getSignature": { "name": "rightArrowDisabled", "type": "", "returnType": "", "line": 207 } } } }, { "name": "PaginationNavItem", "id": "component-PaginationNavItem-ecf17a62e2a6780d76b161deda587fbe7b99c57069b545304123cf86d7f8195a61adb0eb53b1f6fd87d2df3908855bea62ee846cfae7d13f71907b33ccc18a5f", "file": "src/pagination/pagination-nav/pagination-item.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-pagination-nav-item, ibm-pagination-nav-item", "styleUrls": [], "styles": [], "template": "
  • \n\t\n\t\t\n\t\t\t{{page}}\n\t\t\n\t\t{{page}}\n\t\n
    • \n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "isActive", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe state for this component to dipslay\n", "description": "

    The state for this component to dipslay

    \n", "line": 41, "type": "boolean", "decorators": [] }, { "name": "page", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe page for this component to dipslay\n", "description": "

    The page for this component to dipslay

    \n", "line": 36, "type": "number", "decorators": [] } ], "outputsClass": [ { "name": "click", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits click event\n", "description": "

    Emits click event

    \n", "line": 46, "type": "EventEmitter" } ], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Used to present a single navigation item in a pagination list

    \n
      \n
    • Example :
      • \n
    \n

    <cds-pagination-nav-item [page]="5" [isActive]="false" (click)="handleClick(value)">

    \nExample :
    ", "rawdescription": "\n\nUsed to present a single navigation item in a pagination list\n\n * ```html\n\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\n/**\n * Used to present a single navigation item in a pagination list\n *\n * * ```html\n * \n * ```\n */\n@Component({\n\tselector: \"cds-pagination-nav-item, ibm-pagination-nav-item\",\n\ttemplate: `\n\t\t
  • \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{page}}\n\t\t\t\t\n\t\t\t\t{{page}}\n\t\t\t\n\t\t
    • \n\t`\n})\nexport class PaginationNavItem {\n\t/**\n\t * The page for this component to dipslay\n\t */\n\t@Input() page = 0;\n\n\t/**\n\t * The state for this component to dipslay\n\t */\n\t@Input() isActive = false;\n\n\t/**\n\t * Emits click event\n\t */\n\t@Output() click = new EventEmitter();\n\n\tconstructor() {}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [], "line": 46 }, "extends": [] }, { "name": "PaginationNavStory", "id": "component-PaginationNavStory-82b8f8e304195eef384cf31fbe1fbd130e1484d237aca1ba87a29713634a23a7ee9178947747f33d4eb1186d62e6bfcaac749c07da8ef3386e92b63c27ee2ac7", "file": "src/pagination/pagination-nav/stories/pagination-nav-story.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-pagination", "styleUrls": [], "styles": [], "template": "\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 23, "type": "boolean", "decorators": [] }, { "name": "model", "defaultValue": "new PaginationModel()", "deprecated": false, "deprecationMessage": "", "line": 22, "type": "any", "decorators": [] }, { "name": "numOfItemsToShow", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 25, "type": "boolean", "decorators": [] }, { "name": "pageInputDisabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 24, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "totalDataLength", "deprecated": false, "deprecationMessage": "", "line": 28, "type": "any", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "selectPage", "args": [ { "name": "page", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 39, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "page", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOnInit\n} from \"@angular/core\";\n\nimport { PaginationModel } from \"../..\";\n\n@Component({\n\tselector: \"app-pagination\",\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})\nexport class PaginationNavStory implements OnInit {\n\t@Input() model = new PaginationModel();\n\t@Input() disabled = false;\n\t@Input() pageInputDisabled = false;\n\t@Input() numOfItemsToShow = false;\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@Input() get totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\tset totalDataLength(value) {\n\t\tthis.model.totalDataLength = value;\n\t}\n\n\tngOnInit() {\n\t\tthis.model.currentPage = 1;\n\t}\n\n\tselectPage(page) {\n\t\tconsole.log(\"Loading page\", page, \"from pagination model\");\n\t\tthis.model.currentPage = page;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "OnInit" ], "accessors": { "totalDataLength": { "name": "totalDataLength", "setSignature": { "name": "totalDataLength", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 31, "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "totalDataLength", "type": "", "returnType": "", "line": 28 } } } }, { "name": "PaginationOverflow", "id": "component-PaginationOverflow-1b390a322f4b268a9aa8018a0e9a2869bcabbe1883de110cf08ea29a55e8b05f9151468aea5c53ff3a1c5954182338b2687ec895709b815f88cc632496a3218b", "file": "src/pagination/pagination-nav/pagination-overflow.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-pagination-overflow, ibm-pagination-overflow", "styleUrls": [], "styles": [], "template": "
  • 1\">\n\t
    \n\t\n\t\t\n\t\t\n\t\t\t{{fromIndex + i + 1}}\n\t\t\n\t\n\t
    \n\t\t\n\t\t\n\t
    \n\t
    \n
    • \n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "defaultValue": "this.i18n.get().PAGINATION.SELECT_ARIA", "deprecated": false, "deprecationMessage": "", "line": 53, "type": "string", "decorators": [] }, { "name": "count", "deprecated": false, "deprecationMessage": "", "line": 51, "type": "number", "decorators": [] }, { "name": "fromIndex", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe page for this component to dipslay\n", "description": "

    The page for this component to dipslay

    \n", "line": 49, "type": "number", "decorators": [] } ], "outputsClass": [ { "name": "change", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits click event\n", "description": "

    Emits click event

    \n", "line": 58, "type": "EventEmitter" } ], "propertiesClass": [], "methodsClass": [ { "name": "handleChange", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 66, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Used to present a selection of pages when there is an overflow\nin the pagination list

    \n
      \n
    • Example :
      • \n
    \n

    <cds-pagination-overflow [fromIndex]="5" [count]="30" (change)="handleChange(value)">

    \nExample :
    ", "rawdescription": "\n\nUsed to present a selection of pages when there is an overflow\nin the pagination list\n\n* ```html\n\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Used to present a selection of pages when there is an overflow\n * in the pagination list\n *\n * * ```html\n * \n * ```\n */\n@Component({\n\tselector: \"cds-pagination-overflow, ibm-pagination-overflow\",\n\ttemplate: `\n\t\t
  • 1\">\n\t\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{fromIndex + i + 1}}\n\t\t\t\t\n\t\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t
    • \n\t\t\n\t`\n})\nexport class PaginationOverflow {\n\t/**\n\t * The page for this component to dipslay\n\t */\n\t@Input() fromIndex: number;\n\n\t@Input() count: number;\n\n\t@Input() ariaLabel: string = this.i18n.get().PAGINATION.SELECT_ARIA;\n\n\t/**\n\t * Emits click event\n\t */\n\t@Output() change = new EventEmitter();\n\n\tget countAsArray() {\n\t\treturn [...Array(this.count)];\n\t}\n\n\tconstructor(protected i18n: I18n) {}\n\n\thandleChange(event) {\n\t\tthis.change.emit(+event.target.value);\n\t\tevent.target.value = \"\";\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 62, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "countAsArray": { "name": "countAsArray", "getSignature": { "name": "countAsArray", "type": "", "returnType": "", "line": 60 } } } }, { "name": "PaginationStory", "id": "component-PaginationStory-c0c51bc7544c0d64047f3c2207997c906005b97486189d51e3e1871732f1ff7dab1618b56c2ca36a1e687e008c60bd9c91e7590cf4d20365369676c957c199c3", "file": "src/pagination/stories/pagination.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-pagination", "styleUrls": [], "styles": [], "template": "\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "boolean", "decorators": [] }, { "name": "model", "defaultValue": "new PaginationModel()", "deprecated": false, "deprecationMessage": "", "line": 24, "type": "any", "decorators": [] }, { "name": "pageInputDisabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 27, "type": "boolean", "decorators": [] }, { "name": "pagesUnknown", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 28, "type": "boolean", "decorators": [] }, { "name": "showPageInput", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 29, "type": "boolean", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 25, "type": "boolean", "decorators": [] }, { "name": "totalDataLength", "deprecated": false, "deprecationMessage": "", "line": 31, "type": "any", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "selectPage", "args": [ { "name": "page", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 43, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "page", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOnInit\n} from \"@angular/core\";\n\nimport { PaginationModel } from \"..\";\n\n@Component({\n\tselector: \"app-pagination\",\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})\nexport class PaginationStory implements OnInit {\n\t@Input() model = new PaginationModel();\n\t@Input() skeleton = false;\n\t@Input() disabled = false;\n\t@Input() pageInputDisabled = false;\n\t@Input() pagesUnknown = false;\n\t@Input() showPageInput = true;\n\n\t@Input() get totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\tset totalDataLength(value) {\n\t\tthis.model.totalDataLength = value;\n\t}\n\n\tngOnInit() {\n\t\tthis.model.pageLength = 10;\n\t\tthis.model.currentPage = 1;\n\t}\n\n\tselectPage(page) {\n\t\tconsole.log(\"Loading page\", page, \"from pagination model\");\n\t\tthis.model.currentPage = page;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "OnInit" ], "accessors": { "totalDataLength": { "name": "totalDataLength", "setSignature": { "name": "totalDataLength", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 34, "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "totalDataLength", "type": "", "returnType": "", "line": 31 } } } }, { "name": "PaginationTableStory", "id": "component-PaginationTableStory-f9917944db08c8d36a96cc73be7dbbca7f9b536fa81599e05f71c17f9f0581de724012d106dacc8358110538de3a02379f03c52334fbc07980f6f0bda4761701", "file": "src/table/stories/app-pagination-table.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-pagination-table", "styleUrls": [], "styles": [], "template": "\n\t{{data.name}} {{data.surname}}\n\n\n\t{{data.name}}\n\n\n\t\n\t\tValue\n\t\t\n\t\t\n\t\t\n\t\n\n\n\n\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "line": 44, "type": "any", "decorators": [] }, { "name": "showSelectionColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 49, "type": "boolean", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 47, "type": "boolean", "decorators": [] }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 46, "type": "boolean", "decorators": [] }, { "name": "stickyHeader", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 58, "type": "boolean", "decorators": [] }, { "name": "totalDataLength", "deprecated": false, "deprecationMessage": "", "line": 51, "type": "any", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "filter", "deprecated": false, "deprecationMessage": "", "type": "TemplateRef", "optional": false, "description": "", "line": 60, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'filter'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "customSort", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 80, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "getPage", "args": [ { "name": "page", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 92, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "page", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onRowClick", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 114, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "selectPage", "args": [ { "name": "page", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 106, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "page", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "sort", "args": [ { "name": "model", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 84, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "model", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tTemplateRef,\n\tComponent,\n\tViewChild,\n\tOnInit,\n\tInput\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\nimport { TableItem } from \"../table-item.class\";\n\n@Component({\n\tselector: \"app-pagination-table\",\n\ttemplate: `\n\t\t\n\t\t\t{{data.name}} {{data.surname}}\n\t\t\n\t\t\n\t\t\t{{data.name}}\n\t\t\n\t\t\n\t\t\t\n\t\t\t\tValue\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\n\t\t\n\t`\n})\nexport class PaginationTableStory implements OnInit {\n\t@Input() model = new TableModel();\n\n\t@Input() sortable = true;\n\t@Input() skeleton = false;\n\n\t@Input() showSelectionColumn = true;\n\n\t@Input() get totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\tset totalDataLength(value) {\n\t\tthis.model.totalDataLength = value;\n\t}\n\n\t@Input() stickyHeader = false;\n\n\t@ViewChild(\"filter\") filter: TemplateRef;\n\t@ViewChild(\"filterableHeaderTemplate\")\n\tprotected filterableHeaderTemplate: TemplateRef;\n\t@ViewChild(\"paginationTableItemTemplate\")\n\tprotected paginationTableItemTemplate: TemplateRef;\n\n\tngOnInit() {\n\t\tthis.model.data = [[]];\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({ data: \"Very long title indeed\" }),\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Very long title indeed\"\n\t\t\t})\n\t\t];\n\n\t\tthis.model.pageLength = 10;\n\t\tthis.model.totalDataLength = 105;\n\t\tthis.selectPage(1);\n\t}\n\n\tcustomSort(index: number) {\n\t\tthis.sort(this.model, index);\n\t}\n\n\tsort(model, index: number) {\n\t\tif (model.header[index].sorted) {\n\t\t\t// if already sorted flip sorting direction\n\t\t\tmodel.header[index].ascending = model.header[index].descending;\n\t\t}\n\t\tmodel.sort(index);\n\t}\n\n\tgetPage(page: number) {\n\t\tconst line = line => [`Item ${line}:1!`, { name: \"Item\", surname: `${line}:2` }];\n\n\t\tconst fullPage = [];\n\n\t\tfor (let i = (page - 1) * this.model.pageLength; i < page * this.model.pageLength && i < this.model.totalDataLength; i++) {\n\t\t\tfullPage.push(line(i + 1));\n\t\t}\n\n\t\treturn new Promise(resolve => {\n\t\t\tsetTimeout(() => resolve(fullPage), 150);\n\t\t});\n\t}\n\n\tselectPage(page) {\n\t\tthis.getPage(page).then((data: Array>) => {\n\t\t\t// set the data and update page\n\t\t\tthis.model.data = this.prepareData(data);\n\t\t\tthis.model.currentPage = page;\n\t\t});\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n\n\tprotected prepareData(data: Array>) {\n\t\t// create new data from the service data\n\t\tlet newData = [];\n\t\tdata.forEach(dataRow => {\n\t\t\tlet row = [];\n\t\t\tdataRow.forEach(dataElement => {\n\t\t\t\trow.push(new TableItem({\n\t\t\t\t\tdata: dataElement,\n\t\t\t\t\ttemplate: typeof dataElement === \"string\" ? undefined : this.paginationTableItemTemplate\n\t\t\t\t\t// your template can handle all the data types so you don't have to conditionally set it\n\t\t\t\t\t// you can also set different templates for different columns based on index\n\t\t\t\t}));\n\t\t\t});\n\t\t\tnewData.push(row);\n\t\t});\n\t\treturn newData;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "OnInit" ], "accessors": { "totalDataLength": { "name": "totalDataLength", "setSignature": { "name": "totalDataLength", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 54, "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "totalDataLength", "type": "", "returnType": "", "line": 51 } } } }, { "name": "Panel", "id": "component-Panel-2ebb497352d8b5e724a48a5dbe4e559c148a551fe1555e8055f412750fe28413df088da970c326c542c87aec05b419931083dec3b7b82b3addad058073842504", "file": "src/ui-shell/panel/panel.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-panel, ibm-panel", "styleUrls": [], "styles": [], "template": "\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "any", "decorators": [] }, { "name": "expanded", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the visibility of the panel\n", "description": "

    Controls the visibility of the panel

    \n", "line": 24, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Panel is a component that can be used to display content on the right side of the screen.\nPanels are generally activated by and linked to a HeaderAction component.

    \n", "rawdescription": "\n\n`Panel` is a component that can be used to display content on the right side of the screen.\n`Panel`s are generally activated by and linked to a `HeaderAction` component.\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\n\n/**\n * `Panel` is a component that can be used to display content on the right side of the screen.\n * `Panel`s are generally activated by and linked to a `HeaderAction` component.\n */\n@Component({\n\tselector: \"cds-panel, ibm-panel\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class Panel {\n\t/**\n\t * Controls the visibility of the panel\n\t */\n\t@Input() expanded = false;\n\n\t@Input() ariaLabel;\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "PasswordInputLabelComponent", "id": "component-PasswordInputLabelComponent-66bc6cdf361c02f00c681dad885fc33fd946196e164238ef7762e4784d4261bc77288a93ecc65c7b88a2f10aa34b41ad11c685094cddc10f623ccd2daa75684b", "file": "src/input/password-input-label.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-password-label, ibm-password-label", "styleUrls": [], "styles": [], "template": "\n\t\n\t
    \n    \n\n\t\n\t\n\t\t\n\t\n\n\n
    \n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\n\n\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t\t\t{{ invalidText }}\n\t\t\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t\t\t{{ warnText }}\n\t\t\t\t\n\t\t\t
    \n\t\t    \n\t
    \n\t\n\t\t\n\t\t\t{{ helperText }}\n\t\t\t\n\t\t\n\n\t\t
    \n\t\t\t{{ invalidText }}\n\t\t\t\n\t\t
    \n\n\t\t
    \n\t\t\t{{ warnText }}\n\t\t\t\n\t\t
    \n\t    \n\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAria label for label.\n", "description": "

    Aria label for label.

    \n", "line": 206, "type": "string", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFlag for disabled label.\n", "description": "

    Flag for disabled label.

    \n", "line": 161, "type": "boolean", "decorators": [] }, { "name": "fluid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExperimental: enable fluid state\n", "description": "

    Experimental: enable fluid state

    \n", "line": 221, "type": "boolean", "decorators": [] }, { "name": "helperText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional helper text under the label.\n", "description": "

    Optional helper text under the label.

    \n", "line": 181, "type": "string | TemplateRef", "decorators": [] }, { "name": "hidePasswordLabel", "defaultValue": "\"Hide password\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTooltip text for hiding password.\n", "description": "

    Tooltip text for hiding password.

    \n", "line": 211, "type": "string", "decorators": [] }, { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFlag for an invalid label component.\n", "description": "

    Flag for an invalid label component.

    \n", "line": 191, "type": "boolean", "decorators": [] }, { "name": "invalidText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the invalid text.\n", "description": "

    Sets the invalid text.

    \n", "line": 186, "type": "string | TemplateRef", "decorators": [] }, { "name": "labelInputID", "defaultValue": "\"cds-password-input-\" + PasswordInputLabelComponent.labelCounter++", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nID for the input item associated with the label.\n", "description": "

    ID for the input item associated with the label.

    \n", "line": 146, "type": "string", "decorators": [] }, { "name": "labelTemplate", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTemplate for label content.\n", "description": "

    Template for label content.

    \n", "line": 171, "type": "TemplateRef", "decorators": [] }, { "name": "passwordInputTemplate", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTemplate for password input.\n", "description": "

    Template for password input.

    \n", "line": 176, "type": "TemplateRef", "decorators": [] }, { "name": "showPasswordLabel", "defaultValue": "\"Show password\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTooltip text for showing password.\n", "description": "

    Tooltip text for showing password.

    \n", "line": 216, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFlag for loading (skeleton) label.\n", "description": "

    Flag for loading (skeleton) label.

    \n", "line": 166, "type": "boolean", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFlag for showing a warning.\n", "description": "

    Flag for showing a warning.

    \n", "line": 196, "type": "boolean", "decorators": [] }, { "name": "warnText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nWarning text.\n", "description": "

    Warning text.

    \n", "line": 201, "type": "string | TemplateRef", "decorators": [] }, { "name": "align", "defaultValue": "\"bottom\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet popover alignment\n", "description": "

    Set popover alignment

    \n", "line": 32, "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "autoAlign", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n**Experimental**: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once\n", "description": "

    Experimental: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once

    \n", "line": 40, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "caret", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide caret\n", "description": "

    Set to false to hide caret

    \n", "line": 16, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "dropShadow", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to hide shadow\n", "description": "

    Set to false to hide shadow

    \n", "line": 20, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "enterDelayMs", "defaultValue": "100", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet delay before tooltip is shown\n", "description": "

    Set delay before tooltip is shown

    \n", "line": 44, "type": "number", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "highContrast", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to enable high contrast\n", "description": "

    Set to true to enable high contrast

    \n", "line": 24, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "isOpen", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to have the popover open by default\n", "description": "

    Set to true to have the popover open by default

    \n", "line": 28, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseIconButton" } }, { "name": "leaveDelayMs", "defaultValue": "300", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet delay when tooltip disappears\n", "description": "

    Set delay when tooltip disappears

    \n", "line": 48, "type": "number", "decorators": [], "inheritance": { "file": "BaseIconButton" } } ], "outputsClass": [], "propertiesClass": [ { "name": "inputType", "defaultValue": "\"password\"", "deprecated": false, "deprecationMessage": "", "type": "\"password\" | \"text\"", "optional": false, "description": "

    Type for input field, either password or text.

    \n", "line": 151, "rawdescription": "\n\nType for input field, either password or text.\n" }, { "name": "labelClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Binding for applying class to host element.

    \n", "line": 231, "rawdescription": "\n\nBinding for applying class to host element.\n", "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--form-item'" } ], "modifierKind": [ 170 ] }, { "name": "labelCounter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

    Counter for generating unique labelInputID.

    \n", "line": 139, "rawdescription": "\n\nCounter for generating unique labelInputID.\n", "modifierKind": [ 126 ] }, { "name": "passwordInputWrapper", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 232, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--password-input-wrapper'" } ], "modifierKind": [ 170 ] }, { "name": "passwordIsVisible", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Flag for checking if password is visible.

    \n", "line": 156, "rawdescription": "\n\nFlag for checking if password is visible.\n" }, { "name": "textInput", "deprecated": false, "deprecationMessage": "", "type": "PasswordInput", "optional": false, "description": "", "line": 141, "decorators": [ { "name": "ContentChild", "stringifiedArguments": "PasswordInput" } ], "modifierKind": [ 170 ] }, { "name": "textInputWrapper", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 233, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--text-input-wrapper'" } ], "modifierKind": [ 170 ] }, { "name": "wrapper", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "

    Reference to the wrapper element.

    \n", "line": 226, "rawdescription": "\n\nReference to the wrapper element.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'wrapper', {static: true}" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "handleTogglePasswordVisibility", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 284, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandler for toggling password visibility.\n", "description": "

    Handler for toggling password visibility.

    \n", "modifierKind": [ 125 ] }, { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 277, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFunction to check if a value is a TemplateRef.\n", "description": "

    Function to check if a value is a TemplateRef.

    \n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 7573, "end": 7578, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "value" }, "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 7567, "end": 7572, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "
      \n
    • Value to check.
      • \n
    \n" }, { "tagName": { "pos": 7602, "end": 7609, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "returns" }, "comment": "

    Whether the value is a TemplateRef.

    \n" } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--form-item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nBinding for applying class to host element.\n", "description": "

    Binding for applying class to host element.

    \n", "line": 231, "type": "boolean", "decorators": [] }, { "name": "class.cds--password-input-wrapper", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 232, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input--fluid", "deprecated": false, "deprecationMessage": "", "line": 238, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input--fluid__skeleton", "deprecated": false, "deprecationMessage": "", "line": 242, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input-wrapper", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 233, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input-wrapper--readonly", "deprecated": false, "deprecationMessage": "", "line": 234, "type": "any", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Get started with importing the module:

    \nExample :
    import { InputModule } from 'carbon-components-angular';
    Example :
    <cds-password-label>\n    Label\n    <input cdsPassword>\n</cds-password-label>

    See demo

    \n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InputModule } from 'carbon-components-angular';\n```\n\n```html\n\n\tLabel\n\t\n\n```\n\n[See demo](../../?path=/story/components-input--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef,\n\tContentChild\n} from \"@angular/core\";\nimport { PasswordInput } from \"./password.directive\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * \n * \tLabel\n *\t\n * \n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-password-label, ibm-password-label\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
    \n\t\t    \n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
    \n\t\t\t\t\n\n\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t{{ invalidText }}\n\t\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t{{ warnText }}\n\t\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t    \n\t\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{ helperText }}\n\t\t\t\t\t\n\t\t\t\t\n\n\t\t\t\t
    \n\t\t\t\t\t{{ invalidText }}\n\t\t\t\t\t\n\t\t\t\t
    \n\n\t\t\t\t
    \n\t\t\t\t\t{{ warnText }}\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t    \n\t\t\n `\n})\n/**\n * Represents the Password Input Label Component.\n */\nexport class PasswordInputLabelComponent extends BaseIconButton implements AfterViewInit {\n\t/**\n\t * Counter for generating unique labelInputID.\n\t */\n\tstatic labelCounter = 0;\n\n\t@ContentChild(PasswordInput) textInput: PasswordInput;\n\n\t/**\n\t * ID for the input item associated with the label.\n\t */\n\t@Input() labelInputID = \"cds-password-input-\" + PasswordInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Type for input field, either password or text.\n\t */\n\tinputType: \"password\" | \"text\" = \"password\";\n\n\t/**\n\t* Flag for checking if password is visible.\n\t*/\n\tpasswordIsVisible = false;\n\n\t/**\n\t * Flag for disabled label.\n\t */\n\t@Input() disabled = false;\n\n\t/**\n\t * Flag for loading (skeleton) label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Template for label content.\n\t */\n\t@Input() labelTemplate: TemplateRef;\n\n\t/**\n\t * Template for password input.\n\t */\n\t@Input() passwordInputTemplate: TemplateRef;\n\n\t/**\n\t * Optional helper text under the label.\n\t */\n\t@Input() helperText: string | TemplateRef;\n\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef;\n\n\t/**\n\t * Flag for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * Flag for showing a warning.\n\t */\n\t@Input() warn = false;\n\n\t/**\n\t * Warning text.\n\t */\n\t@Input() warnText: string | TemplateRef;\n\n\t/**\n\t * Aria label for label.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Tooltip text for hiding password.\n\t */\n\t@Input() hidePasswordLabel = \"Hide password\";\n\n\t/**\n\t * Tooltip text for showing password.\n\t */\n\t@Input() showPasswordLabel = \"Show password\";\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\n\t/**\n\t * Reference to the wrapper element.\n\t */\n\t@ViewChild(\"wrapper\", { static: true }) wrapper: ElementRef;\n\n\t/**\n\t * Binding for applying class to host element.\n\t */\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\t@HostBinding(\"class.cds--password-input-wrapper\") passwordInputWrapper = true;\n\t@HostBinding(\"class.cds--text-input-wrapper\") textInputWrapper = true;\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly ?? false;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid\") get fluidClass() {\n\t\treturn this.fluid && !this.skeleton;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeletonClass() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\t/**\n\t * Constructor for PasswordInputLabelComponent.\n\t * @param changeDetectorRef - Reference to ChangeDetectorRef.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {\n\t\tsuper();\n\t}\n\n\t/**\n\t * Lifecycle hook called after the view has been initialized to set the ID of the input element\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\tconst inputElement =\n\t\t\t\tthis.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Function to check if a value is a TemplateRef.\n\t * @param value - Value to check.\n\t * @returns Whether the value is a TemplateRef.\n\t */\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handler for toggling password visibility.\n\t */\n\tpublic handleTogglePasswordVisibility() {\n\t\tthis.inputType = this.inputType === \"password\" ? \"text\" : \"password\";\n\t\tthis.textInput.type = this.inputType;\n\t\tthis.passwordIsVisible = this.inputType === \"text\";\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

    Constructor for PasswordInputLabelComponent.

    \n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "" } ], "line": 244, "rawdescription": "\n\nConstructor for PasswordInputLabelComponent.\n", "jsdoctags": [ { "name": { "pos": 6918, "end": 6935, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "changeDetectorRef" }, "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 6912, "end": 6917, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "
      \n
    • Reference to ChangeDetectorRef.
      • \n
    \n" } ] }, "extends": [ "BaseIconButton" ], "implements": [ "AfterViewInit" ], "accessors": { "isReadonly": { "name": "isReadonly", "getSignature": { "name": "isReadonly", "type": "", "returnType": "", "line": 234 } }, "fluidClass": { "name": "fluidClass", "getSignature": { "name": "fluidClass", "type": "", "returnType": "", "line": 238 } }, "fluidSkeletonClass": { "name": "fluidSkeletonClass", "getSignature": { "name": "fluidSkeletonClass", "type": "", "returnType": "", "line": 242 } } } }, { "name": "Placeholder", "id": "component-Placeholder-6b5b5c691f313d98015fb8d6e659700801ce1327b865b3cea313aa47c6c6f9c6886dbd154126c69836c32f3b04a93c75068c9d91ea2a26a75840b6934041788d", "file": "src/placeholder/placeholder.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-placeholder, ibm-placeholder", "styleUrls": [], "styles": [], "template": "
    ", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "id", "deprecated": false, "deprecationMessage": "", "line": 25, "type": "any", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "placeholderService", "deprecated": false, "deprecationMessage": "", "type": "PlaceholderService", "optional": false, "description": "", "line": 34, "modifierKind": [ 125 ] }, { "name": "viewContainerRef", "deprecated": false, "deprecationMessage": "", "type": "ViewContainerRef", "optional": false, "description": "

    Maintains a reference to the view DOM element of the Placeholder.

    \n", "line": 29, "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Placeholder`.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'placeholder', {read: ViewContainerRef, static: true}" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Using a modal, dialog (Tooltip, OverflowMenu), or any other component that draws out of the normal page flow\nin your application requires this component (cds-placeholder).\nIt would generally be placed near the end of your root app component template\n(app.component.ts or app.component.html) as:

    \nExample :
    <cds-placeholder></cds-placeholder>
    ", "rawdescription": "\n\nUsing a modal, dialog (Tooltip, OverflowMenu), or any other component that draws out of the normal page flow\nin your application *requires* this component (`cds-placeholder`).\nIt would generally be placed near the end of your root app component template\n(app.component.ts or app.component.html) as:\n\n```\n\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOnInit,\n\tViewContainerRef,\n\tViewChild,\n\tInput\n} from \"@angular/core\";\nimport { PlaceholderService } from \"./placeholder.service\";\n\n/**\n * Using a modal, dialog (Tooltip, OverflowMenu), or any other component that draws out of the normal page flow\n * in your application *requires* this component (`cds-placeholder`).\n * It would generally be placed near the end of your root app component template\n * (app.component.ts or app.component.html) as:\n *\n * ```\n * \n * ```\n */\n@Component({\n\tselector: \"cds-placeholder, ibm-placeholder\",\n\ttemplate: `
    `\n})\nexport class Placeholder implements OnInit {\n\t@Input() id: any;\n\t/**\n\t * Maintains a reference to the view DOM element of the `Placeholder`.\n\t */\n\t@ViewChild(\"placeholder\", { read: ViewContainerRef, static: true }) viewContainerRef: ViewContainerRef;\n\n\t/**\n\t * Creates an instance of `Placeholder`.\n\t */\n\tconstructor(public placeholderService: PlaceholderService) { }\n\n\t/**\n\t * Registers the components view with `PlaceholderService`\n\t */\n\tngOnInit() {\n\t\t// TODO use `id` to register with the placeholderService\n\t\tthis.placeholderService.registerViewContainerRef(this.viewContainerRef);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

    Creates an instance of Placeholder.

    \n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "placeholderService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "" } ], "line": 29, "rawdescription": "\n\nCreates an instance of `Placeholder`.\n", "jsdoctags": [ { "name": "placeholderService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit" ] }, { "name": "PopoverContent", "id": "component-PopoverContent-370ccf7e0693b627376bd78b0e1d493337a002f0f83eba7a1e5cdc4b1902c4d284d297a44dea189280beb1cc30e09a1b3618b52712b57e645db9510f19f6d1d4", "file": "src/popover/popover-content.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-popover-content, ibm-popover-content", "styleUrls": [], "styles": [], "template": "\n\t
    \n\t\t\n\t
    \n\t\n    \n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "autoAlign", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 28 }, { "name": "popoverClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 26, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--popover'" } ], "modifierKind": [ 170 ] }, { "name": "popoverContent", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 27, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'content'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--popover", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    See demo

    \n", "rawdescription": "\n\n[See demo](../../?path=/story/components-popover--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tViewChild,\n\tElementRef,\n\tAfterViewInit,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\n/**\n * [See demo](../../?path=/story/components-popover--basic)\n */\n@Component({\n\tselector: \"cds-popover-content, ibm-popover-content\",\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t\t\n\t\t    \n\t\t\n\t`\n})\nexport class PopoverContent implements AfterViewInit {\n\t@HostBinding(\"class.cds--popover\") popoverClass = true;\n\t@ViewChild(\"content\") popoverContent: ElementRef;\n\tautoAlign = false;\n\n\tconstructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n\tngAfterViewInit(): void {\n\t\tif (this.popoverContent) {\n\t\t\t// Check we are in a popover with autoAlign enabled\n\t\t\tthis.autoAlign = !!this.popoverContent.nativeElement.closest(\".cds--popover--auto-align\");\n\t\t\t// Run change detection manually to resolve ExpressionHasChanged\n\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "" } ], "line": 28, "jsdoctags": [ { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AfterViewInit" ] }, { "name": "ProgressBar", "id": "component-ProgressBar-2dfc447d647d98d2c3e079d04709566f19b0357bccbdfbb3f87a2e5865a2937ac2495cbee92f41f6d479181a5e6278dd45cc59da3f74228048772590cf7d3664", "file": "src/progress-bar/progress-bar.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-progress-bar, ibm-progress-bar", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t{{label}}\n\t\t\n\t\n\t\n\t\n\t\n\t\n\n\n\t\n\t\n\n\n\t{{helperText}}\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "helperText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCurrent progress textual representation\n", "description": "

    Current progress textual representation

    \n", "line": 132, "type": "string | TemplateRef", "decorators": [] }, { "name": "id", "defaultValue": "`progress-bar-${ProgressBar.progressBarCounter++}`", "deprecated": false, "deprecationMessage": "", "line": 123, "type": "string", "decorators": [] }, { "name": "label", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDescription of the progress bar\n", "description": "

    Description of the progress bar

    \n", "line": 128, "type": "string | TemplateRef", "decorators": [] }, { "name": "max", "defaultValue": "100", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nMaximum value\n", "description": "

    Maximum value

    \n", "line": 136, "type": "number", "decorators": [] }, { "name": "size", "defaultValue": "\"big\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSize of the progress bar, default is `big`\n", "description": "

    Size of the progress bar, default is big

    \n", "line": 148, "type": "\"small\" | \"big\"", "decorators": [] }, { "name": "status", "defaultValue": "\"active\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCurrent status of the progress bar, default is `active`\n", "description": "

    Current status of the progress bar, default is active

    \n", "line": 144, "type": "\"active\" | \"finished\" | \"error\"", "decorators": [] }, { "name": "type", "defaultValue": "\"default\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAlignment variant of the progress bar, default is `default`\n", "description": "

    Alignment variant of the progress bar, default is default

    \n", "line": 140, "type": "\"default\" | \"inline\" | \"indented\"", "decorators": [] }, { "name": "value", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCurrent value\n", "description": "

    Current value

    \n", "line": 70, "type": "number | undefined", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "defaultClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 150, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--progress-bar'" } ], "modifierKind": [ 170 ] }, { "name": "helperId", "defaultValue": "`progress-bar-helper-${ProgressBar.progressBarCounter}`", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 124 }, { "name": "progressBarCounter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 121, "modifierKind": [ 126 ] } ], "methodsClass": [ { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 153, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--progress-bar", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 150, "type": "boolean", "decorators": [] }, { "name": "class.cds--progress-bar--big", "deprecated": false, "deprecationMessage": "", "line": 95, "type": "boolean", "decorators": [] }, { "name": "class.cds--progress-bar--default", "deprecated": false, "deprecationMessage": "", "line": 102, "type": "boolean", "decorators": [] }, { "name": "class.cds--progress-bar--error", "deprecated": false, "deprecationMessage": "", "line": 115, "type": "boolean", "decorators": [] }, { "name": "class.cds--progress-bar--finished", "deprecated": false, "deprecationMessage": "", "line": 112, "type": "boolean", "decorators": [] }, { "name": "class.cds--progress-bar--indented", "deprecated": false, "deprecationMessage": "", "line": 105, "type": "boolean", "decorators": [] }, { "name": "class.cds--progress-bar--indeterminate", "deprecated": false, "deprecationMessage": "", "line": 118, "type": "boolean", "decorators": [] }, { "name": "class.cds--progress-bar--inline", "deprecated": false, "deprecationMessage": "", "line": 108, "type": "boolean", "decorators": [] }, { "name": "class.cds--progress-bar--small", "deprecated": false, "deprecationMessage": "", "line": 98, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Get started with importing the module:

    \nExample :
    import { ProgressBarModule } from 'carbon-components-angular';

    See demo

    \n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ProgressBarModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-progress-bar--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tTemplateRef\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ProgressBarModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-progress-bar--basic)\n */\n@Component({\n\tselector: \"cds-progress-bar, ibm-progress-bar\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t{{label}}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t{{helperText}}\n\t\t\t\n\t\t\n\t`\n})\nexport class ProgressBar {\n\t/**\n\t * Current value\n\t */\n\t@Input() set value(num: number | undefined) {\n\t\tthis._value = num;\n\t\t// Validate number\n\t\tif (num > this.max) {\n\t\t\tthis._value = this.max;\n\t\t}\n\t\tif (num < 0) {\n\t\t\tthis._value = 0;\n\t\t}\n\t\t// Set values based on current state\n\t\tif (this.isError) {\n\t\t\tthis._value = 0;\n\t\t} else if (this.isFinished) {\n\t\t\tthis._value = this.max;\n\t\t}\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\tget percentage() {\n\t\treturn `scaleX(${this.value / this.max})`;\n\t}\n\t// Size\n\t@HostBinding(\"class.cds--progress-bar--big\") get bigBar() {\n\t\treturn this.size === \"big\";\n\t}\n\t@HostBinding(\"class.cds--progress-bar--small\") get smallBar() {\n\t\treturn this.size === \"small\";\n\t}\n\t// Type\n\t@HostBinding(\"class.cds--progress-bar--default\") get defaultType() {\n\t\treturn this.type === \"default\";\n\t}\n\t@HostBinding(\"class.cds--progress-bar--indented\") get indentedType() {\n\t\treturn this.type === \"indented\";\n\t}\n\t@HostBinding(\"class.cds--progress-bar--inline\") get inlineType() {\n\t\treturn this.type === \"inline\";\n\t}\n\t// Status\n\t@HostBinding(\"class.cds--progress-bar--finished\") get isFinished() {\n\t\treturn this.status === \"finished\";\n\t}\n\t@HostBinding(\"class.cds--progress-bar--error\") get isError() {\n\t\treturn this.status === \"error\";\n\t}\n\t@HostBinding(\"class.cds--progress-bar--indeterminate\") get indeterminate() {\n\t\treturn this.value === undefined && !this.isFinished && !this.isError;\n\t}\n\tstatic progressBarCounter = 0;\n\n\t@Input() id = `progress-bar-${ProgressBar.progressBarCounter++}`;\n\thelperId = `progress-bar-helper-${ProgressBar.progressBarCounter}`;\n\t/**\n\t * Description of the progress bar\n\t */\n\t@Input() label: string | TemplateRef;\n\t/**\n\t * Current progress textual representation\n\t */\n\t@Input() helperText: string | TemplateRef;\n\t/**\n\t * Maximum value\n\t */\n\t@Input() max = 100;\n\t/**\n\t * Alignment variant of the progress bar, default is `default`\n\t */\n\t@Input() type: \"default\" | \"inline\" | \"indented\" = \"default\";\n\t/**\n\t * Current status of the progress bar, default is `active`\n\t */\n\t@Input() status: \"active\" | \"finished\" | \"error\" = \"active\";\n\t/**\n\t * Size of the progress bar, default is `big`\n\t */\n\t@Input() size: \"small\" | \"big\" = \"big\";\n\n\t@HostBinding(\"class.cds--progress-bar\") defaultClass = true;\n\tprivate _value = undefined;\n\n\tisTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "accessors": { "value": { "name": "value", "setSignature": { "name": "value", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "num", "type": "number | undefined", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 70, "rawdescription": "\n\nCurrent value\n", "description": "

    Current value

    \n", "jsdoctags": [ { "name": "num", "type": "number | undefined", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "value", "type": "", "returnType": "", "line": 87 } }, "percentage": { "name": "percentage", "getSignature": { "name": "percentage", "type": "", "returnType": "", "line": 91 } }, "bigBar": { "name": "bigBar", "getSignature": { "name": "bigBar", "type": "", "returnType": "", "line": 95 } }, "smallBar": { "name": "smallBar", "getSignature": { "name": "smallBar", "type": "", "returnType": "", "line": 98 } }, "defaultType": { "name": "defaultType", "getSignature": { "name": "defaultType", "type": "", "returnType": "", "line": 102 } }, "indentedType": { "name": "indentedType", "getSignature": { "name": "indentedType", "type": "", "returnType": "", "line": 105 } }, "inlineType": { "name": "inlineType", "getSignature": { "name": "inlineType", "type": "", "returnType": "", "line": 108 } }, "isFinished": { "name": "isFinished", "getSignature": { "name": "isFinished", "type": "", "returnType": "", "line": 112 } }, "isError": { "name": "isError", "getSignature": { "name": "isError", "type": "", "returnType": "", "line": 115 } }, "indeterminate": { "name": "indeterminate", "getSignature": { "name": "indeterminate", "type": "", "returnType": "", "line": 118 } } } }, { "name": "ProgressIndicator", "id": "component-ProgressIndicator-44188c869e43c1d9a135becb504bc44a785fca0023a6f24b962f6f49958a0b43c0f37bca4fb522cd52a3858ab9bf3f229d033dacc3ac3e586936051aa7419ba1", "file": "src/progress-indicator/progress-indicator.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-progress-indicator, ibm-progress-indicator", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t\n\t\t\t\n\t\t\t\t{{this.translations[getCurrentState(i)?.toUpperCase()]}}\n\t\t\t\n\t\t\t\n\t\t\t\t{{step.description}}\n\t\t\t\n\t\t\t
    \n\t\t\t\t

    {{step.label}}

    \n\t\t\t\t

    {{step.secondaryLabel}}

    \n\t\t\t
    \n\t\t\t\n\t\t\n\t\n\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "current", "deprecated": false, "deprecationMessage": "", "line": 73, "type": "number", "decorators": [] }, { "name": "orientation", "defaultValue": "\"horizontal\"", "deprecated": false, "deprecationMessage": "", "line": 93, "type": "\"horizontal\" | \"vertical\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 94, "type": "boolean", "decorators": [] }, { "name": "spacing", "defaultValue": "\"default\"", "deprecated": false, "deprecationMessage": "", "line": 95, "type": "\"default\" | \"equal\"", "decorators": [] }, { "name": "steps", "deprecated": false, "deprecationMessage": "", "line": 89, "type": "Array", "decorators": [] }, { "name": "translations", "defaultValue": "this.i18n.get().PROGRESS_INDICATOR", "deprecated": false, "deprecationMessage": "", "line": 92, "type": "any", "decorators": [] } ], "outputsClass": [ { "name": "stepSelected", "defaultValue": "new EventEmitter<{ step: Step, index: number }>()", "deprecated": false, "deprecationMessage": "", "line": 90, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "statusIcons", "defaultValue": "{\n\t\tcurrent: \"incomplete\",\n\t\tcomplete: \"checkmark--outline\",\n\t\tinvalid: \"warning\",\n\t\tincomplete: \"circle-dash\"\n\t}", "deprecated": false, "deprecationMessage": "", "type": "object", "optional": false, "description": "", "line": 98, "modifierKind": [ 148 ] } ], "methodsClass": [ { "name": "getCurrentState", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "\"current\" | \"invalid\" | \"complete\" | \"incomplete\"", "typeParameters": [], "line": 129, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nGets current state based on weight of the state\nWeight of state goes from error, incomplete, current, and complete\n\nThis function is used to determine which icon & translation string to display\n", "description": "

    Gets current state based on weight of the state\nWeight of state goes from error, incomplete, current, and complete

    \n

    This function is used to determine which icon & translation string to display

    \n", "jsdoctags": [ { "name": { "pos": 3581, "end": 3586, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3575, "end": 3580, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    number

    \n" }, { "tagName": { "pos": 3599, "end": 3606, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "returns" }, "comment": "

    string

    \n" } ] }, { "name": "onClick", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 114, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExecutes click function if `onClick` exists for step\n`Current` step functions will not be executed\n", "description": "

    Executes click function if onClick exists for step\nCurrent step functions will not be executed

    \n", "jsdoctags": [ { "name": { "pos": 3127, "end": 3132, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "index" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3121, "end": 3126, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    number

    \n" } ] }, { "name": "skeletonSteps", "args": [ { "name": "stepCount", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "{}", "typeParameters": [], "line": 80, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 126 ], "jsdoctags": [ { "name": "stepCount", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Get started with importing the module:

    \nExample :
    import { ProgressIndicatorModule } from 'carbon-components-angular';

    See demo

    \n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ProgressIndicatorModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-progress-indicator--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Step } from \"./progress-indicator-step.interface\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ProgressIndicatorModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-progress-indicator--basic)\n */\n@Component({\n\tselector: \"cds-progress-indicator, ibm-progress-indicator\",\n\ttemplate: `\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{this.translations[getCurrentState(i)?.toUpperCase()]}}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{step.description}}\n\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t

    {{step.label}}

    \n\t\t\t\t\t

    {{step.secondaryLabel}}

    \n\t\t\t\t
    \n\t\t\t\t\n\t\t\t\n\t\t\n\t\n\t`\n})\nexport class ProgressIndicator {\n\t@Input() get current() {\n\t\treturn this._current;\n\t}\n\tset current(current: number) {\n\t\tthis._current = current;\n\t\tthis.setProgressIndicatorStates();\n\t}\n\tstatic skeletonSteps(stepCount: number) {\n\t\tconst steps = [];\n\t\tfor (let i = 0; i < stepCount; i++) {\n\t\t\tsteps.push({ complete: false });\n\t\t}\n\n\t\treturn steps;\n\t}\n\n\t@Input() steps: Array;\n\t@Output() stepSelected = new EventEmitter<{ step: Step, index: number }>();\n\n\t@Input() translations = this.i18n.get().PROGRESS_INDICATOR;\n\t@Input() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n\t@Input() skeleton = false;\n\t@Input() spacing: \"default\" | \"equal\" = \"default\";\n\n\t// Get icon names based for each status\n\treadonly statusIcons = {\n\t\tcurrent: \"incomplete\",\n\t\tcomplete: \"checkmark--outline\",\n\t\tinvalid: \"warning\",\n\t\tincomplete: \"circle-dash\"\n\t};\n\n\tprivate _current: number;\n\n\tconstructor(protected i18n: I18n) { }\n\n\t/**\n\t * Executes click function if `onClick` exists for step\n\t * `Current` step functions will not be executed\n\t * @param index number\n\t */\n\tonClick(index: number) {\n\t\tif (index !== this.current && typeof this.steps[index].onClick === \"function\") {\n\t\t\tthis.steps[index].onClick();\n\t\t}\n\t\tthis.stepSelected.emit({ step: this.steps[index], index });\n\t}\n\n\t/**\n\t * Gets current state based on weight of the state\n\t * Weight of state goes from error, incomplete, current, and complete\n\t *\n\t * This function is used to determine which icon & translation string to display\n\t * @param index number\n\t * @returns string\n\t */\n\tgetCurrentState(index: number) {\n\t\tif (index === this.current) {\n\t\t\treturn \"current\";\n\t\t} else if (this.steps[index].invalid) {\n\t\t\treturn \"invalid\";\n\t\t} else if (this.steps[index].complete) {\n\t\t\treturn \"complete\";\n\t\t}\n\n\t\treturn \"incomplete\";\n\t}\n\n\tprivate setProgressIndicatorStates() {\n\t\tif (this.steps === undefined) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set all preceding steps to `complete` & following to `incomplete`\n\t\tthis.steps.forEach((step: Step, index) => {\n\t\t\tif (index < this.current) {\n\t\t\t\tstep.complete = true;\n\t\t\t} else {\n\t\t\t\tstep.complete = false;\n\t\t\t}\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 105, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "current": { "name": "current", "setSignature": { "name": "current", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "current", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 76, "jsdoctags": [ { "name": "current", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "current", "type": "", "returnType": "", "line": 73 } } } }, { "name": "Radio", "id": "component-Radio-c8843624caafee7784002695d7c9e979bc0495b0e346d046ad569302a7e7448065485546a2b71d719a295a1c29cc1bb163df73988f28ab7b47da0d3b35fb3de2", "file": "src/radio/radio.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: Radio, multi: true\n}" } ], "selector": "cds-radio, ibm-radio", "styleUrls": [], "styles": [], "template": "\n
    \n\n\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to set the `aria-label` attribute on the input label.\n", "description": "

    Used to set the aria-label attribute on the input label.

    \n", "line": 89, "type": "string", "decorators": [] }, { "name": "ariaLabelledby", "deprecated": false, "deprecationMessage": "", "line": 75, "type": "string", "decorators": [] }, { "name": "checked", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 67, "type": "boolean", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 71, "type": "boolean", "decorators": [] }, { "name": "id", "defaultValue": "`radio-${Radio.radioCount++}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe id for the `Radio`.\n", "description": "

    The id for the Radio.

    \n", "line": 106, "type": "string", "decorators": [] }, { "name": "labelPlacement", "defaultValue": "\"right\"", "deprecated": false, "deprecationMessage": "", "line": 73, "type": "\"right\" | \"left\"", "decorators": [] }, { "name": "name", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 69, "type": "string", "decorators": [] }, { "name": "required", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the HTML required attribute\n", "description": "

    Sets the HTML required attribute

    \n", "line": 94, "type": "boolean", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a loading table.\n", "description": "

    Set to true for a loading table.

    \n", "line": 102, "type": "boolean", "decorators": [] }, { "name": "value", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe value of the `Radio`.\n", "description": "

    The value of the Radio.

    \n", "line": 98, "type": "any", "decorators": [] } ], "outputsClass": [ { "name": "change", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nemits when the state of the radio changes\n", "description": "

    emits when the state of the radio changes

    \n", "line": 110, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "disabledFromGroup", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Reflects whether or not the input is disabled at RadioGroup level.

    \n", "line": 121, "rawdescription": "\n\nReflects whether or not the input is disabled at `RadioGroup` level.\n" }, { "name": "hostClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 112, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--radio-button-wrapper'" } ], "modifierKind": [ 170 ] }, { "name": "radioChangeHandler", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Handler provided by the RadioGroup to bubble events up

    \n", "line": 128, "rawdescription": "\n\nHandler provided by the `RadioGroup` to bubble events up\n" }, { "name": "radioCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

    Used to dynamically create unique ids for the Radio.

    \n", "line": 65, "rawdescription": "\n\nUsed to dynamically create unique ids for the `Radio`.\n", "modifierKind": [ 126 ] } ], "methodsClass": [ { "name": "onChange", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 134, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSynchronizes with the `RadioGroup` in the event of a changed `Radio`.\nEmits the changes of both the `RadioGroup` and `Radio`.\n", "description": "

    Synchronizes with the RadioGroup in the event of a changed Radio.\nEmits the changes of both the RadioGroup and Radio.

    \n", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onClick", "args": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 138, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "Event", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerRadioChangeHandler", "args": [ { "name": "fn", "type": "function", "deprecated": false, "deprecationMessage": "", "function": [ { "name": "event", "type": "RadioChange", "deprecated": false, "deprecationMessage": "" } ] } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 149, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nMethod called by `RadioGroup` with a callback function to bubble `RadioChange` events\n", "description": "

    Method called by RadioGroup with a callback function to bubble RadioChange events

    \n", "jsdoctags": [ { "name": { "pos": 3186, "end": 3188, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "fn" }, "type": "function", "deprecated": false, "deprecationMessage": "", "function": [ { "name": "event", "type": "RadioChange", "deprecated": false, "deprecationMessage": "" } ], "tagName": { "pos": 3180, "end": 3185, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    callback that expects a RadioChange as an argument

    \n" } ] }, { "name": "setDisabledFromGroup", "args": [ { "name": "disabled", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 153, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "disabled", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--radio-button-wrapper", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 112, "type": "boolean", "decorators": [] }, { "name": "class.cds--radio-button-wrapper--label-left", "deprecated": false, "deprecationMessage": "", "line": 114, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    class: Radio (extends Checkbox)

    \n

    selector: n-radio

    \n

    source: src/forms/radio.component.ts

    \nExample :
        <cds-radio [(ngModel)]="radioState">Radio</cds-radio>

    Also see: RadioGroup

    \n", "rawdescription": "\n\nclass: Radio (extends Checkbox)\n\nselector: `n-radio`\n\nsource: `src/forms/radio.component.ts`\n\n```html\n\tRadio\n```\n\nAlso see: [`RadioGroup`](#cds-radio-group)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { RadioChange } from \"./radio-change.class\";\n\n/**\n * class: Radio (extends Checkbox)\n *\n * selector: `n-radio`\n *\n * source: `src/forms/radio.component.ts`\n *\n * ```html\n *\tRadio\n * ```\n *\n * Also see: [`RadioGroup`](#cds-radio-group)\n */\n@Component({\n\tselector: \"cds-radio, ibm-radio\",\n\ttemplate: `\n\t\t\n\t\t
    \n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Radio,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Radio {\n\t/**\n\t * Used to dynamically create unique ids for the `Radio`.\n\t */\n\tstatic radioCount = 0;\n\n\t@Input() checked = false;\n\n\t@Input() name = \"\";\n\n\t@Input() disabled = false;\n\n\t@Input() labelPlacement: \"right\" | \"left\" = \"right\";\n\n\t@Input() set ariaLabelledby(value: string) {\n\t\tthis._labelledby = value;\n\t}\n\n\tget ariaLabelledby() {\n\t\tif (this._labelledby) {\n\t\t\treturn this._labelledby;\n\t\t}\n\t\treturn `label-${this.id}`;\n\t}\n\n\t/**\n\t * Used to set the `aria-label` attribute on the input label.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Sets the HTML required attribute\n\t */\n\t@Input() required = false;\n\t/**\n\t * The value of the `Radio`.\n\t */\n\t@Input() value;\n\t/**\n\t * Set to `true` for a loading table.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * The id for the `Radio`.\n\t */\n\t@Input() id = `radio-${Radio.radioCount++}`;\n\t/**\n\t * emits when the state of the radio changes\n\t */\n\t@Output() change = new EventEmitter();\n\n\t@HostBinding(\"class.cds--radio-button-wrapper\") hostClass = true;\n\n\t@HostBinding(\"class.cds--radio-button-wrapper--label-left\") get labelLeft() {\n\t\treturn this.labelPlacement === \"left\";\n\t}\n\n\t/**\n\t * Reflects whether or not the input is disabled at `RadioGroup` level.\n\t */\n\tdisabledFromGroup = false;\n\n\tprotected _labelledby = \"\";\n\n\t/**\n\t * Handler provided by the `RadioGroup` to bubble events up\n\t */\n\tradioChangeHandler = (event: RadioChange) => {};\n\n\t/**\n\t * Synchronizes with the `RadioGroup` in the event of a changed `Radio`.\n\t * Emits the changes of both the `RadioGroup` and `Radio`.\n\t */\n\tonChange(event: Event) {\n\t\tevent.stopPropagation();\n\t}\n\n\tonClick(event: Event) {\n\t\tthis.checked = (event.target as HTMLInputElement).checked;\n\t\tconst radioEvent = new RadioChange(this, this.value);\n\t\tthis.change.emit(radioEvent);\n\t\tthis.radioChangeHandler(radioEvent);\n\t}\n\n\t/**\n\t * Method called by `RadioGroup` with a callback function to bubble `RadioChange` events\n\t * @param fn callback that expects a `RadioChange` as an argument\n\t */\n\tregisterRadioChangeHandler(fn: (event: RadioChange) => void) {\n\t\tthis.radioChangeHandler = fn;\n\t}\n\n\tsetDisabledFromGroup(disabled: boolean) {\n\t\tthis.disabledFromGroup = disabled;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "accessors": { "ariaLabelledby": { "name": "ariaLabelledby", "setSignature": { "name": "ariaLabelledby", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 75, "jsdoctags": [ { "name": "value", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "ariaLabelledby", "type": "", "returnType": "", "line": 79 } }, "labelLeft": { "name": "labelLeft", "getSignature": { "name": "labelLeft", "type": "", "returnType": "", "line": 114 } } } }, { "name": "RadioGroup", "id": "component-RadioGroup-23efdc2256357de88642f292dd081037c795e874f8f446aeb72f3c76b8bbddb99718f51093d2b32f0efedee43c8801428d11c2b283f2d7fe2b1537ab5aeb4e26", "file": "src/radio/radio-group.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: RadioGroup, multi: true\n}" } ], "selector": "cds-radio-group, ibm-radio-group", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t\n\t\t{{legend}}\n\t\n\t\n\n
    \n\t\n\t\t\n\t\t\n\t\t
    \n\t\t\t{{ invalidText }}\n\t\t\t\n\t\t
    \n\t    \n\t\n\t\t\n\t\t\n\t\t
    \n\t\t\t{{warnText}}\n\t\t\t\n\t\t
    \n\t    \n
    \n\n\t{{helperText}}\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to set the `aria-label` attribute on the radio group element.\n", "description": "

    Used to set the aria-label attribute on the radio group element.

    \n", "line": 211, "type": "string", "decorators": [] }, { "name": "ariaLabelledby", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to set the `aria-labelledby` attribute on the radio group element.\n", "description": "

    Used to set the aria-labelledby attribute on the radio group element.

    \n", "line": 216, "type": "string", "decorators": [] }, { "name": "disabled", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to true to disable the whole radio group\n", "description": "

    Set to true to disable the whole radio group

    \n", "line": 171, "type": "boolean", "decorators": [] }, { "name": "helperText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the optional helper text.\n", "description": "

    Sets the optional helper text.

    \n", "line": 221, "type": "string | TemplateRef", "decorators": [] }, { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show the invalid state.\n", "description": "

    Set to true to show the invalid state.

    \n", "line": 226, "type": "boolean", "decorators": [] }, { "name": "invalidText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue displayed if combobox is in an invalid state.\n", "description": "

    Value displayed if combobox is in an invalid state.

    \n", "line": 231, "type": "string | TemplateRef", "decorators": [] }, { "name": "labelPlacement", "defaultValue": "\"right\"", "deprecated": false, "deprecationMessage": "", "line": 204, "type": "\"right\" | \"left\"", "decorators": [] }, { "name": "legend", "deprecated": false, "deprecationMessage": "", "line": 206, "type": "string | TemplateRef", "decorators": [] }, { "name": "name", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReplaces the name associated with the `RadioGroup` with the provided parameter.\n", "description": "

    Replaces the name associated with the RadioGroup with the provided parameter.

    \n", "line": 156, "type": "string", "decorators": [] }, { "name": "orientation", "defaultValue": "\"horizontal\"", "deprecated": false, "deprecationMessage": "", "line": 202, "type": "\"horizontal\" | \"vertical\"", "decorators": [] }, { "name": "selected", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the passed in `Radio` item as the selected input within the `RadioGroup`.\n", "description": "

    Sets the passed in Radio item as the selected input within the RadioGroup.

    \n", "line": 110, "type": "Radio | null", "decorators": [] }, { "name": "skeleton", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the skeleton value in the `RadioGroup` if there is one.\n", "description": "

    Returns the skeleton value in the RadioGroup if there is one.

    \n", "line": 186, "type": "any", "decorators": [] }, { "name": "value", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n", "description": "

    Sets the value/state of the selected Radio within the RadioGroup to the passed in value.

    \n", "line": 136, "type": "any", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show a warning (contents set by warnText)\n", "description": "

    Set to true to show a warning (contents set by warnText)

    \n", "line": 236, "type": "boolean", "decorators": [] }, { "name": "warnText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the warning text\n", "description": "

    Sets the warning text

    \n", "line": 241, "type": "string | TemplateRef", "decorators": [] } ], "outputsClass": [ { "name": "change", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits event notifying other classes of a change using a `RadioChange` class.\n", "description": "

    Emits event notifying other classes of a change using a RadioChange class.

    \n", "line": 246, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "onTouched", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": false, "description": "

    Needed to properly implement ControlValueAccessor.

    \n", "line": 399, "rawdescription": "\n\nNeeded to properly implement ControlValueAccessor.\n" }, { "name": "propagateChange", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Method set in registerOnChange to propagate changes back to the form.

    \n", "line": 404, "rawdescription": "\n\nMethod set in registerOnChange to propagate changes back to the form.\n" }, { "name": "radioButtonGroupClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Binds 'cds--form-item' value to the class for RadioGroup.

    \n", "line": 257, "rawdescription": "\n\nBinds 'cds--form-item' value to the class for `RadioGroup`.\n", "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--form-item'" } ], "modifierKind": [ 170 ] }, { "name": "radioGroupCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

    Used for creating the RadioGroup 'name' property dynamically.

    \n", "line": 200, "rawdescription": "\n\nUsed for creating the `RadioGroup` 'name' property dynamically.\n", "modifierKind": [ 126 ] }, { "name": "radios", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "

    The Radio input items in the RadioGroup.

    \n", "line": 252, "rawdescription": "\n\nThe `Radio` input items in the `RadioGroup`.\n", "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "undefined" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "checkSelectedRadio", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 287, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUpdates the selected `Radio` to be checked (selected).\n", "description": "

    Updates the selected Radio to be checked (selected).

    \n" }, { "name": "emitChangeEvent", "args": [ { "name": "event", "type": "RadioChange", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 328, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates a class of `RadioChange` to emit the change in the `RadioGroup`.\n", "description": "

    Creates a class of RadioChange to emit the change in the RadioGroup.

    \n", "jsdoctags": [ { "name": "event", "type": "RadioChange", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "focusOut", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 392, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusout'" } ], "modifierKind": [ 170 ] }, { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 406, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 379, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to set method to propagate changes back to the form.\n", "description": "

    Used to set method to propagate changes back to the form.

    \n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 387, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n", "description": "

    Registers a callback to be triggered when the control has been touched.

    \n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 9404, "end": 9406, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "fn" }, "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 9398, "end": 9403, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    Callback to be triggered when the checkbox is touched.

    \n" } ] }, { "name": "setDisabledState", "args": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 321, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the `RadioGroup`.\n\nex: `this.formGroup.get(\"myRadioGroup\").disable();`\n\n", "description": "

    ControlValueAccessor method to programmatically disable the RadioGroup.

    \n

    ex: this.formGroup.get("myRadioGroup").disable();

    \n", "jsdoctags": [ { "name": { "pos": 8035, "end": 8045, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "isDisabled" }, "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 8029, "end": 8034, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    true to disable the inputs

    \n" } ] }, { "name": "updateRadios", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 337, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSynchronizes radio properties.\n", "description": "

    Synchronizes radio properties.

    \n" }, { "name": "updateSelectedRadioFromValue", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 296, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUse the value of the `RadioGroup` to update the selected radio to the right state (selected state).\n", "description": "

    Use the value of the RadioGroup to update the selected radio to the right state (selected state).

    \n" }, { "name": "writeValue", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 354, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUpdates the value of the `RadioGroup` using the provided parameter.\n", "description": "

    Updates the value of the RadioGroup using the provided parameter.

    \n", "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--form-item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nBinds 'cds--form-item' value to the class for `RadioGroup`.\n", "description": "

    Binds 'cds--form-item' value to the class for RadioGroup.

    \n", "line": 257, "type": "boolean", "decorators": [] } ], "hostListeners": [ { "name": "focusout", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 392 } ], "standalone": false, "imports": [], "description": "

    Get started with importing the module:

    \nExample :
    import { RadioModule } from 'carbon-components-angular';

    Ex:

    \nExample :
    <cds-radio-group [(ngModel)]="radio">\n    <cds-radio *ngFor="let one of manyRadios" [value]="one">\n        Radio {{one}}\n    </cds-radio>\n</cds-radio-group>\n\nRadio selected: {{radio}}
    Example :
        const manyRadios = ["one", "two", "three", "four", "five", "six"];

    See demo

    \n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { RadioModule } from 'carbon-components-angular';\n```\n\nEx:\n\n```html\n\n\t\n\t\tRadio {{one}}\n\t\n\n\nRadio selected: {{radio}}\n```\n\n```ts\n\tconst manyRadios = [\"one\", \"two\", \"three\", \"four\", \"five\", \"six\"];\n```\n\n[See demo](../../?path=/story/components-radio--basic)\n", "type": "component", "sourceCode": "import {\n\tAfterContentInit,\n\tContentChildren,\n\tComponent,\n\tEventEmitter,\n\tforwardRef,\n\tInput,\n\tOutput,\n\tQueryList,\n\tHostBinding,\n\tAfterViewInit,\n\tHostListener,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { Radio } from \"./radio.component\";\nimport { RadioChange } from \"./radio-change.class\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { RadioModule } from 'carbon-components-angular';\n * ```\n *\n * Ex:\n *\n * ```html\n * \n * \t\n *\t\tRadio {{one}}\n * \t\n * \n *\n * Radio selected: {{radio}}\n * ```\n *\n * ```ts\n *\tconst manyRadios = [\"one\", \"two\", \"three\", \"four\", \"five\", \"six\"];\n * ```\n *\n * [See demo](../../?path=/story/components-radio--basic)\n */\n@Component({\n\tselector: \"cds-radio-group, ibm-radio-group\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t{{legend}}\n\t\t\t\n\t\t\t\n\t\t\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t{{ invalidText }}\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t{{warnText}}\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t    \n\t\t
    \n\t\t\n\t\t\t{{helperText}}\n\t\t\t\n\t\t\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: RadioGroup,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class RadioGroup implements AfterContentInit, AfterViewInit, ControlValueAccessor {\n\n\t/**\n\t * Sets the passed in `Radio` item as the selected input within the `RadioGroup`.\n\t */\n\t@Input()\n\tset selected(selected: Radio | null) {\n\t\tconst alreadySelected = (this._selected && this._selected.value) === (selected && selected.value);\n\t\tif (alreadySelected) {\n\t\t\t// no need to redo\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._selected) {\n\t\t\tthis._selected.checked = false;\n\t\t}\n\t\tthis._selected = selected;\n\t\tthis.value = selected ? selected.value : null;\n\t\tthis.checkSelectedRadio();\n\t}\n\n\t/**\n\t * Returns the `Radio` that is selected within the `RadioGroup`.\n\t */\n\tget selected() {\n\t\treturn this._selected;\n\t}\n\n\t/**\n\t * Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n\t */\n\t@Input()\n\tset value(newValue: any) {\n\t\tif (this._value !== newValue) {\n\t\t\tthis._value = newValue;\n\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t}\n\t}\n\n\t/**\n\t * Returns the value/state of the selected `Radio` within the `RadioGroup`.\n\t */\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Replaces the name associated with the `RadioGroup` with the provided parameter.\n\t */\n\t@Input()\n\tset name(name: string) {\n\t\tthis._name = name;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the associated name of the `RadioGroup`.\n\t */\n\tget name() {\n\t\treturn this._name;\n\t}\n\n\t/**\n\t * Set to true to disable the whole radio group\n\t */\n\t@Input()\n\tset disabled(disabled: boolean) {\n\t\tthis._disabled = disabled;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the disabled value for the `RadioGroup`.\n\t */\n\tget disabled(): boolean {\n\t\treturn this._disabled;\n\t}\n\n\t/**\n\t * Returns the skeleton value in the `RadioGroup` if there is one.\n\t */\n\t@Input()\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t/**\n\t * Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.\n\t */\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\t/**\n\t * Used for creating the `RadioGroup` 'name' property dynamically.\n\t */\n\tstatic radioGroupCount = 0;\n\n\t@Input() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n\n\t@Input() labelPlacement: \"right\" | \"left\" = \"right\";\n\n\t@Input() legend: string | TemplateRef;\n\n\t/**\n\t * Used to set the `aria-label` attribute on the radio group element.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Used to set the `aria-labelledby` attribute on the radio group element.\n\t */\n\t@Input() ariaLabelledby: string;\n\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef;\n\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef;\n\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef;\n\n\t/**\n\t * Emits event notifying other classes of a change using a `RadioChange` class.\n\t */\n\t@Output() change: EventEmitter = new EventEmitter();\n\n\t/**\n\t * The `Radio` input items in the `RadioGroup`.\n\t */\n\t// tslint:disable-next-line:no-forward-ref\n\t@ContentChildren(forwardRef(() => Radio)) radios: QueryList;\n\n\t/**\n\t * Binds 'cds--form-item' value to the class for `RadioGroup`.\n\t */\n\t@HostBinding(\"class.cds--form-item\") radioButtonGroupClass = true;\n\n\t/**\n\t * To track whether the `RadioGroup` has been initialized.\n\t */\n\tprotected isInitialized = false;\n\t/**\n\t * Reflects whether or not the input is disabled and cannot be selected.\n\t */\n\tprotected _disabled = false;\n\t/**\n\t * Reflects whether or not the dropdown is loading.\n\t */\n\tprotected _skeleton = false;\n\t/**\n\t * The value of the selected option within the `RadioGroup`.\n\t */\n\tprotected _value: any = null;\n\t/**\n\t * The `Radio` within the `RadioGroup` that is selected.\n\t */\n\tprotected _selected: Radio = null;\n\t/**\n\t * The name attribute associated with the `RadioGroup`.\n\t */\n\tprotected _name = `radio-group-${RadioGroup.radioGroupCount++}`;\n\n\t/**\n\t * Updates the selected `Radio` to be checked (selected).\n\t */\n\tcheckSelectedRadio() {\n\t\tif (this.selected && !this._selected.checked) {\n\t\t\tthis.selected.checked = true;\n\t\t}\n\t}\n\n\t/**\n\t * Use the value of the `RadioGroup` to update the selected radio to the right state (selected state).\n\t */\n\tupdateSelectedRadioFromValue() {\n\t\tlet alreadySelected = this._selected != null && this._selected.value === this._value;\n\t\tif (this.radios && !alreadySelected) {\n\t\t\tif (this.selected && this.value) {\n\t\t\t\tthis.selected.checked = false;\n\t\t\t}\n\t\t\tthis._selected = null;\n\t\t\tthis.radios.forEach(radio => {\n\t\t\t\tif (radio.checked || radio.value === this._value) {\n\t\t\t\t\tthis._selected = radio;\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (this.selected && !this.value) {\n\t\t\t\tthis._value = this.selected.value;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the `RadioGroup`.\n\t *\n\t * ex: `this.formGroup.get(\"myRadioGroup\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the inputs\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Creates a class of `RadioChange` to emit the change in the `RadioGroup`.\n\t */\n\temitChangeEvent(event: RadioChange) {\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(event.value);\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Synchronizes radio properties.\n\t */\n\tupdateRadios() {\n\t\tif (this.radios) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.radios.forEach(radio => {\n\t\t\t\t\tradio.name = this.name;\n\t\t\t\t\tradio.setDisabledFromGroup(this.disabled);\n\t\t\t\t\tif (this.labelPlacement === \"left\") {\n\t\t\t\t\t\tradio.labelPlacement = \"left\";\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Updates the value of the `RadioGroup` using the provided parameter.\n\t */\n\twriteValue(value: any) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t});\n\t}\n\n\tngAfterContentInit() {\n\t\tthis.radios.changes.subscribe(() => {\n\t\t\tthis.updateRadios();\n\t\t\tthis.updateRadioChangeHandler();\n\t\t});\n\n\t\tthis.updateChildren();\n\t\tthis.updateRadioChangeHandler();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.updateRadios();\n\t}\n\n\t/**\n\t * Used to set method to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the checkbox is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Needed to properly implement ControlValueAccessor.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Method set in registerOnChange to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.radios) {\n\t\t\tthis.radios.forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n\n\tprotected updateRadioChangeHandler() {\n\t\tthis.radios.forEach(radio => {\n\t\t\tradio.registerRadioChangeHandler((event: RadioChange) => {\n\t\t\t\tif ((this.selected && this.selected.value) === event.value) {\n\t\t\t\t\t// no need to redo\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// deselect previous radio\n\t\t\t\tif (this.selected) {\n\t\t\t\t\tthis.selected.checked = false;\n\t\t\t\t}\n\t\t\t\t// update selected and value from the event\n\t\t\t\tthis._selected = event.source;\n\t\t\t\tthis._value = event.value;\n\t\t\t\t// bubble the event\n\t\t\t\tthis.emitChangeEvent(event);\n\t\t\t});\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "AfterContentInit", "AfterViewInit", "ControlValueAccessor" ], "accessors": { "selected": { "name": "selected", "setSignature": { "name": "selected", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "selected", "type": "Radio | null", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 110, "rawdescription": "\n\nSets the passed in `Radio` item as the selected input within the `RadioGroup`.\n", "description": "

    Sets the passed in Radio item as the selected input within the RadioGroup.

    \n", "jsdoctags": [ { "name": "selected", "type": "Radio | null", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "selected", "type": "", "returnType": "", "line": 128, "rawdescription": "\n\nReturns the `Radio` that is selected within the `RadioGroup`.\n", "description": "

    Returns the Radio that is selected within the RadioGroup.

    \n" } }, "value": { "name": "value", "setSignature": { "name": "value", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "newValue", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 136, "rawdescription": "\n\nSets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n", "description": "

    Sets the value/state of the selected Radio within the RadioGroup to the passed in value.

    \n", "jsdoctags": [ { "name": "newValue", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "value", "type": "", "returnType": "", "line": 148, "rawdescription": "\n\nReturns the value/state of the selected `Radio` within the `RadioGroup`.\n", "description": "

    Returns the value/state of the selected Radio within the RadioGroup.

    \n" } }, "name": { "name": "name", "setSignature": { "name": "name", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 156, "rawdescription": "\n\nReplaces the name associated with the `RadioGroup` with the provided parameter.\n", "description": "

    Replaces the name associated with the RadioGroup with the provided parameter.

    \n", "jsdoctags": [ { "name": "name", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "name", "type": "", "returnType": "", "line": 163, "rawdescription": "\n\nReturns the associated name of the `RadioGroup`.\n", "description": "

    Returns the associated name of the RadioGroup.

    \n" } }, "disabled": { "name": "disabled", "setSignature": { "name": "disabled", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "disabled", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 171, "rawdescription": "\n\nSet to true to disable the whole radio group\n", "description": "

    Set to true to disable the whole radio group

    \n", "jsdoctags": [ { "name": "disabled", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "disabled", "type": "boolean", "returnType": "boolean", "line": 178, "rawdescription": "\n\nReturns the disabled value for the `RadioGroup`.\n", "description": "

    Returns the disabled value for the RadioGroup.

    \n" } }, "skeleton": { "name": "skeleton", "setSignature": { "name": "skeleton", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 193, "rawdescription": "\n\nSets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.\n", "description": "

    Sets the skeleton value for all Radio to the skeleton value of RadioGroup.

    \n", "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "skeleton", "type": "any", "returnType": "any", "line": 186, "rawdescription": "\n\nReturns the skeleton value in the `RadioGroup` if there is one.\n", "description": "

    Returns the skeleton value in the RadioGroup if there is one.

    \n" } } } }, { "name": "ReactiveFormsCombobox", "id": "component-ReactiveFormsCombobox-4707cb203b232e01f8888d577882e2cc434d72e1d44ed65178140c63d4fa286e3f244f8d233a15c2270953dc8cbc1aac5e15973a43e3a1b6a0ff7a6486307b8c", "file": "src/combobox/stories/app-reactive-combobox.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-reactive-combobox", "styleUrls": [], "styles": [], "template": "
    \n\t\n\t\t\n\t\n\tselected: {{ sampleForm.get(\"combobox\").value | json }}\n\t\n\t\t\n\t\n\tselected: {{ sampleForm.get(\"multibox\").value | json }}\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "disabled", "deprecated": false, "deprecationMessage": "", "line": 69, "type": "boolean", "decorators": [] }, { "name": "helperText", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 58, "type": "string", "decorators": [] }, { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 53, "type": "boolean", "decorators": [] }, { "name": "invalidText", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 54, "type": "string", "decorators": [] }, { "name": "items", "deprecated": false, "deprecationMessage": "", "line": 61, "type": "Array", "decorators": [] }, { "name": "label", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 57, "type": "string", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 59, "type": "string", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": false, "deprecationMessage": "", "line": 60, "type": "string", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 55, "type": "boolean", "decorators": [] }, { "name": "warnText", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 56, "type": "string", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "_items", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "any[]", "optional": false, "description": "", "line": 79 }, { "name": "sampleForm", "deprecated": false, "deprecationMessage": "", "type": "FormGroup", "optional": false, "description": "", "line": 52, "modifierKind": [ 125 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tFormGroup,\n\tFormBuilder,\n\tFormControl\n} from \"@angular/forms\";\nimport {\n\tComponent,\n\tOnInit,\n\tInput\n} from \"@angular/core\";\nimport isEqual from \"lodash-es/isEqual\";\n\n@Component({\n\tselector: \"app-reactive-combobox\",\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\tselected: {{ sampleForm.get(\"combobox\").value | json }}\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\tselected: {{ sampleForm.get(\"multibox\").value | json }}\n\t\t\n\t`\n})\nexport class ReactiveFormsCombobox implements OnInit {\n\tpublic sampleForm: FormGroup;\n\t@Input() invalid = false;\n\t@Input() invalidText = \"\";\n\t@Input() warn = false;\n\t@Input() warnText = \"\";\n\t@Input() label = \"\";\n\t@Input() helperText = \"\";\n\t@Input() size = \"md\";\n\t@Input() theme = \"dark\";\n\t@Input() set items(newItems: Array) {\n\t\tif (!newItems.length) {\n\t\t\tnewItems = [];\n\t\t}\n\t\tif (!isEqual(this._items, newItems)) {\n\t\t\tthis._items = newItems;\n\t\t}\n\t}\n\t@Input() set disabled(isDisabled: boolean) {\n\t\tif (this.sampleForm) {\n\t\t\tif (isDisabled) {\n\t\t\t\tthis.sampleForm.disable();\n\t\t\t} else {\n\t\t\t\tthis.sampleForm.enable();\n\t\t\t}\n\t\t}\n\t}\n\n\t_items: any[] = [];\n\n\tconstructor(private fb: FormBuilder) {}\n\n\tngOnInit() {\n\t\tthis.sampleForm = this.fb.group({\n\t\t\tcombobox: new FormControl,\n\t\t\tmultibox: new FormControl\n\t\t});\n\n\t\tthis.sampleForm.get(\"combobox\")?.setValue(\"four\");\n\t\tthis.sampleForm.get(\"multibox\")?.setValue([\"four\", \"two\"]);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "fb", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "" } ], "line": 79, "jsdoctags": [ { "name": "fb", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit" ], "accessors": { "items": { "name": "items", "setSignature": { "name": "items", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "newItems", "type": "Array", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 61, "jsdoctags": [ { "name": "newItems", "type": "Array", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "disabled": { "name": "disabled", "setSignature": { "name": "disabled", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 69, "jsdoctags": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } } } }, { "name": "ReactiveFormsSelect", "id": "component-ReactiveFormsSelect-e3f46669d652d7225918cc69aa14e6c07ef622879fe6448156fb5ca737dd779e7c584f465f3df2a78c2f276b171e6d9d810720bdec44cfce290bdebb8b2b14a1", "file": "src/select/stories/app-reactive-form.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-reactive-form", "styleUrls": [], "styles": [], "template": "
    \n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n
    \n
    \n\tselectedValue: {{ formGroup.get(\"selecterino\").value }}\n\t
    \n\t\t\n\t\t\n\t
    \n
    \n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "formGroup", "deprecated": false, "deprecationMessage": "", "type": "FormGroup", "optional": false, "description": "", "line": 29, "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "clearSelection", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 33, "deprecated": false, "deprecationMessage": "" }, { "name": "selectRandom", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 37, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, OnInit } from \"@angular/core\";\nimport {\n\tFormGroup,\n\tFormBuilder,\n\tFormControl\n} from \"@angular/forms\";\n\n@Component({\n\tselector: \"app-reactive-form\",\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\tselectedValue: {{ formGroup.get(\"selecterino\").value }}\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t`\n})\nexport class ReactiveFormsSelect implements OnInit {\n\tpublic formGroup: FormGroup;\n\n\tconstructor(protected formBuilder: FormBuilder) { }\n\n\tclearSelection() {\n\t\tthis.formGroup.get(\"selecterino\")?.setValue(\"default\");\n\t}\n\n\tselectRandom() {\n\t\tthis.formGroup.get(\"selecterino\")?.setValue([\n\t\t\t\"default\",\n\t\t\t\"option1\",\n\t\t\t\"option2\",\n\t\t\t\"option3\"\n\t\t][Math.floor(Math.random() * 4)]);\n\t}\n\n\tngOnInit() {\n\t\tthis.formGroup = this.formBuilder.group({\n\t\t\tselecterino: new FormControl()\n\t\t});\n\n\t\tthis.formGroup.get(\"selecterino\")?.setValue(\"option2\");\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "formBuilder", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "" } ], "line": 29, "jsdoctags": [ { "name": "formBuilder", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit" ] }, { "name": "ReactiveFormsStory", "id": "component-ReactiveFormsStory-336d1cbac6cf334ef3fd1988ca3567b9ef9dc53de947498033ad92f3845fe9541b88b952e4d67e54fde5c57f2231ba78e6c3edd1999bf39586cfaf7ee4a023ed", "file": "src/checkbox/stories/reactive-form.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-reactive-forms", "styleUrls": [], "styles": [], "template": "
    \n\t\n\t\tDisabled checkbox in a reactive form\n\t\n\t\n\t\tCheckbox in a reactive form\n\t\n
    \n
    \n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "formGroup", "deprecated": false, "deprecationMessage": "", "type": "FormGroup", "optional": false, "description": "", "line": 23, "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "toggleDisable", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 34, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, OnInit } from \"@angular/core\";\nimport {\n\tFormBuilder,\n\tFormGroup\n} from \"@angular/forms\";\n\n@Component({\n\tselector: \"app-reactive-forms\",\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\tDisabled checkbox in a reactive form\n\t\t\t\n\t\t\t\n\t\t\t\tCheckbox in a reactive form\n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\n\t`\n})\nexport class ReactiveFormsStory implements OnInit {\n\tpublic formGroup: FormGroup;\n\n\tconstructor(protected formBuilder: FormBuilder) { }\n\n\tngOnInit() {\n\t\tthis.formGroup = this.formBuilder.group({\n\t\t\tdisabledCheckbox: this.formBuilder.control({value: true, disabled: true}),\n\t\t\tcheckbox: this.formBuilder.control(false)\n\t\t});\n\t}\n\n\ttoggleDisable() {\n\t\tconst checkbox = this.formGroup.get(\"checkbox\");\n\t\tif (checkbox != null) {\n\t\t\tcheckbox.disabled ? checkbox.enable() : checkbox.disable();\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "formBuilder", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "" } ], "line": 23, "jsdoctags": [ { "name": "formBuilder", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit" ] }, { "name": "ReactiveFormsStory", "id": "component-ReactiveFormsStory-516ea8fd5fbee2d4130b458ede7f527fd525433ff8d5d7ca7ab154882a8f9abbe09c126c6e5cbe548f3f964b822bae8240904b22982fabe2f98ffc01eeb1fd04-1", "file": "src/dropdown/stories/app-reactive-forms.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-reactive-forms", "styleUrls": [], "styles": [], "template": "
    \n\t
    \n\t\t\n\t\t\t\n\t\t\n\t
    \n
    \n
    \n{{ formGroup.get(\"roles\").value | json }}\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "disabled", "deprecated": false, "deprecationMessage": "", "line": 50, "type": "boolean", "decorators": [] }, { "name": "helperText", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 46, "type": "string", "decorators": [] }, { "name": "hideLabel", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 45, "type": "boolean", "decorators": [] }, { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 47, "type": "boolean", "decorators": [] }, { "name": "invalidText", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 48, "type": "string", "decorators": [] }, { "name": "items", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "line": 43, "type": "{}", "decorators": [] }, { "name": "label", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 44, "type": "string", "decorators": [] }, { "name": "selectionFeedback", "defaultValue": "\"top-after-reopen\"", "deprecated": false, "deprecationMessage": "", "line": 49, "type": "string", "decorators": [] } ], "outputsClass": [ { "name": "onClose", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 59, "type": "EventEmitter" }, { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 58, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "formGroup", "deprecated": false, "deprecationMessage": "", "type": "FormGroup", "optional": false, "description": "", "line": 41, "modifierKind": [ 125 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOnInit,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport {\n\tFormBuilder,\n\tFormGroup,\n\tFormControl\n} from \"@angular/forms\";\n\n@Component({\n\tselector: \"app-reactive-forms\",\n\ttemplate: `\n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t{{ formGroup.get(\"roles\").value | json }}\n\t`\n})\nexport class ReactiveFormsStory implements OnInit {\n\tpublic formGroup: FormGroup;\n\n\t@Input() items = [];\n\t@Input() label = \"\";\n\t@Input() hideLabel = false;\n\t@Input() helperText = \"\";\n\t@Input() invalid = false;\n\t@Input() invalidText = \"\";\n\t@Input() selectionFeedback = \"top-after-reopen\";\n\t@Input() set disabled(value: boolean) {\n\t\tif (!this.formGroup) { return; }\n\t\tif (value) {\n\t\t\tthis.formGroup.get(\"roles\")?.disable();\n\t\t} else {\n\t\t\tthis.formGroup.get(\"roles\")?.enable();\n\t\t}\n\t}\n\t@Output() selected = new EventEmitter();\n\t@Output() onClose = new EventEmitter();\n\n\tconstructor(protected formBuilder: FormBuilder) { }\n\n\tngOnInit() {\n\t\tthis.formGroup = this.formBuilder.group({\n\t\t\troles: new FormControl()\n\t\t});\n\t\tthis.selectRoles();\n\t}\n\n\tprivate selectRoles() {\n\t\tthis.formGroup.get(\"roles\")?.setValue(1);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "formBuilder", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "" } ], "line": 59, "jsdoctags": [ { "name": "formBuilder", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit" ], "accessors": { "disabled": { "name": "disabled", "setSignature": { "name": "disabled", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 50, "jsdoctags": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } } }, "isDuplicate": true, "duplicateId": 1, "duplicateName": "ReactiveFormsStory-1" }, { "name": "ReactiveFormsStory", "id": "component-ReactiveFormsStory-4da658860c485558b070ce49c79e67a4b9a23515f56d921214a582e6773610e22b0b4b606938b7e0965398a6f6f6538f4b45eb633f2c07a0bf26ab834107189f-2", "file": "src/file-uploader/stories/uploader-reactive-form.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-reactive-forms", "styleUrls": [], "styles": [], "template": "
    \n\t\n\t\n\t 0\"\n\t\ttype=\"submit\"\n\t\tstyle=\"margin-top: 20px\">\n\t\tUpload\n\t\n\n
    \n\t\n\t\n\t
    \n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "accept", "defaultValue": "[\".jpg\", \".png\"]", "deprecated": false, "deprecationMessage": "", "line": 67, "type": "{}", "decorators": [] }, { "name": "buttonText", "deprecated": false, "deprecationMessage": "", "line": 65, "type": "any", "decorators": [] }, { "name": "buttonType", "defaultValue": "\"primary\"", "deprecated": false, "deprecationMessage": "", "line": 66, "type": "string", "decorators": [] }, { "name": "description", "deprecated": false, "deprecationMessage": "", "line": 64, "type": "any", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 71, "type": "boolean", "decorators": [] }, { "name": "fileItemSize", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "line": 72, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "multiple", "deprecated": false, "deprecationMessage": "", "line": 68, "type": "any", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 70, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 69, "type": "boolean", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "line": 63, "type": "any", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "disabledFormGroup", "deprecated": false, "deprecationMessage": "", "type": "FormGroup", "optional": false, "description": "", "line": 61, "modifierKind": [ 125 ] }, { "name": "formGroup", "deprecated": false, "deprecationMessage": "", "type": "FormGroup", "optional": false, "description": "", "line": 60, "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "onUpload", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 88, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOnInit\n} from \"@angular/core\";\nimport { NotificationService } from \"../../notification\";\n\nimport {\n\tFormBuilder,\n\tFormControl,\n\tFormGroup,\n\tValidators\n} from \"@angular/forms\";\n\n@Component({\n\tselector: \"app-reactive-forms\",\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\n\t\t\t 0\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tstyle=\"margin-top: 20px\">\n\t\t\t\tUpload\n\t\t\t\n\t\t\n\t\t
    \n\t\t\t\n\t\t\t\n\t\t\t
    \n\t\t\t\n\t\t\n\t`\n})\nexport class ReactiveFormsStory implements OnInit {\n\tpublic formGroup: FormGroup;\n\tpublic disabledFormGroup: FormGroup;\n\n\t@Input() title;\n\t@Input() description;\n\t@Input() buttonText;\n\t@Input() buttonType = \"primary\";\n\t@Input() accept = [\".jpg\", \".png\"];\n\t@Input() multiple;\n\t@Input() skeleton = false;\n\t@Input() size = \"md\";\n\t@Input() disabled = false;\n\t@Input() fileItemSize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\tprotected maxSize = 500000;\n\n\tconstructor(protected formBuilder: FormBuilder) {}\n\n\tngOnInit() {\n\t\tthis.formGroup = this.formBuilder.group({\n\t\t\tfiles: new FormControl(new Set(), [Validators.required])\n\t\t});\n\t\tthis.disabledFormGroup = this.formBuilder.group({\n\t\t\tfiles: new FormControl(new Set(), [Validators.required])\n\t\t});\n\t\tthis.disabledFormGroup.disable();\n\t}\n\n\tonUpload() {\n\t\t(this.formGroup.get(\"files\") as any).value.forEach(fileItem => {\n\t\t\tif (!fileItem.uploaded) {\n\t\t\t\tif (fileItem.file.size < this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"complete\";\n\t\t\t\t\t\tfileItem.uploaded = true;\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\n\t\t\t\tif (fileItem.file.size > this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"edit\";\n\t\t\t\t\t\tfileItem.invalid = true;\n\t\t\t\t\t\tfileItem.invalidTitle = \"File size exceeds limit\";\n\t\t\t\t\t\tfileItem.invalidText = \"500kb max file size. Select a new file and try again.\";\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "formBuilder", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "" } ], "line": 74, "jsdoctags": [ { "name": "formBuilder", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit" ], "isDuplicate": true, "duplicateId": 2, "duplicateName": "ReactiveFormsStory-2" }, { "name": "ReactiveFormsStory", "id": "component-ReactiveFormsStory-44ae674c9195e31e5a9463da7a5707dd156f9c1aac025848d5705cae965cdd40b037b5784de5d1bedb8488b3f16f25b12b24cc45aa1fae4d6142e69f63e83769-3", "file": "src/radio/stories/app-reactive-forms.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-reactive-forms", "styleUrls": [], "styles": [], "template": "
    \n\t\n\t\t\n\t\t\tzero\n\t\t\n\t\t\n\t\t\t{{radio.num}}\n\t\t\n\t\n\n\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "formGroup", "deprecated": false, "deprecationMessage": "", "type": "FormGroup", "optional": false, "description": "", "line": 35, "modifierKind": [ 125 ] }, { "name": "manyRadios", "defaultValue": "[\n\t\t{ num: \"one\" },\n\t\t{ num: \"two\" },\n\t\t{ num: \"three\" },\n\t\t{ num: \"four\", disabled: true }\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 37 } ], "methodsClass": [ { "name": "changeSelected", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 46, "deprecated": false, "deprecationMessage": "" }, { "name": "disableGroup", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 50, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOnInit,\n\tAfterViewInit\n} from \"@angular/core\";\nimport {\n\tFormGroup,\n\tFormBuilder,\n\tFormControl\n} from \"@angular/forms\";\n\n@Component({\n\tselector: \"app-reactive-forms\",\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\tzero\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{radio.num}}\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t`\n})\nexport class ReactiveFormsStory implements AfterViewInit, OnInit {\n\tpublic formGroup: FormGroup;\n\n\tmanyRadios = [\n\t\t{ num: \"one\" },\n\t\t{ num: \"two\" },\n\t\t{ num: \"three\" },\n\t\t{ num: \"four\", disabled: true }\n\t];\n\n\tconstructor(protected formBuilder: FormBuilder) { }\n\n\tchangeSelected() {\n\t\tthis.formGroup.get(\"radioGroup\")?.setValue(\"three\");\n\t}\n\n\tdisableGroup() {\n\t\tthis.formGroup.get(\"radioGroup\")?.disable();\n\t}\n\n\tngOnInit() {\n\t\tthis.formGroup = this.formBuilder.group({\n\t\t\tradioGroup: new FormControl()\n\t\t});\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.formGroup.get(\"radioGroup\")?.setValue(\"one\");\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "formBuilder", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "" } ], "line": 42, "jsdoctags": [ { "name": "formBuilder", "type": "FormBuilder", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AfterViewInit", "OnInit" ], "isDuplicate": true, "duplicateId": 3, "duplicateName": "ReactiveFormsStory-3" }, { "name": "SampleFormModal", "id": "component-SampleFormModal-885bf85420076e52a69babd236a5483eca2c408c81abf55503d09dcbcfe4d57cac49354c1c51e30de3b011ab98bc1528ffc1f0d91b939182577c903812ede38d", "file": "src/modal/stories/form-modal.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-form-modal", "styleUrls": [], "styles": [ "\n\t\t.modal-text {\n\t\t\tmargin-bottom: 30px;\n\t\t}\n\t" ], "template": "\n\t\n\t\t

    Label

    \n\t\t

    Modal

    \n\t    \n\t
    \n\t\t

    \n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis finibus erat vel aliquam sodales.\n\t\t\tPhasellus porta velit vel libero pulvinar, sit amet semper purus volutpat.\n\t\t

    \n\t\t
    \n\t\t\t\n\t\t\t\t{{label}}\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t
    \n\t\n\t\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the open state of the modal\n", "description": "

    Controls the open state of the modal

    \n", "line": 25, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseModal" } } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nBase event emitter to propagate close events\n", "description": "

    Base event emitter to propagate close events

    \n", "line": 20, "type": "EventEmitter", "inheritance": { "file": "BaseModal" } } ], "propertiesClass": [], "methodsClass": [ { "name": "closeModal", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 30, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefault method to handle closing the modal\n", "description": "

    Default method to handle closing the modal

    \n", "inheritance": { "file": "BaseModal" } } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component } from \"@angular/core\";\nimport { BaseModal } from \"../\";\n\n@Component({\n\tselector: \"app-form-modal\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    Label

    \n\t\t\t\t

    Modal

    \n\t\t\t    \n\t\t\t
    \n\t\t\t\t

    \n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis finibus erat vel aliquam sodales.\n\t\t\t\t\tPhasellus porta velit vel libero pulvinar, sit amet semper purus volutpat.\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\t{{label}}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n\tstyles: [`\n\t\t.modal-text {\n\t\t\tmargin-bottom: 30px;\n\t\t}\n\t`]\n})\nexport class SampleFormModal extends BaseModal { }\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t.modal-text {\n\t\t\tmargin-bottom: 30px;\n\t\t}\n\t\n", "extends": [ "BaseModal" ] }, { "name": "SampleLargeLoading", "id": "component-SampleLargeLoading-cbefd26998953aaa72bd5df442905e86d07927fca467020932140d98aca67a213b7f7c4c76e3b6ddcb5d1c448dc432d5b93dd5f4e4ff760e0481ddbd5375aa85", "file": "src/patterns/loading/large-loading.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-sample-large-loading", "styleUrls": [], "styles": [ "\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.progress-indicator-wrapper {\n\t\t\tmargin-bottom: 50px;\n\t\t}\n\n\t\t.dropdown-wrapper {\n\t\t\twidth: 50%;\n\t\t}\n\t" ], "template": "
    \n\t
    \n\t\t\n\t\t\t\n\t\t\n\t
    \n\t
    \n\t\t\n\t
    \n\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tText input label\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tText input label\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tShow Loading\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t
    \n
    \n\n\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "formGroup", "defaultValue": "new FormGroup({\n\t\tinput: new FormControl(\"\", [Validators.required]),\n\t\ttextArea: new FormControl(\"\", [Validators.required]),\n\t\tdropdown: new FormControl(\"\", [Validators.required])\n\t})", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 109 }, { "name": "isLoading", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 106 }, { "name": "items", "defaultValue": "[\n\t\t{ content: \"Option 1\" },\n\t\t{ content: \"Option 2\" },\n\t\t{ content: \"Option 3\" },\n\t\t{ content: \"Option 4\" },\n\t\t{ content: \"Option 5\" }\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 147 }, { "name": "overlay", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 107 }, { "name": "steps", "defaultValue": "[\n\t\t{\n\t\t\ttext: \"First step\",\n\t\t\tstate: [\"complete\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Second step\",\n\t\t\tstate: [\"complete\"],\n\t\t\ttooltip: { content: \"Overflow tooltip content.\", trigger: \"click\", placement: \"bottom\" }\n\t\t},\n\t\t{\n\t\t\ttext: \"Third step\",\n\t\t\tstate: [\"current\"],\n\t\t\ttooltip: {\n\t\t\t\tcontent: `Lorem ipsum dolor, sit amet consectetur adipisicing elit.\n\t\t\t\t\tAnimi consequuntur hic ratione aliquid cupiditate, nesciunt saepe iste\n\t\t\t\t\tblanditiis cumque maxime tenetur veniam est illo deserunt sint quae pariatur.\n\t\t\t\t\tLaboriosam, consequatur.`,\n\t\t\t\ttrigger: \"click\",\n\t\t\t\tplacement: \"bottom\"\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\ttext: \"Fourth step\",\n\t\t\tstate: [\"incomplete\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Fifth step\",\n\t\t\tstate: [\"incomplete\"]\n\t\t}\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 115 } ], "methodsClass": [ { "name": "isInvalid", "args": [ { "name": "controlName", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 171, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "controlName", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onSubmit", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 155, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component } from \"@angular/core\";\nimport { moduleMetadata, Meta } from \"@storybook/angular\";\nimport { GridModule } from \"../../grid\";\nimport { UIShellModule } from \"../../ui-shell\";\nimport { ProgressIndicatorModule } from \"../../progress-indicator\";\nimport { PlaceholderModule } from \"../../placeholder\";\nimport { InputModule } from \"../../input\";\nimport { DropdownModule } from \"../../dropdown\";\nimport { LoadingModule } from \"../../loading\";\nimport { ButtonModule } from \"../../button\";\nimport {\n\tFormGroup,\n\tFormControl,\n\tValidators,\n\tFormsModule,\n\tReactiveFormsModule\n} from \"@angular/forms\";\n\n@Component({\n\tselector: \"app-sample-large-loading\",\n\ttemplate: `\n\t
    \n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\tText input label\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\tText input label\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\tShow Loading\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t
    \n\t\n\t\n\t`,\n\tstyles: [`\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.progress-indicator-wrapper {\n\t\t\tmargin-bottom: 50px;\n\t\t}\n\n\t\t.dropdown-wrapper {\n\t\t\twidth: 50%;\n\t\t}\n\t`\n\t]\n})\nclass SampleLargeLoading {\n\tisLoading = false;\n\toverlay = false;\n\n\tformGroup = new FormGroup({\n\t\tinput: new FormControl(\"\", [Validators.required]),\n\t\ttextArea: new FormControl(\"\", [Validators.required]),\n\t\tdropdown: new FormControl(\"\", [Validators.required])\n\t});\n\n\tsteps = [\n\t\t{\n\t\t\ttext: \"First step\",\n\t\t\tstate: [\"complete\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Second step\",\n\t\t\tstate: [\"complete\"],\n\t\t\ttooltip: { content: \"Overflow tooltip content.\", trigger: \"click\", placement: \"bottom\" }\n\t\t},\n\t\t{\n\t\t\ttext: \"Third step\",\n\t\t\tstate: [\"current\"],\n\t\t\ttooltip: {\n\t\t\t\tcontent: `Lorem ipsum dolor, sit amet consectetur adipisicing elit.\n\t\t\t\t\tAnimi consequuntur hic ratione aliquid cupiditate, nesciunt saepe iste\n\t\t\t\t\tblanditiis cumque maxime tenetur veniam est illo deserunt sint quae pariatur.\n\t\t\t\t\tLaboriosam, consequatur.`,\n\t\t\t\ttrigger: \"click\",\n\t\t\t\tplacement: \"bottom\"\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\ttext: \"Fourth step\",\n\t\t\tstate: [\"incomplete\"]\n\t\t},\n\t\t{\n\t\t\ttext: \"Fifth step\",\n\t\t\tstate: [\"incomplete\"]\n\t\t}\n\t];\n\n\titems = [\n\t\t{ content: \"Option 1\" },\n\t\t{ content: \"Option 2\" },\n\t\t{ content: \"Option 3\" },\n\t\t{ content: \"Option 4\" },\n\t\t{ content: \"Option 5\" }\n\t];\n\n\tonSubmit() {\n\t\tthis.isLoading = true;\n\t\tthis.overlay = true;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.isLoading = false;\n\t\t\tthis.overlay = false;\n\t\t}, 2000);\n\n\t\tif (this.formGroup.invalid) {\n\t\t\tconst invalidFields = [].slice.call(document.getElementsByClassName(\"ng-invalid\"));\n\t\t\tinvalidFields[1].focus();\n\t\t}\n\t\treturn;\n\t}\n\n\tisInvalid(controlName: string): boolean {\n\t\tconst control = this.formGroup.get(controlName);\n\n\t\treturn (control && control.invalid && (control.dirty || control.touched)) as boolean;\n\t}\n}\n\n// Storybook starts here\nexport default {\n\ttitle: \"Pattern/Loading\",\n\tdecorators: [\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [SampleLargeLoading],\n\t\t\timports: [\n\t\t\t\tDropdownModule,\n\t\t\t\tGridModule,\n\t\t\t\tUIShellModule,\n\t\t\t\tProgressIndicatorModule,\n\t\t\t\tPlaceholderModule,\n\t\t\t\tInputModule,\n\t\t\t\tLoadingModule,\n\t\t\t\tFormsModule,\n\t\t\t\tReactiveFormsModule,\n\t\t\t\tButtonModule\n\t\t\t]\n\t\t})\n\t]\n} as Meta;\n\nconst Template = (args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n});\nexport const LargeLoading = Template.bind({});\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.progress-indicator-wrapper {\n\t\t\tmargin-bottom: 50px;\n\t\t}\n\n\t\t.dropdown-wrapper {\n\t\t\twidth: 50%;\n\t\t}\n\t\n", "extends": [] }, { "name": "SampleModal", "id": "component-SampleModal-6a2698d53874e1a37f09fa880bd337952fa094e767349f5e801fe6893d40d32e9c80811d76a0f5e99d732ee9cc9ab45a4c3eb8fb24e50dacd7467b4d16b8b854", "file": "src/modal/stories/sample-modal.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-sample-modal", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t

    Label

    \n\t\t

    Modal

    \n\t    \n\t
    \n\t\t

    Sample modal works.

    \n\t\t

    {{modalText}}

    \n\t
    \n\t\n\t\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "open", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the open state of the modal\n", "description": "

    Controls the open state of the modal

    \n", "line": 25, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseModal" } } ], "outputsClass": [ { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nBase event emitter to propagate close events\n", "description": "

    Base event emitter to propagate close events

    \n", "line": 20, "type": "EventEmitter", "inheritance": { "file": "BaseModal" } } ], "propertiesClass": [ { "name": "modalText", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 32, "decorators": [ { "name": "Inject", "stringifiedArguments": "'modalText'" } ], "modifierKind": [ 170, 125 ] }, { "name": "showCloseButton", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 34, "decorators": [ { "name": "Inject", "stringifiedArguments": "'showCloseButton'" } ], "modifierKind": [ 170, 125 ] }, { "name": "size", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 33, "decorators": [ { "name": "Inject", "stringifiedArguments": "'size'" } ], "modifierKind": [ 170, 125 ] } ], "methodsClass": [ { "name": "showSecondaryModal", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 39, "deprecated": false, "deprecationMessage": "" }, { "name": "closeModal", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 30, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDefault method to handle closing the modal\n", "description": "

    Default method to handle closing the modal

    \n", "inheritance": { "file": "BaseModal" } } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Inject } from \"@angular/core\";\nimport {\n\tModalService,\n\tBaseModal,\n\tModalButtonType\n} from \"../\";\n\n@Component({\n\tselector: \"app-sample-modal\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    Label

    \n\t\t\t\t

    Modal

    \n\t\t\t    \n\t\t\t
    \n\t\t\t\t

    Sample modal works.

    \n\t\t\t\t

    {{modalText}}

    \n\t\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class SampleModal extends BaseModal {\n\tconstructor(\n\t\t@Inject(\"modalText\") public modalText,\n\t\t@Inject(\"size\") public size,\n\t\t@Inject(\"showCloseButton\") public showCloseButton = true,\n\t\tprotected modalService: ModalService) {\n\t\tsuper();\n\t}\n\n\tshowSecondaryModal() {\n\t\tthis.modalService.show({\n\t\t\tlabel: \"Secondary header label\",\n\t\t\ttitle: \"Sample secondary modal works.\",\n\t\t\tcontent: this.modalText,\n\t\t\tsize: this.size,\n\t\t\tbuttons: [{\n\t\t\t\ttext: \"Cancel\",\n\t\t\t\ttype: ModalButtonType.secondary\n\t\t\t}, {\n\t\t\t\ttext: \"OK\",\n\t\t\t\ttype: ModalButtonType.primary,\n\t\t\t\tclick: () => alert(\"OK button clicked\")\n\t\t\t}]\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "modalText", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "size", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "showCloseButton", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true" }, { "name": "modalService", "type": "ModalService", "deprecated": false, "deprecationMessage": "" } ], "line": 30, "jsdoctags": [ { "name": "modalText", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "size", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "showCloseButton", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "true", "tagName": { "text": "param" } }, { "name": "modalService", "type": "ModalService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [ "BaseModal" ] }, { "name": "SampleMultiCategories", "id": "component-SampleMultiCategories-520267cc9bbfd2aaed9da5dae7908b551e85576663ef226be2eca3de090f2f31d799957226fc92ae6f43efbf0595d6b5ff796a629e6087e9766722d2b90cab99", "file": "src/patterns/filtering/multiple-categories.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-sample-multi-categories", "styleUrls": [], "styles": [ "\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.reset-button {\n\t\t\tmargin-bottom: 20px;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\t" ], "template": "
    \n\t
    \n\t\t\n\t\t\t\n\t\t\n\t
    \n\t
    \n\t\t
    \n\t\t\t\n\t\t\t
    \n\t\t\t\tRadio button label\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{{radio.color}}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\tType\n\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t 0\"\n\t\t\t\t\t\t\t(close)=\"resetCheckboxList()\">\n\t\t\t\t\t\t\t{{checkBoxFilters.size}}\n\t\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t{{ listItem.value }}\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t
    \n
    \n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "checkBoxFilters", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "any", "optional": false, "description": "", "line": 96 }, { "name": "checkboxList", "defaultValue": "[\n\t\t{ value: \"Fruit\", checked: false },\n\t\t{ value: \"Vegetable\", checked: false },\n\t\t{ value: \"Meat\", checked: false }\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 116 }, { "name": "dataset", "defaultValue": "[\n\t\t{ name: \"Apple\", type: [\"Fruit\"], color: \"Red\" },\n\t\t{ name: \"Grape\", type: [\"Fruit\"], color: \"Purple\" },\n\t\t{ name: \"Eggplant\", type: [\"Fruit\"], color: \"Purple\" },\n\t\t{ name: \"FruitVegMeat\", type: [\"Fruit\", \"Vegetable\", \"Meat\"], color: \"White\" },\n\t\t{ name: \"Lettuce\", type: [\"Vegetable\"], color: \"Green\" },\n\t\t{ name: \"Daikon Radish\", type: [\"Vegetable\"], color: \"White\" },\n\t\t{ name: \"Beef\", type: [\"Meat\"], color: \"Red\" }\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 99 }, { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 95 }, { "name": "radioFilter", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "null", "optional": false, "description": "", "line": 97 }, { "name": "radios", "defaultValue": "[\n\t\t{ color: \"Red\", checked: false },\n\t\t{ color: \"Purple\", checked: false },\n\t\t{ color: \"Green\", checked: false },\n\t\t{ color: \"White\", checked: false }\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 109 } ], "methodsClass": [ { "name": "applyFilters", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 153, "deprecated": false, "deprecationMessage": "" }, { "name": "onCheckboxChange", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 122, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onRadioChange", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 131, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "resetCheckboxList", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 141, "deprecated": false, "deprecationMessage": "" }, { "name": "resetFilters", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 136, "deprecated": false, "deprecationMessage": "" }, { "name": "resetRadios", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 147, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, OnInit, OnDestroy } from \"@angular/core\";\nimport { moduleMetadata, Meta } from \"@storybook/angular\";\nimport { TableModule, TableModel, TableHeaderItem, TableItem } from \"../../table\";\nimport { DropdownModule } from \"../../dropdown\";\nimport { StructuredListModule } from \"../../structured-list\";\nimport { GridModule } from \"../../grid\";\nimport { RadioModule } from \"../../radio\";\nimport { CheckboxModule } from \"../../checkbox\";\nimport { ButtonModule } from \"../../button\";\nimport { TagModule } from \"../../tag/index\";\nimport { UIShellModule } from \"../../ui-shell\";\n\n@Component({\n\tselector: \"app-sample-multi-categories\",\n\ttemplate: `\n\t
    \n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\tRadio button label\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{{radio.color}}\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\tType\n\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t 0\"\n\t\t\t\t\t\t\t\t(close)=\"resetCheckboxList()\">\n\t\t\t\t\t\t\t\t{{checkBoxFilters.size}}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\t{{ listItem.value }}\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t
    \n\t`,\n\tstyles: [`\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.reset-button {\n\t\t\tmargin-bottom: 20px;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\t`\n\t]\n})\nclass SampleMultiCategories implements OnInit, OnDestroy {\n\tmodel = new TableModel();\n\tcheckBoxFilters: any = [];\n\tradioFilter = null;\n\n\tdataset = [\n\t\t{ name: \"Apple\", type: [\"Fruit\"], color: \"Red\" },\n\t\t{ name: \"Grape\", type: [\"Fruit\"], color: \"Purple\" },\n\t\t{ name: \"Eggplant\", type: [\"Fruit\"], color: \"Purple\" },\n\t\t{ name: \"FruitVegMeat\", type: [\"Fruit\", \"Vegetable\", \"Meat\"], color: \"White\" },\n\t\t{ name: \"Lettuce\", type: [\"Vegetable\"], color: \"Green\" },\n\t\t{ name: \"Daikon Radish\", type: [\"Vegetable\"], color: \"White\" },\n\t\t{ name: \"Beef\", type: [\"Meat\"], color: \"Red\" }\n\t];\n\n\tradios = [\n\t\t{ color: \"Red\", checked: false },\n\t\t{ color: \"Purple\", checked: false },\n\t\t{ color: \"Green\", checked: false },\n\t\t{ color: \"White\", checked: false }\n\t];\n\n\tcheckboxList = [\n\t\t{ value: \"Fruit\", checked: false },\n\t\t{ value: \"Vegetable\", checked: false },\n\t\t{ value: \"Meat\", checked: false }\n\t];\n\n\tonCheckboxChange(event) {\n\t\tif (event.checked) {\n\t\t\tthis.checkBoxFilters.push(event.source.value);\n\t\t} else {\n\t\t\tthis.checkBoxFilters.splice(this.checkBoxFilters.indexOf(event.source.value), 1);\n\t\t}\n\t\tthis.applyFilters();\n\t}\n\n\tonRadioChange(event) {\n\t\tthis.radioFilter = event.value;\n\t\tthis.applyFilters();\n\t}\n\n\tresetFilters() {\n\t\tthis.resetCheckboxList();\n\t\tthis.resetRadios();\n\t}\n\n\tresetCheckboxList() {\n\t\tthis.checkBoxFilters = [];\n\t\tthis.checkboxList = this.checkboxList.map(obj => ({ value: obj.value, checked: false }));\n\t\tthis.applyFilters();\n\t}\n\n\tresetRadios() {\n\t\tthis.radioFilter = null;\n\t\tthis.radios = this.radios.map(obj => ({ color: obj.color, checked: false }));\n\t\tthis.applyFilters();\n\t}\n\n\tapplyFilters() {\n\t\tthis.model.data =\n\t\t\tthis.dataset\n\t\t\t\t.filter(data =>\n\t\t\t\t\t(this.checkBoxFilters.every(filter => data.type.includes(filter))) &&\n\t\t\t\t\t(data.color === this.radioFilter || !this.radioFilter))\n\t\t\t\t.map(filteredData =>\n\t\t\t\t\t[\n\t\t\t\t\t\tnew TableItem({ data: filteredData.name }),\n\t\t\t\t\t\tnew TableItem({ data: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" })\n\t\t\t\t\t]);\n\t}\n\n\tngOnInit() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.add(\"full-page\");\n\n\t\tthis.model.header = [new TableHeaderItem({ data: \"Name\" }), new TableHeaderItem({ data: \"Description\" })];\n\n\t\tthis.model.data = this.dataset.map(datapoint =>\n\t\t\t[\n\t\t\t\tnew TableItem({ data: datapoint.name }),\n\t\t\t\tnew TableItem({ data: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" })\n\t\t\t]\n\t\t);\n\t}\n\tngOnDestroy() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.remove(\"full-page\");\n\t}\n}\n\n// Storybook starts here\nexport default {\n\ttitle: \"Pattern/Filtering\",\n\tdecorators: [\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [SampleMultiCategories],\n\t\t\timports: [\n\t\t\t\tTableModule,\n\t\t\t\tDropdownModule,\n\t\t\t\tGridModule,\n\t\t\t\tStructuredListModule,\n\t\t\t\tRadioModule,\n\t\t\t\tCheckboxModule,\n\t\t\t\tButtonModule,\n\t\t\t\tTagModule,\n\t\t\t\tUIShellModule\n\t\t\t]\n\t\t})\n\t]\n} as Meta;\n\nconst Template = (args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n});\nexport const MultipleCategories = Template.bind({});\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.reset-button {\n\t\t\tmargin-bottom: 20px;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\t\n", "extends": [], "implements": [ "OnInit", "OnDestroy" ] }, { "name": "SampleMultiSelection", "id": "component-SampleMultiSelection-c639fa45f2516c2e258eef1d52dc2dee0f94389265905f55091aac4385661d4d1f34a571dcc157c4b91982d0ceac3da7b61356f1c459971ddab75f7c8b8cafe6", "file": "src/patterns/filtering/multi-selection.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-sample-multi-selection", "styleUrls": [], "styles": [ "\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.dropdown-label {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.filter-dropdown {\n\t\t\tmargin-left: 20px;\n\t\t\tflex-grow: 1;\n\t\t}\n\t" ], "template": "
    \n\t
    \n\t\t\n\t\t\t\n\t\t\n\t
    \n\t
    \n\t\t
    \n\t\t\t\n\t\t
    \n\t
    \n\t
    \n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t
    \n
    \n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "dataset", "defaultValue": "[\n\t\t{ name: \"Apple\", type: [\"Fruit\"] },\n\t\t{ name: \"Grape\", type: [\"Fruit\"] },\n\t\t{ name: \"Eggplant\", type: [\"Fruit\"] },\n\t\t{ name: \"FruitVegMeat\", type: [\"Fruit\", \"Vegetable\", \"Meat\"] },\n\t\t{ name: \"Lettuce\", type: [\"Vegetable\"] },\n\t\t{ name: \"Daikon Radish\", type: [\"Vegetable\"] },\n\t\t{ name: \"Beef\", type: [\"Meat\"] }\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 79 }, { "name": "items", "defaultValue": "[\n\t\t{ content: \"Vegetable\" },\n\t\t{ content: \"Fruit\" },\n\t\t{ content: \"Meat\" }\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 73 }, { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 71 } ], "methodsClass": [ { "name": "onSelected", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 89, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, OnInit, OnDestroy } from \"@angular/core\";\nimport { moduleMetadata, Meta } from \"@storybook/angular\";\nimport { TableModule, TableModel, TableHeaderItem, TableItem } from \"../../table/index\";\nimport { DropdownModule } from \"../../dropdown/index\";\nimport { GridModule } from \"../../grid/index\";\nimport { UIShellModule } from \"../../ui-shell/index\";\n\n@Component({\n\tselector: \"app-sample-multi-selection\",\n\ttemplate: `\n\t
    \n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t
    \n\t`,\n\tstyles: [`\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.dropdown-label {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.filter-dropdown {\n\t\t\tmargin-left: 20px;\n\t\t\tflex-grow: 1;\n\t\t}\n\t`\n\t]\n})\nclass SampleMultiSelection implements OnInit, OnDestroy {\n\tmodel = new TableModel();\n\n\titems = [\n\t\t{ content: \"Vegetable\" },\n\t\t{ content: \"Fruit\" },\n\t\t{ content: \"Meat\" }\n\t];\n\n\tdataset = [\n\t\t{ name: \"Apple\", type: [\"Fruit\"] },\n\t\t{ name: \"Grape\", type: [\"Fruit\"] },\n\t\t{ name: \"Eggplant\", type: [\"Fruit\"] },\n\t\t{ name: \"FruitVegMeat\", type: [\"Fruit\", \"Vegetable\", \"Meat\"] },\n\t\t{ name: \"Lettuce\", type: [\"Vegetable\"] },\n\t\t{ name: \"Daikon Radish\", type: [\"Vegetable\"] },\n\t\t{ name: \"Beef\", type: [\"Meat\"] }\n\t];\n\n\tonSelected(event) {\n\t\tconst checkboxFilters = event.map(filter => filter.content);\n\n\t\tthis.model.data =\n\t\t\tthis.dataset\n\t\t\t\t.filter(data => checkboxFilters.every(filter => data.type.includes(filter)))\n\t\t\t\t.map(filteredData =>\n\t\t\t\t\t[\n\t\t\t\t\t\tnew TableItem({ data: filteredData.name }),\n\t\t\t\t\t\tnew TableItem({ data: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" })\n\t\t\t\t\t]);\n\t}\n\n\tngOnInit() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.add(\"full-page\");\n\t\tthis.model.header = [new TableHeaderItem({ data: \"Name\" }), new TableHeaderItem({ data: \"Description\" })];\n\n\t\tthis.model.data = this.dataset.map(datapoint =>\n\t\t\t[\n\t\t\t\tnew TableItem({ data: datapoint.name }),\n\t\t\t\tnew TableItem({ data: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" })\n\t\t\t]\n\t\t);\n\t}\n\n\tngOnDestroy() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.remove(\"full-page\");\n\t}\n}\n\n// Storybook starts here\nexport default {\n\ttitle: \"Pattern/Filtering\",\n\tdecorators: [\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [SampleMultiSelection],\n\t\t\timports: [\n\t\t\t\tTableModule,\n\t\t\t\tDropdownModule,\n\t\t\t\tGridModule,\n\t\t\t\tUIShellModule\n\t\t\t]\n\t\t})\n\t]\n} as Meta;\n\nconst Template = (args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n});\nexport const MultiSelection = Template.bind({});\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.dropdown-label {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.filter-dropdown {\n\t\t\tmargin-left: 20px;\n\t\t\tflex-grow: 1;\n\t\t}\n\t\n", "extends": [], "implements": [ "OnInit", "OnDestroy" ] }, { "name": "SampleProgressiveLoading", "id": "component-SampleProgressiveLoading-f1c203ea4ac3ada9814aea12b4e3e3e1f8835f82d52dc24f39e9b6c8bc6760a1fca4807552aea4b32050956d6c3cf4ed9eb5563b6620939e8f9c2cf73346edd2", "file": "src/patterns/loading/progressive-loading.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-sample-progressive-loading", "styleUrls": [], "styles": [ "\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.actions {\n\t\t\tmargin-bottom: 40px;\n\t\t}\n\t\t" ], "template": "
    \n\t
    \n\t\t\n\t\t\t\n\t\t\n\t
    \n\t
    \n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\n\t\t
    \n\t\t\t\n\t\t
    \n\t
    \n\t
    \n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t
    \n
    \n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "dataset", "defaultValue": "[\n\t\t{ name: \"Apple\", type: \"Fruit\" },\n\t\t{ name: \"Grape\", type: \"Fruit\" },\n\t\t{ name: \"Eggplant\", type: \"Fruit\" },\n\t\t{ name: \"Lettuce\", type: \"Vegetable\" },\n\t\t{ name: \"Daikon Radish\", type: \"Vegetable\" },\n\t\t{ name: \"Beef\", type: \"Meat\" }\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 104 }, { "name": "items", "defaultValue": "[\n\t\t{ content: \"Vegetable\" },\n\t\t{ content: \"Fruit\" },\n\t\t{ content: \"Meat\" }\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 113 }, { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 99 }, { "name": "placeholder", "defaultValue": "null", "deprecated": false, "deprecationMessage": "", "type": "string | null", "optional": false, "description": "", "line": 102 }, { "name": "skeletonStateDropdown", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 101 }, { "name": "skeletonStateTable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 100 } ], "methodsClass": [ { "name": "loadScreen", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 125, "deprecated": false, "deprecationMessage": "" }, { "name": "uninitializeData", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 119, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOnInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { moduleMetadata, Meta } from \"@storybook/angular\";\nimport {\n\tTableModule,\n\tTableModel,\n\tTableHeaderItem,\n\tTableItem\n} from \"../../table\";\nimport { DropdownModule } from \"../../dropdown\";\nimport { GridModule } from \"../../grid\";\nimport { ButtonModule } from \"../../button\";\nimport { UIShellModule } from \"../../ui-shell\";\n\n@Component({\n\tselector: \"app-sample-progressive-loading\",\n\ttemplate: `\n\t
    \n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t
    \n\t`,\n\tstyles: [`\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.actions {\n\t\t\tmargin-bottom: 40px;\n\t\t}\n\t\t`\n\t]\n})\nclass SampleProgressiveLoading implements OnInit, OnDestroy {\n\tmodel = new TableModel();\n\tskeletonStateTable = true;\n\tskeletonStateDropdown = true;\n\tplaceholder: string | null = null;\n\n\tdataset = [\n\t\t{ name: \"Apple\", type: \"Fruit\" },\n\t\t{ name: \"Grape\", type: \"Fruit\" },\n\t\t{ name: \"Eggplant\", type: \"Fruit\" },\n\t\t{ name: \"Lettuce\", type: \"Vegetable\" },\n\t\t{ name: \"Daikon Radish\", type: \"Vegetable\" },\n\t\t{ name: \"Beef\", type: \"Meat\" }\n\t];\n\n\titems = [\n\t\t{ content: \"Vegetable\" },\n\t\t{ content: \"Fruit\" },\n\t\t{ content: \"Meat\" }\n\t];\n\n\tuninitializeData() {\n\t\tthis.skeletonStateTable = true;\n\t\tthis.skeletonStateDropdown = true;\n\t\tthis.placeholder = null;\n\t}\n\n\tloadScreen() {\n\t\tthis.model.data = this.dataset.map(datapoint => [new TableItem({}), new TableItem({})]);\n\n\t\tthis.model.header = [new TableHeaderItem({ data: \"\" }), new TableHeaderItem({ data: \"\" })];\n\n\t\tsetTimeout(() => {\n\t\t\tthis.skeletonStateDropdown = false;\n\t\t\tthis.placeholder = \"Type\";\n\t\t}, 2000);\n\n\t\tsetTimeout(() => {\n\t\t\tthis.skeletonStateTable = false;\n\t\t}, 4000);\n\n\t\tsetTimeout(() => {\n\t\t\tthis.model.header = [new TableHeaderItem({ data: \"Name\" }), new TableHeaderItem({ data: \"Description\" })];\n\n\t\t\tthis.model.data = this.dataset.map(datapoint =>\n\t\t\t\t[\n\t\t\t\t\tnew TableItem({ data: datapoint.name }),\n\t\t\t\t\tnew TableItem({ data: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" })\n\t\t\t\t]\n\t\t\t);\n\t\t}, 4000);\n\t}\n\n\tngOnInit() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.add(\"full-page\");\n\t\tthis.loadScreen();\n\t}\n\n\tngOnDestroy() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.remove(\"full-page\");\n\t}\n}\n\n// Storybook starts here\nexport default {\n\ttitle: \"Pattern/Loading\",\n\tdecorators: [\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [SampleProgressiveLoading],\n\t\t\timports: [\n\t\t\t\tTableModule,\n\t\t\t\tDropdownModule,\n\t\t\t\tGridModule,\n\t\t\t\tButtonModule,\n\t\t\t\tUIShellModule\n\t\t\t]\n\t\t})\n\t]\n} as Meta;\n\nconst Template = (args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n});\nexport const ProgressiveLoading = Template.bind({});\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.actions {\n\t\t\tmargin-bottom: 40px;\n\t\t}\n\t\t\n", "extends": [], "implements": [ "OnInit", "OnDestroy" ] }, { "name": "SampleSingleSelection", "id": "component-SampleSingleSelection-16cf51557478fda6ebacc860450b95021e963b9016c2e3b5417f33fee9d670047ffa5a595e4703d42c61135efbf670c67567b3d6398d775df638d5748163094d", "file": "src/patterns/filtering/single-selection.stories.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-sample-single-selection", "styleUrls": [], "styles": [ "\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.dropdown-label {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tflex-direction: row;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.filter-dropdown {\n\t\t\tflex-grow: 1;\n\t\t\tmargin-left: 20px;\n\t\t}\n\t" ], "template": "
    \n\t
    \n\t\t\n\t\t\t\n\t\t\n\t
    \n\t
    \n\t\t
    \n\t\t\t\n\t\t
    \n\t
    \n\t
    \n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t
    \n
    \n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "dataset", "defaultValue": "[\n\t\t{ name: \"Apple\", type: \"Fruit\" },\n\t\t{ name: \"Grape\", type: \"Fruit\" },\n\t\t{ name: \"Eggplant\", type: \"Fruit\" },\n\t\t{ name: \"Lettuce\", type: \"Vegetable\" },\n\t\t{ name: \"Daikon Radish\", type: \"Vegetable\" },\n\t\t{ name: \"Beef\", type: \"Meat\" }\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 82 }, { "name": "items", "defaultValue": "[\n\t\t{ content: \"All\" },\n\t\t{ content: \"Vegetable\" },\n\t\t{ content: \"Fruit\" },\n\t\t{ content: \"Meat\" }\n\t]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 75 }, { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 71 }, { "name": "selected", "defaultValue": "[]", "deprecated": false, "deprecationMessage": "", "type": "[]", "optional": false, "description": "", "line": 73 } ], "methodsClass": [ { "name": "onSelected", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 91, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, OnInit, OnDestroy } from \"@angular/core\";\nimport { moduleMetadata, Meta } from \"@storybook/angular\";\nimport { TableModule, TableModel, TableHeaderItem, TableItem } from \"../../table\";\nimport { DropdownModule } from \"../../dropdown\";\nimport { GridModule } from \"../../grid\";\nimport { UIShellModule } from \"../../ui-shell\";\n\n@Component({\n\tselector: \"app-sample-single-selection\",\n\ttemplate: `\n\t
    \n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t
    \n\t`,\n\tstyles: [`\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.dropdown-label {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tflex-direction: row;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.filter-dropdown {\n\t\t\tflex-grow: 1;\n\t\t\tmargin-left: 20px;\n\t\t}\n\t`\n\t]\n})\nclass SampleSingleSelection implements OnInit, OnDestroy {\n\tmodel = new TableModel();\n\n\tselected = [];\n\n\titems = [\n\t\t{ content: \"All\" },\n\t\t{ content: \"Vegetable\" },\n\t\t{ content: \"Fruit\" },\n\t\t{ content: \"Meat\" }\n\t];\n\n\tdataset = [\n\t\t{ name: \"Apple\", type: \"Fruit\" },\n\t\t{ name: \"Grape\", type: \"Fruit\" },\n\t\t{ name: \"Eggplant\", type: \"Fruit\" },\n\t\t{ name: \"Lettuce\", type: \"Vegetable\" },\n\t\t{ name: \"Daikon Radish\", type: \"Vegetable\" },\n\t\t{ name: \"Beef\", type: \"Meat\" }\n\t];\n\n\tonSelected(event) {\n\t\tthis.model.data =\n\t\t\tthis.dataset\n\t\t\t\t.filter(data => data.type === event.item.content || event.item.content === \"All\")\n\t\t\t\t.map(filteredData =>\n\t\t\t\t\t[\n\t\t\t\t\t\tnew TableItem({ data: filteredData.name }),\n\t\t\t\t\t\tnew TableItem({ data: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" })\n\t\t\t\t\t]);\n\t}\n\n\tngOnInit() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.add(\"full-page\");\n\n\t\tthis.model.header = [new TableHeaderItem({ data: \"Name\" }), new TableHeaderItem({ data: \"Description\" })];\n\n\t\tthis.model.data = this.dataset.map(datapoint =>\n\t\t\t[\n\t\t\t\tnew TableItem({ data: datapoint.name }),\n\t\t\t\tnew TableItem({ data: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" })\n\t\t\t]\n\t\t);\n\t}\n\n\tngOnDestroy() {\n\t\tdocument.querySelector(\".sb-show-main\")?.classList.remove(\"full-page\");\n\t}\n}\n\n// Storybook starts here\nexport default {\n\ttitle: \"Pattern/Filtering\",\n\tdecorators: [\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [SampleSingleSelection],\n\t\t\timports: [\n\t\t\t\tTableModule,\n\t\t\t\tDropdownModule,\n\t\t\t\tGridModule,\n\t\t\t\tUIShellModule\n\t\t\t]\n\t\t})\n\t]\n} as Meta;\n\nconst Template = (args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n});\nexport const SingleSelection = Template.bind({});\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t.header {\n\t\t\tmargin-bottom: 80px;\n\t\t}\n\n\t\t.dropdown-label {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tflex-direction: row;\n\t\t}\n\n\t\t.data-table {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.filter-dropdown {\n\t\t\tflex-grow: 1;\n\t\t\tmargin-left: 20px;\n\t\t}\n\t\n", "extends": [], "implements": [ "OnInit", "OnDestroy" ] }, { "name": "Search", "id": "component-Search-27937b0743354490a01e9b586a821796ce8599a84ed088b33331b02f9440e082c079eb681ff8d5fb22a14f55f2b2ed5143cb8f1c8a0b28395ba0254b7ae41ff3", "file": "src/search/search.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: Search, multi: true\n}" } ], "selector": "cds-search, ibm-search", "styleUrls": [], "styles": [], "templateUrl": [ "search.component.html" ], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "active", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to expand the toolbar search component.\n", "description": "

    Set to true to expand the toolbar search component.

    \n", "line": 79, "type": "boolean", "decorators": [] }, { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the aria label on the `div` element with the `search` role.\n", "description": "

    Sets the aria label on the div element with the search role.

    \n", "line": 124, "type": "string", "decorators": [] }, { "name": "autocomplete", "defaultValue": "\"on\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the autocomplete attribute on the `input` element.\nFor reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\n", "description": "

    Sets the autocomplete attribute on the input element.\nFor reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values

    \n", "line": 104, "type": "string", "decorators": [] }, { "name": "clearButtonTitle", "defaultValue": "this.i18n.get().SEARCH.CLEAR_BUTTON", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to set the `title` attribute of the clear button.\n", "description": "

    Used to set the title attribute of the clear button.

    \n", "line": 116, "type": "any", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a disabled search input.\n", "description": "

    Set to true for a disabled search input.

    \n", "line": 62, "type": "boolean", "decorators": [] }, { "name": "expandable", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to make the search component expandable.\n`expandable` would override `toolbar` property behaviours.\n", "description": "

    Set to true to make the search component expandable.\nexpandable would override toolbar property behaviours.

    \n", "line": 71, "type": "boolean", "decorators": [] }, { "name": "fluid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExperimental: enable fluid state\n", "description": "

    Experimental: enable fluid state

    \n", "line": 128, "type": "boolean", "decorators": [] }, { "name": "id", "defaultValue": "`search-${Search.searchCount}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe unique id for the search component.\n", "description": "

    The unique id for the search component.

    \n", "line": 91, "type": "string", "decorators": [] }, { "name": "label", "defaultValue": "this.i18n.get().SEARCH.LABEL", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the text inside the `label` tag.\n", "description": "

    Sets the text inside the label tag.

    \n", "line": 108, "type": "any", "decorators": [] }, { "name": "name", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the name attribute on the `input` element.\n", "description": "

    Sets the name attribute on the input element.

    \n", "line": 87, "type": "string", "decorators": [] }, { "name": "placeholder", "defaultValue": "this.i18n.get().SEARCH.PLACEHOLDER", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the placeholder attribute on the `input` element.\n", "description": "

    Sets the placeholder attribute on the input element.

    \n", "line": 112, "type": "any", "decorators": [] }, { "name": "required", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReflects the required attribute of the `input` element.\n", "description": "

    Reflects the required attribute of the input element.

    \n", "line": 95, "type": "boolean", "decorators": [] }, { "name": "searchTitle", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTitle for the search trigger\n", "description": "

    Title for the search trigger

    \n", "line": 120, "type": "string", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSize of the search field.\n", "description": "

    Size of the search field.

    \n", "line": 57, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a loading search component.\n", "description": "

    Set to true for a loading search component.

    \n", "line": 75, "type": "boolean", "decorators": [] }, { "name": "tableSearch", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecifies whether the search component is used in the table toolbar.\n", "description": "

    Specifies whether the search component is used in the table toolbar.

    \n", "line": 83, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` search theme.", "jsdoctags": [ { "pos": 1046, "end": 1140, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 1047, "end": 1057, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

    since v5 - Use cdsLayer directive instead\nlight or dark search theme.

    \n" } ], "line": 52, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "toolbar", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a toolbar search component.\n", "description": "

    Set to true for a toolbar search component.

    \n", "line": 66, "type": "boolean", "decorators": [] }, { "name": "value", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the value attribute on the `input` element.\n", "description": "

    Sets the value attribute on the input element.

    \n", "line": 99, "type": "string", "decorators": [] } ], "outputsClass": [ { "name": "clear", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the clear button is clicked.\n", "description": "

    Emits an event when the clear button is clicked.

    \n", "line": 137, "type": "EventEmitter" }, { "name": "open", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 133, "type": "EventEmitter" }, { "name": "search", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event on enter.\n", "description": "

    Emits an event on enter.

    \n", "line": 141, "type": "EventEmitter" }, { "name": "valueChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when value is changed.\n", "description": "

    Emits an event when value is changed.

    \n", "line": 132, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "inputRef", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 143, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'input'" } ], "modifierKind": [ 170 ] }, { "name": "onTouched", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": false, "description": "

    Called when search input is blurred. Needed to properly implement ControlValueAccessor.

    \n", "line": 184, "rawdescription": "\n\nCalled when search input is blurred. Needed to properly implement `ControlValueAccessor`.\n" }, { "name": "propagateChange", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Method set in registerOnChange to propagate changes back to the form.

    \n", "line": 189, "rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n" }, { "name": "searchCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

    Variable used for creating unique ids for search components.

    \n", "line": 38, "rawdescription": "\n\nVariable used for creating unique ids for search components.\n", "modifierKind": [ 126 ] } ], "methodsClass": [ { "name": "clearSearch", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 213, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled when clear button is clicked.\n", "description": "

    Called when clear button is clicked.

    \n" }, { "name": "compositionEnd", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 285, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled when IME composition finishes.\n", "description": "

    Called when IME composition finishes.

    \n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'compositionend', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "compositionStart", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 277, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled when using IME composition.\n", "description": "

    Called when using IME composition.

    \n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'compositionstart', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "doValueChange", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 219, "deprecated": false, "deprecationMessage": "" }, { "name": "focusIn", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 263, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusin', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "focusOut", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 251, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusout', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "keyDown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 231, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onEnter", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 206, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled on enter.\n", "description": "

    Called on enter.

    \n" }, { "name": "onSearch", "args": [ { "name": "search", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 195, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled when text is written in the input.\n", "description": "

    Called when text is written in the input.

    \n", "jsdoctags": [ { "name": { "pos": 4593, "end": 4599, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "search" }, "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 4587, "end": 4592, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    The input text.

    \n" } ] }, { "name": "openSearch", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 224, "deprecated": false, "deprecationMessage": "" }, { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 169, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n", "description": "

    Sets a method in order to propagate changes back to the form.

    \n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 177, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n", "description": "

    Registers a callback to be triggered when the control has been touched.

    \n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 4139, "end": 4141, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "fn" }, "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 4133, "end": 4138, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    Callback to be triggered when the search input is touched.

    \n" } ] }, { "name": "writeValue", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 162, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThis is the initial value set to the component\n", "description": "

    This is the initial value set to the component

    \n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 3815, "end": 3820, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "value" }, "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3809, "end": 3814, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    The input value.

    \n" } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--form-item", "deprecated": false, "deprecationMessage": "", "line": 40, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-input--fluid__skeleton", "deprecated": false, "deprecationMessage": "", "line": 44, "type": "boolean", "decorators": [] } ], "hostListeners": [ { "name": "compositionend", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled when IME composition finishes.\n", "description": "

    Called when IME composition finishes.

    \n", "line": 285 }, { "name": "compositionstart", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled when using IME composition.\n", "description": "

    Called when using IME composition.

    \n", "line": 277 }, { "name": "focusin", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 263 }, { "name": "focusout", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 251 }, { "name": "keydown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 231 } ], "standalone": false, "imports": [], "description": "

    Get started with importing the module:

    \nExample :
    import { SearchModule } from 'carbon-components-angular';

    See demo

    \n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { SearchModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-search--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tEventEmitter,\n\tOutput,\n\tHostBinding,\n\tElementRef,\n\tHostListener,\n\tViewChild\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { SearchModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-search--basic)\n */\n@Component({\n\tselector: \"cds-search, ibm-search\",\n\ttemplateUrl: \"search.component.html\",\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Search,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Search implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for search components.\n\t */\n\tstatic searchCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") get containerClass() {\n\t\treturn !(this.toolbar || this.expandable);\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeletonClass() {\n\t\treturn this.skeleton && this.fluid;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` search theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Size of the search field.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t/**\n\t * Set to `true` for a disabled search input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a toolbar search component.\n\t */\n\t@Input() toolbar = false;\n\t/**\n\t * Set to `true` to make the search component expandable.\n\t * `expandable` would override `toolbar` property behaviours.\n\t */\n\t@Input() expandable = false;\n\t/**\n\t * Set to `true` for a loading search component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` to expand the toolbar search component.\n\t */\n\t@Input() active = false;\n\t/**\n\t * Specifies whether the search component is used in the table toolbar.\n\t */\n\t@Input() tableSearch = false;\n\t/**\n\t * Sets the name attribute on the `input` element.\n\t */\n\t@Input() name: string;\n\t/**\n\t * The unique id for the search component.\n\t */\n\t@Input() id = `search-${Search.searchCount}`;\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() value = \"\";\n\t/**\n\t * Sets the autocomplete attribute on the `input` element.\n\t * For reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\n\t */\n\t@Input() autocomplete = \"on\";\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label = this.i18n.get().SEARCH.LABEL;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = this.i18n.get().SEARCH.PLACEHOLDER;\n\t/**\n\t * Used to set the `title` attribute of the clear button.\n\t */\n\t@Input() clearButtonTitle = this.i18n.get().SEARCH.CLEAR_BUTTON;\n\t/**\n\t * Title for the search trigger\n\t */\n\t@Input() searchTitle = \"\";\n\t/**\n\t * Sets the aria label on the `div` element with the `search` role.\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\t/**\n\t * Emits an event when value is changed.\n\t */\n\t@Output() valueChange = new EventEmitter();\n\t@Output() open = new EventEmitter();\n\t/**\n\t * Emits an event when the clear button is clicked.\n\t */\n\t@Output() clear = new EventEmitter();\n\t/**\n\t * Emits an event on enter.\n\t */\n\t@Output() search = new EventEmitter();\n\n\t@ViewChild(\"input\") inputRef: ElementRef;\n\n\t/**\n\t * Sets `true` when composing text via IME.\n\t */\n\tprotected isComposing = false;\n\n\t/**\n\t * Creates an instance of `Search`.\n\t * @param i18n The i18n translations.\n\t */\n\tconstructor(protected elementRef: ElementRef, protected i18n: I18n) {\n\t\tSearch.searchCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the search input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/**\n\t * Called when search input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\t/**\n\t * Called when text is written in the input.\n\t * @param search The input text.\n\t */\n\tonSearch(search: string) {\n\t\tif (this.isComposing) { // check for IME use\n\t\t\treturn;\n\t\t}\n\t\tthis.value = search;\n\t\tthis.doValueChange();\n\t}\n\n\t/**\n\t * Called on enter.\n\t */\n\tonEnter() {\n\t\tthis.search.emit(this.value);\n\t}\n\n\t/**\n\t * Called when clear button is clicked.\n\t */\n\tclearSearch(): void {\n\t\tthis.value = \"\";\n\t\tthis.doValueChange();\n\t\tthis.clear.emit();\n\t}\n\n\tdoValueChange() {\n\t\tthis.propagateChange(this.value);\n\t\tthis.valueChange.emit(this.value);\n\t}\n\n\topenSearch() {\n\t\tthis.active = true;\n\t\tthis.open.emit(this.active);\n\t\tsetTimeout(() => this.inputRef.nativeElement.focus());\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\tkeyDown(event: KeyboardEvent) {\n\t\tif (this.toolbar || this.expandable) {\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\tif (this.value === \"\") {\n\t\t\t\t\tthis.active = false;\n\t\t\t\t\tthis.open.emit(this.active);\n\t\t\t\t}\n\t\t\t} else if (event.key === \"Enter\") {\n\t\t\t\tthis.openSearch();\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Escape\") {\n\t\t\tif (this.value !== \"\") {\n\t\t\t\tthis.clearSearch();\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\", [\"$event\"])\n\tfocusOut(event) {\n\t\tthis.onTouched();\n\t\tif ((this.expandable || this.toolbar) &&\n\t\t\tthis.inputRef &&\n\t\t\tthis.inputRef.nativeElement.value === \"\" &&\n\t\t\t!(this.elementRef.nativeElement as HTMLElement).contains(event.relatedTarget)) {\n\t\t\tthis.active = false;\n\t\t\tthis.open.emit(this.active);\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\", [\"$event\"])\n\tfocusIn(event) {\n\t\tthis.onTouched();\n\t\t// set input focus if search icon get focus from tab key press event.\n\t\tif ((this.expandable || this.toolbar) &&\n\t\t\tthis.inputRef && !event.relatedTarget &&\n\t\t\t!(this.elementRef.nativeElement as HTMLElement).contains(event.relatedTarget) ) {\n\t\t\tthis.openSearch();\n\t\t}\n\t}\n\n\t/**\n\t * Called when using IME composition.\n\t */\n\t@HostListener(\"compositionstart\", [\"$event\"])\n\tcompositionStart(event) {\n\t\tthis.isComposing = true;\n\t}\n\n\t/**\n\t * Called when IME composition finishes.\n\t */\n\t@HostListener(\"compositionend\", [\"$event\"])\n\tcompositionEnd(event) {\n\t\tthis.isComposing = false;\n\t\tthis.onSearch(this.value + event.data);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "

    Creates an instance of Search.

    \n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 148, "rawdescription": "\n\nCreates an instance of `Search`.\n", "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": { "pos": 3616, "end": 3620, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "i18n" }, "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3610, "end": 3615, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    The i18n translations.

    \n" } ] }, "extends": [], "implements": [ "ControlValueAccessor" ], "accessors": { "containerClass": { "name": "containerClass", "getSignature": { "name": "containerClass", "type": "", "returnType": "", "line": 40 } }, "fluidSkeletonClass": { "name": "fluidSkeletonClass", "getSignature": { "name": "fluidSkeletonClass", "type": "", "returnType": "", "line": 44 } } }, "templateData": "\n\t\n\t\t{{ !skeleton ? label : ''}}\n\t\n\n\t
    \n\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t{{ clearButtonTitle }}\n\t\t\n\t\n
    \n" }, { "name": "Select", "id": "component-Select-1e2d51c6aa5587000b16796804ed1f037899fa0a087b582a31939dce30d877ec70027b593f8dd0a00a6ecb3c6f4407523beb9a9199b9e9f32c5171a66f733cbd", "file": "src/select/select.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: Select, multi: true\n}" } ], "selector": "cds-select, ibm-select", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t
    \n\t\t
    \n\t    \n\t\n\t\t
    \n\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t    \n\t\n\t\t\n\t\t\t{{label}}\n\t\t\t\n\t\t\n\t\t
    \n\t\t\t\n\t\t
    \n\t\t\n\t\t\t{{helperText}}\n\t\t\t\n\t\t
    \n\t
    \n
    \n\n\n\n\t
    \n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t
    \n\t\t\t\n\t\t\t\t{{invalidText}}\n\t\t\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t\t\t{{warnText}}\n\t\t\t\t\n\t\t\t
    \n\t\t\n\t\n\t\n\t\t\n\t\t\t{{invalidText}}\n\t\t\t\n\t\t\n\t\t
    \n\t\t\t{{warnText}}\n\t\t\t\n\t\t
    \n\t    \n    \n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "line": 240, "type": "string", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to true to disable component.\n", "description": "

    Set to true to disable component.

    \n", "line": 221, "type": "boolean", "decorators": [] }, { "name": "display", "defaultValue": "\"default\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n`inline` or `default` select displays\n", "description": "

    inline or default select displays

    \n", "line": 189, "type": "\"inline\" | \"default\"", "decorators": [] }, { "name": "fluid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExperimental: enable fluid state\n", "description": "

    Experimental: enable fluid state

    \n", "line": 245, "type": "boolean", "decorators": [] }, { "name": "helperText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional helper text that appears under the label.\n", "description": "

    Optional helper text that appears under the label.

    \n", "line": 197, "type": "string | TemplateRef", "decorators": [] }, { "name": "id", "defaultValue": "`select-${Select.selectCount++}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the unique ID. Defaults to `select-${total count of selects instantiated}`\n", "description": "

    Sets the unique ID. Defaults to select-${total count of selects instantiated}

    \n", "line": 213, "type": "string", "decorators": [] }, { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for an invalid select component.\n", "description": "

    Set to true for an invalid select component.

    \n", "line": 229, "type": "boolean", "decorators": [] }, { "name": "invalidText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the invalid text.\n", "description": "

    Sets the invalid text.

    \n", "line": 201, "type": "string | TemplateRef", "decorators": [] }, { "name": "label", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nLabel for the select. Appears above the input.\n", "description": "

    Label for the select. Appears above the input.

    \n", "line": 193, "type": "string | TemplateRef", "decorators": [] }, { "name": "readonly", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for readonly state.\n", "description": "

    Set to true for readonly state.

    \n", "line": 233, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nNumber input field render size\n", "description": "

    Number input field render size

    \n", "line": 217, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to true for a loading select.\n", "description": "

    Set to true for a loading select.

    \n", "line": 225, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` select theme", "jsdoctags": [ { "pos": 7049, "end": 7142, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 7050, "end": 7060, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

    since v5 - Use cdsLayer directive instead\nlight or dark select theme

    \n" } ], "line": 239, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "value", "deprecated": false, "deprecationMessage": "", "line": 170, "type": "any", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n", "description": "

    Set to true to show a warning (contents set by warningText)

    \n", "line": 205, "type": "boolean", "decorators": [] }, { "name": "warnText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the warning text\n", "description": "

    Sets the warning text

    \n", "line": 209, "type": "string | TemplateRef", "decorators": [] } ], "outputsClass": [ { "name": "valueChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 247, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "focused", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 251 }, { "name": "select", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 249, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'select'" } ], "modifierKind": [ 170 ] }, { "name": "selectCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

    Tracks the total number of selects instantiated. Used to generate unique IDs

    \n", "line": 184, "rawdescription": "\n\nTracks the total number of selects instantiated. Used to generate unique IDs\n", "modifierKind": [ 126 ] } ], "methodsClass": [ { "name": "focusOut", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 308, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nListens for the host blurring, and notifies the model\n", "description": "

    Listens for the host blurring, and notifies the model

    \n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusout'" } ], "modifierKind": [ 170 ] }, { "name": "handleFocus", "args": [ { "name": "event", "type": "FocusEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 336, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "FocusEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 312, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onChange", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 298, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles the change event from the `select`.\nSends events to the change handler and emits a `selected` event.\n", "description": "

    Handles the change event from the select.\nSends events to the change handler and emits a selected event.

    \n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onKeyDown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 326, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onMouseDown", "args": [ { "name": "event", "type": "MouseEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 316, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "MouseEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 276, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRegisters a listener that notifies the model when the control updates\n", "description": "

    Registers a listener that notifies the model when the control updates

    \n", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 283, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRegisters a listener that notifies the model when the control is blurred\n", "description": "

    Registers a listener that notifies the model when the control is blurred

    \n", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "setDisabledState", "args": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 290, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the disabled state through the model\n", "description": "

    Sets the disabled state through the model

    \n", "jsdoctags": [ { "name": "isDisabled", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "writeValue", "args": [ { "name": "obj", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 269, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReceives a value from the model.\n", "description": "

    Receives a value from the model.

    \n", "jsdoctags": [ { "name": "obj", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "focusout", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nListens for the host blurring, and notifies the model\n", "description": "

    Listens for the host blurring, and notifies the model

    \n", "line": 308 } ], "standalone": false, "imports": [], "description": "

    cds-select provides a styled select component. Get started with importing the module:

    \nExample :
    import { SelectModule } from 'carbon-components-angular';
    Example :
    <cds-select [(ngModel)]="model">\n    <option value="default" disabled selected hidden>Choose an option</option>\n    <option value="option1">Option 1</option>\n    <option value="option2">Option 2</option>\n    <option value="option3">Option 3</option>\n</cds-select>\n    ```\n\n[See demo](../../?path=/story/components-select--basic)
    ", "rawdescription": "\n\n`cds-select` provides a styled `select` component. Get started with importing the module:\n\n```typescript\nimport { SelectModule } from 'carbon-components-angular';\n```\n\n```html\n\n\t\n\t\n\t\n\t\n\n\t```\n\n[See demo](../../?path=/story/components-select--basic)\n", "type": "component", "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tElementRef,\n\tInput,\n\tOutput,\n\tHostListener,\n\tEventEmitter,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/**\n * `cds-select` provides a styled `select` component. Get started with importing the module:\n *\n * ```typescript\n * import { SelectModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * \n * \t\n * \t\n *\t\n * \t\n * \n *\t```\n *\n * [See demo](../../?path=/story/components-select--basic)\n */\n@Component({\n\tselector: \"cds-select, ibm-select\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t    \n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{label}}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t{{helperText}}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\t{{invalidText}}\n\t\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t{{warnText}}\n\t\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{invalidText}}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t{{warnText}}\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t    \n\t\t    \n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Select,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Select implements ControlValueAccessor, AfterViewInit {\n\t@Input() set value(v) {\n\t\tthis._value = v;\n\t\tif (this.select) {\n\t\t\tthis.select.nativeElement.value = this._value;\n\t\t}\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Tracks the total number of selects instantiated. Used to generate unique IDs\n\t */\n\tstatic selectCount = 0;\n\n\t/**\n\t * `inline` or `default` select displays\n\t */\n\t@Input() display: \"inline\" | \"default\" = \"default\";\n\t/**\n\t * Label for the select. Appears above the input.\n\t */\n\t@Input() label: string | TemplateRef;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef;\n\t/**\n\t * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`\n\t */\n\t@Input() id = `select-${Select.selectCount++}`;\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to true to disable component.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to true for a loading select.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid select component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` select theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\n\t@Output() valueChange = new EventEmitter();\n\n\t@ViewChild(\"select\") select: ElementRef;\n\n\tfocused = false;\n\n\tprotected _value;\n\n\tngAfterViewInit() {\n\t\tif (\n\t\t\tthis.value !== undefined &&\n\t\t\tthis.value !== null &&\n\t\t\tthis.select &&\n\t\t\tthis.select.nativeElement.value !== this.value\n\t\t) {\n\t\t\tthis.select.nativeElement.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Receives a value from the model.\n\t */\n\twriteValue(obj: any) {\n\t\tthis.value = obj;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control updates\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeHandler = fn;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control is blurred\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedHandler = fn;\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Handles the change event from the `select`.\n\t * Sends events to the change handler and emits a `selected` event.\n\t */\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.onChangeHandler(event.target.value);\n\t\tthis.valueChange.emit(event.target.value);\n\t}\n\n\t/**\n\t * Listens for the host blurring, and notifies the model\n\t */\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouchedHandler();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tonMouseDown(event: MouseEvent) {\n\t\t/**\n\t\t * This prevents the select from opening with mouse\n\t\t */\n\t\tif (this.readonly) {\n\t\t\tevent.preventDefault();\n\t\t\t(event.target).focus();\n\t\t}\n\t}\n\n\tonKeyDown(event: KeyboardEvent) {\n\t\tconst selectAccessKeys = [\"ArrowDown\", \"ArrowUp\", \"ArrowLeft\", \"ArrowRight\", \" \"];\n\t\t/**\n\t\t * This prevents the select from opening for the above keys\n\t\t */\n\t\tif (this.readonly && selectAccessKeys.includes(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis.focused = event.type === \"focus\";\n\t}\n\n\t/**\n\t * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`\n\t */\n\tprotected onChangeHandler = (_: any) => { };\n\tprotected onTouchedHandler = () => { };\n\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "ControlValueAccessor", "AfterViewInit" ], "accessors": { "value": { "name": "value", "setSignature": { "name": "value", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 170, "jsdoctags": [ { "name": "v", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "value", "type": "", "returnType": "", "line": 177 } } } }, { "name": "SelectionTile", "id": "component-SelectionTile-8f40151ae0816410c94002d9320fe37ae626c74f8cfdefaf52bac1e1ba0202ef8090bc1d9e58b2c2776c9deca2f5eeb699bc52c55947f6a008a318e3d88d879c", "file": "src/tiles/selection-tile.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-selection-tile, ibm-selection-tile", "styleUrls": [], "styles": [], "template": "\n\n\t
    \n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t
    \n\t
    \n\t\t\n\t
    \n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to disable the selection tile.\n", "description": "

    Set to true to disable the selection tile.

    \n", "line": 92, "type": "boolean", "decorators": [] }, { "name": "id", "defaultValue": "`tile-${SelectionTile.tileCount}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe unique id for the input.\n", "description": "

    The unique id for the input.

    \n", "line": 62, "type": "string", "decorators": [] }, { "name": "selected", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUpdating the state of the input to match the state of the parameter passed in.\nSet to `true` if this tile should be selected.\n", "description": "

    Updating the state of the input to match the state of the parameter passed in.\nSet to true if this tile should be selected.

    \n", "line": 68, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style", "jsdoctags": [ { "pos": 1317, "end": 1421, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 1318, "end": 1328, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

    since v5 - Use cdsLayer directive instead\nSet to "light" to apply the light style

    \n" } ], "line": 57, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "value", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe value for the tile. Returned via `ngModel` or `selected` event on the containing `TileGroup`.\n", "description": "

    The value for the tile. Returned via ngModel or selected event on the containing TileGroup.

    \n", "line": 83, "type": "string", "decorators": [] } ], "outputsClass": [ { "name": "change", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nInternal event used to notify the containing `TileGroup` of changes.\n", "description": "

    Internal event used to notify the containing TileGroup of changes.

    \n", "line": 87, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "i18n", "deprecated": false, "deprecationMessage": "", "type": "I18n", "optional": false, "description": "", "line": 111, "modifierKind": [ 125 ] }, { "name": "input", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 105, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'input', {static: true}" } ], "modifierKind": [ 170 ] }, { "name": "multiple", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Defines whether or not the SelectionTile supports selecting multiple tiles as opposed to single\ntile selection.

    \n", "line": 102, "rawdescription": "\n\nDefines whether or not the `SelectionTile` supports selecting multiple tiles as opposed to single\ntile selection.\n" }, { "name": "name", "defaultValue": "\"tile-group-unbound\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "

    Set by the containing TileGroup. Used for the name property on the input.

    \n", "line": 97, "rawdescription": "\n\nSet by the containing `TileGroup`. Used for the `name` property on the input.\n" }, { "name": "tileCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 51, "modifierKind": [ 126 ] } ], "methodsClass": [ { "name": "keyboardInput", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 124, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onChange", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 131, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [ { "name": "keydown", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 124 } ], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewChild,\n\tHostListener,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n@Component({\n\tselector: \"cds-selection-tile, ibm-selection-tile\",\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t\n\t`\n})\nexport class SelectionTile implements AfterViewInit {\n\tstatic tileCount = 0;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * The unique id for the input.\n\t */\n\t@Input() id = `tile-${SelectionTile.tileCount}`;\n\n\t/**\n\t * Updating the state of the input to match the state of the parameter passed in.\n\t * Set to `true` if this tile should be selected.\n\t */\n\t@Input() set selected(value: boolean) {\n\t\t// If an initial selected value is set before input exists, we save\n\t\t// the value and check again when input exists in `AfterViewInit`.\n\t\tthis._selected = value ? true : null;\n\t\tif (this.input) {\n\t\t\tthis.input.nativeElement.checked = this._selected;\n\t\t}\n\t}\n\n\tget selected() {\n\t\treturn this.input ? this.input.nativeElement.checked : false;\n\t}\n\t/**\n\t * The value for the tile. Returned via `ngModel` or `selected` event on the containing `TileGroup`.\n\t */\n\t@Input() value: string;\n\t/**\n\t * Internal event used to notify the containing `TileGroup` of changes.\n\t */\n\t@Output() change: EventEmitter = new EventEmitter();\n\n\t/**\n\t * Set to `true` to disable the selection tile.\n\t */\n\t@Input() disabled = false;\n\n\t/**\n\t * Set by the containing `TileGroup`. Used for the `name` property on the input.\n\t */\n\tname = \"tile-group-unbound\";\n\t/**\n\t * Defines whether or not the `SelectionTile` supports selecting multiple tiles as opposed to single\n\t * tile selection.\n\t */\n\tmultiple = true;\t// Set to true because of the way tile group sets it up.\n\t\t\t\t\t\t// If it is first undefined then set to true, the type will change from radio to checkbox and deselects the inputs.\n\n\t@ViewChild(\"input\", { static: true }) input;\n\n\t// If an initial selected value is set before input exists, we save\n\t// the value and check again when input exists in `AfterViewInit`.\n\tprotected _selected = null;\n\n\tconstructor(public i18n: I18n) {\n\t\tSelectionTile.tileCount++;\n\t}\n\n\tngAfterViewInit() {\n\t\tif (this.input) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.input.nativeElement.checked = this._selected;\n\t\t\t});\n\t\t}\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\tkeyboardInput(event) {\n\t\tif (event.key === \"Enter\" || event.key === \"Spacebar\" || event.key === \" \") {\n\t\t\tthis.selected = !this.selected;\n\t\t\tthis.change.emit(event);\n\t\t}\n\t}\n\n\tonChange(event) {\n\t\tthis.change.emit(event);\n\t}\n}\n\n\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 109, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AfterViewInit" ], "accessors": { "selected": { "name": "selected", "setSignature": { "name": "selected", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 68, "rawdescription": "\n\nUpdating the state of the input to match the state of the parameter passed in.\nSet to `true` if this tile should be selected.\n", "description": "

    Updating the state of the input to match the state of the parameter passed in.\nSet to true if this tile should be selected.

    \n", "jsdoctags": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "selected", "type": "", "returnType": "", "line": 77 } } } }, { "name": "SideNav", "id": "component-SideNav-6ce82417fce75681aad2fef673a42b9263d40532de80989b047515ecfabe6ae2ecddc25dea6fd306bcd6aad713be9eb4e706967645eb6160c7510eabe04bc5e7", "file": "src/ui-shell/sidenav/sidenav.component.ts", "encapsulation": [ "ViewEncapsulation.None" ], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-sidenav, ibm-sidenav", "styleUrls": [], "styles": [], "template": "\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "allowExpansion", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 97, "type": "boolean", "decorators": [] }, { "name": "ariaLabel", "defaultValue": "\"Side navigation\"", "deprecated": false, "deprecationMessage": "", "line": 86, "type": "string", "decorators": [] }, { "name": "expanded", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the expanded (`true`) or collapsed (`false`) state when on a small screen.\n", "description": "

    Controls the expanded (true) or collapsed (false) state when on a small screen.

    \n", "line": 90, "type": "boolean", "decorators": [] }, { "name": "hidden", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the hidden (`true`) or visible (`false`) state\n", "description": "

    Controls the hidden (true) or visible (false) state

    \n", "line": 94, "type": "boolean", "decorators": [] }, { "name": "navigationItems", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nNavigationItems from the header navigation component which are displayed on the sidenav when the window\ninnerWidth is small enough. Sidenav items and menus are created using the model used to create header\nnavigation items.\n", "description": "

    NavigationItems from the header navigation component which are displayed on the sidenav when the window\ninnerWidth is small enough. Sidenav items and menus are created using the model used to create header\nnavigation items.

    \n", "line": 104, "type": "NavigationItem[]", "decorators": [] }, { "name": "rail", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 95, "type": "boolean", "decorators": [] }, { "name": "useRouter", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUse the routerLink attribute on tag for navigation instead of using event handlers\n", "description": "

    Use the routerLink attribute on tag for navigation instead of using event handlers

    \n", "line": 109, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "hostClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 85, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--side-nav'" } ], "modifierKind": [ 170 ] }, { "name": "i18n", "deprecated": false, "deprecationMessage": "", "type": "I18n", "optional": false, "description": "", "line": 111, "modifierKind": [ 125 ] }, { "name": "ux", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 96, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--side-nav__navigation'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "toggle", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 113, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--side-nav", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 85, "type": "boolean", "decorators": [] }, { "name": "class.cds--side-nav__navigation", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 96, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Sidenav is a fixed left navigation that may contain SideNavItems or SideNavMenus

    \n

    See demo

    \n", "rawdescription": "\n\n`Sidenav` is a fixed left navigation that may contain `SideNavItem`s or `SideNavMenu`s\n\n[See demo](../../?path=/story/components-ui-shell--side-navigation)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tViewEncapsulation\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NavigationItem } from \"../header/header-navigation-items.interface\";\n\n/**\n * `Sidenav` is a fixed left navigation that may contain `SideNavItem`s or `SideNavMenu`s\n *\n * [See demo](../../?path=/story/components-ui-shell--side-navigation)\n */\n@Component({\n\tselector: \"cds-sidenav, ibm-sidenav\",\n\ttemplate: `\n\t\t\n\t`,\n\tencapsulation: ViewEncapsulation.None\n})\nexport class SideNav {\n\t@HostBinding(\"class.cds--side-nav\") hostClass = true;\n\t@Input() ariaLabel = \"Side navigation\";\n\t/**\n\t * Controls the expanded (`true`) or collapsed (`false`) state when on a small screen.\n\t */\n\t@HostBinding(\"class.cds--side-nav--expanded\") @Input() expanded = true;\n\t/**\n\t * Controls the hidden (`true`) or visible (`false`) state\n\t */\n\t@HostBinding(\"class.cds--side-nav--hidden\") @Input() hidden = false;\n\t@HostBinding(\"class.cds--side-nav--rail\") @Input() rail = false;\n\t@HostBinding(\"class.cds--side-nav__navigation\") ux = true;\n\t@Input() allowExpansion = false;\n\n\t/**\n\t * NavigationItems from the header navigation component which are displayed on the sidenav when the window\n\t * innerWidth is small enough. Sidenav items and menus are created using the model used to create header\n\t * navigation items.\n\t */\n\t@Input() navigationItems: NavigationItem[];\n\n\t/**\n\t * Use the routerLink attribute on tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = false;\n\n\tconstructor(public i18n: I18n) { }\n\n\ttoggle() {\n\t\tthis.expanded = !this.expanded;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 109, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [] }, { "name": "SideNavItem", "id": "component-SideNavItem-2fd553a6960da687324799c8741bc40ac10ea98285815a77e82e942d54d26da3598ccb87f26512947c08ff08b8dc3e8a0d81842def709ccb2406643267b96e2f", "file": "src/ui-shell/sidenav/sidenav-item.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-sidenav-item, ibm-sidenav-item", "styleUrls": [], "styles": [ "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t" ], "template": "\n\t\n\n\n\n\t\n\t\t\n\t\n\n\n\n\t
    \n\t\t\n\t
    \n\t\n\t\t\n\t\n    \n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "active", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nToggles the active (current page) state for the link.\n", "description": "

    Toggles the active (current page) state for the link.

    \n", "line": 91, "type": "boolean", "decorators": [] }, { "name": "href", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nLink for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n", "description": "

    Link for the item. NOTE: do not pass unsafe or untrusted values, this has the potential to open you up to XSS attacks

    \n", "line": 63, "type": "string", "decorators": [] }, { "name": "isSubMenu", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 99, "type": "boolean", "decorators": [] }, { "name": "route", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nArray of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate\n", "description": "

    Array of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate

    \n", "line": 97, "type": "any[]", "decorators": [] }, { "name": "routeExtras", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRouter options. Used in conjunction with `route`\nSee: https://angular.io/api/router/Router#navigate\n", "description": "

    Router options. Used in conjunction with route\nSee: https://angular.io/api/router/Router#navigate

    \n", "line": 105, "type": "any", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTitle attribute of the anchor element.\n", "description": "

    Title attribute of the anchor element.

    \n", "line": 110, "type": "string", "decorators": [] }, { "name": "useRouter", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUse the routerLink attribute on tag for navigation instead of using event handlers\n", "description": "

    Use the routerLink attribute on tag for navigation instead of using event handlers

    \n", "line": 78, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "navigation", "defaultValue": "new EventEmitter>()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the navigation status promise when the link is activated\n", "description": "

    Emits the navigation status promise when the link is activated

    \n", "line": 115, "type": "EventEmitter" }, { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits when `active` input is changed. This is mainly used to indicate to any parent menu items that a\nchild sidenav item is active or not active.\n", "description": "

    Emits when active input is changed. This is mainly used to indicate to any parent menu items that a\nchild sidenav item is active or not active.

    \n", "line": 121, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 123, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "navigate", "args": [ { "name": "event", "type": "MouseEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 135, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "MouseEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "line": 123, "type": "string", "decorators": [] }, { "name": "class.cds--side-nav__item", "deprecated": false, "deprecationMessage": "", "line": 80, "type": "boolean", "decorators": [] }, { "name": "class.cds--side-nav__menu-item", "deprecated": false, "deprecationMessage": "", "line": 84, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    SideNavItem can either be a child of SideNav or SideNavMenu

    \n", "rawdescription": "\n\n`SideNavItem` can either be a child of `SideNav` or `SideNavMenu`\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOptional,\n\tOutput,\n\tEventEmitter,\n\tOnChanges,\n\tHostBinding,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\n\n/**\n * `SideNavItem` can either be a child of `SideNav` or `SideNavMenu`\n */\n@Component({\n\tselector: \"cds-sidenav-item, ibm-sidenav-item\",\n\ttemplate: `\n\t\t    \n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t    \n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t`]\n})\nexport class SideNavItem implements OnChanges {\n\t/**\n\t * Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n\t */\n\t@Input() set href(v: string) {\n\t\t// Needed when component is created dynamically with a model.\n\t\tif (v === undefined) {\n\t\t\treturn;\n\t\t}\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t/**\n\t * Use the routerLink attribute on tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = false;\n\n\t@HostBinding(\"class.cds--side-nav__item\") get sideNav() {\n\t\treturn !this.isSubMenu;\n\t}\n\n\t@HostBinding(\"class.cds--side-nav__menu-item\") get menuItem() {\n\t\treturn this.isSubMenu;\n\t}\n\n\t/**\n\t * Toggles the active (current page) state for the link.\n\t */\n\t@Input() active = false;\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t@Input() isSubMenu = false;\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Title attribute of the anchor element.\n\t */\n\t@Input() title: string;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter>();\n\n\t/**\n\t * Emits when `active` input is changed. This is mainly used to indicate to any parent menu items that a\n\t * child sidenav item is active or not active.\n\t */\n\t@Output() selected = new EventEmitter();\n\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\tprotected _href = \"#\";\n\n\tconstructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) {}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.active) {\n\t\t\tthis.selected.emit(this.active);\n\t\t}\n\t}\n\n\tnavigate(event: MouseEvent) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t} else if (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "domSanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "" }, { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "" } ], "line": 125, "jsdoctags": [ { "name": "domSanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnChanges" ], "accessors": { "href": { "name": "href", "setSignature": { "name": "href", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 63, "rawdescription": "\n\nLink for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n", "description": "

    Link for the item. NOTE: do not pass unsafe or untrusted values, this has the potential to open you up to XSS attacks

    \n", "jsdoctags": [ { "name": "v", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "href", "type": "", "returnType": "", "line": 71 } }, "sideNav": { "name": "sideNav", "getSignature": { "name": "sideNav", "type": "", "returnType": "", "line": 80 } }, "menuItem": { "name": "menuItem", "getSignature": { "name": "menuItem", "type": "", "returnType": "", "line": 84 } } } }, { "name": "SideNavMenu", "id": "component-SideNavMenu-367a6d1f9a7d1546e5cc731dced52c8b64c395628932b674b0c178bc917de90f4b8fe173667fcb753f5d570ce323e93c82929fe0dde2d1bcef628209f2ae676b", "file": "src/ui-shell/sidenav/sidenav-menu.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-sidenav-menu, ibm-sidenav-menu", "styleUrls": [], "styles": [], "template": "\n\t
    \n\t\t\n\t
    \n\t{{title}}\n\t
    \n\t\t\n\t\t\t\n\t\t\n\t
    \n\n
    \n\t\n\t\n\t\t\n\t\t\t{{ menuItem.content }}\n\t\t\n\t\n
    \n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "expanded", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the visibility of the child `SideNavItem`s\n", "description": "

    Controls the visibility of the child SideNavItems

    \n", "line": 79, "type": "boolean", "decorators": [] }, { "name": "hasActiveChild", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the active status indicator on the menu if there is an active\nchild sidenav item.\n", "description": "

    Controls the active status indicator on the menu if there is an active\nchild sidenav item.

    \n", "line": 84, "type": "boolean", "decorators": [] }, { "name": "menuItems", "deprecated": false, "deprecationMessage": "", "line": 86, "type": "SideNavItemInterface[]", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHeading for the group\n", "description": "

    Heading for the group

    \n", "line": 75, "type": "string", "decorators": [] }, { "name": "useRouter", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUse the routerLink attribute on     tag for navigation instead of using event handlers\n", "description": "

    Use the routerLink attribute on tag for navigation instead of using event handlers

    \n", "line": 70, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "navItem", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 60, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--side-nav__item'" } ], "modifierKind": [ 170 ] }, { "name": "navItemIcon", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 61, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--side-nav__item--icon'" } ], "modifierKind": [ 170 ] }, { "name": "role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 65, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] }, { "name": "sidenavItems", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "", "line": 88, "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "SideNavItem" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "toggle", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 120, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "line": 65, "type": "string", "decorators": [] }, { "name": "class.cds--side-nav__item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 60, "type": "boolean", "decorators": [] }, { "name": "class.cds--side-nav__item--active", "deprecated": false, "deprecationMessage": "", "line": 62, "type": "boolean", "decorators": [] }, { "name": "class.cds--side-nav__item--icon", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 61, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    SideNavMenu provides a method to group SideNavItems under a common heading.

    \n", "rawdescription": "\n\n`SideNavMenu` provides a method to group `SideNavItem`s under a common heading.\n", "type": "component", "sourceCode": "import {\n\tAfterContentInit,\n\tComponent,\n\tContentChildren,\n\tInput,\n\tQueryList,\n\tOnDestroy,\n\tHostBinding\n} from \"@angular/core\";\nimport { SideNavItem } from \"./sidenav-item.component\";\nimport { Subscription } from \"rxjs\";\nimport { SideNavItemInterface } from \"./sidenav-item.interface\";\n\n/**\n * `SideNavMenu` provides a method to group `SideNavItem`s under a common heading.\n */\n@Component({\n\tselector: \"cds-sidenav-menu, ibm-sidenav-menu\",\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t\t{{title}}\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t\n\t\t
    \n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{ menuItem.content }}\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t`\n})\nexport class SideNavMenu implements AfterContentInit, OnDestroy {\n\t@HostBinding(\"class.cds--side-nav__item\") navItem = true;\n\t@HostBinding(\"class.cds--side-nav__item--icon\") navItemIcon = true;\n\t@HostBinding(\"class.cds--side-nav__item--active\") get navItemActive() {\n\t\treturn this.hasActiveChild;\n\t}\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\t/**\n\t * Use the routerLink attribute on     tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = false;\n\n\t/**\n\t * Heading for the group\n\t */\n\t@Input() title: string;\n\t/**\n\t * Controls the visibility of the child `SideNavItem`s\n\t */\n\t@Input() expanded = false;\n\t/**\n\t * Controls the active status indicator on the menu if there is an active\n\t * child sidenav item.\n\t */\n\t@Input() hasActiveChild = false;\n\n\t@Input() menuItems: SideNavItemInterface[];\n\n\t@ContentChildren(SideNavItem) sidenavItems: QueryList;\n\n\tprotected activeItemsSubscription = new Subscription();\n\n\tngAfterContentInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.sidenavItems.forEach(item => {\n\t\t\t\titem.isSubMenu = true;\n\t\t\t\tthis.findActiveChildren();\n\t\t\t\tconst activeItemSubscription = item.selected.subscribe(() => {\n\t\t\t\t\tthis.findActiveChildren();\n\t\t\t\t});\n\t\t\t\tthis.activeItemsSubscription.add(activeItemSubscription);\n\t\t\t});\n\n\t\t\tthis.sidenavItems.changes.subscribe(() => {\n\t\t\t\tthis.sidenavItems.forEach(item => {\n\t\t\t\t\titem.isSubMenu = true;\n\t\t\t\t\tthis.findActiveChildren();\n\t\t\t\t\tconst activeItemSubscription = item.selected.subscribe(() => {\n\t\t\t\t\t\tthis.findActiveChildren();\n\t\t\t\t\t});\n\t\t\t\t\tthis.activeItemsSubscription.add(activeItemSubscription);\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\tngOnDestroy() {\n\t\tthis.activeItemsSubscription.unsubscribe();\n\t}\n\n\ttoggle() {\n\t\tthis.expanded = !this.expanded;\n\t}\n\n\tprotected findActiveChildren() {\n\t\tthis.hasActiveChild = this.sidenavItems.some(item => item.active);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "AfterContentInit", "OnDestroy" ], "accessors": { "navItemActive": { "name": "navItemActive", "getSignature": { "name": "navItemActive", "type": "", "returnType": "", "line": 62 } } } }, { "name": "SkeletonPlaceholder", "id": "component-SkeletonPlaceholder-377bbc8c272be0fa7970f651476f0fcea85cd274019b3398f6b5ca5adadc0d9460f9d1b73dead4e29571691909a42ad88fc1a77403779bd1f0a2659d6229cba8", "file": "src/skeleton/skeleton-placeholder.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-skeleton-placeholder, ibm-skeleton-placeholder", "styleUrls": [], "styles": [], "template": "
    ", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Get started with importing the module:

    \nExample :
    import { SkeletonModule } from 'carbon-components-angular';

    See demo

    \n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { SkeletonModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-skeleton--basic)\n", "type": "component", "sourceCode": "import { Component } from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { SkeletonModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-skeleton--basic)\n */\n@Component({\n\tselector: \"cds-skeleton-placeholder, ibm-skeleton-placeholder\",\n\ttemplate: `\n\t\t
    `\n})\nexport class SkeletonPlaceholder { }\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "SkeletonTableStory", "id": "component-SkeletonTableStory-27a5a8195f949bc76ab44a9d3393ec3c7e9250b3817a6241080d9ddfbd7dcb6b9e152d5e1b183503e2c6112ddee8727b130ee53bf09a6a61134a5d8f39e07cc6", "file": "src/table/stories/app-skeleton-table.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-skeleton-table", "styleUrls": [], "styles": [], "template": "\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 23, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 25, "type": "boolean", "decorators": [] }, { "name": "skeletonModel", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "any", "decorators": [] }, { "name": "striped", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 24, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOnInit,\n\tInput\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { Table } from \"../index\";\n\n@Component({\n\tselector: \"app-skeleton-table\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class SkeletonTableStory implements OnInit {\n\t@Input() size = \"md\";\n\t@Input() striped = false;\n\t@Input() skeleton = true;\n\t@Input() skeletonModel = new TableModel();\n\n\tngOnInit() {\n\t\t// Creates an empty table with 5 rows and 5 columns\n\t\tthis.skeletonModel = Table.skeletonModel(5, 5);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "OnInit" ] }, { "name": "SkeletonText", "id": "component-SkeletonText-7a43af7e6361e5cf7cc7e7267f920fa4c95e5ef78e8217530ecc2acc30bb363286b47ef200e364fceb080db1a38540ac12706e31c0b059bfbb8da69f25f07cbd", "file": "src/skeleton/skeleton-text.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-skeleton-text, ibm-skeleton-text", "styleUrls": [], "styles": [], "template": "\n

    \n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "lines", "defaultValue": "5", "deprecated": false, "deprecationMessage": "", "line": 14, "type": "number", "decorators": [] }, { "name": "maxLineWidth", "defaultValue": "300", "deprecated": false, "deprecationMessage": "", "line": 18, "type": "number", "decorators": [] }, { "name": "minLineWidth", "defaultValue": "100", "deprecated": false, "deprecationMessage": "", "line": 16, "type": "number", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "lineWidths", "deprecated": false, "deprecationMessage": "", "type": "Array", "optional": false, "description": "", "line": 20 } ], "methodsClass": [ { "name": "getRandomInt", "args": [ { "name": "min", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "max", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "string", "typeParameters": [], "line": 25, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns a random width in pixels based off a min width, and a max width.\n", "description": "

    Returns a random width in pixels based off a min width, and a max width.

    \n", "jsdoctags": [ { "name": "min", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "max", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input, OnChanges } from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-skeleton-text, ibm-skeleton-text\",\n\ttemplate: `\n\t\t\n\t\t

    \n\t`\n})\nexport class SkeletonText implements OnChanges {\n\t@Input() lines = 5;\n\n\t@Input() minLineWidth = 100;\n\n\t@Input() maxLineWidth = 300;\n\n\tlineWidths: Array;\n\n\t/**\n\t * Returns a random width in pixels based off a min width, and a max width.\n\t */\n\tgetRandomInt(min, max) {\n\t\treturn `${Math.floor(Math.random() * (max - min + 1) + min) + \"px\"}`;\n\t}\n\n\tngOnChanges() {\n\t\t// Creates an array of length defined by input lines with content from\n\t\t// 0 to lines - 1, maps each value to a random width in pixels.\n\t\tthis.lineWidths =\n\t\t\tArray.from(Array(this.lines).keys())\n\t\t\t\t.map(num => this.getRandomInt(this.minLineWidth, this.maxLineWidth));\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "OnChanges" ] }, { "name": "Slider", "id": "component-Slider-d693d6239eb9329e774b057ed68047aa6b6a6f493428bb2c230e0bbc06c0fbba7bd493dd21826c42cdaa6de0433d5fb03669ee4de1eac9d7ec1cad7c50568660", "file": "src/slider/slider.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: Slider, multi: true\n}" } ], "selector": "cds-slider, ibm-slider", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t{{label}}\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\n\t\t\t    \n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t 0 ? '-' + i : '')\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t(mousedown)=\"onMouseDown($event, i)\"\n\t\t\t\t\t\t(keydown)=\"onKeyDown($event, i)\">\n\t\t\t\t\t
    \n\t\t\t\t\n\t\t\t    \n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\n    \n\n\n\t\n\t
    \n\t\t\n\t\t
    \n\t\t\t
    \n\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t\t\n\t
    \n    \n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "disableArrowKeys", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nSet to `true` for a slider without arrow key interactions.", "description": "

    Set to true for a slider without arrow key interactions.

    \n", "line": 270, "type": "boolean", "decorators": [] }, { "name": "disabled", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nDisables the range visually and functionally", "description": "

    Disables the range visually and functionally

    \n", "line": 272, "type": "boolean", "decorators": [] }, { "name": "id", "defaultValue": "`slider-${Slider.count++}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nBase ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively", "description": "

    Base ID for the slider. The min and max labels get IDs ${this.id}-bottom-range and ${this.id}-top-range respectively

    \n", "line": 262, "type": "string", "decorators": [] }, { "name": "label", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nSets the text inside the `label` tag", "description": "

    Sets the text inside the label tag

    \n", "line": 268, "type": "string | TemplateRef", "decorators": [] }, { "name": "max", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nThe upper bound of our range", "description": "

    The upper bound of our range

    \n", "line": 180, "type": "number", "decorators": [] }, { "name": "min", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nThe lower bound of our range", "description": "

    The lower bound of our range

    \n", "line": 170, "type": "number", "decorators": [] }, { "name": "readonly", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nSet to `true` for a readonly state.", "description": "

    Set to true for a readonly state.

    \n", "line": 285, "type": "boolean", "decorators": [] }, { "name": "shiftMultiplier", "defaultValue": "4", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nValue used to \"multiply\" the `step` when using arrow keys to select values", "description": "

    Value used to "multiply" the step when using arrow keys to select values

    \n", "line": 264, "type": "number", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nSet to `true` for a loading slider", "description": "

    Set to true for a loading slider

    \n", "line": 266, "type": "boolean", "decorators": [] }, { "name": "step", "defaultValue": "1", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nThe interval for our range", "description": "

    The interval for our range

    \n", "line": 191, "type": "number", "decorators": [] }, { "name": "value", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nSet the initial value. Available for two way binding", "description": "

    Set the initial value. Available for two way binding

    \n", "line": 193, "type": "any", "decorators": [] } ], "outputsClass": [ { "name": "valueChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\nEmits every time a new value is selected", "description": "

    Emits every time a new value is selected

    \n", "line": 297, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "bottomRangeId", "defaultValue": "`${this.id}-bottom-range`", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 306, "modifierKind": [ 125 ] }, { "name": "filledTrack", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 302, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'filledTrack'" } ], "modifierKind": [ 170 ] }, { "name": "fractionComplete", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 308, "modifierKind": [ 125 ] }, { "name": "hostClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 298, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--form-item'" } ], "modifierKind": [ 170 ] }, { "name": "labelId", "defaultValue": "`${this.id}-label`", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 305, "modifierKind": [ 125 ] }, { "name": "onTouched", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": false, "description": "

    Callback to notify the model when our input has been touched

    \n", "line": 369, "rawdescription": "\nCallback to notify the model when our input has been touched" }, { "name": "propagateChange", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Send changes back to the model

    \n", "line": 361, "rawdescription": "\nSend changes back to the model" }, { "name": "range", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 303, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'range'" } ], "modifierKind": [ 170 ] }, { "name": "thumbs", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "", "line": 299, "decorators": [ { "name": "ViewChildren", "stringifiedArguments": "'thumbs'" } ], "modifierKind": [ 170 ] }, { "name": "topRangeId", "defaultValue": "`${this.id}-top-range`", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 307, "modifierKind": [ 125 ] }, { "name": "track", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 301, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'track'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "convertToPx", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 410, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nConverts a given \"real\" value to a px value we can update the view with", "description": "

    Converts a given "real" value to a px value we can update the view with

    \n", "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "convertToValue", "args": [ { "name": "pxAmount", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 399, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nConverts a given px value to a \"real\" value in our range", "description": "

    Converts a given px value to a "real" value in our range

    \n", "jsdoctags": [ { "name": "pxAmount", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "decrementValue", "args": [ { "name": "multiplier", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "1" }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 443, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDecrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\n", "description": "

    Decrements the value by the step value, or the step value multiplied by the multiplier argument.

    \n", "jsdoctags": [ { "name": { "pos": 12686, "end": 12696, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "multiplier" }, "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "1", "tagName": { "pos": 12677, "end": 12685, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "argument" }, "comment": "

    Defaults to 1, multiplied with the step value.

    \n" }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0", "tagName": { "text": "param" } } ] }, { "name": "getFractionComplete", "args": [ { "name": "value", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 384, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns the amount of \"completeness\" of a value as a fraction of the total track width\n", "description": "

    Returns the amount of "completeness" of a value as a fraction of the total track width

    \n", "jsdoctags": [ { "name": "value", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "incrementValue", "args": [ { "name": "multiplier", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "1" }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 433, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nIncrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\n", "description": "

    Increments the value by the step value, or the step value multiplied by the multiplier argument.

    \n", "jsdoctags": [ { "name": { "pos": 12331, "end": 12341, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "multiplier" }, "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "1", "tagName": { "pos": 12322, "end": 12330, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "argument" }, "comment": "

    Defaults to 1, multiplied with the step value.

    \n" }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0", "tagName": { "text": "param" } } ] }, { "name": "isRange", "args": [], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 451, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDetermines if the slider is in range mode.\n", "description": "

    Determines if the slider is in range mode.

    \n" }, { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 566, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onChange", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "index", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 466, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nChange handler for the optional input", "description": "

    Change handler for the optional input

    \n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "index", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onClick", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 475, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHandles clicks on the slider, and setting the value to it's \"real\" equivalent.\nWill assign the value to the closest thumb if in range mode.\n", "description": "

    Handles clicks on the slider, and setting the value to it's "real" equivalent.\nWill assign the value to the closest thumb if in range mode.

    \n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onFocus", "args": [ { "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 493, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nFocus handler for the optional input", "description": "

    Focus handler for the optional input

    \n", "jsdoctags": [ { "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onKeyDown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 550, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.\n\n", "description": "

    Calls incrementValue for ArrowRight and ArrowUp, decrementValue for ArrowLeft and ArrowDown.

    \n", "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0", "tagName": { "text": "param" } } ] }, { "name": "onMouseDown", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 532, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEnables the `onMouseMove` handler\n\n", "description": "

    Enables the onMouseMove handler

    \n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0", "tagName": { "text": "param" } } ] }, { "name": "onMouseMove", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 498, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nMouse move handler. Responsible for updating the value and visual selection based on mouse movement", "description": "

    Mouse move handler. Responsible for updating the value and visual selection based on mouse movement

    \n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onMouseUp", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 541, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nDisables the `onMouseMove` handler", "description": "

    Disables the onMouseMove handler

    \n" }, { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 364, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nRegister a change propagation function for `ControlValueAccessor`", "description": "

    Register a change propagation function for ControlValueAccessor

    \n", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 372, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nRegister a callback to notify when our input has been touched", "description": "

    Register a callback to notify when our input has been touched

    \n", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "scaleX", "args": [ { "name": "complete", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "string", "typeParameters": [], "line": 394, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nHelper function to return the CSS transform `scaleX` function", "description": "

    Helper function to return the CSS transform scaleX function

    \n", "jsdoctags": [ { "name": "complete", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "trackThumbsBy", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "item", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "number", "typeParameters": [], "line": 356, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "item", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "updateTrackRangeWidth", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 459, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRange mode only.\nUpdates the track width to span from the low thumb to the high thumb\n", "description": "

    Range mode only.\nUpdates the track width to span from the low thumb to the high thumb

    \n" }, { "name": "writeValue", "args": [ { "name": "v", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 377, "deprecated": false, "deprecationMessage": "", "rawdescription": "\nReceives a value from the model", "description": "

    Receives a value from the model

    \n", "jsdoctags": [ { "name": "v", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--form-item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 298, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Used to select from ranges of values. See here for usage information.

    \n

    Get started with importing the module:

    \nExample :
    import { SliderModule } from 'carbon-components-angular';

    The simplest possible slider usage looks something like:

    \nExample :
        <cds-slider></cds-slider>

    That will render a slider without labels or alternative value input. Labels can be provided by\nelements with [minLabel] and [maxLabel] attributes, and an input (may use the ibmInput directive) can be supplied\nfor use as an alternative value field.

    \n

    ex:

    \nExample :
    <!-- Full example -->\n<cds-slider>\n        <span minLabel>0GB</span>\n        <span maxLabel>100GB</span>\n        <input/>\n</cds-slider>\n\n<!-- with just an input -->\n<cds-slider>\n        <input/>\n</cds-slider>\n\n<!-- with just one label -->\n<cds-slider>\n        <span maxLabel>Maximum</span>\n</cds-slider>

    Slider supports NgModel by default, as well as two way binding to the value input.

    \n

    See demo

    \n", "rawdescription": "\n\nUsed to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information.\n\nGet started with importing the module:\n\n```typescript\nimport { SliderModule } from 'carbon-components-angular';\n```\n\nThe simplest possible slider usage looks something like:\n\n```html\n\t\n```\n\nThat will render a slider without labels or alternative value input. Labels can be provided by\nelements with `[minLabel]` and `[maxLabel]` attributes, and an `input` (may use the `ibmInput` directive) can be supplied\nfor use as an alternative value field.\n\nex:\n\n```html\n\n\n\t\t0GB\n\t\t100GB\n\t\t\n\n\n\n\n\t\t\n\n\n\n\n\t\tMaximum\n\n```\n\nSlider supports `NgModel` by default, as well as two way binding to the `value` input.\n\n[See demo](../../?path=/story/components-slider--advanced)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tTemplateRef,\n\tViewChildren,\n\tQueryList,\n\tChangeDetectorRef\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { EventService } from \"carbon-components-angular/utils\";\n\n/**\n * Used to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { SliderModule } from 'carbon-components-angular';\n * ```\n *\n * The simplest possible slider usage looks something like:\n *\n * ```html\n *\t\n * ```\n *\n * That will render a slider without labels or alternative value input. Labels can be provided by\n * elements with `[minLabel]` and `[maxLabel]` attributes, and an `input` (may use the `ibmInput` directive) can be supplied\n * for use as an alternative value field.\n *\n * ex:\n *\n * ```html\n * \n * \n *\t\t0GB\n *\t\t100GB\n *\t\t\n * \n *\n * \n * \n *\t\t\n * \n *\n * \n * \n *\t\tMaximum\n * \n * ```\n *\n * Slider supports `NgModel` by default, as well as two way binding to the `value` input.\n *\n * [See demo](../../?path=/story/components-slider--advanced)\n */\n@Component({\n\tselector: \"cds-slider, ibm-slider\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t{{label}}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t    \n\t\t\t\t\t\n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t 0 ? '-' + i : '')\"\n\t\t\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t\t\tclass=\"cds--slider__thumb\"\n\t\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t\t(mousedown)=\"onMouseDown($event, i)\"\n\t\t\t\t\t\t\t\t(keydown)=\"onKeyDown($event, i)\">\n\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t    \n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t    \n\n\t\t\n\t\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t    \n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Slider,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Slider implements AfterViewInit, ControlValueAccessor {\n\t/** Used to generate unique IDs */\n\tprivate static count = 0;\n\n\t/** The lower bound of our range */\n\t@Input() set min(v) {\n\t\tif (!v) { return; }\n\t\tthis._min = v;\n\t\t// force the component to update\n\t\tthis.value = this.value;\n\t}\n\tget min() {\n\t\treturn this._min;\n\t}\n\t/** The upper bound of our range */\n\t@Input() set max(v) {\n\t\tif (!v) { return; }\n\t\tthis._max = v;\n\t\t// force the component to update\n\t\tthis.value = this.value;\n\t}\n\n\tget max() {\n\t\treturn this._max;\n\t}\n\t/** The interval for our range */\n\t@Input() step = 1;\n\t/** Set the initial value. Available for two way binding */\n\t@Input() set value(v) {\n\t\tif (!v) {\n\t\t\tv = [this.min];\n\t\t}\n\n\t\tif (typeof v === \"number\" || typeof v === \"string\") {\n\t\t\tv = [Number(v)];\n\t\t}\n\n\t\tif (v[0] < this.min) {\n\t\t\tv[0] = this.min;\n\t\t}\n\n\t\tif (v[0] > this.max) {\n\t\t\tv[0] = this.max;\n\t\t}\n\n\t\tif (this.isRange()) {\n\t\t\tif (this._previousValue[0] !== v[0]) { // left moved\n\t\t\t\tif (v[0] > v[1] - this.step) {\n\t\t\t\t\t// stop the left handle if surpassing the right one\n\t\t\t\t\tv[0] = v[1] - this.step;\n\t\t\t\t} else if (v[0] > this.max) {\n\t\t\t\t\tv[0] = this.max;\n\t\t\t\t} else if (v[0] < this.min) {\n\t\t\t\t\tv[0] = this.min;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this._previousValue[1] !== v[1]) { // right moved\n\t\t\t\tif (v[1] > this.max) {\n\t\t\t\t\tv[1] = this.max;\n\t\t\t\t} else if (v[1] < this._value[0] + this.step) {\n\t\t\t\t\t// stop the right handle if surpassing the left one\n\t\t\t\t\tv[1] = this._value[0] + this.step;\n\t\t\t\t} else if (v[1] < this.min) {\n\t\t\t\t\tv[1] = this.min;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tthis._previousValue = [...this._value]; // store a copy, enable detection which handle moved\n\t\tthis._value = [...v]; // triggers change detection when ngModel value is an array (for range)\n\n\t\tif (this.isRange() && this.filledTrack) {\n\t\t\tthis.updateTrackRangeWidth();\n\t\t} else if (this.filledTrack) {\n\t\t\tthis.filledTrack.nativeElement.style.transform = `translate(0%, -50%) ${this.scaleX(this.getFractionComplete(v[0]))}`;\n\t\t}\n\n\t\tif (this.inputs && this.inputs.length) {\n\t\t\tthis.inputs.forEach((input, index) => {\n\t\t\t\tinput.value = this._value[index].toString();\n\t\t\t});\n\t\t}\n\n\t\tconst valueToEmit = this.isRange() ? v : v[0];\n\t\tthis.propagateChange(valueToEmit);\n\t\tthis.valueChange.emit(valueToEmit);\n\t}\n\n\tget value() {\n\t\tif (this.isRange()) {\n\t\t\treturn this._value;\n\t\t}\n\t\treturn this._value[0];\n\t}\n\n\t/** Base ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively */\n\t@Input() id = `slider-${Slider.count++}`;\n\t/** Value used to \"multiply\" the `step` when using arrow keys to select values */\n\t@Input() shiftMultiplier = 4;\n\t/** Set to `true` for a loading slider */\n\t@Input() skeleton = false;\n\t/** Sets the text inside the `label` tag */\n\t@Input() label: string | TemplateRef;\n\t/** Set to `true` for a slider without arrow key interactions. */\n\t@Input() disableArrowKeys = false;\n\t/** Disables the range visually and functionally */\n\t@Input() set disabled(v) {\n\t\tthis._disabled = v;\n\t\t// for some reason `this.input` never exists here, so we have to query for it here too\n\t\tconst inputs = this.getInputs();\n\t\tif (inputs && inputs.length > 0) {\n\t\t\tinputs.forEach(input => input.disabled = v);\n\t\t}\n\t}\n\n\tget disabled() {\n\t\treturn this._disabled;\n\t}\n\t/** Set to `true` for a readonly state. */\n\t@Input() set readonly(v: boolean) {\n\t\tthis._readonly = v;\n\t\t// for some reason `this.input` never exists here, so we have to query for it here too\n\t\tconst inputs = this.getInputs();\n\t\tif (inputs && inputs.length > 0) {\n\t\t\tinputs.forEach(input => input.readOnly = v);\n\t\t}\n\t}\n\tget readonly() {\n\t\treturn this._readonly;\n\t}\n\t/** Emits every time a new value is selected */\n\t@Output() valueChange: EventEmitter = new EventEmitter();\n\t@HostBinding(\"class.cds--form-item\") hostClass = true;\n\t@ViewChildren(\"thumbs\") thumbs: QueryList;\n\n\t@ViewChild(\"track\") track: ElementRef;\n\t@ViewChild(\"filledTrack\") filledTrack: ElementRef;\n\t@ViewChild(\"range\") range: ElementRef;\n\n\tpublic labelId = `${this.id}-label`;\n\tpublic bottomRangeId = `${this.id}-bottom-range`;\n\tpublic topRangeId = `${this.id}-top-range`;\n\tpublic fractionComplete = 0;\n\n\tprotected isMouseDown = false;\n\tprotected inputs: HTMLInputElement[];\n\tprotected _min = 0;\n\tprotected _max = 100;\n\tprotected _value = [this.min];\n\tprotected _previousValue = [this.min];\n\tprotected _disabled = false;\n\tprotected _readonly = false;\n\tprotected _focusedThumbIndex = 0;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected eventService: EventService,\n\t\tprivate changeDetection: ChangeDetectorRef\n\t) {}\n\n\tngAfterViewInit() {\n\t\t// bind mousemove and mouseup to the document so we don't have issues tracking the mouse\n\t\tthis.eventService.onDocument(\"mousemove\", this.onMouseMove.bind(this));\n\t\tthis.eventService.onDocument(\"mouseup\", this.onMouseUp.bind(this));\n\n\t\t// apply any values we got from before the view initialized\n\t\tthis.changeDetection.detectChanges();\n\n\t\t// TODO: ontouchstart/ontouchmove/ontouchend\n\n\t\t// set up the optional input\n\t\tthis.inputs = this.getInputs();\n\t\tif (this.inputs && this.inputs.length > 0) {\n\t\t\tthis.inputs.forEach((input, index) => {\n\t\t\t\tinput.type = \"number\";\n\t\t\t\tinput.classList.add(\"cds--slider-text-input\");\n\t\t\t\tinput.classList.add(\"cds--text-input\");\n\t\t\t\tinput.setAttribute(\"aria-labelledby\", `${this.bottomRangeId} ${this.topRangeId}`);\n\n\t\t\t\tinput.value = index < this._value.length ? this._value[index].toString() : this.max.toString();\n\t\t\t\t// bind events on our optional input\n\t\t\t\tthis.eventService.on(input, \"change\", event => this.onChange(event, index));\n\n\t\t\t\tif (index === 0) {\n\t\t\t\t\tthis.eventService.on(input, \"focus\", this.onFocus.bind(this));\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\ttrackThumbsBy(index: number, item: any) {\n\t\treturn index;\n\t}\n\n\t/** Send changes back to the model */\n\tpropagateChange = (_: any) => { };\n\n\t/** Register a change propagation function for `ControlValueAccessor` */\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/** Callback to notify the model when our input has been touched */\n\tonTouched: () => any = () => { };\n\n\t/** Register a callback to notify when our input has been touched */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/** Receives a value from the model */\n\twriteValue(v: any) {\n\t\tthis.value = v;\n\t}\n\n\t/**\n\t * Returns the amount of \"completeness\" of a value as a fraction of the total track width\n\t */\n\tgetFractionComplete(value: number) {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\treturn this.convertToPx(value) / trackWidth;\n\t}\n\n\t/** Helper function to return the CSS transform `scaleX` function */\n\tscaleX(complete) {\n\t\treturn `scaleX(${complete})`;\n\t}\n\n\t/** Converts a given px value to a \"real\" value in our range */\n\tconvertToValue(pxAmount) {\n\t\t// basic concept borrowed from carbon-components\n\t\t// https://github.com/carbon-design-system/carbon/blob/43bf3abdc2f8bdaa38aa84e0f733adde1e1e8894/src/components/slider/slider.js#L147-L151\n\t\tconst range = this.max - this.min;\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tconst unrounded = pxAmount / trackWidth;\n\t\tconst rounded = Math.round((range * unrounded) / this.step) * this.step;\n\t\treturn rounded + this.min;\n\t}\n\n\t/** Converts a given \"real\" value to a px value we can update the view with */\n\tconvertToPx(value) {\n\t\tif (!this.track) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst trackWidth = this.track.nativeElement.getBoundingClientRect().width;\n\t\tif (value >= this.max) {\n\t\t\treturn trackWidth;\n\t\t}\n\n\t\tif (value <= this.min) {\n\t\t\treturn 0;\n\t\t}\n\n\t\t// account for value shifting by subtracting min from value and max\n\t\treturn Math.round(trackWidth * ((value - this.min) / (this.max - this.min)));\n\t}\n\n\t/**\n\t * Increments the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t *\n\t * @argument multiplier Defaults to `1`, multiplied with the step value.\n\t */\n\tincrementValue(multiplier = 1, index = 0) {\n\t\tthis._value[index] = this._value[index] + (this.step * multiplier);\n\t\tthis.value = this.value; // run the setter\n\t}\n\n\t/**\n\t * Decrements the value by the step value, or the step value multiplied by the `multiplier` argument.\n\t *\n\t * @argument multiplier Defaults to `1`, multiplied with the step value.\n\t */\n\tdecrementValue(multiplier = 1, index = 0) {\n\t\tthis._value[index] = this._value[index] - (this.step * multiplier);\n\t\tthis.value = this.value; // run the setter\n\t}\n\n\t/**\n\t * Determines if the slider is in range mode.\n\t */\n\tisRange(): boolean {\n\t\treturn this._value.length > 1;\n\t}\n\n\t/**\n\t * Range mode only.\n\t * Updates the track width to span from the low thumb to the high thumb\n\t */\n\tupdateTrackRangeWidth() {\n\t\tconst fraction = this.getFractionComplete(this._value[0]);\n\t\tconst fraction2 = this.getFractionComplete(this._value[1]);\n\t\tthis.filledTrack.nativeElement.style.transform = `translate(${fraction * 100}%, -50%) ${this.scaleX(fraction2 - fraction)}`;\n\t}\n\n\t/** Change handler for the optional input */\n\tonChange(event, index) {\n\t\tthis._value[index] = Number(event.target.value);\n\t\tthis.value = this.value;\n\t}\n\n\t/**\n\t * Handles clicks on the slider, and setting the value to it's \"real\" equivalent.\n\t * Will assign the value to the closest thumb if in range mode.\n\t * */\n\tonClick(event) {\n\t\tif (this.disabled || this.readonly) { return; }\n\t\tconst trackLeft = this.track.nativeElement.getBoundingClientRect().left;\n\t\tconst trackValue = this.convertToValue(event.clientX - trackLeft);\n\t\tif (this.isRange()) {\n\t\t\tif (Math.abs(this._value[0] - trackValue) < Math.abs(this._value[1] - trackValue)) {\n\t\t\t\tthis._value[0] = trackValue;\n\t\t\t} else {\n\t\t\t\tthis._value[1] = trackValue;\n\t\t\t}\n\t\t} else {\n\t\t\tthis._value[0] = trackValue;\n\t\t}\n\n\t\tthis.value = this.value;\n\t}\n\n\t/** Focus handler for the optional input */\n\tonFocus({target}) {\n\t\ttarget.select();\n\t}\n\n\t/** Mouse move handler. Responsible for updating the value and visual selection based on mouse movement */\n\tonMouseMove(event) {\n\t\tif (this.disabled || this.readonly || !this.isMouseDown) { return; }\n\t\tconst track = this.track.nativeElement.getBoundingClientRect();\n\n\t\tlet value;\n\n\t\tif (\n\t\t\tevent.clientX - track.left <= track.width\n\t\t\t&& event.clientX - track.left >= 0\n\t\t) {\n\t\t\tvalue = this.convertToValue(event.clientX - track.left);\n\t\t}\n\n\t\t// if the mouse is beyond the max, set the value to `max`\n\t\tif (event.clientX - track.left > track.width) {\n\t\t\tvalue = this.max;\n\t\t}\n\n\t\t// if the mouse is below the min, set the value to `min`\n\t\tif (event.clientX - track.left < 0) {\n\t\t\tvalue = this.min;\n\t\t}\n\n\t\tif (value !== undefined) {\n\t\t\tthis._value[this._focusedThumbIndex] = value;\n\t\t\tthis.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Enables the `onMouseMove` handler\n\t *\n\t * @param {boolean} thumb If true then `thumb` is clicked down, otherwise `thumb2` is clicked down.\n\t */\n\tonMouseDown(event, index = 0) {\n\t\tevent.preventDefault();\n\t\tif (this.disabled || this.readonly) { return; }\n\t\tthis._focusedThumbIndex = index;\n\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\tthis.isMouseDown = true;\n\t}\n\n\t/** Disables the `onMouseMove` handler */\n\tonMouseUp() {\n\t\tthis.isMouseDown = false;\n\t}\n\n\t/**\n\t * Calls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.\n\t *\n\t * @param {boolean} thumb If true then `thumb` is pressed down, otherwise `thumb2` is pressed down.\n\t */\n\tonKeyDown(event: KeyboardEvent, index = 0) {\n\t\tif (this.disableArrowKeys || this.readonly) {\n\t\t\treturn;\n\t\t}\n\t\tconst multiplier = event.shiftKey ? this.shiftMultiplier : 1;\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n\t\t\tthis.decrementValue(multiplier, index);\n\t\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\t\tevent.preventDefault();\n\t\t} else if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n\t\t\tthis.incrementValue(multiplier, index);\n\t\t\tthis.thumbs.toArray()[index].nativeElement.focus();\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/** Get optional input fields */\n\tprotected getInputs(): HTMLInputElement[] {\n\t\treturn this.elementRef.nativeElement.querySelectorAll(\"input:not([type=range])\");\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "" }, { "name": "changeDetection", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "" } ], "line": 318, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "changeDetection", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AfterViewInit", "ControlValueAccessor" ], "accessors": { "min": { "name": "min", "setSignature": { "name": "min", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 170, "rawdescription": "\nThe lower bound of our range", "description": "

    The lower bound of our range

    \n", "jsdoctags": [ { "name": "v", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "min", "type": "", "returnType": "", "line": 176 } }, "max": { "name": "max", "setSignature": { "name": "max", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 180, "rawdescription": "\nThe upper bound of our range", "description": "

    The upper bound of our range

    \n", "jsdoctags": [ { "name": "v", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "max", "type": "", "returnType": "", "line": 187 } }, "value": { "name": "value", "setSignature": { "name": "value", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 193, "rawdescription": "\nSet the initial value. Available for two way binding", "description": "

    Set the initial value. Available for two way binding

    \n", "jsdoctags": [ { "name": "v", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "value", "type": "", "returnType": "", "line": 254 } }, "disabled": { "name": "disabled", "setSignature": { "name": "disabled", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 272, "rawdescription": "\nDisables the range visually and functionally", "description": "

    Disables the range visually and functionally

    \n", "jsdoctags": [ { "name": "v", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "disabled", "type": "", "returnType": "", "line": 281 } }, "readonly": { "name": "readonly", "setSignature": { "name": "readonly", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "v", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 285, "rawdescription": "\nSet to `true` for a readonly state.", "description": "

    Set to true for a readonly state.

    \n", "jsdoctags": [ { "name": "v", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "readonly", "type": "", "returnType": "", "line": 293 } } } }, { "name": "StructuredList", "id": "component-StructuredList-c8b48b09f6ed4c012aa71c2bd466ad0179d6b9174cbebafbfaeb0b4cc996e668d9b8e722dd09ef2cbaf72ff5a75f0395834550002608ce3d08b42c6130cc71cb", "file": "src/structured-list/structured-list.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: StructuredList, multi: true\n}" } ], "selector": "cds-structured-list, ibm-structured-list", "styleUrls": [], "styles": [], "template": "\n\t\n\t
    \n\t\t\n\t
    \n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "condensed", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to apply a condensed style to the headers and rows.\n", "description": "

    Set to true to apply a condensed style to the headers and rows.

    \n", "line": 101, "type": "boolean", "decorators": [] }, { "name": "flushed", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to align content with margin\n", "description": "

    Set to true to align content with margin

    \n", "line": 97, "type": "boolean", "decorators": [] }, { "name": "name", "defaultValue": "`structured-list-${StructuredList.listCount++}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed when `selection = true` as the row radio group `name`\n", "description": "

    Used when selection = true as the row radio group name

    \n", "line": 105, "type": "string", "decorators": [] }, { "name": "selection", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to enable radio like selection of the rows.\n", "description": "

    Set to true to enable radio like selection of the rows.

    \n", "line": 93, "type": "boolean", "decorators": [] }, { "name": "skeleton", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the skeleton value for all `ListHeader` to the skeleton value of `StructuredList`.\n", "description": "

    Sets the skeleton value for all ListHeader to the skeleton value of StructuredList.

    \n", "line": 111, "type": "any", "decorators": [] } ], "outputsClass": [ { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the row selection changes.\n\nEmits an object that looks like:\n```javascript\n{\n\tvalue: \"something\",\n\tselected: true,\n\tname: \"structured-list-1\"\n}\n```\n", "description": "

    Emits an event when the row selection changes.

    \n

    Emits an object that looks like:

    \nExample :
    {\n    value: "something",\n    selected: true,\n    name: "structured-list-1"\n}
    ", "line": 135, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "headers", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "", "line": 138, "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "ListHeader" } ], "modifierKind": [ 170 ] }, { "name": "listCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

    A counter to provide unique default values.

    \n", "line": 89, "rawdescription": "\n\nA counter to provide unique default values.\n", "modifierKind": [ 126 ] }, { "name": "onChange", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 142 }, { "name": "onTouched", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 144 }, { "name": "rows", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "", "line": 137, "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "ListRow" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 179, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 183, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "writeValue", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 168, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Structured Lists represent related tabular data. For larger datasets consider a full Table.

    \n

    See structured-list/usage for usage guidance.

    \n

    Get started with importing the module:

    \nExample :
    import { StructuredListModule } from 'carbon-components-angular';
    Example :
        <cds-structured-list>\n        <cds-list-header>\n            <cds-list-column nowrap="true">Column 1</cds-list-column>\n            <cds-list-column nowrap="true">Column 2</cds-list-column>\n            <cds-list-column>Column 3</cds-list-column>\n        </cds-list-header>\n        <cds-list-row>\n            <cds-list-column>Row 1</cds-list-column>\n            <cds-list-column nowrap="true">Row One</cds-list-column>\n            <cds-list-column>\n                Lorem ipsum dolor sit amet,\n                consectetur adipiscing elit. Nunc dui magna,\n                finibus id tortor sed, aliquet bibendum augue.\n                Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n                Pellentesque vulputate nisl a porttitor interdum.\n            </cds-list-column>\n        </cds-list-row>\n        <cds-list-row>\n            <cds-list-column>Row 2</cds-list-column>\n            <cds-list-column nowrap="true">Row Two</cds-list-column>\n            <cds-list-column>\n                Lorem ipsum dolor sit amet,\n                consectetur adipiscing elit. Nunc dui magna,\n                finibus id tortor sed, aliquet bibendum augue.\n                Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n                Pellentesque vulputate nisl a porttitor interdum.\n            </cds-list-column>\n        </cds-list-row>\n    </cds-structured-list>

    See demo

    \n", "rawdescription": "\n\nStructured Lists represent related tabular data. For larger datasets consider a full `Table`.\n\nSee [structured-list/usage](https://www.carbondesignsystem.com/components/structured-list/usage) for usage guidance.\n\nGet started with importing the module:\n\n```typescript\nimport { StructuredListModule } from 'carbon-components-angular';\n```\n\n```html\n\t\n\t\t\n\t\t\tColumn 1\n\t\t\tColumn 2\n\t\t\tColumn 3\n\t\t\n\t\t\n\t\t\tRow 1\n\t\t\tRow One\n\t\t\t\n\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\n\t\t\n\t\t\n\t\t\tRow 2\n\t\t\tRow Two\n\t\t\t\n\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\n\t\t\n\t\n```\n\n[See demo](../../?path=/story/components-structured-list--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { ListRow } from \"./list-row.component\";\nimport { ListHeader } from \"./list-header.component\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n/**\n * Structured Lists represent related tabular data. For larger datasets consider a full `Table`.\n *\n * See [structured-list/usage](https://www.carbondesignsystem.com/components/structured-list/usage) for usage guidance.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { StructuredListModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n *\t\n *\t\t\n *\t\t\tColumn 1\n *\t\t\tColumn 2\n *\t\t\tColumn 3\n *\t\t\n *\t\t\n *\t\t\tRow 1\n *\t\t\tRow One\n *\t\t\t\n *\t\t\t\tLorem ipsum dolor sit amet,\n *\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t\t\n *\t\t\n *\t\t\n *\t\t\tRow 2\n *\t\t\tRow Two\n *\t\t\t\n *\t\t\t\tLorem ipsum dolor sit amet,\n *\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t\t\n *\t\t\n *\t\n * ```\n *\n * [See demo](../../?path=/story/components-structured-list--basic)\n */\n@Component({\n\tselector: \"cds-structured-list, ibm-structured-list\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: StructuredList,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class StructuredList implements AfterContentInit, ControlValueAccessor {\n\t/**\n\t * A counter to provide unique default values.\n\t */\n\tstatic listCount = 0;\n\t/**\n\t * Set to `true` to enable radio like selection of the rows.\n\t */\n\t@Input() selection = false;\n\t/**\n\t * Set to `true` to align content with margin\n\t */\n\t@Input() flushed = false;\n\t/**\n\t * Set to `true` to apply a condensed style to the headers and rows.\n\t */\n\t@Input() condensed = false;\n\t/**\n\t * Used when `selection = true` as the row radio group `name`\n\t */\n\t@Input() name = `structured-list-${StructuredList.listCount++}`;\n\n\t/**\n\t * Sets the skeleton value for all `ListHeader` to the skeleton value of `StructuredList`.\n\t */\n\t@Input()\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\n\t/**\n\t * Returns the skeleton value in the `StructuredList` if there is one.\n\t */\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t/**\n\t * Emits an event when the row selection changes.\n\t *\n\t * Emits an object that looks like:\n\t * ```javascript\n\t * {\n\t * \tvalue: \"something\",\n\t * \tselected: true,\n\t * \tname: \"structured-list-1\"\n\t * }\n\t * ```\n\t */\n\t@Output() selected: EventEmitter<{value: string, selected: boolean, name: string}> = new EventEmitter();\n\n\t@ContentChildren(ListRow) rows: QueryList;\n\t@ContentChildren(ListHeader) headers: QueryList;\n\n\tprotected _skeleton = false;\n\n\tonChange = (_: any) => { };\n\n\tonTouched = () => { };\n\n\tngAfterContentInit() {\n\t\tconst setSelection = (rowOrHeader: ListRow | ListHeader) => {\n\t\t\trowOrHeader.selection = this.selection;\n\t\t};\n\n\t\tthis.headers.forEach(setSelection);\n\t\tthis.rows.forEach(row => {\n\t\t\tsetSelection(row);\n\t\t\trow.name = this.name;\n\t\t\trow.change.subscribe(() => {\n\t\t\t\tthis.selected.emit({\n\t\t\t\t\tvalue: row.value,\n\t\t\t\t\tselected: row.selected,\n\t\t\t\t\tname: this.name\n\t\t\t\t});\n\t\t\t\tthis.onChange(row.value);\n\t\t\t\tthis.writeValue(row.value);\n\t\t\t});\n\t\t});\n\t\tthis.updateChildren();\n\t}\n\n\twriteValue(value: any) {\n\t\tif (!this.rows) { return; }\n\t\tthis.rows.forEach(row => {\n\t\t\tif (row.value === value) {\n\t\t\t\trow.selected = true;\n\t\t\t} else {\n\t\t\t\trow.selected = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.onChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.headers) {\n\t\t\tthis.headers.toArray().forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "AfterContentInit", "ControlValueAccessor" ], "accessors": { "skeleton": { "name": "skeleton", "setSignature": { "name": "skeleton", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 111, "rawdescription": "\n\nSets the skeleton value for all `ListHeader` to the skeleton value of `StructuredList`.\n", "description": "

    Sets the skeleton value for all ListHeader to the skeleton value of StructuredList.

    \n", "jsdoctags": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "skeleton", "type": "any", "returnType": "any", "line": 119, "rawdescription": "\n\nReturns the skeleton value in the `StructuredList` if there is one.\n", "description": "

    Returns the skeleton value in the StructuredList if there is one.

    \n" } } } }, { "name": "SwitcherList", "id": "component-SwitcherList-316d9f69919726dc4cd91a9fba5d9ea4f791b8ca2d46188c8820f41d73b6b54eb581d142a99660dbb493255d58ae934aa5bf654ba8844ff0046db6411be63c91", "file": "src/ui-shell/panel/switcher-list.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-switcher-list, ibm-switcher-list", "styleUrls": [], "styles": [ "\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t" ], "template": "\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "role", "defaultValue": "\"list\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 27, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] }, { "name": "switcher", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 26, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--switcher'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"list\"", "deprecated": false, "deprecationMessage": "", "line": 27, "type": "string", "decorators": [] }, { "name": "class.cds--switcher", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Container for switcher items.

    \nExample :
    <cds-switcher-list>\n    <cds-switcher-list-item>one</cds-switcher-list-item>\n    <cds-switcher-list-item [active]="true">two</cds-switcher-list-item>\n    <cds-switcher-list-item>three</cds-switcher-list-item>\n</cds-switcher-list>
    ", "rawdescription": "\n\nContainer for switcher items.\n\n```html\n\n\tone\n\ttwo\n\tthree\n\n```\n", "type": "component", "sourceCode": "import { Component, HostBinding } from \"@angular/core\";\n\n/**\n * Container for switcher items.\n *\n * ```html\n * \n * \tone\n * \ttwo\n * \tthree\n * \n * ```\n */\n@Component({\n\tselector: \"cds-switcher-list, ibm-switcher-list\",\n\ttemplate: `\n\t\t\t\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t`]\n})\nexport class SwitcherList {\n\t@HostBinding(\"class.cds--switcher\") switcher = true;\n\t@HostBinding(\"attr.role\") role = \"list\";\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t\n", "extends": [] }, { "name": "SwitcherListItem", "id": "component-SwitcherListItem-7783511b0a259483813ba3949d92eb24a7e55c2adafe157fb758cb838be843d7066a2ba0ae44b9cae07d0b9f6e1b19db0fa581ed7adfe18a0ea1d68a885326c4", "file": "src/ui-shell/panel/switcher-list-item.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-switcher-list-item, ibm-switcher-list-item", "styleUrls": [], "styles": [], "template": "\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "active", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEnables the \"active\" state for an item. Commonly used to indicate the current page or selection.\n", "description": "

    Enables the "active" state for an item. Commonly used to indicate the current page or selection.

    \n", "line": 34, "type": "boolean", "decorators": [] }, { "name": "href", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional link for the underlying anchor.\n", "description": "

    Optional link for the underlying anchor.

    \n", "line": 51, "type": "string", "decorators": [] }, { "name": "route", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nArray of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate\n", "description": "

    Array of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate

    \n", "line": 40, "type": "any[]", "decorators": [] }, { "name": "routeExtras", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRouter options. Used in conjunction with `route`\nSee: https://angular.io/api/router/Router#navigate\n", "description": "

    Router options. Used in conjunction with route\nSee: https://angular.io/api/router/Router#navigate

    \n", "line": 46, "type": "any", "decorators": [] }, { "name": "target", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional target for the underlying anchor.\n", "description": "

    Optional target for the underlying anchor.

    \n", "line": 67, "type": "string", "decorators": [] } ], "outputsClass": [ { "name": "navigation", "defaultValue": "new EventEmitter>()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits the navigation status promise when the link is activated\n", "description": "

    Emits the navigation status promise when the link is activated

    \n", "line": 58, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "itemClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 75, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--switcher__item'" } ], "modifierKind": [ 170 ] }, { "name": "itemRole", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 77, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "navigate", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 84, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.role", "defaultValue": "\"listitem\"", "deprecated": false, "deprecationMessage": "", "line": 77, "type": "string", "decorators": [] }, { "name": "class.cds--switcher__item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 75, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Represents an item in a switcher list.

    \n", "rawdescription": "\n\nRepresents an item in a switcher list.\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tOptional,\n\tHostBinding\n} from \"@angular/core\";\nimport { DomSanitizer, SafeUrl } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\n\n/**\n * Represents an item in a switcher list.\n */\n@Component({\n\tselector: \"cds-switcher-list-item, ibm-switcher-list-item\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class SwitcherListItem {\n\t/**\n\t * Enables the \"active\" state for an item. Commonly used to indicate the current page or selection.\n\t */\n\t@Input() active = false;\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Optional link for the underlying anchor.\n\t */\n\t@Input() set href(value: string) {\n\t\tthis._href = value;\n\t}\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter>();\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t/**\n\t * Optional target for the underlying anchor.\n\t */\n\t@Input() set target(value: string) {\n\t\tthis._target = value;\n\t}\n\n\tget target() {\n\t\treturn this._target;\n\t}\n\n\t@HostBinding(\"class.cds--switcher__item\") itemClass = true;\n\n\t@HostBinding(\"attr.role\") itemRole = \"listitem\";\n\n\tprotected _href = \"#\";\n\tprotected _target = \"\";\n\n\tconstructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) { }\n\n\tnavigate(event) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t} else if (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "domSanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "" }, { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "" } ], "line": 80, "jsdoctags": [ { "name": "domSanitizer", "type": "DomSanitizer", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "router", "type": "Router", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "href": { "name": "href", "setSignature": { "name": "href", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 51, "rawdescription": "\n\nOptional link for the underlying anchor.\n", "description": "

    Optional link for the underlying anchor.

    \n", "jsdoctags": [ { "name": "value", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "href", "type": "", "returnType": "", "line": 60 } }, "target": { "name": "target", "setSignature": { "name": "target", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 67, "rawdescription": "\n\nOptional target for the underlying anchor.\n", "description": "

    Optional target for the underlying anchor.

    \n", "jsdoctags": [ { "name": "value", "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "target", "type": "", "returnType": "", "line": 71 } } } }, { "name": "Tab", "id": "component-Tab-c53c4b68c2b4ba9480fda90b175dff0c8259a692f0f6f0a615ff742fa1adbd62a8cf875c0bdffa71f77c498db2c8e9a56a409a996e46c14fc1c603055a7b6adb", "file": "src/tabs/tab.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-tab, ibm-tab", "styleUrls": [], "styles": [], "template": "\n\t\n\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "active", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nIndicates whether the `Tab` is active/selected.\nDetermines whether it's `TabPanel` is rendered.\n", "description": "

    Indicates whether the Tab is active/selected.\nDetermines whether it's TabPanel is rendered.

    \n", "line": 103, "type": "boolean", "decorators": [] }, { "name": "cacheActive", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to true to have Tab items cached and not reloaded on tab switching.\n", "description": "

    Set to true to have Tab items cached and not reloaded on tab switching.

    \n", "line": 117, "type": "boolean", "decorators": [] }, { "name": "context", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAllows the user to pass data to the custom template for the `Tab` heading.\n", "description": "

    Allows the user to pass data to the custom template for the Tab heading.

    \n", "line": 98, "type": "any", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nIndicates whether or not the `Tab` item is disabled.\n", "description": "

    Indicates whether or not the Tab item is disabled.

    \n", "line": 107, "type": "boolean", "decorators": [] }, { "name": "heading", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe `Tab`'s title to be displayed or custom temaplate for the `Tab` heading.\n", "description": "

    The Tab's title to be displayed or custom temaplate for the Tab heading.

    \n", "line": 87, "type": "string | TemplateRef", "decorators": [] }, { "name": "id", "defaultValue": "`n-tab-${Tab.counter++}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the id of the `Tab`. Will be uniquely generated if not provided.\n", "description": "

    Sets the id of the Tab. Will be uniquely generated if not provided.

    \n", "line": 113, "type": "string", "decorators": [] }, { "name": "tabContent", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAllows life cycle hooks to be called on the rendered content\n", "description": "

    Allows life cycle hooks to be called on the rendered content

    \n", "line": 123, "type": "TemplateRef", "decorators": [] }, { "name": "tabIndex", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "line": 109, "type": "number", "decorators": [] }, { "name": "templateContext", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional data for templates passed as implicit context\n", "description": "

    Optional data for templates passed as implicit context

    \n", "line": 127, "type": "any", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional override for the `tabItem's`'s title attribute which is set in `TabHeaders`.\n`tabItem`'s title attribute is automatically set to `heading`.\n\nYou might want to use this if you set `heading` to a `TemplateRef`.\n", "description": "

    Optional override for the tabItem's's title attribute which is set in TabHeaders.\ntabItem's title attribute is automatically set to heading.

    \n

    You might want to use this if you set heading to a TemplateRef.

    \n", "line": 94, "type": "string", "decorators": [] } ], "outputsClass": [ { "name": "selected", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nValue 'selected' to be emitted after a new `Tab` is selected.\n", "description": "

    Value 'selected' to be emitted after a new Tab is selected.

    \n", "line": 131, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "headingIsTemplate", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Boolean value reflects if the Tab is using a custom template for the heading.\nDefault value is false.

    \n", "line": 82, "rawdescription": "\n\nBoolean value reflects if the `Tab` is using a custom template for the heading.\nDefault value is false.\n", "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "doSelect", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 152, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmit the status of the `Tab`, specifically 'select' and 'selected' properties.\n", "description": "

    Emit the status of the Tab, specifically 'select' and 'selected' properties.

    \n" }, { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 163, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "shouldRender", "args": [], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 159, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReturns value indicating whether this `Tab` should be rendered in a `TabPanel`.\n", "description": "

    Returns value indicating whether this Tab should be rendered in a TabPanel.

    \n" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

    The Tab component is a child of the Tabs component.\nIt represents one Tab item and its content within a panel of other Tab items.

    \n

    Tab takes a string or TemplateRef for the header, and any content for the body of the tab.\nDisabled states should be handled by the application (ie. switch to the tab, but display some\nindication as to why the tab is disabled).

    \n

    When the tab is selected the select output will be triggered.\nThe select output will also be triggered for the active tab when the tabs are loaded or updated.

    \n

    Tab with string header:

    \nExample :
    <cds-tab heading='tab1'>\n    tab 1 content\n</cds-tab>

    Tab with custom header:

    \nExample :
    <ng-template #tabHeading>\n    <svg cdsIcon="facebook"\n        size="sm"\n        style="margin-right: 7px;">\n    </svg>\n    Hello Tab 1\n</ng-template>\n<cds-tabs>\n    <cds-tab [heading]="tabHeading">\n        Tab 1 content <svg cdsIcon="alert" size="lg"></svg>\n    </cds-tab>\n    <cds-tab heading='Tab2'>\n        Tab 2 content\n    </cds-tab>\n    <cds-tab heading='Tab3'>\n        Tab 3 content\n    </cds-tab>\n</cds-tabs>
    ", "rawdescription": "\n\nThe `Tab` component is a child of the `Tabs` component.\nIt represents one `Tab` item and its content within a panel of other `Tab` items.\n\n\n`Tab` takes a string or `TemplateRef` for the header, and any content for the body of the tab.\nDisabled states should be handled by the application (ie. switch to the tab, but display some\nindication as to _why_ the tab is disabled).\n\nWhen the tab is selected the `select` output will be triggered.\nThe `select` output will also be triggered for the active tab when the tabs are loaded or updated.\n\n\nTab with string header:\n\n```html\n\n\ttab 1 content\n\n```\n\nTab with custom header:\n\n```html\n\n\t\n\t\n\tHello Tab 1\n\n\n\t\n\t\tTab 1 content \n\t\n\t\n\t\tTab 2 content\n\t\n\t\n\t\tTab 3 content\n\t\n\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOnInit,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tTemplateRef,\n\tHostBinding\n} from \"@angular/core\";\n\n/**\n* The `Tab` component is a child of the `Tabs` component.\n* It represents one `Tab` item and its content within a panel of other `Tab` items.\n*\n*\n* `Tab` takes a string or `TemplateRef` for the header, and any content for the body of the tab.\n* Disabled states should be handled by the application (ie. switch to the tab, but display some\n* indication as to _why_ the tab is disabled).\n*\n* When the tab is selected the `select` output will be triggered.\n* The `select` output will also be triggered for the active tab when the tabs are loaded or updated.\n*\n*\n* Tab with string header:\n*\n* ```html\n* \n* \ttab 1 content\n* \n* ```\n*\n* Tab with custom header:\n*\n* ```html\n* \n* \t\n* \t\n* \tHello Tab 1\n* \n* \n* \t\n* \t\tTab 1 content \n* \t\n* \t\n* \t\tTab 2 content\n* \t\n* \t\n* \t\tTab 3 content\n* \t\n* \n* ```\n*/\n@Component({\n\tselector: \"cds-tab, ibm-tab\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class Tab implements OnInit {\n\tprivate static counter = 0;\n\t/**\n\t * Boolean value reflects if the `Tab` is using a custom template for the heading.\n\t * Default value is false.\n\t */\n\tpublic headingIsTemplate = false;\n\n\t/**\n\t * The `Tab`'s title to be displayed or custom temaplate for the `Tab` heading.\n\t */\n\t@Input() heading: string | TemplateRef;\n\t/**\n\t * Optional override for the `tabItem's`'s title attribute which is set in `TabHeaders`.\n\t * `tabItem`'s title attribute is automatically set to `heading`.\n\t *\n\t * You might want to use this if you set `heading` to a `TemplateRef`.\n\t */\n\t@Input() title: string;\n\t/**\n\t * Allows the user to pass data to the custom template for the `Tab` heading.\n\t */\n\t@Input() context: any;\n\t/**\n\t * Indicates whether the `Tab` is active/selected.\n\t * Determines whether it's `TabPanel` is rendered.\n\t */\n\t@Input() active = false;\n\t/**\n\t * Indicates whether or not the `Tab` item is disabled.\n\t */\n\t@Input() disabled = false;\n\n\t@Input() tabIndex = 0;\n\t/**\n\t * Sets the id of the `Tab`. Will be uniquely generated if not provided.\n\t */\n\t@Input() id = `n-tab-${Tab.counter++}`;\n\t/**\n\t * Set to true to have Tab items cached and not reloaded on tab switching.\n\t */\n\t@Input() set cacheActive(shouldCache: boolean) {\n\t\tthis._cacheActive = shouldCache;\n\t}\n\t/**\n\t * Allows life cycle hooks to be called on the rendered content\n\t */\n\t@Input() tabContent: TemplateRef;\n\t/**\n\t * Optional data for templates passed as implicit context\n\t */\n\t@Input() templateContext: any;\n\t/**\n\t * Value 'selected' to be emitted after a new `Tab` is selected.\n\t */\n\t@Output() selected: EventEmitter = new EventEmitter();\n\n\tget cacheActive() {\n\t\treturn this._cacheActive;\n\t}\n\n\tprotected _cacheActive = false;\n\n\t/**\n\t * Checks for custom heading template on initialization and updates the value\n\t * of the boolean 'headingIsTemplate'.\n\t */\n\tngOnInit() {\n\t\tif (this.heading instanceof TemplateRef) {\n\t\t\tthis.headingIsTemplate = true;\n\t\t}\n\t}\n\n\t/**\n\t * Emit the status of the `Tab`, specifically 'select' and 'selected' properties.\n\t */\n\tdoSelect() {\n\t\tthis.selected.emit();\n\t}\n\n\t/**\n\t* Returns value indicating whether this `Tab` should be rendered in a `TabPanel`.\n\t*/\n\tshouldRender() {\n\t\treturn this.active || this.cacheActive;\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "OnInit" ], "accessors": { "cacheActive": { "name": "cacheActive", "setSignature": { "name": "cacheActive", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "shouldCache", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 117, "rawdescription": "\n\nSet to true to have Tab items cached and not reloaded on tab switching.\n", "description": "

    Set to true to have Tab items cached and not reloaded on tab switching.

    \n", "jsdoctags": [ { "name": "shouldCache", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "cacheActive", "type": "", "returnType": "", "line": 133 } } } }, { "name": "TabHeaderGroup", "id": "component-TabHeaderGroup-7b7ad6dc14254717944a905370f25b288afee3379d96cd69f611f838cbebf64ed58eda352543b17b7c48d874ea709f7ce8f61e19b4b572f9971e4bd108f178d1", "file": "src/tabs/tab-header-group.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-tab-header-group, ibm-tab-header-group", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t\n\t\n\n\n\t\n\t\n\t\n\n\n\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "isNavigation", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 87, "type": "boolean", "decorators": [] }, { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the aria label on the nav element.\n", "description": "

    Sets the aria label on the nav element.

    \n", "line": 33, "type": "string", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "ariaLabelledby", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the aria labelledby on the nav element.\n", "description": "

    Sets the aria labelledby on the nav element.

    \n", "line": 37, "type": "string", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "cacheActive", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to 'true' to have `Tab` items cached and not reloaded on tab switching.\nDuplicate from `n-tabs` to support standalone headers\n", "description": "

    Set to 'true' to have Tab items cached and not reloaded on tab switching.\nDuplicate from n-tabs to support standalone headers

    \n", "line": 25, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "contentAfter", "deprecated": false, "deprecationMessage": "", "line": 40, "type": "TemplateRef", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "contentBefore", "deprecated": false, "deprecationMessage": "", "line": 39, "type": "TemplateRef", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "followFocus", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to 'true' to have tabs automatically activated and have their content displayed when they receive focus.\n", "description": "

    Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.

    \n", "line": 29, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": false, "deprecationMessage": "", "line": 43, "type": "\"dark\" | \"light\"", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "type", "defaultValue": "\"line\"", "deprecated": false, "deprecationMessage": "", "line": 42, "type": "\"line\" | \"contained\"", "decorators": [], "inheritance": { "file": "BaseTabHeader" } } ], "outputsClass": [], "propertiesClass": [ { "name": "currentSelectedTab", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

    Controls the manual focusing done by tabbing through headings.

    \n", "line": 103, "rawdescription": "\n\nControls the manual focusing done by tabbing through headings.\n", "inheritance": { "file": "BaseTabHeader" } }, { "name": "headerContainer", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 94, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'tabList', {static: true}" } ], "modifierKind": [ 170 ], "inheritance": { "file": "BaseTabHeader" } }, { "name": "selectedSubscriptionTracker", "defaultValue": "new Subscription()", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Keeps track of all the subscriptions to the tab header selection events.

    \n", "line": 98, "rawdescription": "\n\nKeeps track of all the subscriptions to the tab header selection events.\n" }, { "name": "tabHeaderQuery", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "

    ContentChildren of all the tabHeaders.

    \n", "line": 92, "rawdescription": "\n\nContentChildren of all the tabHeaders.\n", "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "TabHeader" } ], "modifierKind": [ 170 ] }, { "name": "clickMultiplier", "defaultValue": "1.5", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 65, "modifierKind": [ 148 ], "inheritance": { "file": "BaseTabHeader" } }, { "name": "longPressMultiplier", "defaultValue": "3", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 64, "modifierKind": [ 148 ], "inheritance": { "file": "BaseTabHeader" } }, { "name": "OVERFLOW_BUTTON_OFFSET", "defaultValue": "44", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 63, "modifierKind": [ 148 ], "inheritance": { "file": "BaseTabHeader" } }, { "name": "tabsClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 45, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--tabs'" } ], "modifierKind": [ 170 ], "inheritance": { "file": "BaseTabHeader" } } ], "methodsClass": [ { "name": "getSelectedTab", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 234, "deprecated": false, "deprecationMessage": "" }, { "name": "keyboardInput", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 119, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the keydown events used for tabbing through the headings.\n", "description": "

    Controls the keydown events used for tabbing through the headings.

    \n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "handleOverflowNavClick", "args": [ { "name": "direction", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "numOftabs", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 97, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "direction", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "numOftabs", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0", "tagName": { "text": "param" } } ], "inheritance": { "file": "BaseTabHeader" } }, { "name": "handleOverflowNavMouseDown", "args": [ { "name": "direction", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 109, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "direction", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "BaseTabHeader" } }, { "name": "handleOverflowNavMouseUp", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 134, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nClear intervals/Timeout & reset scroll behavior\n", "description": "

    Clear intervals/Timeout & reset scroll behavior

    \n", "inheritance": { "file": "BaseTabHeader" } }, { "name": "handleScroll", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 93, "deprecated": false, "deprecationMessage": "", "inheritance": { "file": "BaseTabHeader" } } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--tabs", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 45, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "class.cds--tabs--contained", "deprecated": false, "deprecationMessage": "", "line": 46, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "class.cds--tabs--light", "deprecated": false, "deprecationMessage": "", "line": 49, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseTabHeader" } } ], "hostListeners": [ { "name": "keydown", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the keydown events used for tabbing through the headings.\n", "description": "

    Controls the keydown events used for tabbing through the headings.

    \n", "line": 119 } ], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tQueryList,\n\tInput,\n\tHostListener,\n\tContentChildren,\n\tAfterContentInit,\n\tElementRef,\n\tOnChanges,\n\tSimpleChanges,\n\tChangeDetectorRef,\n\tViewChild,\n\tOnInit,\n\tRenderer2\n} from \"@angular/core\";\n\nimport { Subscription } from \"rxjs\";\nimport { EventService } from \"carbon-components-angular/utils\";\n\nimport { TabHeader } from \"./tab-header.directive\";\nimport { BaseTabHeader } from \"./base-tab-header.component\";\n\n@Component({\n\tselector: \"cds-tab-header-group, ibm-tab-header-group\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class TabHeaderGroup extends BaseTabHeader implements AfterContentInit, OnChanges, OnInit {\n\t@Input() isNavigation = false;\n\n\t/**\n\t * ContentChildren of all the tabHeaders.\n\t */\n\t@ContentChildren(TabHeader) tabHeaderQuery: QueryList;\n\n\t@ViewChild(\"tabList\", { static: true }) headerContainer;\n\t/**\n\t * Keeps track of all the subscriptions to the tab header selection events.\n\t */\n\tselectedSubscriptionTracker = new Subscription();\n\n\t/**\n\t * Controls the manual focusing done by tabbing through headings.\n\t */\n\tcurrentSelectedTab = 0;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected changeDetectorRef: ChangeDetectorRef,\n\t\tprotected eventService: EventService,\n\t\tprotected renderer: Renderer2\n\t) {\n\t\tsuper(elementRef, changeDetectorRef, eventService, renderer);\n\t}\n\n\t// keyboard accessibility\n\t/**\n\t * Controls the keydown events used for tabbing through the headings.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tkeyboardInput(event) {\n\t\tlet tabHeadersArray = this.tabHeaderQuery.toArray();\n\n\t\tif (event.key === \"ArrowRight\") {\n\t\t\tif (this.currentSelectedTab < tabHeadersArray.length - 1) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus && !tabHeadersArray[this.currentSelectedTab + 1].disabled) {\n\t\t\t\t\ttabHeadersArray[this.currentSelectedTab + 1].selectTab();\n\t\t\t\t} else {\n\t\t\t\t\ttabHeadersArray[this.currentSelectedTab + 1].focus();\n\t\t\t\t\tthis.currentSelectedTab++;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus && !tabHeadersArray[0].disabled) {\n\t\t\t\t\ttabHeadersArray[0].selectTab();\n\t\t\t\t} else {\n\t\t\t\t\ttabHeadersArray[0].focus();\n\t\t\t\t\tthis.currentSelectedTab = 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"ArrowLeft\") {\n\t\t\tif (this.currentSelectedTab > 0) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus && !tabHeadersArray[this.currentSelectedTab - 1].disabled) {\n\t\t\t\t\ttabHeadersArray[this.currentSelectedTab - 1].selectTab();\n\t\t\t\t} else {\n\t\t\t\t\ttabHeadersArray[this.currentSelectedTab - 1].focus();\n\t\t\t\t\tthis.currentSelectedTab--;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus && !tabHeadersArray[tabHeadersArray.length - 1].disabled) {\n\t\t\t\t\ttabHeadersArray[tabHeadersArray.length - 1].selectTab();\n\t\t\t\t} else {\n\t\t\t\t\ttabHeadersArray[tabHeadersArray.length - 1].focus();\n\t\t\t\t\tthis.currentSelectedTab = tabHeadersArray.length - 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Home\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (this.followFocus && !tabHeadersArray[0].disabled) {\n\t\t\t\ttabHeadersArray[0].selectTab();\n\t\t\t} else {\n\t\t\t\ttabHeadersArray[0].focus();\n\t\t\t\tthis.currentSelectedTab = 0;\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"End\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (this.followFocus && !tabHeadersArray[tabHeadersArray.length - 1].disabled) {\n\t\t\t\ttabHeadersArray[tabHeadersArray.length - 1].selectTab();\n\t\t\t} else {\n\t\t\t\ttabHeadersArray[tabHeadersArray.length - 1].focus();\n\t\t\t\tthis.currentSelectedTab = tabHeadersArray.length - 1;\n\t\t\t}\n\t\t}\n\n\t\tif ((event.key === \" \") && !this.followFocus) {\n\t\t\ttabHeadersArray[this.currentSelectedTab].selectTab();\n\t\t}\n\t}\n\n\tngOnInit() {\n\t\tthis.eventService.on(window as any, \"resize\", () => this.handleScroll());\n\t}\n\n\tngAfterContentInit() {\n\t\tthis.selectedSubscriptionTracker.unsubscribe();\n\n\t\tif (this.tabHeaderQuery) {\n\t\t\tthis.tabHeaderQuery.toArray()\n\t\t\t\t.forEach(tabHeader => {\n\t\t\t\t\ttabHeader.cacheActive = this.cacheActive;\n\t\t\t\t\ttabHeader.paneTabIndex = this.isNavigation ? null : 0;\n\t\t\t\t});\n\t\t}\n\n\t\tconst selectedSubscriptions = this.tabHeaderQuery.toArray().forEach(tabHeader => {\n\t\t\ttabHeader.selected.subscribe(() => {\n\t\t\t\tthis.currentSelectedTab = this.tabHeaderQuery.toArray().indexOf(tabHeader);\n\t\t\t\t// The Filter takes the current selected tab out, then all other headers are\n\t\t\t\t// deactivated and their associated pane references are also deactivated.\n\t\t\t\tthis.tabHeaderQuery.toArray().filter(header => header !== tabHeader)\n\t\t\t\t\t.forEach(filteredHeader => {\n\t\t\t\t\t\tfilteredHeader.active = false;\n\t\t\t\t\t\tif (filteredHeader.paneReference) {\n\t\t\t\t\t\t\tfilteredHeader.paneReference.active = false;\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t});\n\t\t});\n\t\tthis.selectedSubscriptionTracker.add(selectedSubscriptions);\n\n\t\tsetTimeout(() => this.tabHeaderQuery.toArray()[this.currentSelectedTab].selectTab());\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (this.tabHeaderQuery) {\n\t\t\tif (changes.cacheActive) {\n\t\t\t\tthis.tabHeaderQuery.toArray().forEach(tabHeader => tabHeader.cacheActive = this.cacheActive);\n\t\t\t}\n\n\t\t\tif (changes.isNavigation) {\n\t\t\t\tthis.tabHeaderQuery.toArray()\n\t\t\t\t\t.forEach(tabHeader => tabHeader.paneTabIndex = this.isNavigation ? null : 0);\n\t\t\t}\n\t\t}\n\t}\n\n\tgetSelectedTab(): any {\n\t\tconst selected = this.tabHeaderQuery.toArray()[this.currentSelectedTab];\n\t\tif (selected) {\n\t\t\treturn selected;\n\t\t}\n\t\treturn {\n\t\t\theadingIsTemplate: false,\n\t\t\theading: \"\"\n\t\t};\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "" }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "" }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "" } ], "line": 103, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [ "BaseTabHeader" ], "implements": [ "AfterContentInit", "OnChanges", "OnInit" ] }, { "name": "TabHeaders", "id": "component-TabHeaders-d0a00ee3062556c969878317a06c7bc30d5f08e965f1fb3eb024ef8b0087fcab4797d3052029ad5897214aa84828299c795dacb2dac65a0c621f240ea19ce408", "file": "src/tabs/tab-headers.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-tab-headers, ibm-tab-headers", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t\n\t\n\n\n\t\n\t\n\t\t\n\t\t\t{{ tab.heading }}\n\t\t\n\t\t\n\t\t\n\t\n\t\n\n\n\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "tabs", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nList of `Tab` components.\n", "description": "

    List of Tab components.

    \n", "line": 124, "type": "QueryList", "decorators": [] }, { "name": "translations", "defaultValue": "this.i18n.get().TABS", "deprecated": false, "deprecationMessage": "", "line": 126, "type": "any", "decorators": [] }, { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the aria label on the nav element.\n", "description": "

    Sets the aria label on the nav element.

    \n", "line": 33, "type": "string", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "ariaLabelledby", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the aria labelledby on the nav element.\n", "description": "

    Sets the aria labelledby on the nav element.

    \n", "line": 37, "type": "string", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "cacheActive", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to 'true' to have `Tab` items cached and not reloaded on tab switching.\nDuplicate from `n-tabs` to support standalone headers\n", "description": "

    Set to 'true' to have Tab items cached and not reloaded on tab switching.\nDuplicate from n-tabs to support standalone headers

    \n", "line": 25, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "contentAfter", "deprecated": false, "deprecationMessage": "", "line": 40, "type": "TemplateRef", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "contentBefore", "deprecated": false, "deprecationMessage": "", "line": 39, "type": "TemplateRef", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "followFocus", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to 'true' to have tabs automatically activated and have their content displayed when they receive focus.\n", "description": "

    Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.

    \n", "line": 29, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": false, "deprecationMessage": "", "line": 43, "type": "\"dark\" | \"light\"", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "type", "defaultValue": "\"line\"", "deprecated": false, "deprecationMessage": "", "line": 42, "type": "\"line\" | \"contained\"", "decorators": [], "inheritance": { "file": "BaseTabHeader" } } ], "outputsClass": [], "propertiesClass": [ { "name": "allTabHeaders", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "

    The DOM element containing the Tab headings displayed.

    \n", "line": 147, "rawdescription": "\n\nThe DOM element containing the `Tab` headings displayed.\n", "decorators": [ { "name": "ViewChildren", "stringifiedArguments": "'tabItem'" } ], "modifierKind": [ 170 ] }, { "name": "firstVisibleTab", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

    The index of the first visible tab.

    \n", "line": 143, "rawdescription": "\n\nThe index of the first visible tab.\n" }, { "name": "headerContainer", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "

    Gets the Unordered List element that holds the Tab headings from the view DOM.

    \n", "line": 131, "rawdescription": "\n\nGets the Unordered List element that holds the `Tab` headings from the view DOM.\n", "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'tabList', {static: true}" } ], "modifierKind": [ 170 ], "inheritance": { "file": "BaseTabHeader" } }, { "name": "tabQuery", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "

    ContentChild of all the n-tabs

    \n", "line": 135, "rawdescription": "\n\nContentChild of all the n-tabs\n", "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "Tab" } ], "modifierKind": [ 170 ] }, { "name": "tabs", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "

    set to tabQuery if tabInput is empty

    \n", "line": 139, "rawdescription": "\n\nset to tabQuery if tabInput is empty\n" }, { "name": "clickMultiplier", "defaultValue": "1.5", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 65, "modifierKind": [ 148 ], "inheritance": { "file": "BaseTabHeader" } }, { "name": "currentSelectedTab", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

    Controls the manual focusing done by tabbing through headings.

    \n", "line": 61, "rawdescription": "\n\nControls the manual focusing done by tabbing through headings.\n", "inheritance": { "file": "BaseTabHeader" } }, { "name": "longPressMultiplier", "defaultValue": "3", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 64, "modifierKind": [ 148 ], "inheritance": { "file": "BaseTabHeader" } }, { "name": "OVERFLOW_BUTTON_OFFSET", "defaultValue": "44", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 63, "modifierKind": [ 148 ], "inheritance": { "file": "BaseTabHeader" } }, { "name": "tabsClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 45, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--tabs'" } ], "modifierKind": [ 170 ], "inheritance": { "file": "BaseTabHeader" } } ], "methodsClass": [ { "name": "getSelectedTab", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 263, "deprecated": false, "deprecationMessage": "" }, { "name": "keyboardInput", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 165, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the keydown events used for tabbing through the headings.\n", "description": "

    Controls the keydown events used for tabbing through the headings.

    \n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onTabFocus", "args": [ { "name": "ref", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 257, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls manually focusing tabs.\n", "description": "

    Controls manually focusing tabs.

    \n", "jsdoctags": [ { "name": "ref", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "selectTab", "args": [ { "name": "ref", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" }, { "name": "tab", "type": "Tab", "deprecated": false, "deprecationMessage": "" }, { "name": "tabIndex", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 274, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSelects `Tab` 'tab' and moves it into view on the view DOM if it is not already.\n", "description": "

    Selects Tab 'tab' and moves it into view on the view DOM if it is not already.

    \n", "jsdoctags": [ { "name": "ref", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "tab", "type": "Tab", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "tabIndex", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "handleOverflowNavClick", "args": [ { "name": "direction", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "numOftabs", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 97, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "direction", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "numOftabs", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0", "tagName": { "text": "param" } } ], "inheritance": { "file": "BaseTabHeader" } }, { "name": "handleOverflowNavMouseDown", "args": [ { "name": "direction", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 109, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "direction", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "BaseTabHeader" } }, { "name": "handleOverflowNavMouseUp", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 134, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nClear intervals/Timeout & reset scroll behavior\n", "description": "

    Clear intervals/Timeout & reset scroll behavior

    \n", "inheritance": { "file": "BaseTabHeader" } }, { "name": "handleScroll", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 93, "deprecated": false, "deprecationMessage": "", "inheritance": { "file": "BaseTabHeader" } } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--tabs", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 45, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "class.cds--tabs--contained", "deprecated": false, "deprecationMessage": "", "line": 46, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseTabHeader" } }, { "name": "class.cds--tabs--light", "deprecated": false, "deprecationMessage": "", "line": 49, "type": "boolean", "decorators": [], "inheritance": { "file": "BaseTabHeader" } } ], "hostListeners": [ { "name": "keydown", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls the keydown events used for tabbing through the headings.\n", "description": "

    Controls the keydown events used for tabbing through the headings.

    \n", "line": 165 } ], "standalone": false, "imports": [], "description": "

    The TabHeaders component contains the Tab items and controls scroll functionality\nif content has overflow.

    \n", "rawdescription": "\n\nThe `TabHeaders` component contains the `Tab` items and controls scroll functionality\nif content has overflow.\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tQueryList,\n\tInput,\n\tHostListener,\n\tViewChild,\n\tContentChildren,\n\tAfterContentInit,\n\tViewChildren,\n\tElementRef,\n\tOnChanges,\n\tSimpleChanges,\n\tOnDestroy,\n\tOnInit,\n\tChangeDetectorRef,\n\tRenderer2\n} from \"@angular/core\";\nimport { EventService } from \"carbon-components-angular/utils\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\nimport { BaseTabHeader } from \"./base-tab-header.component\";\nimport { Tab } from \"./tab.component\";\n\n/**\n * The `TabHeaders` component contains the `Tab` items and controls scroll functionality\n * if content has overflow.\n */\n@Component({\n\tselector: \"cds-tab-headers, ibm-tab-headers\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{ tab.heading }}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})\n\nexport class TabHeaders extends BaseTabHeader implements AfterContentInit, OnChanges, OnDestroy, OnInit {\n\t/**\n\t * List of `Tab` components.\n\t */\n\t// disable the next line because we need to rename the input\n\t// tslint:disable-next-line\n\t@Input(\"tabs\") tabInput: QueryList;\n\n\t@Input() translations = this.i18n.get().TABS;\n\n\t/**\n\t * Gets the Unordered List element that holds the `Tab` headings from the view DOM.\n\t */\n\t@ViewChild(\"tabList\", { static: true }) headerContainer: ElementRef;\n\t/**\n\t * ContentChild of all the n-tabs\n\t */\n\t@ContentChildren(Tab) tabQuery: QueryList;\n\t/**\n\t * set to tabQuery if tabInput is empty\n\t */\n\ttabs: QueryList;\n\t/**\n\t * The index of the first visible tab.\n\t */\n\tfirstVisibleTab = 0;\n\t/**\n\t * The DOM element containing the `Tab` headings displayed.\n\t */\n\t@ViewChildren(\"tabItem\") allTabHeaders: QueryList;\n\tprivate resizeObserver: ResizeObserver;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected changeDetectorRef: ChangeDetectorRef,\n\t\tprotected eventService: EventService,\n\t\tprotected renderer: Renderer2,\n\t\tprotected i18n: I18n\n\t) {\n\t\tsuper(elementRef, changeDetectorRef, eventService, renderer);\n\t}\n\n\t// keyboard accessibility\n\t/**\n\t * Controls the keydown events used for tabbing through the headings.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tkeyboardInput(event) {\n\t\tlet tabsArray = this.tabs.toArray();\n\n\t\tif (event.key === \"ArrowRight\") {\n\t\t\tif (this.currentSelectedTab < this.allTabHeaders.length - 1) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab + 1], this.currentSelectedTab);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.currentSelectedTab + 1].nativeElement.focus();\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[0], 0);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.first.nativeElement.focus();\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"ArrowLeft\") {\n\t\t\tif (this.currentSelectedTab > 0) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab - 1], this.currentSelectedTab);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.currentSelectedTab - 1].nativeElement.focus();\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Home\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (this.followFocus) {\n\t\t\t\tthis.selectTab(event.target, tabsArray[0], 0);\n\t\t\t}\n\t\t\tthis.allTabHeaders.toArray()[0].nativeElement.focus();\n\t\t}\n\n\t\tif (event.key === \"End\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (this.followFocus) {\n\t\t\t\tthis.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);\n\t\t\t}\n\t\t\tthis.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();\n\t\t}\n\n\t\tif ((event.key === \" \" || event.key === \"Spacebar\") && !this.followFocus) {\n\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab], this.currentSelectedTab);\n\t\t}\n\t}\n\n\tngOnInit(): void {\n\t\t// Update scroll on resize\n\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\t// Need to explicitly trigger change detection since this runs outside Angular zone\n\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t});\n\t\tthis.resizeObserver.observe(this.headerContainer.nativeElement);\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.resizeObserver.unobserve(this.headerContainer.nativeElement);\n\t}\n\n\tngAfterContentInit() {\n\t\tif (!this.tabInput) {\n\t\t\tthis.tabs = this.tabQuery;\n\t\t} else {\n\t\t\tthis.tabs = this.tabInput;\n\t\t}\n\n\t\tthis.tabs.forEach(tab => tab.cacheActive = this.cacheActive);\n\t\tthis.tabs.changes.subscribe(() => {\n\t\t\tthis.setFirstTab();\n\t\t});\n\t\tthis.setFirstTab();\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (this.tabs && changes.cacheActive) {\n\t\t\tthis.tabs.forEach(tab => tab.cacheActive = this.cacheActive);\n\t\t}\n\t}\n\n\t/**\n\t * Controls manually focusing tabs.\n\t */\n\tonTabFocus(ref: HTMLElement, index: number) {\n\t\tthis.currentSelectedTab = index;\n\t\t// reset scroll left because we're already handling it\n\t\tthis.headerContainer.nativeElement.parentElement.scrollLeft = 0;\n\t}\n\n\tgetSelectedTab(): any {\n\t\tconst selected = this.tabs.find(tab => tab.active);\n\t\tif (selected) {\n\t\t\treturn selected;\n\t\t}\n\t\treturn { headingIsTemplate: false, heading: \"\" };\n\t}\n\n\t/**\n\t * Selects `Tab` 'tab' and moves it into view on the view DOM if it is not already.\n\t */\n\tselectTab(ref: HTMLElement, tab: Tab, tabIndex: number) {\n\t\tif (tab.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.currentSelectedTab = tabIndex;\n\t\tthis.tabs.forEach(_tab => _tab.active = false);\n\t\ttab.active = true;\n\t\ttab.doSelect();\n\t}\n\n\t/**\n\t * Determines which `Tab` is initially selected.\n\t */\n\tprotected setFirstTab() {\n\t\tsetTimeout(() => {\n\t\t\tlet firstTab = this.tabs.find(tab => tab.active);\n\t\t\tif (!firstTab && this.tabs.first) {\n\t\t\t\tfirstTab = this.tabs.first;\n\t\t\t\tfirstTab.active = true;\n\t\t\t}\n\t\t\tif (firstTab) {\n\t\t\t\tfirstTab.doSelect();\n\t\t\t}\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "" }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "" }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 148, "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "changeDetectorRef", "type": "ChangeDetectorRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "eventService", "type": "EventService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "renderer", "type": "Renderer2", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [ "BaseTabHeader" ], "implements": [ "AfterContentInit", "OnChanges", "OnDestroy", "OnInit" ] }, { "name": "Table", "id": "component-Table-add4f2744657f84a37212b91e107ae8dedf1f937ee83de962f8e220fdcdca1bd0218cef51d8dd9845b2ed20d271cfb25d705a0a59f2cc5af088213e4a5ce1700", "file": "src/table/table.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-table, ibm-table", "styleUrls": [], "styles": [ "\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t" ], "template": "\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t
    {{getEndOfDataText() | async}}
    \n\t\t\t\t\n\t\t\t\n\t\t\n\t\n\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaDescribedby", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nId of the table header description element\n", "description": "

    Id of the table header description element

    \n", "line": 313, "type": "string", "decorators": [] }, { "name": "ariaLabelledby", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nId of the table header title element\n", "description": "

    Id of the table header title element

    \n", "line": 309, "type": "string", "decorators": [] }, { "name": "enableSingleSelect", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls whether to enable multiple or single row selection.\n", "description": "

    Controls whether to enable multiple or single row selection.

    \n", "line": 407, "type": "boolean", "decorators": [] }, { "name": "expandButtonAriaLabel", "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "pos": 12603, "end": 12783, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 12604, "end": 12608, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "
      \n
    • Enable column resize when Carbon officially supports feature\nSet to true to enable users to resize columns.
      • \n
    \n

    Works for columns with width set in pixels.

    \n" } ], "line": 435, "type": "string | Observable", "decorators": [] }, { "name": "footerTemplate", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet footer template to customize what is displayed in the tfoot section of the table\n", "description": "

    Set footer template to customize what is displayed in the tfoot section of the table

    \n", "line": 496, "type": "TemplateRef", "decorators": [] }, { "name": "isDataGrid", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a data grid with keyboard interactions.\n", "description": "

    Set to true for a data grid with keyboard interactions.

    \n", "line": 371, "type": "boolean", "decorators": [] }, { "name": "model", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n`TableModel` with data the table is to display.\n", "description": "

    TableModel with data the table is to display.

    \n", "line": 319, "type": "TableModel", "decorators": [] }, { "name": "noBorder", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 388, "type": "boolean", "decorators": [] }, { "name": "scrollLoadDistance", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nDistance (in px) from the bottom that view has to reach before\n`scrollLoad` event is emitted.\n", "description": "

    Distance (in px) from the bottom that view has to reach before\nscrollLoad event is emitted.

    \n", "line": 413, "type": "number", "decorators": [] }, { "name": "selectionLabelColumn", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to populate the row selection checkbox label with a useful value if set.\n\nExample:\n```\n\n\n```\n", "description": "

    Used to populate the row selection checkbox label with a useful value if set.

    \n

    Example:

    \nExample :
    <cds-table [selectionLabelColumn]="0"></cds-table>\n<!-- results in aria-label="Select first column value"\n(where "first column value" is the value of the first column in the row -->
    ", "line": 508, "type": "number", "decorators": [] }, { "name": "showExpandAllToggle", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show expansion toggle when table consists of row expansions\n", "description": "

    Set to true to show expansion toggle when table consists of row expansions

    \n", "line": 393, "type": "boolean", "decorators": [] }, { "name": "showSelectionColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls whether to show the selection checkboxes column or not.\n", "description": "

    Controls whether to show the selection checkboxes column or not.

    \n", "line": 402, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSize of the table rows.\n", "description": "

    Size of the table rows.

    \n", "line": 363, "type": "TableRowSize", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a loading table.\n", "description": "

    Set to true for a loading table.

    \n", "line": 367, "type": "boolean", "decorators": [] }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSetting sortable to false will disable all headers including headers which are sortable. Is is\npossible to set the sortable state on the header item to disable/enable sorting for only some headers.\n", "description": "

    Setting sortable to false will disable all headers including headers which are sortable. Is is\npossible to set the sortable state on the header item to disable/enable sorting for only some headers.

    \n", "line": 386, "type": "boolean", "decorators": [] }, { "name": "sortAscendingLabel", "deprecated": false, "deprecationMessage": "", "line": 449, "type": "string | Observable", "decorators": [] }, { "name": "sortDescendingLabel", "deprecated": false, "deprecationMessage": "", "line": 442, "type": "string | Observable", "decorators": [] }, { "name": "stickyHeader", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to stick the header to the top of the table\n", "description": "

    Set to true to stick the header to the top of the table

    \n", "line": 491, "type": "boolean", "decorators": [] }, { "name": "striped", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `false` to remove table rows (zebra) stripes.\n", "description": "

    Set to false to remove table rows (zebra) stripes.

    \n", "line": 481, "type": "boolean", "decorators": [] }, { "name": "translations", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"FILTER\": \"Filter\",\n\t\t\"END_OF_DATA\": \"You've reached the end of your content\",\n\t\t\"SCROLL_TOP\": \"Scroll to top\",\n\t\t\"CHECKBOX_HEADER\": \"Select all rows\",\n\t\t\"CHECKBOX_ROW\": \"Select row\"\n}\n```\n", "description": "

    Expects an object that contains some or all of:

    \nExample :
    {\n        "FILTER": "Filter",\n        "END_OF_DATA": "You've reached the end of your content",\n        "SCROLL_TOP": "Scroll to top",\n        "CHECKBOX_HEADER": "Select all rows",\n        "CHECKBOX_ROW": "Select row"\n}
    ", "line": 469, "type": "any", "decorators": [] } ], "outputsClass": [ { "name": "deselectAll", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if all rows are deselected.\n\n", "description": "

    Emits if all rows are deselected.

    \n", "jsdoctags": [ { "pos": 17503, "end": 17518, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 17504, "end": 17509, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "", "name": { "pos": 17510, "end": 17515, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "model" }, "isNameFirst": true, "isBracketed": false } ], "line": 580, "type": "EventEmitter" }, { "name": "deselectRow", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if a single row is deselected.\n\n", "description": "

    Emits if a single row is deselected.

    \n", "jsdoctags": [ { "pos": 17792, "end": 17850, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 17793, "end": 17798, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    ({model: this.model, deselectedRowIndex: index})

    \n", "name": { "pos": 17799, "end": 17799, "flags": 17104896, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "" }, "isNameFirst": true, "isBracketed": false } ], "line": 594, "type": "EventEmitter" }, { "name": "rowClick", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if a row item excluding expandButtons, checkboxes, or radios is clicked.\n", "description": "

    Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.

    \n", "line": 599, "type": "EventEmitter" }, { "name": "scrollLoad", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits when table requires more data to be loaded.\n", "description": "

    Emits when table requires more data to be loaded.

    \n", "line": 604, "type": "EventEmitter" }, { "name": "selectAll", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if all rows are selected.\n\n", "description": "

    Emits if all rows are selected.

    \n", "jsdoctags": [ { "pos": 17382, "end": 17397, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 17383, "end": 17388, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "", "name": { "pos": 17389, "end": 17394, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "model" }, "isNameFirst": true, "isBracketed": false } ], "line": 573, "type": "EventEmitter" }, { "name": "selectRow", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if a single row is selected.\n\n", "description": "

    Emits if a single row is selected.

    \n", "jsdoctags": [ { "pos": 17627, "end": 17683, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 17628, "end": 17633, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    ({model: this.model, selectedRowIndex: index})

    \n", "name": { "pos": 17634, "end": 17634, "flags": 17104896, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "" }, "isNameFirst": true, "isBracketed": false } ], "line": 587, "type": "EventEmitter" }, { "name": "sort", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an index of the column that wants to be sorted.\n\nIf no observers are provided (default), table will attempt to do a simple sort of the data loaded\ninto the model.\n\nIf an observer is provided, table will not attempt any sorting of its own and it is up to the observer\nto sort the table. This is what you typically want if you're using a backend query to get the sorted\ndata or want to sort data across multiple pages.\n\nUsage:\n\n```typescript\n@Component({\n\tselector: \"app-table\",\n\ttemplate: `\n\t\t\n\t\t\tNo data.\n\t\t\n\t`\n})\nexport class TableApp implements OnInit, OnChanges {\n\t@Input() model = new TableModel();\n\n\tngOnInit() {\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({ data: \"Name\" }),\n\t\t\tnew TableHeaderItem({ data: \"hwer\" })\n\t\t];\n\n\t\tthis.model.data = [\n\t\t\t[new TableItem({ data: \"Name 1\" }), new TableItem({ data: \"qwer\" })],\n\t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: \"zwer\" })],\n\t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: \"swer\" })],\n\t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({data: \"twer\"})]\n\t\t];\n\t}\n\n\tsimpleSort(index: number) {\n\t\t// this function does a simple sort, which is the default for the table and if that's\n\t\t// all you want, you don't need to do this.\n\n\t\t// here you can query your backend and update the model.data based on the result\n\t\tif (this.model.header[index].sorted) {\n\t\t\t// if already sorted flip sorting direction\n\t\t\tthis.model.header[index].ascending = this.model.header[index].descending;\n\t\t}\n\t\tthis.model.sort(index);\n\t}\n}\n```\n", "description": "

    Emits an index of the column that wants to be sorted.

    \n

    If no observers are provided (default), table will attempt to do a simple sort of the data loaded\ninto the model.

    \n

    If an observer is provided, table will not attempt any sorting of its own and it is up to the observer\nto sort the table. This is what you typically want if you're using a backend query to get the sorted\ndata or want to sort data across multiple pages.

    \n

    Usage:

    \nExample :
    @Component({\n    selector: "app-table",\n    template: `\n        <cds-table\n            [model]="model"\n            (sort)="simpleSort($event)">\n            No data.\n        </cds-table>\n    `\n})\nexport class TableApp implements OnInit, OnChanges {\n    @Input() model = new TableModel();\n\n    ngOnInit() {\n        this.model.header = [\n            new TableHeaderItem({ data: "Name" }),\n            new TableHeaderItem({ data: "hwer" })\n        ];\n\n        this.model.data = [\n            [new TableItem({ data: "Name 1" }), new TableItem({ data: "qwer" })],\n            [new TableItem({ data: "Name 3" }), new TableItem({ data: "zwer" })],\n            [new TableItem({ data: "Name 2" }), new TableItem({ data: "swer" })],\n            [new TableItem({ data: "Name 4" }), new TableItem({data: "twer"})],\n            [new TableItem({ data: "Name 5" }), new TableItem({data: "twer"})],\n            [new TableItem({ data: "Name 6" }), new TableItem({data: "twer"})]\n        ];\n    }\n\n    simpleSort(index: number) {\n        // this function does a simple sort, which is the default for the table and if that's\n        // all you want, you don't need to do this.\n\n        // here you can query your backend and update the model.data based on the result\n        if (this.model.header[index].sorted) {\n            // if already sorted flip sorting direction\n            this.model.header[index].ascending = this.model.header[index].descending;\n        }\n        this.model.sort(index);\n    }\n}
    ", "jsdoctags": [ { "pos": 15844, "end": 16089, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 15845, "end": 15854, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "Component" }, "comment": "

    ({\nselector: "app-table",\ntemplate: <cds-table [model]="model" (sort)="simpleSort($event)"> No data. </cds-table>\n})\nexport class TableApp implements OnInit, OnChanges {

    \n" }, { "pos": 16089, "end": 17283, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 16090, "end": 16095, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "Input" }, "comment": "

    () model = new TableModel();

    \n

    ngOnInit() {\nthis.model.header = [\nnew TableHeaderItem({ data: "Name" }),\nnew TableHeaderItem({ data: "hwer" })\n];

    \n

    this.model.data = [\n[new TableItem({ data: "Name 1" }), new TableItem({ data: "qwer" })],\n[new TableItem({ data: "Name 3" }), new TableItem({ data: "zwer" })],\n[new TableItem({ data: "Name 2" }), new TableItem({ data: "swer" })],\n[new TableItem({ data: "Name 4" }), new TableItem({data: "twer"})],\n[new TableItem({ data: "Name 5" }), new TableItem({data: "twer"})],\n[new TableItem({ data: "Name 6" }), new TableItem({data: "twer"})]\n];\n}

    \n

    simpleSort(index: number) {\n// this function does a simple sort, which is the default for the table and if that's\n// all you want, you don't need to do this.

    \n

    // here you can query your backend and update the model.data based on the result\nif (this.model.header[index].sorted) {\n// if already sorted flip sorting direction\nthis.model.header[index].ascending = this.model.header[index].descending;\n}\nthis.model.sort(index);\n}\n}\n```

    \n" } ], "line": 566, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "columnDraggedHoverIndex", "defaultValue": "-1", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 623, "modifierKind": [ 125 ] }, { "name": "columnDraggedPosition", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 624, "modifierKind": [ 125 ] }, { "name": "isColumnDragging", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 622, "modifierKind": [ 125 ] }, { "name": "selectAllCheckbox", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Controls if all checkboxes are viewed as selected.

    \n", "line": 609, "rawdescription": "\n\nControls if all checkboxes are viewed as selected.\n" }, { "name": "selectAllCheckboxSomeSelected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Controls the indeterminate state of the header checkbox.

    \n", "line": 614, "rawdescription": "\n\nControls the indeterminate state of the header checkbox.\n" }, { "name": "tableContent", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Allows table content to scroll horizontally

    \n", "line": 486, "rawdescription": "\n\nAllows table content to scroll horizontally\n", "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--data-table-content'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "columnDragEnd", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "columnIndex", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 825, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "columnIndex", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "columnDragEnter", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "position", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "columnIndex", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 830, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "position", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "columnIndex", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "columnDragLeave", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "position", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "columnIndex", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 835, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "position", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "columnIndex", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "columnDragover", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "position", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "columnIndex", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 839, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "position", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "columnIndex", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "columnDragStart", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "columnIndex", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 819, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "columnIndex", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "columnDrop", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "position", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "columnIndex", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 847, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "position", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "columnIndex", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "columnResizeEnd", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "column", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 800, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "column", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "columnResizeProgress", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "column", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 795, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "column", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "columnResizeStart", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "column", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 782, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "column", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "disableDataGridInteractions", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 710, "deprecated": false, "deprecationMessage": "" }, { "name": "doSort", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 858, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "enableDataGridInteractions", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 680, "deprecated": false, "deprecationMessage": "" }, { "name": "focus", "args": [ { "name": "element", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 294, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 126 ], "jsdoctags": [ { "name": "element", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "getCheckboxHeaderLabel", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 894, "deprecated": false, "deprecationMessage": "" }, { "name": "getCheckboxRowLabel", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 898, "deprecated": false, "deprecationMessage": "" }, { "name": "getEndOfDataText", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 902, "deprecated": false, "deprecationMessage": "" }, { "name": "getExpandButtonAriaLabel", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 884, "deprecated": false, "deprecationMessage": "" }, { "name": "getFilterTitle", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 910, "deprecated": false, "deprecationMessage": "" }, { "name": "getScrollTopText", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 906, "deprecated": false, "deprecationMessage": "" }, { "name": "getSelectionLabelValue", "args": [ { "name": "row", "type": "TableItem[]", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "{ value: any; }", "typeParameters": [], "line": 877, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "row", "type": "TableItem[]", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "getSortAscendingLabel", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 890, "deprecated": false, "deprecationMessage": "" }, { "name": "getSortDescendingLabel", "args": [], "optional": false, "returnType": "any", "typeParameters": [], "line": 887, "deprecated": false, "deprecationMessage": "" }, { "name": "onDeselectAll", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 726, "deprecated": false, "deprecationMessage": "" }, { "name": "onRowClick", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 745, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onScroll", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 809, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTriggered when the user scrolls on the `` element.\nEmits the `scrollLoad` event.\n", "description": "

    Triggered when the user scrolls on the <tbody> element.\nEmits the scrollLoad event.

    \n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onSelectAll", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 721, "deprecated": false, "deprecationMessage": "" }, { "name": "onSelectRow", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 731, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "resetTabIndex", "args": [ { "name": "newTabIndex", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "-1" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 765, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "newTabIndex", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "-1", "tagName": { "text": "param" } } ] }, { "name": "scrollToTop", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 872, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTriggered when the user scrolls on the `` element.\nEmits the `scrollLoad` event.\n", "description": "

    Triggered when the user scrolls on the <tbody> element.\nEmits the scrollLoad event.

    \n", "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "setTabIndex", "args": [ { "name": "element", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" }, { "name": "index", "type": " | \"0\"", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 283, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 126 ], "jsdoctags": [ { "name": "element", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "index", "type": " | \"0\"", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "skeletonModel", "args": [ { "name": "rowCount", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "columnCount", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 264, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCreates a skeleton model with a row and column count specified by the user\n\nExample:\n\n```typescript\nthis.model = Table.skeletonModel(5, 5);\n```\n", "description": "

    Creates a skeleton model with a row and column count specified by the user

    \n

    Example:

    \nExample :
    this.model = Table.skeletonModel(5, 5);
    ", "modifierKind": [ 126 ], "jsdoctags": [ { "name": "rowCount", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "columnCount", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "updateSelectAllCheckbox", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 749, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--data-table-content", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nAllows table content to scroll horizontally\n", "description": "

    Allows table content to scroll horizontally

    \n", "line": 486, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Build your table with this component by extending things that differ from default.

    \n

    See demo

    \n

    Instead of the usual write-your-own-html approach you had with <table>,\ncarbon table uses model-view-controller approach.

    \n

    Here, you create a view (with built-in controller) and provide it a model.\nChanges you make to the model are reflected in the view. Provide same model you use\nin the table to the <cds-pagination> components.\nThey provide a different view over the same data.

    \n

    Basic usage

    \nExample :
    <cds-table [model]="model"></cds-table>
    Example :
    public model = new TableModel();\n\nthis.model.data = [\n    [new TableItem({data: "asdf"}), new TableItem({data: "qwer"})],\n    [new TableItem({data: "csdf"}), new TableItem({data: "zwer"})],\n    [new TableItem({data: "bsdf"}), new TableItem({data: "swer"})],\n    [new TableItem({data: "csdf"}), new TableItem({data: "twer"})]\n];

    Customization

    \n

    If you have custom data in your table, you need a way to display it. You can do that\nby providing a template to TableItem.

    \nExample :
    <ng-template #customTableItemTemplate let-data="data">\n    <a [routerLink]="data.link">{{data.name}} {{data.surname}}</a>\n</ng-template>
    Example :
    customTableItemTemplate: TemplateRef<any>;\n\nthis.customModel.data = [\n    [new TableItem({data: "asdf"}), new TableItem({data: {name: "Lessy", link: "/table"}, template: this.customTableItemTemplate})],\n    [new TableItem({data: "csdf"}), new TableItem({data: "swer"})],\n    [new TableItem({data: "bsdf"}), new TableItem({data: {name: "Alice", surname: "Bob"}, template: this.customTableItemTemplate})],\n    [new TableItem({data: "csdf"}), new TableItem({data: "twer"})],\n];

    Sorting and filtering

    \n

    In case you need custom sorting and/or filtering you should subclass TableHeaderItem\nand override needed functions.

    \nExample :
    class FilterableHeaderItem extends TableHeaderItem {\n    // custom filter function\n    filter(item: TableItem): boolean {\n        if (typeof item.data === "string" && item.data.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||\n        item.data.name && item.data.name.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||\n        item.data.surname && item.data.surname.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0) {\n            return false;\n        }\n        return true;\n    }\n\n    set filterCount(n) {}\n    get filterCount() {\n        return (this.filterData && this.filterData.data && this.filterData.data.length > 0) ? 1 : 0;\n    }\n\n    // used for custom sorting\n    compare(one: TableItem, two: TableItem) {\n        const stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n        const stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n        if (stringOne > stringTwo) {\n            return 1;\n        } else if (stringOne < stringTwo) {\n            return -1;\n        } else {\n            return 0;\n        }\n    }\n}

    If you want to do your sorting on the backend or query for sorted data as a result of user\nclicking the table header, check table sort output documentation

    \n

    See TableHeaderItem class for more information.

    \n

    No data template

    \n

    When table has no data to show, it can show a message you provide it instead.

    \nExample :
    <cds-table [model]="model">No data.</cds-table>

    ... will show No data. message, but you can get creative and provide any template you want\nto replace table's default tbody.

    \n

    Use pagination as table footer

    \nExample :
    <cds-pagination [model]="model" (selectPage)="selectPage($event)"></cds-pagination>

    selectPage() function should fetch the data from backend, create new data, apply it to model.data,\nand update model.currentPage.

    \n

    If the data your server returns is a two dimensional array of objects, it would look something like this:

    \nExample :
    selectPage(page) {\n    this.getPage(page).then((data: Array<Array<any>>) => {\n        // set the data and update page\n        this.model.data = this.prepareData(data);\n        this.model.currentPage = page;\n    });\n}\n\nprotected prepareData(data: Array<Array<any>>) {\n    // create new data from the service data\n    let newData = [];\n    data.forEach(dataRow => {\n        let row = [];\n        dataRow.forEach(dataElement => {\n            row.push(new TableItem({\n                data: dataElement,\n                template: typeof dataElement === "string" ? undefined : this.paginationTableItemTemplate\n                // your template can handle all the data types so you don't have to conditionally set it\n                // you can also set different templates for different columns based on index\n            }));\n        });\n        newData.push(row);\n    });\n    return newData;\n}
    ", "rawdescription": "\n\nBuild your table with this component by extending things that differ from default.\n\n[See demo](../../?path=/story/components-table--basic)\n\nInstead of the usual write-your-own-html approach you had with ``,\ncarbon table uses model-view-controller approach.\n\nHere, you create a view (with built-in controller) and provide it a model.\nChanges you make to the model are reflected in the view. Provide same model you use\nin the table to the `` components.\nThey provide a different view over the same data.\n\n## Basic usage\n\n```html\n\n```\n\n```typescript\npublic model = new TableModel();\n\nthis.model.data = [\n\t[new TableItem({data: \"asdf\"}), new TableItem({data: \"qwer\"})],\n\t[new TableItem({data: \"csdf\"}), new TableItem({data: \"zwer\"})],\n\t[new TableItem({data: \"bsdf\"}), new TableItem({data: \"swer\"})],\n\t[new TableItem({data: \"csdf\"}), new TableItem({data: \"twer\"})]\n];\n```\n\n## Customization\n\nIf you have custom data in your table, you need a way to display it. You can do that\nby providing a template to `TableItem`.\n\n```html\n\n\t{{data.name}} {{data.surname}}\n\n```\n\n```typescript\ncustomTableItemTemplate: TemplateRef;\n\nthis.customModel.data = [\n\t[new TableItem({data: \"asdf\"}), new TableItem({data: {name: \"Lessy\", link: \"/table\"}, template: this.customTableItemTemplate})],\n\t[new TableItem({data: \"csdf\"}), new TableItem({data: \"swer\"})],\n\t[new TableItem({data: \"bsdf\"}), new TableItem({data: {name: \"Alice\", surname: \"Bob\"}, template: this.customTableItemTemplate})],\n\t[new TableItem({data: \"csdf\"}), new TableItem({data: \"twer\"})],\n];\n```\n\n### Sorting and filtering\n\nIn case you need custom sorting and/or filtering you should subclass `TableHeaderItem`\nand override needed functions.\n\n```typescript\nclass FilterableHeaderItem extends TableHeaderItem {\n\t// custom filter function\n\tfilter(item: TableItem): boolean {\n\t\tif (typeof item.data === \"string\" && item.data.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||\n\t\titem.data.name && item.data.name.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||\n\t\titem.data.surname && item.data.surname.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t}\n\n\tset filterCount(n) {}\n\tget filterCount() {\n\t\treturn (this.filterData && this.filterData.data && this.filterData.data.length > 0) ? 1 : 0;\n\t}\n\n\t// used for custom sorting\n\tcompare(one: TableItem, two: TableItem) {\n\t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n\t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n\t\tif (stringOne > stringTwo) {\n\t\t\treturn 1;\n\t\t} else if (stringOne < stringTwo) {\n\t\t\treturn -1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n}\n```\n\nIf you want to do your sorting on the backend or query for sorted data as a result of user\nclicking the table header, check table [`sort`](#sort) output documentation\n\nSee `TableHeaderItem` class for more information.\n\n## No data template\n\nWhen table has no data to show, it can show a message you provide it instead.\n\n```html\nNo data.\n```\n\n... will show `No data.` message, but you can get creative and provide any template you want\nto replace table's default `tbody`.\n\n## Use pagination as table footer\n\n```html\n\n```\n\n`selectPage()` function should fetch the data from backend, create new `data`, apply it to `model.data`,\nand update `model.currentPage`.\n\nIf the data your server returns is a two dimensional array of objects, it would look something like this:\n\n```typescript\nselectPage(page) {\n\tthis.getPage(page).then((data: Array>) => {\n\t\t// set the data and update page\n\t\tthis.model.data = this.prepareData(data);\n\t\tthis.model.currentPage = page;\n\t});\n}\n\nprotected prepareData(data: Array>) {\n\t// create new data from the service data\n\tlet newData = [];\n\tdata.forEach(dataRow => {\n\t\tlet row = [];\n\t\tdataRow.forEach(dataElement => {\n\t\t\trow.push(new TableItem({\n\t\t\t\tdata: dataElement,\n\t\t\t\ttemplate: typeof dataElement === \"string\" ? undefined : this.paginationTableItemTemplate\n\t\t\t\t// your template can handle all the data types so you don't have to conditionally set it\n\t\t\t\t// you can also set different templates for different columns based on index\n\t\t\t}));\n\t\t});\n\t\tnewData.push(row);\n\t});\n\treturn newData;\n}\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tApplicationRef,\n\tInput,\n\tOnInit,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tAfterViewInit,\n\tTemplateRef,\n\tOnDestroy,\n\tHostBinding\n} from \"@angular/core\";\nimport { Subscription, fromEvent, Observable } from \"rxjs\";\n\nimport { TableModel } from \"./table-model.class\";\nimport { TableHeaderItem } from \"./table-header-item.class\";\nimport { TableItem } from \"./table-item.class\";\n\nimport { getFocusElementList, tabbableSelectorIgnoreTabIndex } from \"carbon-components-angular/common\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { merge } from \"carbon-components-angular/utils\";\nimport { DataGridInteractionModel } from \"./data-grid-interaction-model.class\";\nimport { TableDomAdapter } from \"./table-adapter.class\";\nimport { TableRowSize } from \"./table.types\";\n\n/**\n * Build your table with this component by extending things that differ from default.\n *\n * [See demo](../../?path=/story/components-table--basic)\n *\n * Instead of the usual write-your-own-html approach you had with `
    `,\n * carbon table uses model-view-controller approach.\n *\n * Here, you create a view (with built-in controller) and provide it a model.\n * Changes you make to the model are reflected in the view. Provide same model you use\n * in the table to the `` components.\n * They provide a different view over the same data.\n *\n * ## Basic usage\n *\n * ```html\n * \n * ```\n *\n * ```typescript\n * public model = new TableModel();\n *\n * this.model.data = [\n * \t[new TableItem({data: \"asdf\"}), new TableItem({data: \"qwer\"})],\n * \t[new TableItem({data: \"csdf\"}), new TableItem({data: \"zwer\"})],\n * \t[new TableItem({data: \"bsdf\"}), new TableItem({data: \"swer\"})],\n * \t[new TableItem({data: \"csdf\"}), new TableItem({data: \"twer\"})]\n * ];\n * ```\n *\n * ## Customization\n *\n * If you have custom data in your table, you need a way to display it. You can do that\n * by providing a template to `TableItem`.\n *\n * ```html\n * \n * \t{{data.name}} {{data.surname}}\n * \n * ```\n *\n * ```typescript\n * customTableItemTemplate: TemplateRef;\n *\n * this.customModel.data = [\n * \t[new TableItem({data: \"asdf\"}), new TableItem({data: {name: \"Lessy\", link: \"/table\"}, template: this.customTableItemTemplate})],\n * \t[new TableItem({data: \"csdf\"}), new TableItem({data: \"swer\"})],\n * \t[new TableItem({data: \"bsdf\"}), new TableItem({data: {name: \"Alice\", surname: \"Bob\"}, template: this.customTableItemTemplate})],\n * \t[new TableItem({data: \"csdf\"}), new TableItem({data: \"twer\"})],\n * ];\n * ```\n *\n * ### Sorting and filtering\n *\n * In case you need custom sorting and/or filtering you should subclass `TableHeaderItem`\n * and override needed functions.\n *\n * ```typescript\n * class FilterableHeaderItem extends TableHeaderItem {\n * \t// custom filter function\n * \tfilter(item: TableItem): boolean {\n * \t\tif (typeof item.data === \"string\" && item.data.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||\n * \t\titem.data.name && item.data.name.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||\n * \t\titem.data.surname && item.data.surname.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0) {\n * \t\t\treturn false;\n * \t\t}\n * \t\treturn true;\n * \t}\n *\n * \tset filterCount(n) {}\n * \tget filterCount() {\n * \t\treturn (this.filterData && this.filterData.data && this.filterData.data.length > 0) ? 1 : 0;\n * \t}\n *\n * \t// used for custom sorting\n * \tcompare(one: TableItem, two: TableItem) {\n * \t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n * \t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n *\n * \t\tif (stringOne > stringTwo) {\n * \t\t\treturn 1;\n * \t\t} else if (stringOne < stringTwo) {\n * \t\t\treturn -1;\n * \t\t} else {\n * \t\t\treturn 0;\n * \t\t}\n * \t}\n * }\n * ```\n *\n * If you want to do your sorting on the backend or query for sorted data as a result of user\n * clicking the table header, check table [`sort`](#sort) output documentation\n *\n * See `TableHeaderItem` class for more information.\n *\n * ## No data template\n *\n * When table has no data to show, it can show a message you provide it instead.\n *\n * ```html\n * No data.\n * ```\n *\n * ... will show `No data.` message, but you can get creative and provide any template you want\n * to replace table's default `tbody`.\n *\n * ## Use pagination as table footer\n *\n * ```html\n * \n * ```\n *\n * `selectPage()` function should fetch the data from backend, create new `data`, apply it to `model.data`,\n * and update `model.currentPage`.\n *\n * If the data your server returns is a two dimensional array of objects, it would look something like this:\n *\n * ```typescript\n * selectPage(page) {\n * \tthis.getPage(page).then((data: Array>) => {\n * \t\t// set the data and update page\n * \t\tthis.model.data = this.prepareData(data);\n * \t\tthis.model.currentPage = page;\n * \t});\n * }\n *\n * protected prepareData(data: Array>) {\n * \t// create new data from the service data\n * \tlet newData = [];\n * \tdata.forEach(dataRow => {\n * \t\tlet row = [];\n * \t\tdataRow.forEach(dataElement => {\n * \t\t\trow.push(new TableItem({\n * \t\t\t\tdata: dataElement,\n * \t\t\t\ttemplate: typeof dataElement === \"string\" ? undefined : this.paginationTableItemTemplate\n * \t\t\t\t// your template can handle all the data types so you don't have to conditionally set it\n * \t\t\t\t// you can also set different templates for different columns based on index\n * \t\t\t}));\n * \t\t});\n * \t\tnewData.push(row);\n * \t});\n * \treturn newData;\n * }\n * ```\n */\n@Component({\n\tselector: \"cds-table, ibm-table\",\n\ttemplate: `\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    {{getEndOfDataText() | async}}
    \n\t\t\t\t\t\n\t\t\t\t
    \n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t`]\n})\nexport class Table implements OnInit, AfterViewInit, OnDestroy {\n\t/**\n\t * Creates a skeleton model with a row and column count specified by the user\n\t *\n\t * Example:\n\t *\n\t * ```typescript\n\t * this.model = Table.skeletonModel(5, 5);\n\t * ```\n\t */\n\tstatic skeletonModel(rowCount: number, columnCount: number) {\n\t\tconst model = new TableModel();\n\t\tlet header = new Array();\n\t\tlet data = new Array>();\n\t\tlet row = new Array();\n\n\t\tfor (let i = 0; i < columnCount; i++) {\n\t\t\theader.push(new TableHeaderItem());\n\t\t\trow.push(new TableItem());\n\t\t}\n\t\tfor (let i = 0; i < rowCount - 1; i++) {\n\t\t\tdata.push(row);\n\t\t}\n\n\t\tmodel.header = header;\n\t\tmodel.data = data;\n\t\treturn model;\n\t}\n\n\tstatic setTabIndex(element: HTMLElement, index: -1 | 0) {\n\t\tconst focusElementList = getFocusElementList(element, tabbableSelectorIgnoreTabIndex);\n\t\tif (element.firstElementChild && element.firstElementChild.classList.contains(\"cds--table-sort\") && focusElementList.length > 1) {\n\t\t\tfocusElementList[1].tabIndex = index;\n\t\t} else if (focusElementList.length > 0) {\n\t\t\tfocusElementList[0].tabIndex = index;\n\t\t} else {\n\t\t\telement.tabIndex = index;\n\t\t}\n\t}\n\n\tstatic focus(element: HTMLElement) {\n\t\tconst focusElementList = getFocusElementList(element, tabbableSelectorIgnoreTabIndex);\n\t\tif (\n\t\t\t(element.firstElementChild?.classList.contains(\"cds--table-sort\") && focusElementList.length > 1) ||\n\t\t\tfocusElementList.length > 0\n\t\t) {\n\t\t\tfocusElementList[0].focus();\n\t\t} else {\n\t\t\telement.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Id of the table header title element\n\t */\n\t@Input() ariaLabelledby: string;\n\t/**\n\t * Id of the table header description element\n\t */\n\t@Input() ariaDescribedby: string;\n\n\t/**\n\t * `TableModel` with data the table is to display.\n\t */\n\t@Input()\n\tset model(m: TableModel) {\n\t\tif (this._model) {\n\t\t\tthis.subscriptions.unsubscribe();\n\t\t\t// Need to create a new subscription instance here because unsubscribing prevents any new subscriptions\n\t\t\t// from being added for some reason. When a new model is set, none of the subscriptions would exist.\n\t\t\tthis.subscriptions = new Subscription();\n\t\t}\n\n\t\tthis._model = m;\n\n\t\tconst rowsChange = this._model.rowsSelectedChange.subscribe(() => this.updateSelectAllCheckbox());\n\t\tconst dataChange = this._model.dataChange.subscribe(() => {\n\t\t\tif (this.isDataGrid) {\n\t\t\t\tthis.resetTabIndex();\n\t\t\t}\n\t\t\tthis.updateSelectAllCheckbox();\n\t\t});\n\n\t\tthis.subscriptions.add(rowsChange);\n\t\tthis.subscriptions.add(dataChange);\n\n\t\tif (this.isDataGrid) {\n\t\t\tconst expandedChange = this._model.rowsExpandedChange.subscribe(() => {\n\t\t\t\t// Allows the expanded row to have a focus state when it exists in the DOM\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tconst expandedRows = this.elementRef.nativeElement.querySelectorAll(\".cds--expandable-row:not(.cds--parent-row)\");\n\t\t\t\t\tArray.from(expandedRows).forEach(row => {\n\t\t\t\t\t\tif (row.firstElementChild.tabIndex === undefined || row.firstElementChild.tabIndex !== -1) {\n\t\t\t\t\t\t\trow.firstElementChild.tabIndex = -1;\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t});\n\t\t\tthis.subscriptions.add(expandedChange);\n\t\t}\n\t}\n\n\tget model(): TableModel {\n\t\treturn this._model;\n\t}\n\n\t/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\n\t/**\n\t * Set to `true` for a loading table.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for a data grid with keyboard interactions.\n\t */\n\t@Input() set isDataGrid(value: boolean) {\n\t\tthis._isDataGrid = value;\n\t\tif (this.isViewReady) {\n\t\t\tif (value) {\n\t\t\t\tthis.enableDataGridInteractions();\n\t\t\t} else {\n\t\t\t\tthis.disableDataGridInteractions();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Setting sortable to false will disable all headers including headers which are sortable. Is is\n\t * possible to set the sortable state on the header item to disable/enable sorting for only some headers.\n\t */\n\t@Input() sortable = true;\n\n\t@Input() noBorder = true;\n\n\t/**\n\t * Set to `true` to show expansion toggle when table consists of row expansions\n\t */\n\t@Input() showExpandAllToggle = false;\n\n\tget isDataGrid(): boolean {\n\t\treturn this._isDataGrid;\n\t}\n\n\t/**\n\t * Controls whether to show the selection checkboxes column or not.\n\t */\n\t@Input() showSelectionColumn = true;\n\n\t/**\n\t * Controls whether to enable multiple or single row selection.\n\t */\n\t@Input() enableSingleSelect = false;\n\n\t/**\n\t * Distance (in px) from the bottom that view has to reach before\n\t * `scrollLoad` event is emitted.\n\t */\n\t@Input() scrollLoadDistance = 0;\n\n\t/**\n\t * @todo - Enable column resize when Carbon officially supports feature\n\t * Set to `true` to enable users to resize columns.\n\t *\n\t * Works for columns with width set in pixels.\n\t *\n\t */\n\t// @Input() columnsResizable = false;\n\n\t/**\n\t * @todo - Enable columns drag & drop when Carbon officially supports feature\n\t * Set to `true` to enable users to drag and drop columns.\n\t *\n\t * Changing the column order in table changes table model. Be aware of it when you add additional data\n\t * to the model.\n\t *\n\t */\n\t// @Input() columnsDraggable = false;\n\n\t@Input()\n\tset expandButtonAriaLabel(value: string | Observable) {\n\t\tthis._expandButtonAriaLabel.override(value);\n\t}\n\tget expandButtonAriaLabel() {\n\t\treturn this._expandButtonAriaLabel.value;\n\t}\n\t@Input()\n\tset sortDescendingLabel(value: string | Observable) {\n\t\tthis._sortDescendingLabel.override(value);\n\t}\n\tget sortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.value;\n\t}\n\t@Input()\n\tset sortAscendingLabel(value: string | Observable) {\n\t\tthis._sortAscendingLabel.override(value);\n\t}\n\tget sortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.value;\n\t}\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"FILTER\": \"Filter\",\n\t *\t\t\"END_OF_DATA\": \"You've reached the end of your content\",\n\t *\t\t\"SCROLL_TOP\": \"Scroll to top\",\n\t *\t\t\"CHECKBOX_HEADER\": \"Select all rows\",\n\t *\t\t\"CHECKBOX_ROW\": \"Select row\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"TABLE\"), value);\n\t\tthis._filterTitle.override(valueWithDefaults.FILTER);\n\t\tthis._endOfDataText.override(valueWithDefaults.END_OF_DATA);\n\t\tthis._scrollTopText.override(valueWithDefaults.SCROLL_TOP);\n\t\tthis._checkboxHeaderLabel.override(valueWithDefaults.CHECKBOX_HEADER);\n\t\tthis._checkboxRowLabel.override(valueWithDefaults.CHECKBOX_ROW);\n\t}\n\n\t/**\n\t * Set to `false` to remove table rows (zebra) stripes.\n\t */\n\t@Input() striped = true;\n\n\t/**\n\t * Allows table content to scroll horizontally\n\t */\n\t@HostBinding(\"class.cds--data-table-content\") tableContent = true;\n\n\t/**\n\t * Set to `true` to stick the header to the top of the table\n\t */\n\t@HostBinding(\"class.cds--data-table_inner-container\") @Input() stickyHeader = false;\n\n\t/**\n\t * Set footer template to customize what is displayed in the tfoot section of the table\n\t */\n\t@Input() footerTemplate: TemplateRef;\n\n\t/**\n\t * Used to populate the row selection checkbox label with a useful value if set.\n\t *\n\t * Example:\n\t * ```\n\t * \n\t * \n\t * ```\n\t */\n\t@Input() selectionLabelColumn: number;\n\n\t/**\n\t * Emits an index of the column that wants to be sorted.\n\t *\n\t * If no observers are provided (default), table will attempt to do a simple sort of the data loaded\n\t * into the model.\n\t *\n\t * If an observer is provided, table will not attempt any sorting of its own and it is up to the observer\n\t * to sort the table. This is what you typically want if you're using a backend query to get the sorted\n\t * data or want to sort data across multiple pages.\n\t *\n\t * Usage:\n\t *\n\t * ```typescript\n\t * @Component({\n\t * \tselector: \"app-table\",\n\t * \ttemplate: `\n\t * \t\t\n\t * \t\t\tNo data.\n\t * \t\t\n\t * \t`\n\t * })\n\t * export class TableApp implements OnInit, OnChanges {\n\t * \t@Input() model = new TableModel();\n\t *\n\t * \tngOnInit() {\n\t * \t\tthis.model.header = [\n\t * \t\t\tnew TableHeaderItem({ data: \"Name\" }),\n\t * \t\t\tnew TableHeaderItem({ data: \"hwer\" })\n\t * \t\t];\n\t *\n\t * \t\tthis.model.data = [\n\t * \t\t\t[new TableItem({ data: \"Name 1\" }), new TableItem({ data: \"qwer\" })],\n\t * \t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: \"zwer\" })],\n\t * \t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: \"swer\" })],\n\t * \t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({data: \"twer\"})],\n\t * \t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({data: \"twer\"})],\n\t * \t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({data: \"twer\"})]\n\t * \t\t];\n\t * \t}\n\t *\n\t * \tsimpleSort(index: number) {\n\t * \t\t// this function does a simple sort, which is the default for the table and if that's\n\t * \t\t// all you want, you don't need to do this.\n\t *\n\t * \t\t// here you can query your backend and update the model.data based on the result\n\t * \t\tif (this.model.header[index].sorted) {\n\t * \t\t\t// if already sorted flip sorting direction\n\t * \t\t\tthis.model.header[index].ascending = this.model.header[index].descending;\n\t * \t\t}\n\t * \t\tthis.model.sort(index);\n\t * \t}\n\t * }\n\t * ```\n\t */\n\t@Output() sort = new EventEmitter();\n\n\t/**\n\t * Emits if all rows are selected.\n\t *\n\t * @param model\n\t */\n\t@Output() selectAll = new EventEmitter();\n\n\t/**\n\t * Emits if all rows are deselected.\n\t *\n\t * @param model\n\t */\n\t@Output() deselectAll = new EventEmitter();\n\n\t/**\n\t * Emits if a single row is selected.\n\t *\n\t * @param ({model: this.model, selectedRowIndex: index})\n\t */\n\t@Output() selectRow = new EventEmitter();\n\n\t/**\n\t * Emits if a single row is deselected.\n\t *\n\t * @param ({model: this.model, deselectedRowIndex: index})\n\t */\n\t@Output() deselectRow = new EventEmitter();\n\n\t/**\n\t * Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.\n\t */\n\t@Output() rowClick = new EventEmitter();\n\n\t/**\n\t * Emits when table requires more data to be loaded.\n\t */\n\t@Output() scrollLoad = new EventEmitter();\n\n\t/**\n\t * Controls if all checkboxes are viewed as selected.\n\t */\n\tselectAllCheckbox = false;\n\n\t/**\n\t * Controls the indeterminate state of the header checkbox.\n\t */\n\tselectAllCheckboxSomeSelected = false;\n\n\tget noData() {\n\t\treturn !this.model.data ||\n\t\t\tthis.model.data.length === 0 ||\n\t\t\tthis.model.data.length === 1 && this.model.data[0].length === 0;\n\t}\n\n\tpublic isColumnDragging = false;\n\tpublic columnDraggedHoverIndex = -1;\n\tpublic columnDraggedPosition = \"\";\n\n\tprotected _model: TableModel;\n\tprotected _isDataGrid = false;\n\t// flag to prevent getters/setters from querying the view before it's fully instantiated\n\tprotected isViewReady = false;\n\n\tprotected subscriptions = new Subscription();\n\tprotected positionSubscription: Subscription;\n\n\tprotected interactionModel: DataGridInteractionModel;\n\tprotected interactionPositionSubscription: Subscription;\n\n\tprotected _expandButtonAriaLabel = this.i18n.getOverridable(\"TABLE.EXPAND_BUTTON\");\n\tprotected _sortDescendingLabel = this.i18n.getOverridable(\"TABLE.SORT_DESCENDING\");\n\tprotected _sortAscendingLabel = this.i18n.getOverridable(\"TABLE.SORT_ASCENDING\");\n\tprotected _checkboxHeaderLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\tprotected _checkboxRowLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_ROW\");\n\tprotected _endOfDataText = this.i18n.getOverridable(\"TABLE.END_OF_DATA\");\n\tprotected _scrollTopText = this.i18n.getOverridable(\"TABLE.SCROLL_TOP\");\n\tprotected _filterTitle = this.i18n.getOverridable(\"TABLE.FILTER\");\n\n\tprotected columnResizeWidth: number;\n\tprotected columnResizeMouseX: number;\n\tprotected mouseMoveSubscription: Subscription;\n\tprotected mouseUpSubscription: Subscription;\n\n\t/**\n\t * Creates an instance of Table.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected applicationRef: ApplicationRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// Manually trigger check to see if all checkboxes are selected\n\t\t// This is since subscription is made AFTER checkboxes are selected\n\t\tthis.updateSelectAllCheckbox();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.isViewReady = true;\n\t\tif (this.isDataGrid) {\n\t\t\tthis.enableDataGridInteractions();\n\t\t}\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t\tif (this.positionSubscription) {\n\t\t\tthis.positionSubscription.unsubscribe();\n\t\t}\n\t}\n\n\tenableDataGridInteractions() {\n\t\t// if we have an `interactioModel` we've already enabled datagrid\n\t\tif (this.interactionModel) {\n\t\t\treturn;\n\t\t}\n\t\tconst table = this.elementRef.nativeElement.querySelector(\"table\") as HTMLTableElement;\n\t\tconst tableAdapter = new TableDomAdapter(table);\n\t\tconst keydownEventStream = fromEvent(table, \"keydown\");\n\t\tconst clickEventStream = fromEvent(table, \"click\");\n\t\tthis.interactionModel = new DataGridInteractionModel(keydownEventStream, clickEventStream, tableAdapter);\n\t\tthis.positionSubscription = this.interactionModel.position.subscribe(event => {\n\t\t\tconst [currentRow, currentColumn] = event.current;\n\t\t\tconst [previousRow, previousColumn] = event.previous;\n\n\t\t\tconst currentElement = tableAdapter.getCell(currentRow, currentColumn);\n\t\t\tTable.setTabIndex(currentElement, 0);\n\n\t\t\t// if the model has just initialized don't focus or reset anything\n\t\t\tif (previousRow === -1 || previousColumn === -1) { return; }\n\t\t\t// Make the previous cell unfocusable (if it's not the current)\n\t\t\tif (previousRow !== currentRow || previousColumn !== currentColumn) {\n\t\t\t\tconst previousElement = tableAdapter.getCell(previousRow, previousColumn);\n\t\t\t\tTable.setTabIndex(previousElement, -1);\n\t\t\t}\n\t\t\tTable.focus(currentElement);\n\t\t});\n\t\t// call this after assigning `this.interactionModel` since it depends on it\n\t\tthis.resetTabIndex();\n\t}\n\n\tdisableDataGridInteractions() {\n\t\t// unsubscribe first so we don't cause the focus to fly around\n\t\tif (this.positionSubscription) {\n\t\t\tthis.positionSubscription.unsubscribe();\n\t\t}\n\t\t// undo tab indexing (also resets the model)\n\t\tthis.resetTabIndex(0);\n\t\t// null out the model ref\n\t\tthis.interactionModel = null;\n\t}\n\n\tonSelectAll() {\n\t\tthis.model.selectAll(true);\n\t\tthis.selectAll.emit(this.model);\n\t}\n\n\tonDeselectAll() {\n\t\tthis.model.selectAll(false);\n\t\tthis.deselectAll.emit(this.model);\n\t}\n\n\tonSelectRow(event) {\n\t\t// check for the existence of the selectedRowIndex property\n\t\tif (Object.keys(event).includes(\"selectedRowIndex\")) {\n\t\t\tif (this.enableSingleSelect) {\n\t\t\t\tthis.model.selectAll(false);\n\t\t\t}\n\t\t\tthis.model.selectRow(event.selectedRowIndex, true);\n\t\t\tthis.selectRow.emit(event);\n\t\t} else {\n\t\t\tthis.model.selectRow(event.deselectedRowIndex, false);\n\t\t\tthis.deselectRow.emit(event);\n\t\t}\n\t}\n\n\tonRowClick(index: number) {\n\t\tthis.rowClick.emit(index);\n\t}\n\n\tupdateSelectAllCheckbox() {\n\t\tconst selectedRowsCount = this.model.selectedRowsCount();\n\n\t\tif (selectedRowsCount <= 0) {\n\t\t\t// reset select all checkbox if nothing selected\n\t\t\tthis.selectAllCheckbox = false;\n\t\t\tthis.selectAllCheckboxSomeSelected = false;\n\t\t} else if (selectedRowsCount < this.model.data.length) {\n\t\t\tthis.selectAllCheckbox = true;\n\t\t\tthis.selectAllCheckboxSomeSelected = true;\n\t\t} else {\n\t\t\tthis.selectAllCheckbox = true;\n\t\t\tthis.selectAllCheckboxSomeSelected = false;\n\t\t}\n\t}\n\n\tresetTabIndex(newTabIndex = -1) {\n\t\t// ensure the view is ready for the reset before we preform the actual reset\n\t\tsetTimeout(() => {\n\t\t\t// reset all the tabIndexes we can find\n\t\t\tconst focusElementList = getFocusElementList(this.elementRef.nativeElement, tabbableSelectorIgnoreTabIndex);\n\t\t\tif (focusElementList) {\n\t\t\t\tfocusElementList.forEach(tabbable => {\n\t\t\t\t\ttabbable.tabIndex = newTabIndex;\n\t\t\t\t});\n\t\t\t}\n\t\t\t// reset interaction model positions and tabIndexes\n\t\t\tif (this.interactionModel) {\n\t\t\t\tthis.interactionModel.resetTabIndexes(newTabIndex);\n\t\t\t}\n\t\t});\n\t}\n\n\tcolumnResizeStart(event, column) {\n\t\tthis.columnResizeWidth = parseInt(column.style.width, 10);\n\t\tthis.columnResizeMouseX = event.clientX;\n\t\tevent.preventDefault();\n\n\t\tthis.mouseMoveSubscription = fromEvent(document.body, \"mousemove\").subscribe(event => {\n\t\t\tthis.columnResizeProgress(event, column);\n\t\t});\n\t\tthis.mouseUpSubscription = fromEvent(document.body, \"mouseup\").subscribe(event => {\n\t\t\tthis.columnResizeEnd(event, column);\n\t\t});\n\t}\n\n\tcolumnResizeProgress(event, column) {\n\t\tconst move = event.clientX - this.columnResizeMouseX;\n\t\tcolumn.style.width = `${this.columnResizeWidth + move}px`;\n\t}\n\n\tcolumnResizeEnd(event, column) {\n\t\tthis.mouseMoveSubscription.unsubscribe();\n\t\tthis.mouseUpSubscription.unsubscribe();\n\t}\n\n\t/**\n\t * Triggered when the user scrolls on the `` element.\n\t * Emits the `scrollLoad` event.\n\t */\n\tonScroll(event) {\n\t\tconst distanceFromBottom = event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop;\n\n\t\tif (distanceFromBottom <= this.scrollLoadDistance) {\n\t\t\tthis.scrollLoad.emit(this.model);\n\t\t} else {\n\t\t\tthis.model.isEnd = false;\n\t\t}\n\t}\n\n\tcolumnDragStart(event, columnIndex) {\n\t\tthis.isColumnDragging = true;\n\t\tthis.columnDraggedHoverIndex = columnIndex;\n\t\tevent.dataTransfer.setData(\"columnIndex\", JSON.stringify(columnIndex));\n\t}\n\n\tcolumnDragEnd(event, columnIndex) {\n\t\tthis.isColumnDragging = false;\n\t\tthis.columnDraggedHoverIndex = -1;\n\t}\n\n\tcolumnDragEnter(event, position, columnIndex) {\n\t\tthis.columnDraggedPosition = position;\n\t\tthis.columnDraggedHoverIndex = columnIndex;\n\t}\n\n\tcolumnDragLeave(event, position, columnIndex) {\n\t\tthis.columnDraggedPosition = \"\";\n\t}\n\n\tcolumnDragover(event, position, columnIndex) {\n\t\tthis.columnDraggedHoverIndex = columnIndex;\n\t\tthis.columnDraggedPosition = position;\n\n\t\t// needed to tell browser to allow dropping\n\t\tevent.preventDefault();\n\t}\n\n\tcolumnDrop(event, position, columnIndex) {\n\t\tthis.isColumnDragging = false;\n\t\tthis.columnDraggedHoverIndex = -1;\n\t\tthis.columnDraggedPosition = \"\";\n\n\t\tthis.model.moveColumn(\n\t\t\tparseInt(event.dataTransfer.getData(\"columnIndex\"), 10),\n\t\t\tcolumnIndex + (position === \"right\" ? 1 : 0)\n\t\t);\n\t}\n\n\tdoSort(index: number) {\n\t\tif (this.sort.observers.length === 0) {\n\t\t\t// no sort provided so do the simple sort\n\t\t\tthis.model.cycleSortState(index);\n\t\t\tthis.model.sort(index);\n\t\t}\n\n\t\tthis.sort.emit(index);\n\t}\n\n\t/**\n\t * Triggered when the user scrolls on the `` element.\n\t * Emits the `scrollLoad` event.\n\t */\n\tscrollToTop(event) {\n\t\tevent.target.parentElement.parentElement.parentElement.parentElement.children[1].scrollTop = 0;\n\t\tthis.model.isEnd = false;\n\t}\n\n\tgetSelectionLabelValue(row: TableItem[]) {\n\t\tif (!this.selectionLabelColumn) {\n\t\t\treturn { value: this.i18n.get().TABLE.ROW };\n\t\t}\n\t\treturn { value: row[this.selectionLabelColumn].data };\n\t}\n\n\tgetExpandButtonAriaLabel() {\n\t\treturn this._expandButtonAriaLabel.subject;\n\t}\n\tgetSortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.subject;\n\t}\n\tgetSortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.subject;\n\t}\n\n\tgetCheckboxHeaderLabel() {\n\t\treturn this._checkboxHeaderLabel.subject;\n\t}\n\n\tgetCheckboxRowLabel() {\n\t\treturn this._checkboxRowLabel.subject;\n\t}\n\n\tgetEndOfDataText() {\n\t\treturn this._endOfDataText.subject;\n\t}\n\n\tgetScrollTopText() {\n\t\treturn this._scrollTopText.subject;\n\t}\n\n\tgetFilterTitle() {\n\t\treturn this._filterTitle.subject;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t\n", "constructorObj": { "name": "constructor", "description": "

    Creates an instance of Table.

    \n", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "" }, { "name": "applicationRef", "type": "ApplicationRef", "deprecated": false, "deprecationMessage": "" }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 649, "rawdescription": "\n\nCreates an instance of Table.\n", "jsdoctags": [ { "name": "elementRef", "type": "ElementRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "applicationRef", "type": "ApplicationRef", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnInit", "AfterViewInit", "OnDestroy" ], "accessors": { "model": { "name": "model", "setSignature": { "name": "model", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "m", "type": "TableModel", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 319, "rawdescription": "\n\n`TableModel` with data the table is to display.\n", "description": "

    TableModel with data the table is to display.

    \n", "jsdoctags": [ { "name": "m", "type": "TableModel", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "model", "type": "", "returnType": "TableModel", "line": 356 } }, "isDataGrid": { "name": "isDataGrid", "setSignature": { "name": "isDataGrid", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 371, "rawdescription": "\n\nSet to `true` for a data grid with keyboard interactions.\n", "description": "

    Set to true for a data grid with keyboard interactions.

    \n", "jsdoctags": [ { "name": "value", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "isDataGrid", "type": "boolean", "returnType": "boolean", "line": 395 } }, "expandButtonAriaLabel": { "name": "expandButtonAriaLabel", "setSignature": { "name": "expandButtonAriaLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 435, "rawdescription": "\n\nSet to `true` to enable users to drag and drop columns.\n\nChanging the column order in table changes table model. Be aware of it when you add additional data\nto the model.\n\n", "description": "

    Set to true to enable users to drag and drop columns.

    \n

    Changing the column order in table changes table model. Be aware of it when you add additional data\nto the model.

    \n", "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "expandButtonAriaLabel", "type": "", "returnType": "", "line": 438 } }, "sortDescendingLabel": { "name": "sortDescendingLabel", "setSignature": { "name": "sortDescendingLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 442, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "sortDescendingLabel", "type": "", "returnType": "", "line": 445 } }, "sortAscendingLabel": { "name": "sortAscendingLabel", "setSignature": { "name": "sortAscendingLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 449, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "sortAscendingLabel", "type": "", "returnType": "", "line": 452 } }, "translations": { "name": "translations", "setSignature": { "name": "translations", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 469, "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"FILTER\": \"Filter\",\n\t\t\"END_OF_DATA\": \"You've reached the end of your content\",\n\t\t\"SCROLL_TOP\": \"Scroll to top\",\n\t\t\"CHECKBOX_HEADER\": \"Select all rows\",\n\t\t\"CHECKBOX_ROW\": \"Select row\"\n}\n```\n", "description": "

    Expects an object that contains some or all of:

    \nExample :
    {\n        "FILTER": "Filter",\n        "END_OF_DATA": "You've reached the end of your content",\n        "SCROLL_TOP": "Scroll to top",\n        "CHECKBOX_HEADER": "Select all rows",\n        "CHECKBOX_ROW": "Select row"\n}
    ", "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "noData": { "name": "noData", "getSignature": { "name": "noData", "type": "", "returnType": "", "line": 616 } } } }, { "name": "TableBody", "id": "component-TableBody-c49427de20bb63bad8736f1fc4d249845cb5d3016839f46bd010f323fa99c4060eaeebd04bc2f73b34d8248b65a6e39ace370517bdc572ae30d5ef30ae2c3703", "file": "src/table/body/table-body.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "[cdsTableBody], [ibmTableBody]", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "checkboxRowLabel", "deprecated": false, "deprecationMessage": "", "line": 88, "type": "string | Observable", "decorators": [] }, { "name": "enableSingleSelect", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls whether to enable multiple or single row selection.\n", "description": "

    Controls whether to enable multiple or single row selection.

    \n", "line": 76, "type": "boolean", "decorators": [] }, { "name": "expandButtonAriaLabel", "deprecated": false, "deprecationMessage": "", "line": 79, "type": "string | Observable", "decorators": [] }, { "name": "model", "deprecated": false, "deprecationMessage": "", "line": 71, "type": "TableModel", "decorators": [] }, { "name": "selectionLabelColumn", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to populate the row selection checkbox label with a useful value if set.\n\nExample:\n```\n\n\n```\n", "description": "

    Used to populate the row selection checkbox label with a useful value if set.

    \n

    Example:

    \nExample :
    <cds-table [selectionLabelColumn]="0"></cds-table>\n<!-- results in aria-label="Select first column value"\n(where "first column value" is the value of the first column in the row -->
    ", "line": 116, "type": "number", "decorators": [] }, { "name": "showSelectionColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls whether to show the selection checkboxes column or not.\n", "description": "

    Controls whether to show the selection checkboxes column or not.

    \n", "line": 99, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSize of the table rows.\n", "description": "

    Size of the table rows.

    \n", "line": 104, "type": "TableRowSize", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 118, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "deselectRow", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if a single row is deselected.\n\n", "description": "

    Emits if a single row is deselected.

    \n", "jsdoctags": [ { "pos": 3743, "end": 3801, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 3744, "end": 3749, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    ({model: this.model, deselectedRowIndex: index})

    \n", "name": { "pos": 3750, "end": 3750, "flags": 17104896, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "" }, "isNameFirst": true, "isBracketed": false } ], "line": 132, "type": "EventEmitter" }, { "name": "rowClick", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if a row item excluding expandButtons, checkboxes, or radios is clicked.\n", "description": "

    Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.

    \n", "line": 137, "type": "EventEmitter" }, { "name": "selectRow", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if a single row is selected.\n\n", "description": "

    Emits if a single row is selected.

    \n", "jsdoctags": [ { "pos": 3578, "end": 3634, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 3579, "end": 3584, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    ({model: this.model, selectedRowIndex: index})

    \n", "name": { "pos": 3585, "end": 3585, "flags": 17104896, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "" }, "isNameFirst": true, "isBracketed": false } ], "line": 125, "type": "EventEmitter" } ], "propertiesClass": [], "methodsClass": [ { "name": "firstExpandedDataInRow", "args": [ { "name": "row", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 169, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "row", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "getCheckboxRowLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 161, "deprecated": false, "deprecationMessage": "" }, { "name": "getExpandButtonAriaLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 165, "deprecated": false, "deprecationMessage": "" }, { "name": "onRowCheckboxChange", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 149, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTriggered when a single row is clicked.\nUpdates the header checkbox state.\nEmits the `selectRow` or `deselectRow` event.\n", "description": "

    Triggered when a single row is clicked.\nUpdates the header checkbox state.\nEmits the selectRow or deselectRow event.

    \n", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onRowClick", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 157, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "shouldExpandAsTable", "args": [ { "name": "row", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 177, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "row", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tEventEmitter,\n\tOutput\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\nimport { TableRowSize } from \"../table.types\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableBody], [ibmTableBody]\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t`\n})\nexport class TableBody {\n\t@Input() model: TableModel;\n\n\t/**\n\t * Controls whether to enable multiple or single row selection.\n\t */\n\t@Input() enableSingleSelect = false;\n\n\t@Input()\n\tset expandButtonAriaLabel(value: string | Observable) {\n\t\tthis._expandButtonAriaLabel.override(value);\n\t}\n\n\tget expandButtonAriaLabel() {\n\t\treturn this._expandButtonAriaLabel.value;\n\t}\n\n\t@Input()\n\tset checkboxRowLabel(value: string | Observable) {\n\t\tthis._checkboxRowLabel.override(value);\n\t}\n\n\tget checkboxRowLabel() {\n\t\treturn this._checkboxRowLabel.value;\n\t}\n\n\t/**\n\t * Controls whether to show the selection checkboxes column or not.\n\t */\n\t@Input() showSelectionColumn = true;\n\n\t/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\n\n\t/**\n\t * Used to populate the row selection checkbox label with a useful value if set.\n\t *\n\t * Example:\n\t * ```\n\t * \n\t * \n\t * ```\n\t */\n\t@Input() selectionLabelColumn: number;\n\n\t@Input() skeleton = false;\n\n\t/**\n\t * Emits if a single row is selected.\n\t *\n\t * @param ({model: this.model, selectedRowIndex: index})\n\t */\n\t@Output() selectRow = new EventEmitter();\n\n\t/**\n\t * Emits if a single row is deselected.\n\t *\n\t * @param ({model: this.model, deselectedRowIndex: index})\n\t */\n\t@Output() deselectRow = new EventEmitter();\n\n\t/**\n\t * Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.\n\t */\n\t@Output() rowClick = new EventEmitter();\n\n\tprotected _checkboxRowLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_ROW\");\n\tprotected _expandButtonAriaLabel = this.i18n.getOverridable(\"TABLE.EXPAND_BUTTON\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\t/**\n\t * Triggered when a single row is clicked.\n\t * Updates the header checkbox state.\n\t * Emits the `selectRow` or `deselectRow` event.\n\t */\n\tonRowCheckboxChange(index: number) {\n\t\tif (this.model.isRowSelected(index)) {\n\t\t\tthis.deselectRow.emit({ model: this.model, deselectedRowIndex: index });\n\t\t} else {\n\t\t\tthis.selectRow.emit({ model: this.model, selectedRowIndex: index });\n\t\t}\n\t}\n\n\tonRowClick(index: number) {\n\t\tthis.rowClick.emit(index);\n\t}\n\n\tgetCheckboxRowLabel(): Observable {\n\t\treturn this._checkboxRowLabel.subject;\n\t}\n\n\tgetExpandButtonAriaLabel(): Observable {\n\t\treturn this._expandButtonAriaLabel.subject;\n\t}\n\n\tfirstExpandedDataInRow(row) {\n\t\tconst found = row.find(d => d.expandedData);\n\t\tif (found) {\n\t\t\treturn found.expandedData;\n\t\t}\n\t\treturn found;\n\t}\n\n\tshouldExpandAsTable(row) {\n\t\treturn row.some(d => d.expandAsTable);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 140, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "expandButtonAriaLabel": { "name": "expandButtonAriaLabel", "setSignature": { "name": "expandButtonAriaLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 79, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "expandButtonAriaLabel", "type": "", "returnType": "", "line": 83 } }, "checkboxRowLabel": { "name": "checkboxRowLabel", "setSignature": { "name": "checkboxRowLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 88, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "checkboxRowLabel", "type": "", "returnType": "", "line": 92 } } } }, { "name": "TableCheckbox", "id": "component-TableCheckbox-72b2a2c440b7786653347d7ba6263c33234a7e9f8cacd65a41df61e63248a283460bfdb1c8b973498bd845b799f75296c0f8c3e674fefc9912b373dc8fd96906", "file": "src/table/cell/table-checkbox.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "[cdsTableCheckbox], [ibmTableCheckbox]", "styleUrls": [], "styles": [], "template": "\n\t\t{{getLabel() | i18nReplace:getSelectionLabelValue(row) | async}}\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "label", "deprecated": false, "deprecationMessage": "", "line": 46, "type": "string | Observable", "decorators": [] }, { "name": "name", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 34, "type": "string", "decorators": [] }, { "name": "row", "deprecated": false, "deprecationMessage": "", "line": 30, "type": "TableItem[]", "decorators": [] }, { "name": "selected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 32, "type": "boolean", "decorators": [] }, { "name": "selectionLabelColumn", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to populate the row selection checkbox label with a useful value if set.\n\nExample:\n```\n\n\n```\n", "description": "

    Used to populate the row selection checkbox label with a useful value if set.

    \n

    Example:

    \nExample :
    <cds-table [selectionLabelColumn]="0"></cds-table>\n<!-- results in aria-label="Select first column value"\n(where "first column value" is the value of the first column in the row -->
    ", "line": 64, "type": "number", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSize of the table rows.\n", "description": "

    Size of the table rows.

    \n", "line": 43, "type": "TableRowSize", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 66, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "selectedChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if a single row is selected.\n", "description": "

    Emits if a single row is selected.

    \n", "line": 71, "type": "EventEmitter" } ], "propertiesClass": [], "methodsClass": [ { "name": "getLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 84, "deprecated": false, "deprecationMessage": "" }, { "name": "getSelectionLabelValue", "args": [ { "name": "row", "type": "TableItem[]", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "{ value: any; }", "typeParameters": [], "line": 77, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "row", "type": "TableItem[]", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableRow } from \"../table-row.class\";\nimport { Observable } from \"rxjs\";\nimport { TableRowSize } from \"../table.types\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableCheckbox], [ibmTableCheckbox]\",\n\ttemplate: `\n\t\t\n\t\t\t\t{{getLabel() | i18nReplace:getSelectionLabelValue(row) | async}}\n\t\t\n\t`\n})\nexport class TableCheckbox {\n\t@Input() row: TableItem[];\n\n\t@Input() selected = false;\n\n\t@Input() name = \"\";\n\n\tget disabled(): boolean {\n\t\treturn this.row ? !!(this.row as TableRow).disabled : false;\n\t}\n\n\t/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\n\n\t@Input()\n\tset label(value: string | Observable) {\n\t\tthis._label.override(value);\n\t}\n\n\tget label() {\n\t\treturn this._label.value;\n\t}\n\n\t/**\n\t * Used to populate the row selection checkbox label with a useful value if set.\n\t *\n\t * Example:\n\t * ```\n\t * \n\t * \n\t * ```\n\t */\n\t@Input() selectionLabelColumn: number;\n\n\t@Input() skeleton = false;\n\n\t/**\n\t * Emits if a single row is selected.\n\t */\n\t@Output() selectedChange = new EventEmitter();\n\n\tprotected _label = this.i18n.getOverridable(\"TABLE.CHECKBOX_ROW\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetSelectionLabelValue(row: TableItem[]) {\n\t\tif (!this.selectionLabelColumn) {\n\t\t\treturn { value: this.i18n.get().TABLE.ROW };\n\t\t}\n\t\treturn { value: row[this.selectionLabelColumn].data };\n\t}\n\n\tgetLabel(): Observable {\n\t\treturn this._label.subject;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 73, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "disabled": { "name": "disabled", "getSignature": { "name": "disabled", "type": "boolean", "returnType": "boolean", "line": 36 } }, "label": { "name": "label", "setSignature": { "name": "label", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 46, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "label", "type": "", "returnType": "", "line": 50 } } } }, { "name": "TableContainer", "id": "component-TableContainer-bcf895f887d159a0afd640a059ed80f6fb1a3b649d7e93447102a415d7b61a071cc5724668d0637c1183dcf2c7824882767b5af5c6b47d8336d8daed8e5aee5b", "file": "src/table/table-container.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-table-container, ibm-table-container", "styleUrls": [], "styles": [ "\n\t\t:host { display: block }\n\t" ], "template": "", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "containerClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 19, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--data-table-container'" } ], "modifierKind": [ 170 ] }, { "name": "headerDescription", "deprecated": false, "deprecationMessage": "", "type": "TableHeaderDescription", "optional": false, "description": "", "line": 22, "decorators": [ { "name": "ContentChild", "stringifiedArguments": "TableHeaderDescription" } ], "modifierKind": [ 170 ] }, { "name": "headerTitle", "deprecated": false, "deprecationMessage": "", "type": "TableHeaderTitle", "optional": false, "description": "", "line": 21, "decorators": [ { "name": "ContentChild", "stringifiedArguments": "TableHeaderTitle" } ], "modifierKind": [ 170 ] }, { "name": "table", "deprecated": false, "deprecationMessage": "", "type": "Table", "optional": false, "description": "", "line": 23, "decorators": [ { "name": "ContentChild", "stringifiedArguments": "Table" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--data-table-container", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 19, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tAfterContentInit,\n\tComponent,\n\tContentChild,\n\tHostBinding\n} from \"@angular/core\";\nimport { TableHeaderDescription } from \"./header/table-header-description.directive\";\nimport { TableHeaderTitle } from \"./header/table-header-title.directive\";\nimport { Table } from \"./table.component\";\n\n@Component({\n\tselector: \"cds-table-container, ibm-table-container\",\n\ttemplate: ``,\n\tstyles: [`\n\t\t:host { display: block }\n\t`]\n})\nexport class TableContainer implements AfterContentInit {\n\t@HostBinding(\"class.cds--data-table-container\") containerClass = true;\n\n\t@ContentChild(TableHeaderTitle) headerTitle: TableHeaderTitle;\n\t@ContentChild(TableHeaderDescription) headerDescription: TableHeaderDescription;\n\t@ContentChild(Table) table: Table;\n\n\tngAfterContentInit() {\n\t\t// Set aria properties if values exist otherwise keep undefined\n\t\tif (this.table) {\n\t\t\tthis.table.ariaLabelledby = this.headerTitle?.id;\n\t\t\tthis.table.ariaDescribedby = this.headerDescription?.id;\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t:host { display: block }\n\t\n", "extends": [], "implements": [ "AfterContentInit" ] }, { "name": "TableData", "id": "component-TableData-9e2eacb5bc3abadde51e6897a2f0e81f39af796ce2c645ffd14d61828f9c0a99333c5399e6ba872ed664bd389f394f602ab4ce909c86b63ba9dc2d12beb0f342", "file": "src/table/cell/table-data.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "[cdsTableData], [ibmTableData]", "styleUrls": [], "styles": [], "template": "{{item.data}}\n\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "item", "deprecated": false, "deprecationMessage": "", "line": 20, "type": "TableItem", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 22, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput\n} from \"@angular/core\";\nimport { TableItem } from \"../table-item.class\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableData], [ibmTableData]\",\n\ttemplate: `\n\t\t{{item.data}}\n\t\t\n\t\t\n\t`\n})\nexport class TableData {\n\t@Input() item: TableItem;\n\n\t@Input() skeleton = false;\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "TableExpandButton", "id": "component-TableExpandButton-b2177bb43d3249487257d7cf62560526a4cfa4310f1e99676c7fdb4c19714f5928d8327e26b194596a6b6c1727758a0672c4e4e556a1c3ec604767091707ff7c", "file": "src/table/cell/table-expand-button.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "[cdsTableExpandButton], [ibmTableExpandButton]", "styleUrls": [], "styles": [], "template": "\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "line": 36, "type": "string | Observable", "decorators": [] }, { "name": "expandable", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to true to indicate the row can be expanded.\nDefaults to false to allow for correct column alignment\n", "description": "

    Set to true to indicate the row can be expanded.\nDefaults to false to allow for correct column alignment

    \n", "line": 33, "type": "boolean", "decorators": [] }, { "name": "expanded", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to true to indicate the row has expanded\n", "description": "

    Set to true to indicate the row has expanded

    \n", "line": 28, "type": "boolean", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 44, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "expandRow", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 52, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "expandClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 46, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--table-expand'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "getAriaLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 58, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.data-previous-value", "deprecated": false, "deprecationMessage": "", "line": 48, "type": "string", "decorators": [] }, { "name": "class.cds--table-expand", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 46, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding\n} from \"@angular/core\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableExpandButton], [ibmTableExpandButton]\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class TableExpandButton {\n\t/**\n\t * Set to true to indicate the row has expanded\n\t */\n\t@Input() expanded = false;\n\t/**\n\t * Set to true to indicate the row can be expanded.\n\t * Defaults to false to allow for correct column alignment\n\t */\n\t@Input() expandable = false;\n\n\t@Input()\n\tset ariaLabel(value: string | Observable) {\n\t\tthis._ariaLabel.override(value);\n\t}\n\n\tget ariaLabel() {\n\t\treturn this._ariaLabel.value;\n\t}\n\n\t@Input() skeleton = false;\n\n\t@HostBinding(\"class.cds--table-expand\") expandClass = true;\n\n\t@HostBinding(\"attr.data-previous-value\") get previousValue() {\n\t\treturn this.expanded ? \"collapsed\" : null;\n\t}\n\n\t@Output() expandRow = new EventEmitter();\n\n\tprotected _ariaLabel = this.i18n.getOverridable(\"TABLE.EXPAND_BUTTON\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetAriaLabel(): Observable {\n\t\treturn this._ariaLabel.subject;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 54, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "ariaLabel": { "name": "ariaLabel", "setSignature": { "name": "ariaLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 36, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "ariaLabel", "type": "", "returnType": "", "line": 40 } }, "previousValue": { "name": "previousValue", "getSignature": { "name": "previousValue", "type": "", "returnType": "", "line": 48 } } } }, { "name": "TableExpandedRow", "id": "component-TableExpandedRow-d06cbf56476a00b2f22614725b0a534009f55fcf918a13a5a2f095c24068e860fae1e3dc1dc8f5c2f9494af3367cf529826fb4015c9f8eaa4d774e1752dcd10e", "file": "src/table/body/table-expanded-row.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "[cdsTableExpandedRow], [ibmTableExpandedRow]", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t{{firstExpandedDataInRow(row)}}\n\t\n\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "expanded", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 31, "type": "boolean", "decorators": [] }, { "name": "row", "deprecated": false, "deprecationMessage": "", "line": 23, "type": "any[]", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 25, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "dataChildRow", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 29, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.data-child-row'" } ], "modifierKind": [ 170 ] }, { "name": "expandableRowClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 27, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--expandable-row'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "firstExpandedDataInRow", "args": [ { "name": "row", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 45, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "row", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "firstExpandedTemplateInRow", "args": [ { "name": "row", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "any", "typeParameters": [], "line": 37, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "row", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.data-child-row", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 29, "type": "boolean", "decorators": [] }, { "name": "class.cds--expandable-row", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 27, "type": "boolean", "decorators": [] }, { "name": "style.display", "deprecated": false, "deprecationMessage": "", "line": 33, "type": "string", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableExpandedRow], [ibmTableExpandedRow]\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t{{firstExpandedDataInRow(row)}}\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class TableExpandedRow {\n\t@Input() row: any[];\n\n\t@Input() skeleton = false;\n\n\t@HostBinding(\"class.cds--expandable-row\") expandableRowClass = true;\n\n\t@HostBinding(\"attr.data-child-row\") dataChildRow = true;\n\n\t@Input() expanded = false;\n\n\t@HostBinding(\"style.display\") get displayStyle() {\n\t\treturn this.expanded ? null : \"none\";\n\t}\n\n\tfirstExpandedTemplateInRow(row) {\n\t\tconst found = row.find(d => d.expandedTemplate);\n\t\tif (found) {\n\t\t\treturn found.expandedTemplate;\n\t\t}\n\t\treturn found;\n\t}\n\n\tfirstExpandedDataInRow(row) {\n\t\tconst found = row.find(d => d.expandedData);\n\t\tif (found) {\n\t\t\treturn found.expandedData;\n\t\t}\n\t\treturn found;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "accessors": { "displayStyle": { "name": "displayStyle", "getSignature": { "name": "displayStyle", "type": "", "returnType": "", "line": 33 } } } }, { "name": "TableHead", "id": "component-TableHead-cfe742ad940fa34f07a54dfeff16cc3bdad03f1cd874ad898d08d2d67cffa8b3959045159d929df7de79149ba3f24712e4060f04315fa90cc26de9014c8a9a35", "file": "src/table/head/table-head.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "[cdsTableHead], [ibmTableHead]", "styleUrls": [], "styles": [ "\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t" ], "template": "\n\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\n\n\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "checkboxHeaderLabel", "deprecated": false, "deprecationMessage": "", "line": 117, "type": "string | Observable", "decorators": [] }, { "name": "enableSingleSelect", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 98, "type": "boolean", "decorators": [] }, { "name": "filterTitle", "deprecated": false, "deprecationMessage": "", "line": 144, "type": "string | Observable", "decorators": [] }, { "name": "model", "deprecated": false, "deprecationMessage": "", "line": 94, "type": "TableModel", "decorators": [] }, { "name": "selectAllCheckbox", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 102, "type": "boolean", "decorators": [] }, { "name": "selectAllCheckboxSomeSelected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 100, "type": "boolean", "decorators": [] }, { "name": "showExpandAllToggle", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 108, "type": "boolean", "decorators": [] }, { "name": "showSelectionColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 96, "type": "boolean", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 104, "type": "boolean", "decorators": [] }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSetting sortable to false will disable all headers including headers which are sortable. Is is\npossible to set the sortable state on the header item to disable/enable sorting for only some headers.\n", "description": "

    Setting sortable to false will disable all headers including headers which are sortable. Is is\npossible to set the sortable state on the header item to disable/enable sorting for only some headers.

    \n", "line": 114, "type": "boolean", "decorators": [] }, { "name": "sortAscendingLabel", "deprecated": false, "deprecationMessage": "", "line": 135, "type": "string | Observable", "decorators": [] }, { "name": "sortDescendingLabel", "deprecated": false, "deprecationMessage": "", "line": 126, "type": "string | Observable", "decorators": [] }, { "name": "stickyHeader", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 106, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "collapseAllRows", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if all rows are collapsed.\n\n", "description": "

    Emits if all rows are collapsed.

    \n", "jsdoctags": [ { "pos": 4493, "end": 4508, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 4494, "end": 4499, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "", "name": { "pos": 4500, "end": 4505, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "model" }, "isNameFirst": true, "isBracketed": false } ], "line": 179, "type": "EventEmitter" }, { "name": "deselectAll", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if all rows are deselected.\n\n", "description": "

    Emits if all rows are deselected.

    \n", "jsdoctags": [ { "pos": 4242, "end": 4257, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 4243, "end": 4248, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "", "name": { "pos": 4249, "end": 4254, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "model" }, "isNameFirst": true, "isBracketed": false } ], "line": 167, "type": "EventEmitter" }, { "name": "expandAllRows", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if all rows are expanded.\n\n", "description": "

    Emits if all rows are expanded.

    \n", "jsdoctags": [ { "pos": 4366, "end": 4381, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 4367, "end": 4372, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "", "name": { "pos": 4373, "end": 4378, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "model" }, "isNameFirst": true, "isBracketed": false } ], "line": 173, "type": "EventEmitter" }, { "name": "selectAll", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if all rows are selected.\n\n", "description": "

    Emits if all rows are selected.

    \n", "jsdoctags": [ { "pos": 4118, "end": 4133, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 348, "tagName": { "pos": 4119, "end": 4124, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "", "name": { "pos": 4125, "end": 4130, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "model" }, "isNameFirst": true, "isBracketed": false } ], "line": 161, "type": "EventEmitter" }, { "name": "sort", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an index of the column that wants to be sorted.\n", "description": "

    Emits an index of the column that wants to be sorted.

    \n", "line": 155, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "scrollbarWidth", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 181, "modifierKind": [ 125 ] } ], "methodsClass": [ { "name": "getCheckboxHeaderLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 212, "deprecated": false, "deprecationMessage": "" }, { "name": "getFilterTitle", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 224, "deprecated": false, "deprecationMessage": "" }, { "name": "getSortAscendingLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 220, "deprecated": false, "deprecationMessage": "" }, { "name": "getSortDescendingLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 216, "deprecated": false, "deprecationMessage": "" }, { "name": "onExpandAllRowsChange", "args": [ { "name": "expand", "type": "boolean", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 204, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "expand", "type": "boolean", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onSelectAllCheckboxChange", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 196, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

    A subcomponent that creates the thead of the table

    \n

    Basic usage

    \nExample :
        <thead cdsTableHead [model]="model"></thead>
    ", "rawdescription": "\n\nA subcomponent that creates the thead of the table\n\n## Basic usage\n\n```html\n\t\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit\n} from \"@angular/core\";\n\nimport { TableModel } from \"../table-model.class\";\nimport { getScrollbarWidth } from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\nimport { TableRowSize } from \"../table.types\";\n\n/**\n * A subcomponent that creates the thead of the table\n *\n * ## Basic usage\n *\n * ```html\n * \t\n * ```\n */\n@Component({\n\t// tslint:disable-next-line:component-selector\n\tselector: \"[cdsTableHead], [ibmTableHead]\",\n\ttemplate: `\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n\t\n\t`,\n\tstyles: [`\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t`]\n})\nexport class TableHead implements AfterViewInit {\n\t@Input() model: TableModel;\n\n\t@Input() showSelectionColumn = true;\n\n\t@Input() enableSingleSelect = false;\n\n\t@Input() selectAllCheckboxSomeSelected = false;\n\n\t@Input() selectAllCheckbox = false;\n\n\t@Input() skeleton = false;\n\n\t@Input() stickyHeader = false;\n\n\t@Input() showExpandAllToggle = false;\n\n\t/**\n\t * Setting sortable to false will disable all headers including headers which are sortable. Is is\n\t * possible to set the sortable state on the header item to disable/enable sorting for only some headers.\n\t */\n\t@Input() sortable = true;\n\n\t@Input()\n\tset checkboxHeaderLabel(value: string | Observable) {\n\t\tthis._checkboxHeaderLabel.override(value);\n\t}\n\n\tget checkboxHeaderLabel() {\n\t\treturn this._checkboxHeaderLabel.value;\n\t}\n\n\t@Input()\n\tset sortDescendingLabel(value: string | Observable) {\n\t\tthis._sortDescendingLabel.override(value);\n\t}\n\n\tget sortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.value;\n\t}\n\n\t@Input()\n\tset sortAscendingLabel(value: string | Observable) {\n\t\tthis._sortAscendingLabel.override(value);\n\t}\n\n\tget sortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.value;\n\t}\n\n\t@Input()\n\tset filterTitle(value: string | Observable) {\n\t\tthis._filterTitle.override(value);\n\t}\n\n\tget filterTitle() {\n\t\treturn this._filterTitle.value;\n\t}\n\n\t/**\n\t * Emits an index of the column that wants to be sorted.\n\t */\n\t@Output() sort = new EventEmitter();\n\t/**\n\t * Emits if all rows are selected.\n\t *\n\t * @param model\n\t */\n\t@Output() selectAll = new EventEmitter();\n\t/**\n\t * Emits if all rows are deselected.\n\t *\n\t * @param model\n\t */\n\t@Output() deselectAll = new EventEmitter();\n\t/**\n\t * Emits if all rows are expanded.\n\t *\n\t * @param model\n\t */\n\t@Output() expandAllRows = new EventEmitter();\n\t/**\n\t * Emits if all rows are collapsed.\n\t *\n\t * @param model\n\t */\n\t@Output() collapseAllRows = new EventEmitter();\n\n\tpublic scrollbarWidth = 0;\n\n\tprotected _checkboxHeaderLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\tprotected _sortDescendingLabel = this.i18n.getOverridable(\"TABLE.SORT_DESCENDING\");\n\tprotected _sortAscendingLabel = this.i18n.getOverridable(\"TABLE.SORT_ASCENDING\");\n\tprotected _filterTitle = this.i18n.getOverridable(\"TABLE.FILTER\");\n\n\tconstructor(protected i18n: I18n) {}\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.scrollbarWidth = getScrollbarWidth();\n\t\t});\n\t}\n\n\tonSelectAllCheckboxChange() {\n\t\tif (!this.selectAllCheckbox && !this.selectAllCheckboxSomeSelected) {\n\t\t\tthis.selectAll.emit(this.model);\n\t\t} else {\n\t\t\tthis.deselectAll.emit(this.model);\n\t\t}\n\t}\n\n\tonExpandAllRowsChange(expand: boolean) {\n\t\tif (expand) {\n\t\t\tthis.expandAllRows.emit(this.model);\n\t\t} else {\n\t\t\tthis.collapseAllRows.emit(this.model);\n\t\t}\n\t}\n\n\tgetCheckboxHeaderLabel(): Observable {\n\t\treturn this._checkboxHeaderLabel.subject;\n\t}\n\n\tgetSortDescendingLabel(): Observable {\n\t\treturn this._sortDescendingLabel.subject;\n\t}\n\n\tgetSortAscendingLabel(): Observable {\n\t\treturn this._sortAscendingLabel.subject;\n\t}\n\n\tgetFilterTitle(): Observable {\n\t\treturn this._filterTitle.subject;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t\n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 186, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "AfterViewInit" ], "accessors": { "checkboxHeaderLabel": { "name": "checkboxHeaderLabel", "setSignature": { "name": "checkboxHeaderLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 117, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "checkboxHeaderLabel", "type": "", "returnType": "", "line": 121 } }, "sortDescendingLabel": { "name": "sortDescendingLabel", "setSignature": { "name": "sortDescendingLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 126, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "sortDescendingLabel", "type": "", "returnType": "", "line": 130 } }, "sortAscendingLabel": { "name": "sortAscendingLabel", "setSignature": { "name": "sortAscendingLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 135, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "sortAscendingLabel", "type": "", "returnType": "", "line": 139 } }, "filterTitle": { "name": "filterTitle", "setSignature": { "name": "filterTitle", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 144, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "filterTitle", "type": "", "returnType": "", "line": 148 } } } }, { "name": "TableHeadCell", "id": "component-TableHeadCell-6b4021880b630e270832c3a8f4ccfa4b99045962326f48e4485c23286caeb07a77b2e0b4121ffe6322094c9e6344e57085071a777f357db4424e54710ac19724", "file": "src/table/head/table-head-cell.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "[cdsTableHeadCell], [ibmTableHeadCell]", "styleUrls": [], "styles": [], "template": " 0 && column.sortable\"\n\t[attr.aria-label]=\"(column.sorted && column.ascending ? getSortDescendingLabel() : getSortAscendingLabel()) | async\"\n\taria-live=\"polite\"\n\t[ngClass]=\"{\n\t\t'cds--table-sort--active': column.sorted,\n\t\t'cds--table-sort--descending': column.ascending\n\t}\"\n\t(click)=\"onClick()\">\n\t\n\t\t
    \n\t\t\t{{column.data}}\n\t\t
    \n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\n\n 0 && !column.sortable) || !sortable\">\n\t\n\t\t\n\t\t\t{{column.data}}\n\t\t\n\t\n\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "column", "deprecated": false, "deprecationMessage": "", "line": 83, "type": "TableHeaderItem", "decorators": [] }, { "name": "filterTitle", "deprecated": false, "deprecationMessage": "", "line": 108, "type": "string | Observable", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 85, "type": "boolean", "decorators": [] }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 87, "type": "boolean", "decorators": [] }, { "name": "sortAscendingLabel", "deprecated": false, "deprecationMessage": "", "line": 99, "type": "string | Observable", "decorators": [] }, { "name": "sortDescendingLabel", "deprecated": false, "deprecationMessage": "", "line": 90, "type": "string | Observable", "decorators": [] } ], "outputsClass": [ { "name": "sort", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nNotifies that the column should be sorted\n", "description": "

    Notifies that the column should be sorted

    \n", "line": 119, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "theadAction", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 121, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.thead_action'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "getSortAscendingLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 139, "deprecated": false, "deprecationMessage": "" }, { "name": "getSortDescendingLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 135, "deprecated": false, "deprecationMessage": "" }, { "name": "onClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 143, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.thead_action", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 121, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding,\n\tOnChanges\n} from \"@angular/core\";\nimport { Observable, OperatorFunction } from \"rxjs\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { map } from \"rxjs/operators\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableHeadCell], [ibmTableHeadCell]\",\n\ttemplate: `\n\t\t 0 && column.sortable\"\n\t\t\t[attr.aria-label]=\"(column.sorted && column.ascending ? getSortDescendingLabel() : getSortAscendingLabel()) | async\"\n\t\t\taria-live=\"polite\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--table-sort--active': column.sorted,\n\t\t\t\t'cds--table-sort--descending': column.ascending\n\t\t\t}\"\n\t\t\t(click)=\"onClick()\">\n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t{{column.data}}\n\t\t\t\t
    \n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t 0 && !column.sortable) || !sortable\">\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{column.data}}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class TableHeadCell implements OnChanges {\n\t@Input() column: TableHeaderItem;\n\n\t@Input() skeleton = false;\n\n\t@Input() sortable = true;\n\n\t@Input()\n\tset sortDescendingLabel(value: string | Observable) {\n\t\tthis._sortDescendingLabel.override(value);\n\t}\n\n\tget sortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.value;\n\t}\n\n\t@Input()\n\tset sortAscendingLabel(value: string | Observable) {\n\t\tthis._sortAscendingLabel.override(value);\n\t}\n\n\tget sortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.value;\n\t}\n\n\t@Input()\n\tset filterTitle(value: string | Observable) {\n\t\tthis._filterTitle.override(value);\n\t}\n\n\tget filterTitle() {\n\t\treturn this._filterTitle.value;\n\t}\n\n\t/**\n\t * Notifies that the column should be sorted\n\t */\n\t@Output() sort = new EventEmitter();\n\n\t@HostBinding(\"class.thead_action\") theadAction = false;\n\n\tprotected _sortDescendingLabel = this.i18n.getOverridable(\"TABLE.SORT_DESCENDING\");\n\tprotected _sortAscendingLabel = this.i18n.getOverridable(\"TABLE.SORT_ASCENDING\");\n\tprotected _filterTitle = this.i18n.getOverridable(\"TABLE.FILTER\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tngOnChanges() {\n\t\t// Since it's not an input, and it touches the view, we're using `ngOnChanges`\n\t\t// `get`ters have caused issues in the past with the view updating outside of change detection\n\t\tthis.theadAction = !!this.column.filterTemplate || this.sort.observers.length > 0;\n\t}\n\n\tgetSortDescendingLabel(): Observable {\n\t\treturn this._sortDescendingLabel.subject.pipe(this.sortLabelMap());\n\t}\n\n\tgetSortAscendingLabel(): Observable {\n\t\treturn this._sortAscendingLabel.subject.pipe(this.sortLabelMap());\n\t}\n\n\tonClick() {\n\t\tif (!this.skeleton) {\n\t\t\tthis.sort.emit();\n\t\t}\n\t}\n\n\tprotected sortLabelMap(): OperatorFunction {\n\t\treturn map((str: string) => {\n\t\t\tif (this.column.ariaSortLabel) {\n\t\t\t\treturn this.column.ariaSortLabel;\n\t\t\t}\n\t\t\tif (this.column.formatSortLabel) {\n\t\t\t\treturn this.column.formatSortLabel(str, this.column.ariaSortLabel);\n\t\t\t}\n\t\t\treturn `${this.column.data} - ${str}`;\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 125, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "implements": [ "OnChanges" ], "accessors": { "sortDescendingLabel": { "name": "sortDescendingLabel", "setSignature": { "name": "sortDescendingLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 90, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "sortDescendingLabel", "type": "", "returnType": "", "line": 94 } }, "sortAscendingLabel": { "name": "sortAscendingLabel", "setSignature": { "name": "sortAscendingLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 99, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "sortAscendingLabel", "type": "", "returnType": "", "line": 103 } }, "filterTitle": { "name": "filterTitle", "setSignature": { "name": "filterTitle", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 108, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "filterTitle", "type": "", "returnType": "", "line": 112 } } } }, { "name": "TableHeadCheckbox", "id": "component-TableHeadCheckbox-283d5bf93a45d210a9f83df8ec84f2897344be0a5d2e4800260b8a347666383465b10a63122be2a327a65dbce8dcb7b10ebce7aedcc93f12efe6d966d5d4ec5f", "file": "src/table/head/table-head-checkbox.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]", "styleUrls": [], "styles": [ "\n :host { width: 10px; }\n " ], "template": "\n\t\t{{getAriaLabel() | async}}\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "line": 42, "type": "string | Observable", "decorators": [] }, { "name": "checked", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 33, "type": "boolean", "decorators": [] }, { "name": "indeterminate", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 35, "type": "boolean", "decorators": [] }, { "name": "name", "defaultValue": "`select-all-${TableHeadCheckbox.tableSelectAllCount++}`", "deprecated": false, "deprecationMessage": "", "line": 39, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 37, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "change", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 50, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "hostClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 52, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--table-column-checkbox'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "getAriaLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 58, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--table-column-checkbox", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 52, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tHostBinding,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]\",\n\ttemplate: `\n\t\t\n\t\t\t\t{{getAriaLabel() | async}}\n\t\t\n\t`,\n\tstyles: [`\n :host { width: 10px; }\n `]\n})\nexport class TableHeadCheckbox {\n\tprivate static tableSelectAllCount = 0;\n\n\t@Input() checked = false;\n\n\t@Input() indeterminate = false;\n\n\t@Input() skeleton = false;\n\n\t@Input() name = `select-all-${TableHeadCheckbox.tableSelectAllCount++}`;\n\n\t@Input()\n\tset ariaLabel(value: string | Observable) {\n\t\tthis._ariaLabel.override(value);\n\t}\n\n\tget ariaLabel() {\n\t\treturn this._ariaLabel.value;\n\t}\n\n\t@Output() change = new EventEmitter();\n\n\t@HostBinding(\"class.cds--table-column-checkbox\") hostClass = true;\n\n\tprotected _ariaLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetAriaLabel(): Observable {\n\t\treturn this._ariaLabel.subject;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "\n :host { width: 10px; }\n \n", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 54, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "ariaLabel": { "name": "ariaLabel", "setSignature": { "name": "ariaLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 42, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "ariaLabel", "type": "", "returnType": "", "line": 46 } } } }, { "name": "TableHeader", "id": "component-TableHeader-f4958d5a8b23955160d5aca948fed3efcf1fc3155e3a7e7ff60661ed5e6f160bc6bf10dfd926889ef6c3d4b0773b5c1a832d9999a6a2fb8863ac824de5f59efd", "file": "src/table/header/table-header.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-table-header, ibm-table-header", "styleUrls": [], "styles": [], "template": "\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "displayStyle", "defaultValue": "\"block\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 11, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'style.display'" } ], "modifierKind": [ 170 ] }, { "name": "headerClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 10, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--data-table-header'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--data-table-header", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 10, "type": "boolean", "decorators": [] }, { "name": "style.display", "defaultValue": "\"block\"", "deprecated": false, "deprecationMessage": "", "line": 11, "type": "string", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, HostBinding } from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-table-header, ibm-table-header\",\n\ttemplate: `\n\t\t\n\t`\n})\nexport class TableHeader {\n\t@HostBinding(\"class.cds--data-table-header\") headerClass = true;\n\t@HostBinding(\"style.display\") displayStyle = \"block\";\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "TableHeadExpand", "id": "component-TableHeadExpand-310facdfe3384b586a6b1fbf3ba8cf4967ffe4664332b60625d2ef474e2bb162427502c81b9543d050df86772338327986dabf3c9c8c83010ebc0a99a95388d6", "file": "src/table/head/table-head-expand.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "[cdsTableHeadExpand], [ibmTableHeadExpand]", "styleUrls": [], "styles": [], "template": "\n\t\n\n\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "expanded", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 32, "type": "boolean", "decorators": [] }, { "name": "showExpandAllToggle", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 30, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "expandedChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 34, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "hostClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 28, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--table-expand'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "getAriaLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 44, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.data-previous-value", "deprecated": false, "deprecationMessage": "", "line": 36, "type": "string", "decorators": [] }, { "name": "class.cds--table-expand", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 28, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOutput\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableHeadExpand], [ibmTableHeadExpand]\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class TableHeadExpand {\n\t@HostBinding(\"class.cds--table-expand\") hostClass = true;\n\n\t@Input() showExpandAllToggle = false;\n\n\t@Input() expanded = false;\n\n\t@Output() expandedChange = new EventEmitter();\n\n\t@HostBinding(\"attr.data-previous-value\") get previousValue() {\n\t\treturn this.expanded ? \"collapsed\" : null;\n\t}\n\n\tprotected _ariaLabel = this.i18n.getOverridable(\"TABLE.EXPAND_ALL_BUTTON\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetAriaLabel(): Observable {\n\t\treturn this._ariaLabel.subject;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 40, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "previousValue": { "name": "previousValue", "getSignature": { "name": "previousValue", "type": "", "returnType": "", "line": 36 } } } }, { "name": "TableNoDataStory", "id": "component-TableNoDataStory-e22d963d03a72d813be6b8b962b5faebda8cf845cd7831424ed80532fe4971493a8c6b7ae0777e46289d00eede8aed5b2601fa804617384af6c7949b6887f454", "file": "src/table/stories/app-no-data.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-no-data-table", "styleUrls": [], "styles": [], "template": "\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "isDataGrid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 31, "type": "boolean", "decorators": [] }, { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "any", "decorators": [] }, { "name": "showSelectionColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 28, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 27, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 32, "type": "boolean", "decorators": [] }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 30, "type": "boolean", "decorators": [] }, { "name": "striped", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 29, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOnInit,\n\tInput,\n\tOnChanges,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\n\n@Component({\n\tselector: \"app-no-data-table\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class TableNoDataStory implements OnInit, OnChanges {\n\t@Input() model = new TableModel();\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() striped = true;\n\t@Input() sortable = true;\n\t@Input() isDataGrid = false;\n\t@Input() skeleton = false;\n\n\tngOnInit() {\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Name\"\n\t\t\t}),\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"hwer\",\n\t\t\t\tclassName: \"my-class\"\n\t\t\t})\n\t\t];\n\t}\n\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes.sortable) {\n\t\t\tfor (let column of this.model.header) {\n\t\t\t\tcolumn.sortable = changes.sortable.currentValue;\n\t\t\t}\n\t\t}\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "OnInit", "OnChanges" ] }, { "name": "TableRadio", "id": "component-TableRadio-3efc3af9bbed3a84b40694053282346adf91a4efa2ce1669f7f10a66099534fdcf49a3fd05e094ddced37922d206fa5c0b75f0503428860d737373f03eccd698", "file": "src/table/cell/table-radio.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "[cdsTableRadio], [ibmTableRadio]", "styleUrls": [], "styles": [], "template": "\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "label", "deprecated": false, "deprecationMessage": "", "line": 33, "type": "string | Observable", "decorators": [] }, { "name": "row", "deprecated": false, "deprecationMessage": "", "line": 28, "type": "any[]", "decorators": [] }, { "name": "selected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 30, "type": "boolean", "decorators": [] }, { "name": "selectionLabelColumn", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to populate the row selection checkbox label with a useful value if set.\n\nExample:\n```\n\n\n```\n", "description": "

    Used to populate the row selection checkbox label with a useful value if set.

    \n

    Example:

    \nExample :
    <cds-table [selectionLabelColumn]="0"></cds-table>\n<!-- results in aria-label="Select first column value"\n(where "first column value" is the value of the first column in the row -->
    ", "line": 58, "type": "number", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 60, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "change", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits if a single row is selected.\n", "description": "

    Emits if a single row is selected.

    \n", "line": 65, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "radioColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 45, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--table-column-radio'" } ], "modifierKind": [ 170 ] }, { "name": "selectableColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 46, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--table-column-checkbox'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "getLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 78, "deprecated": false, "deprecationMessage": "" }, { "name": "getSelectionLabelValue", "args": [ { "name": "row", "type": "TableItem[]", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "{ value: any; }", "typeParameters": [], "line": 71, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "row", "type": "TableItem[]", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--table-column-checkbox", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 46, "type": "boolean", "decorators": [] }, { "name": "class.cds--table-column-radio", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 45, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableRow } from \"../table-row.class\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableRadio], [ibmTableRadio]\",\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})\nexport class TableRadio {\n\t@Input() row: any[];\n\n\t@Input() selected = false;\n\n\t@Input()\n\tset label(value: string | Observable) {\n\t\tthis._label.override(value);\n\t}\n\n\tget label() {\n\t\treturn this._label.value;\n\t}\n\n\tget disabled(): boolean {\n\t\treturn this.row ? !!(this.row as TableRow).disabled : false;\n\t}\n\n\t@HostBinding(\"class.cds--table-column-radio\") radioColumn = true;\n\t@HostBinding(\"class.cds--table-column-checkbox\") selectableColumn = true;\n\n\t/**\n\t * Used to populate the row selection checkbox label with a useful value if set.\n\t *\n\t * Example:\n\t * ```\n\t * \n\t * \n\t * ```\n\t */\n\t@Input() selectionLabelColumn: number;\n\n\t@Input() skeleton = false;\n\n\t/**\n\t * Emits if a single row is selected.\n\t */\n\t@Output() change = new EventEmitter();\n\n\tprotected _label = this.i18n.getOverridable(\"TABLE.CHECKBOX_ROW\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetSelectionLabelValue(row: TableItem[]) {\n\t\tif (!this.selectionLabelColumn) {\n\t\t\treturn { value: this.i18n.get().TABLE.ROW };\n\t\t}\n\t\treturn { value: row[this.selectionLabelColumn].data };\n\t}\n\n\tgetLabel(): Observable {\n\t\treturn this._label.subject;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 67, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "label": { "name": "label", "setSignature": { "name": "label", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 33, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "label", "type": "", "returnType": "", "line": 37 } }, "disabled": { "name": "disabled", "getSignature": { "name": "disabled", "type": "boolean", "returnType": "boolean", "line": 41 } } } }, { "name": "TableRowComponent", "id": "component-TableRowComponent-7536027a8522af888ed74ca25e1fd5d02d16391f37a593b3a21a903d4a092d837f7e2abf4d7c868fb1e564b0ce5b9b5e9c2216cba309d26534aa5ac8e94b3c1c", "file": "src/table/body/table-row.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "[cdsTableRow], [ibmTableRow]", "styleUrls": [], "styles": [], "template": "\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "checkboxLabel", "deprecated": false, "deprecationMessage": "", "line": 125, "type": "string | Observable", "decorators": [] }, { "name": "enableSingleSelect", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls whether to enable multiple or single row selection.\n", "description": "

    Controls whether to enable multiple or single row selection.

    \n", "line": 113, "type": "boolean", "decorators": [] }, { "name": "expandable", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 101, "type": "boolean", "decorators": [] }, { "name": "expandButtonAriaLabel", "deprecated": false, "deprecationMessage": "", "line": 116, "type": "string | Observable", "decorators": [] }, { "name": "expanded", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 99, "type": "boolean", "decorators": [] }, { "name": "model", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\n`TableModel` with data the table is to display.\n", "description": "

    TableModel with data the table is to display.

    \n", "line": 95, "type": "TableModel", "decorators": [] }, { "name": "row", "deprecated": false, "deprecationMessage": "", "line": 97, "type": "TableItem[]", "decorators": [] }, { "name": "selected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 103, "type": "boolean", "decorators": [] }, { "name": "selectionLabelColumn", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to populate the row selection checkbox label with a useful value if set.\n\nExample:\n```\n\n\n```\n", "description": "

    Used to populate the row selection checkbox label with a useful value if set.

    \n

    Example:

    \nExample :
    <cds-table [selectionLabelColumn]="0"></cds-table>\n<!-- results in aria-label="Select first column value"\n(where "first column value" is the value of the first column in the row -->
    ", "line": 154, "type": "number", "decorators": [] }, { "name": "showSelectionColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nControls whether to show the selection checkboxes column or not.\n", "description": "

    Controls whether to show the selection checkboxes column or not.

    \n", "line": 136, "type": "boolean", "decorators": [] }, { "name": "showSelectionColumnCheckbox", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nShows or hide the checkbox in the selection column when `showSelectionColumn`\nis set to true\n", "description": "

    Shows or hide the checkbox in the selection column when showSelectionColumn\nis set to true

    \n", "line": 142, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSize of the table rows.\n", "description": "

    Size of the table rows.

    \n", "line": 108, "type": "TableRowSize", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 156, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "deselectRow", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits when the row is deselected.\n", "description": "

    Emits when the row is deselected.

    \n", "line": 166, "type": "EventEmitter" }, { "name": "expandRow", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits when the row is expanded\n", "description": "

    Emits when the row is expanded

    \n", "line": 171, "type": "EventEmitter" }, { "name": "rowClick", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits when a row is clicked regardless of `enableSingleSelect` or `showSelectionColumn`.\nShould only get emitted when a row item is selected excluding expand buttons,\ncheckboxes, or radios.\n", "description": "

    Emits when a row is clicked regardless of enableSingleSelect or showSelectionColumn.\nShould only get emitted when a row item is selected excluding expand buttons,\ncheckboxes, or radios.

    \n", "line": 178, "type": "EventEmitter" }, { "name": "selectRow", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits when the row is selected.\n", "description": "

    Emits when the row is selected.

    \n", "line": 161, "type": "EventEmitter" } ], "propertiesClass": [], "methodsClass": [ { "name": "getCheckboxLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 228, "deprecated": false, "deprecationMessage": "" }, { "name": "getExpandButtonAriaLabel", "args": [], "optional": false, "returnType": "Observable", "typeParameters": [], "line": 232, "deprecated": false, "deprecationMessage": "" }, { "name": "onHostClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 210, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'click'" } ], "modifierKind": [ 170 ] }, { "name": "onRowClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 216, "deprecated": false, "deprecationMessage": "" }, { "name": "onSelectionChange", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 220, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.data-parent-row", "deprecated": false, "deprecationMessage": "", "line": 196, "type": "boolean", "decorators": [] }, { "name": "attr.tabindex", "deprecated": false, "deprecationMessage": "", "line": 200, "type": "number", "decorators": [] }, { "name": "class.cds--data-table--selected", "deprecated": false, "deprecationMessage": "", "line": 180, "type": "boolean", "decorators": [] }, { "name": "class.cds--expandable-row", "deprecated": false, "deprecationMessage": "", "line": 188, "type": "boolean", "decorators": [] }, { "name": "class.cds--parent-row", "deprecated": false, "deprecationMessage": "", "line": 184, "type": "boolean", "decorators": [] }, { "name": "class.tbody_row--selectable", "deprecated": false, "deprecationMessage": "", "line": 192, "type": "boolean", "decorators": [] } ], "hostListeners": [ { "name": "click", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 210 } ], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding,\n\tHostListener\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { TableItem } from \"../table-item.class\";\nimport { Observable } from \"rxjs\";\nimport { TableRowSize } from \"../table.types\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableRow], [ibmTableRow]\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t`\n})\nexport class TableRowComponent {\n\t/**\n\t * `TableModel` with data the table is to display.\n\t */\n\t@Input() model: TableModel;\n\n\t@Input() row: TableItem[];\n\n\t@Input() expanded = false;\n\n\t@Input() expandable = false;\n\n\t@Input() selected = false;\n\n\t/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\n\n\t/**\n\t * Controls whether to enable multiple or single row selection.\n\t */\n\t@Input() enableSingleSelect = false;\n\n\t@Input()\n\tset expandButtonAriaLabel(value: string | Observable) {\n\t\tthis._expandButtonAriaLabel.override(value);\n\t}\n\n\tget expandButtonAriaLabel() {\n\t\treturn this._expandButtonAriaLabel.value;\n\t}\n\n\t@Input()\n\tset checkboxLabel(value: string | Observable) {\n\t\tthis._checkboxLabel.override(value);\n\t}\n\n\tget checkboxLabel() {\n\t\treturn this._checkboxLabel.value;\n\t}\n\n\t/**\n\t * Controls whether to show the selection checkboxes column or not.\n\t */\n\t@Input() showSelectionColumn = true;\n\n\t/**\n\t * Shows or hide the checkbox in the selection column when `showSelectionColumn`\n\t * is set to true\n\t */\n\t@Input() showSelectionColumnCheckbox = true;\n\n\t/**\n\t * Used to populate the row selection checkbox label with a useful value if set.\n\t *\n\t * Example:\n\t * ```\n\t * \n\t * \n\t * ```\n\t */\n\t@Input() selectionLabelColumn: number;\n\n\t@Input() skeleton = false;\n\n\t/**\n\t * Emits when the row is selected.\n\t */\n\t@Output() selectRow = new EventEmitter();\n\n\t/**\n\t * Emits when the row is deselected.\n\t */\n\t@Output() deselectRow = new EventEmitter();\n\n\t/**\n\t * Emits when the row is expanded\n\t */\n\t@Output() expandRow = new EventEmitter();\n\n\t/**\n\t * Emits when a row is clicked regardless of `enableSingleSelect` or `showSelectionColumn`.\n\t * Should only get emitted when a row item is selected excluding expand buttons,\n\t * checkboxes, or radios.\n\t */\n\t@Output() rowClick = new EventEmitter();\n\n\t@HostBinding(\"class.cds--data-table--selected\") get selectedClass() {\n\t\treturn this.selected;\n\t}\n\n\t@HostBinding(\"class.cds--parent-row\") get parentRowClass() {\n\t\treturn this.expandable;\n\t}\n\n\t@HostBinding(\"class.cds--expandable-row\") get expandableRowClass() {\n\t\treturn this.expanded;\n\t}\n\n\t@HostBinding(\"class.tbody_row--selectable\") get selectableClass() {\n\t\treturn false; // this.singleSelect\n\t}\n\n\t@HostBinding(\"attr.data-parent-row\") get isParentRow() {\n\t\treturn this.expandable ? true : null;\n\t}\n\n\t@HostBinding(\"attr.tabindex\") get isAccessible() {\n\t\treturn this.enableSingleSelect && !this.showSelectionColumn ? 0 : null;\n\t}\n\n\tprotected _checkboxLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_ROW\");\n\tprotected _expandButtonAriaLabel = this.i18n.getOverridable(\"TABLE.EXPAND_BUTTON\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\t@HostListener(\"click\")\n\tonHostClick() {\n\t\tif (this.enableSingleSelect && !this.showSelectionColumn) {\n\t\t\tthis.onSelectionChange();\n\t\t}\n\t}\n\n\tonRowClick() {\n\t\tthis.rowClick.emit();\n\t}\n\n\tonSelectionChange() {\n\t\tif (this.selected) {\n\t\t\tthis.deselectRow.emit();\n\t\t} else {\n\t\t\tthis.selectRow.emit();\n\t\t}\n\t}\n\n\tgetCheckboxLabel(): Observable {\n\t\treturn this._checkboxLabel.subject;\n\t}\n\n\tgetExpandButtonAriaLabel(): Observable {\n\t\treturn this._expandButtonAriaLabel.subject;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 205, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "expandButtonAriaLabel": { "name": "expandButtonAriaLabel", "setSignature": { "name": "expandButtonAriaLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 116, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "expandButtonAriaLabel", "type": "", "returnType": "", "line": 120 } }, "checkboxLabel": { "name": "checkboxLabel", "setSignature": { "name": "checkboxLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 125, "jsdoctags": [ { "name": "value", "type": "string | Observable", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "checkboxLabel", "type": "", "returnType": "", "line": 129 } }, "selectedClass": { "name": "selectedClass", "getSignature": { "name": "selectedClass", "type": "", "returnType": "", "line": 180 } }, "parentRowClass": { "name": "parentRowClass", "getSignature": { "name": "parentRowClass", "type": "", "returnType": "", "line": 184 } }, "expandableRowClass": { "name": "expandableRowClass", "getSignature": { "name": "expandableRowClass", "type": "", "returnType": "", "line": 188 } }, "selectableClass": { "name": "selectableClass", "getSignature": { "name": "selectableClass", "type": "", "returnType": "", "line": 192 } }, "isParentRow": { "name": "isParentRow", "getSignature": { "name": "isParentRow", "type": "", "returnType": "", "line": 196 } }, "isAccessible": { "name": "isAccessible", "getSignature": { "name": "isAccessible", "type": "", "returnType": "", "line": 200 } } } }, { "name": "TableStory", "id": "component-TableStory-6d27217ec22adbaead15a0d980859d43005f39ede4ffac67b51a0963cd7690e7d027e87078d6b983a417ca4f84e54e6140b8c14f33989ba922734dd7593e9b56", "file": "src/table/stories/app-table.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-table", "styleUrls": [], "styles": [], "template": "\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaDescribedby", "deprecated": false, "deprecationMessage": "", "line": 44, "type": "any", "decorators": [] }, { "name": "ariaLabelledby", "deprecated": false, "deprecationMessage": "", "line": 43, "type": "any", "decorators": [] }, { "name": "enableSingleSelect", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 36, "type": "boolean", "decorators": [] }, { "name": "isDataGrid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 39, "type": "boolean", "decorators": [] }, { "name": "model", "defaultValue": "new TableModel()", "deprecated": false, "deprecationMessage": "", "line": 33, "type": "any", "decorators": [] }, { "name": "noData", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 40, "type": "boolean", "decorators": [] }, { "name": "showSelectionColumn", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 35, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 34, "type": "string", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 42, "type": "boolean", "decorators": [] }, { "name": "sortable", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 38, "type": "boolean", "decorators": [] }, { "name": "stickyHeader", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 41, "type": "boolean", "decorators": [] }, { "name": "striped", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 37, "type": "boolean", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [ { "name": "onRowClick", "args": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 82, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "index", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOnInit,\n\tInput,\n\tOnChanges,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\nimport { TableItem } from \"../table-item.class\";\n\n@Component({\n\tselector: \"app-table\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class TableStory implements OnInit, OnChanges {\n\t@Input() model = new TableModel();\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() enableSingleSelect = false;\n\t@Input() striped = true;\n\t@Input() sortable = true;\n\t@Input() isDataGrid = false;\n\t@Input() noData = false;\n\t@Input() stickyHeader = false;\n\t@Input() skeleton = false;\n\t@Input() ariaLabelledby;\n\t@Input() ariaDescribedby;\n\n\tngOnInit() {\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"Name\",\n\t\t\t\ttitle: \"Table header title\"\n\t\t\t}),\n\t\t\tnew TableHeaderItem({\n\t\t\t\tdata: \"hwer\",\n\t\t\t\tclassName: \"my-class\"\n\t\t\t})\n\t\t];\n\n\t\tthis.model.rowsSelectedChange.subscribe(event => console.log(event));\n\t\tthis.model.selectAllChange.subscribe(event => console.log(event ? \"All rows selected!\" : \"All rows deselected!\"));\n\n\t\tif (!this.noData && !this.skeleton) {\n\t\t\tthis.model.data = [\n\t\t\t\t[new TableItem({ data: \"Name 1\", title: \"Table item title\" }), new TableItem({ data: \"qwer\" })],\n\t\t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: \"zwer\" })],\n\t\t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: \"swer\" })],\n\t\t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({data: \"twer\"})],\n\t\t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({data: \"twer\"})],\n\t\t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({data: \"twer\"})],\n\t\t\t\t[new TableItem({ data: \"Name 7\" }), new TableItem({data: \"twer\"})]\n\t\t\t];\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes.sortable) {\n\t\t\tfor (let column of this.model.header) {\n\t\t\t\tcolumn.sortable = changes.sortable.currentValue;\n\t\t\t}\n\t\t}\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "OnInit", "OnChanges" ] }, { "name": "TableToolbar", "id": "component-TableToolbar-b51a195903743b90515552a8518515496e7298d569376537cc98797bb76cd26331b4c3215b71fb17ed1e35713861a906315cd526c97a9cb131c13f43068de8f9", "file": "src/table/toolbar/table-toolbar.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-table-toolbar, ibm-table-toolbar", "styleUrls": [], "styles": [], "template": "\n\t\n\t\t
    \n\t\t\t

    \n\t\t\t\t\n\t\t\t\t\t{{n}} {{legacyText}}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{_batchTextSingle.subject | async}}\n\t\t\t\t\t{{_batchTextMultiple.subject | i18nReplace: {count: n} | async}}\n\t\t\t\t\n\t\t\t

    \n\t\t
    \n\t\t
    \n\t\t\t\n\t\t\t\n\t\t\t\t{{_cancelText.subject | async}}\n\t\t\t\n\t\t
    \n\t\n\t\n\n", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "line": 97, "type": "literal type", "decorators": [] }, { "name": "batchText", "deprecated": false, "deprecationMessage": "", "line": 88, "type": "string | literal type", "decorators": [] }, { "name": "cancelText", "deprecated": false, "deprecationMessage": "", "line": 100, "type": "literal type", "decorators": [] }, { "name": "model", "deprecated": false, "deprecationMessage": "", "line": 86, "type": "TableModel", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 103, "type": "TableRowSize", "decorators": [] } ], "outputsClass": [ { "name": "cancel", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 109, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "_batchTextLegacy", "defaultValue": "this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT\")", "deprecated": false, "deprecationMessage": "", "type": "Overridable", "optional": false, "description": "", "line": 113 }, { "name": "_batchTextMultiple", "defaultValue": "this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT_MULTIPLE\")", "deprecated": false, "deprecationMessage": "", "type": "Overridable", "optional": false, "description": "", "line": 115 }, { "name": "_batchTextSingle", "defaultValue": "this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT_SINGLE\")", "deprecated": false, "deprecationMessage": "", "type": "Overridable", "optional": false, "description": "", "line": 114 }, { "name": "_cancelText", "defaultValue": "this.i18n.getOverridable(\"TABLE_TOOLBAR.CANCEL\")", "deprecated": false, "deprecationMessage": "", "type": "Overridable", "optional": false, "description": "", "line": 112 }, { "name": "actionBarLabel", "defaultValue": "this.i18n.getOverridable(\"TABLE_TOOLBAR.ACTION_BAR\")", "deprecated": false, "deprecationMessage": "", "type": "Overridable", "optional": false, "description": "", "line": 111 } ], "methodsClass": [ { "name": "onCancel", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 126, "deprecated": false, "deprecationMessage": "" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

    The table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data.

    \n

    Basic usage

    \nExample :
    <cds-table-toolbar [model]="model">\n        <cds-table-toolbar-actions>\n            <button cdsButton="primary">\n                Delete\n                <svg cdsIcon="trash-can" size="16" class="cds--btn__icon"></svg>\n            </button>\n            <button cdsButton="primary">\n                Save\n                <svg cdsIcon="save" size="16" class="cds--btn__icon"></svg>\n            </button>\n            <button cdsButton="primary">\n                Download\n                <svg cdsIcon="download" size="16" class="cds--btn__icon"></svg>\n            </button>\n        </cds-table-toolbar-actions>\n            <cds-table-toolbar-content>\n            <cds-table-toolbar-search [expandable]="true"></cds-table-toolbar-search>\n            <button cdsButton="toolbar-action">\n                <svg cdsIcon="settings" size="16" class="cds--toolbar-action__icon"></svg>\n            </button>\n            <button cdsButton="primary" size="sm">\n                Primary Button\n                <svg cdsIcon="add" size="20" class="cds--btn__icon"></svg>\n            </button>\n        </cds-table-toolbar-content>\n    </cds-table-toolbar>
    ", "rawdescription": "\n\nThe table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data.\n\n## Basic usage\n\n```html\n\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n```\n\n", "type": "component", "sourceCode": "import { TableModel } from \"../table-model.class\";\nimport {\n\tComponent,\n\tEventEmitter,\n\tInput,\n\tOutput\n} from \"@angular/core\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { TableRowSize } from \"../table.types\";\n\n/**\n * The table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data.\n *\n * ## Basic usage\n *\n * ```html\n * \n *\t\t\n *\t\t\t\n *\t\t\t\n *\t\t\t\n *\t\t\n *\t\t\t\n *\t\t\t\n *\t\t\t\n *\t\t\t\n *\t\t\n *\t\n * ```\n *\n */\n@Component({\n\tselector: \"cds-table-toolbar, ibm-table-toolbar\",\n\ttemplate: `\n\t\n\t\t\n\t\t\t
    \n\t\t\t\t

    \n\t\t\t\t\t\n\t\t\t\t\t\t{{n}} {{legacyText}}\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{{_batchTextSingle.subject | async}}\n\t\t\t\t\t\t{{_batchTextMultiple.subject | i18nReplace: {count: n} | async}}\n\t\t\t\t\t\n\t\t\t\t

    \n\t\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{_cancelText.subject | async}}\n\t\t\t\t\n\t\t\t
    \n\t\t\n\t\t\n\t\n\t`\n})\nexport class TableToolbar {\n\t@Input() model: TableModel;\n\n\t@Input() set batchText (value: string | { SINGLE: string, MULTIPLE: string }) {\n\t\tif (typeof value === \"object\") {\n\t\t\tthis._batchTextSingle.override(value.SINGLE);\n\t\t\tthis._batchTextMultiple.override(value.MULTIPLE);\n\t\t} else {\n\t\t\t// For compatibility with old code\n\t\t\tthis._batchTextLegacy.override(value);\n\t\t}\n\t}\n\t@Input() set ariaLabel (value: { ACTION_BAR: string }) {\n\t\tthis.actionBarLabel.override(value.ACTION_BAR);\n\t}\n\t@Input() set cancelText(value: { CANCEL: string }) {\n\t\tthis._cancelText.override(value.CANCEL);\n\t}\n\t@Input() size: TableRowSize = \"md\";\n\n\tget cancelText(): { CANCEL: string } {\n\t\treturn { CANCEL: this._cancelText.value as string };\n\t}\n\n\t@Output() cancel = new EventEmitter();\n\n\tactionBarLabel: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.ACTION_BAR\");\n\t_cancelText: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.CANCEL\");\n\t_batchTextLegacy: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT\");\n\t_batchTextSingle: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT_SINGLE\");\n\t_batchTextMultiple: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT_MULTIPLE\");\n\n\tconstructor(protected i18n: I18n) {}\n\n\tget count() {\n\t\treturn this.model.totalDataLength > 0 ? this.model.rowsSelected.reduce((previous, current) => previous + (current ? 1 : 0), 0) : 0;\n\t}\n\tget selected() {\n\t\treturn this.model.totalDataLength > 0 ? this.model.rowsSelected.some(item => item) : false;\n\t}\n\n\tonCancel() {\n\t\tthis.model.selectAll(false);\n\t\tthis.cancel.emit();\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "constructorObj": { "name": "constructor", "description": "", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "line": 115, "jsdoctags": [ { "name": "i18n", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "extends": [], "accessors": { "batchText": { "name": "batchText", "setSignature": { "name": "batchText", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "string | literal type", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 88, "jsdoctags": [ { "name": "value", "type": "string | literal type", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "ariaLabel": { "name": "ariaLabel", "setSignature": { "name": "ariaLabel", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "literal type", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 97, "jsdoctags": [ { "name": "value", "type": "literal type", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } }, "cancelText": { "name": "cancelText", "setSignature": { "name": "cancelText", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "value", "type": "literal type", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 100, "jsdoctags": [ { "name": "value", "type": "literal type", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, "getSignature": { "name": "cancelText", "type": "literal type", "returnType": "literal type", "line": 105 } }, "count": { "name": "count", "getSignature": { "name": "count", "type": "", "returnType": "", "line": 119 } }, "selected": { "name": "selected", "getSignature": { "name": "selected", "type": "", "returnType": "", "line": 122 } } } }, { "name": "TableToolbarActions", "id": "component-TableToolbarActions-a37a9dd75ca104dce1156d463f58d2ae52043a57e21280619508d13caf4ec3fa2a06d499d9a23c524936bdc353fa7895c0c4e8c8d60926078a16f3129fe8e98b", "file": "src/table/toolbar/table-toolbar-actions.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-table-toolbar-actions, ibm-table-toolbar-actions", "styleUrls": [], "styles": [], "template": "", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, HostBinding } from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-table-toolbar-actions, ibm-table-toolbar-actions\",\n\ttemplate: ``\n})\nexport class TableToolbarActions {}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "TableToolbarContent", "id": "component-TableToolbarContent-9540f9d06241cf31573df1f9a227a47e24f1e8142bcd3fd1772c447c369bcce7af2f039221395d5f02fb805d0a090a5dd3463dc095c53b1ca367435e5c8d31c1", "file": "src/table/toolbar/table-toolbar-content.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-table-toolbar-content, ibm-table-toolbar-content", "styleUrls": [], "styles": [], "template": "", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [], "outputsClass": [], "propertiesClass": [ { "name": "class", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 8, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--toolbar-content'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--toolbar-content", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 8, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, HostBinding } from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-table-toolbar-content, ibm-table-toolbar-content\",\n\ttemplate: ``\n})\nexport class TableToolbarContent {\n\t@HostBinding(\"class.cds--toolbar-content\") class = true;\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "TableToolbarSearch", "id": "component-TableToolbarSearch-6fc1dbe73e6a42770a0fab1aba2108ef3cb6ee5b4b3a9b8e1623d910add36917594d0090d2c43c4f939d79c1ee4439dd02b24c08060c719b549c6d7dc11f8789", "file": "src/table/toolbar/table-toolbar-search.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [ { "name": "{\n provide: NG_VALUE_ACCESSOR, useExisting: TableToolbarSearch, multi: true\n}" } ], "selector": "cds-table-toolbar-search, ibm-table-toolbar-search", "styleUrls": [], "styles": [], "templateUrl": [ "../../search/search.component.html" ], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "active", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to expand the toolbar search component.\n", "description": "

    Set to true to expand the toolbar search component.

    \n", "line": 79, "type": "boolean", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the aria label on the `div` element with the `search` role.\n", "description": "

    Sets the aria label on the div element with the search role.

    \n", "line": 124, "type": "string", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "autocomplete", "defaultValue": "\"on\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the autocomplete attribute on the `input` element.\nFor reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\n", "description": "

    Sets the autocomplete attribute on the input element.\nFor reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values

    \n", "line": 104, "type": "string", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "clearButtonTitle", "defaultValue": "this.i18n.get().SEARCH.CLEAR_BUTTON", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nUsed to set the `title` attribute of the clear button.\n", "description": "

    Used to set the title attribute of the clear button.

    \n", "line": 116, "type": "any", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a disabled search input.\n", "description": "

    Set to true for a disabled search input.

    \n", "line": 62, "type": "boolean", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "expandable", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to make the search component expandable.\n`expandable` would override `toolbar` property behaviours.\n", "description": "

    Set to true to make the search component expandable.\nexpandable would override toolbar property behaviours.

    \n", "line": 71, "type": "boolean", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "fluid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExperimental: enable fluid state\n", "description": "

    Experimental: enable fluid state

    \n", "line": 128, "type": "boolean", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "id", "defaultValue": "`search-${Search.searchCount}`", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe unique id for the search component.\n", "description": "

    The unique id for the search component.

    \n", "line": 91, "type": "string", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "label", "defaultValue": "this.i18n.get().SEARCH.LABEL", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the text inside the `label` tag.\n", "description": "

    Sets the text inside the label tag.

    \n", "line": 108, "type": "any", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "name", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the name attribute on the `input` element.\n", "description": "

    Sets the name attribute on the input element.

    \n", "line": 87, "type": "string", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "placeholder", "defaultValue": "this.i18n.get().SEARCH.PLACEHOLDER", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the placeholder attribute on the `input` element.\n", "description": "

    Sets the placeholder attribute on the input element.

    \n", "line": 112, "type": "any", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "required", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nReflects the required attribute of the `input` element.\n", "description": "

    Reflects the required attribute of the input element.

    \n", "line": 95, "type": "boolean", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "searchTitle", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTitle for the search trigger\n", "description": "

    Title for the search trigger

    \n", "line": 120, "type": "string", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSize of the search field.\n", "description": "

    Size of the search field.

    \n", "line": 57, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a loading search component.\n", "description": "

    Set to true for a loading search component.

    \n", "line": 75, "type": "boolean", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "tableSearch", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSpecifies whether the search component is used in the table toolbar.\n", "description": "

    Specifies whether the search component is used in the table toolbar.

    \n", "line": 83, "type": "boolean", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": true, "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` search theme.", "jsdoctags": [ { "pos": 1046, "end": 1140, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 338, "tagName": { "pos": 1047, "end": 1057, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "deprecated" }, "comment": "

    since v5 - Use cdsLayer directive instead\nlight or dark search theme.

    \n" } ], "line": 52, "type": "\"light\" | \"dark\"", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "toolbar", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a toolbar search component.\n", "description": "

    Set to true for a toolbar search component.

    \n", "line": 66, "type": "boolean", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "value", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the value attribute on the `input` element.\n", "description": "

    Sets the value attribute on the input element.

    \n", "line": 99, "type": "string", "decorators": [], "inheritance": { "file": "Search" } } ], "outputsClass": [ { "name": "clear", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when the clear button is clicked.\n", "description": "

    Emits an event when the clear button is clicked.

    \n", "line": 137, "type": "EventEmitter", "inheritance": { "file": "Search" } }, { "name": "open", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 133, "type": "EventEmitter", "inheritance": { "file": "Search" } }, { "name": "search", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event on enter.\n", "description": "

    Emits an event on enter.

    \n", "line": 141, "type": "EventEmitter", "inheritance": { "file": "Search" } }, { "name": "valueChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nEmits an event when value is changed.\n", "description": "

    Emits an event when value is changed.

    \n", "line": 132, "type": "EventEmitter", "inheritance": { "file": "Search" } } ], "propertiesClass": [ { "name": "hostClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 27, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--toolbar-content'" } ], "modifierKind": [ 170 ] }, { "name": "size", "defaultValue": "\"lg\"", "deprecated": false, "deprecationMessage": "", "type": "\"sm\" | \"md\" | \"lg\"", "optional": false, "description": "", "line": 25 }, { "name": "tableSearch", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 23 }, { "name": "inputRef", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 143, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'input'" } ], "modifierKind": [ 170 ], "inheritance": { "file": "Search" } }, { "name": "onTouched", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "function", "optional": false, "description": "

    Called when search input is blurred. Needed to properly implement ControlValueAccessor.

    \n", "line": 184, "rawdescription": "\n\nCalled when search input is blurred. Needed to properly implement `ControlValueAccessor`.\n", "inheritance": { "file": "Search" } }, { "name": "propagateChange", "defaultValue": "() => {...}", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Method set in registerOnChange to propagate changes back to the form.

    \n", "line": 189, "rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n", "inheritance": { "file": "Search" } }, { "name": "searchCount", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

    Variable used for creating unique ids for search components.

    \n", "line": 38, "rawdescription": "\n\nVariable used for creating unique ids for search components.\n", "modifierKind": [ 126 ], "inheritance": { "file": "Search" } } ], "methodsClass": [ { "name": "clearSearch", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 213, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled when clear button is clicked.\n", "description": "

    Called when clear button is clicked.

    \n", "inheritance": { "file": "Search" } }, { "name": "compositionEnd", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 285, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled when IME composition finishes.\n", "description": "

    Called when IME composition finishes.

    \n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'compositionend', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "Search" } }, { "name": "compositionStart", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 277, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled when using IME composition.\n", "description": "

    Called when using IME composition.

    \n", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'compositionstart', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "Search" } }, { "name": "doValueChange", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 219, "deprecated": false, "deprecationMessage": "", "inheritance": { "file": "Search" } }, { "name": "focusIn", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 263, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusin', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "Search" } }, { "name": "focusOut", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 251, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'focusout', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "Search" } }, { "name": "keyDown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 231, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'keydown', ['$event']" } ], "modifierKind": [ 170 ], "jsdoctags": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "Search" } }, { "name": "onEnter", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 206, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled on enter.\n", "description": "

    Called on enter.

    \n", "inheritance": { "file": "Search" } }, { "name": "onSearch", "args": [ { "name": "search", "type": "string", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 195, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled when text is written in the input.\n", "description": "

    Called when text is written in the input.

    \n", "jsdoctags": [ { "name": { "pos": 4593, "end": 4599, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "search" }, "type": "string", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 4587, "end": 4592, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    The input text.

    \n" } ], "inheritance": { "file": "Search" } }, { "name": "openSearch", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 224, "deprecated": false, "deprecationMessage": "", "inheritance": { "file": "Search" } }, { "name": "registerOnChange", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 169, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n", "description": "

    Sets a method in order to propagate changes back to the form.

    \n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ], "inheritance": { "file": "Search" } }, { "name": "registerOnTouched", "args": [ { "name": "fn", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 177, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n", "description": "

    Registers a callback to be triggered when the control has been touched.

    \n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 4139, "end": 4141, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "fn" }, "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 4133, "end": 4138, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    Callback to be triggered when the search input is touched.

    \n" } ], "inheritance": { "file": "Search" } }, { "name": "writeValue", "args": [ { "name": "value", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 162, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThis is the initial value set to the component\n", "description": "

    This is the initial value set to the component

    \n", "modifierKind": [ 125 ], "jsdoctags": [ { "name": { "pos": 3815, "end": 3820, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "value" }, "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 3809, "end": 3814, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    The input value.

    \n" } ], "inheritance": { "file": "Search" } } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--toolbar-content", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 27, "type": "boolean", "decorators": [] }, { "name": "class.cds--form-item", "deprecated": false, "deprecationMessage": "", "line": 40, "type": "boolean", "decorators": [], "inheritance": { "file": "Search" } }, { "name": "class.cds--text-input--fluid__skeleton", "deprecated": false, "deprecationMessage": "", "line": 44, "type": "boolean", "decorators": [], "inheritance": { "file": "Search" } } ], "hostListeners": [ { "name": "compositionend", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled when IME composition finishes.\n", "description": "

    Called when IME composition finishes.

    \n", "line": 285, "inheritance": { "file": "Search" } }, { "name": "compositionstart", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nCalled when using IME composition.\n", "description": "

    Called when using IME composition.

    \n", "line": 277, "inheritance": { "file": "Search" } }, { "name": "focusin", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 263, "inheritance": { "file": "Search" } }, { "name": "focusout", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 251, "inheritance": { "file": "Search" } }, { "name": "keydown", "args": [ { "name": "event", "type": "KeyboardEvent", "deprecated": false, "deprecationMessage": "" } ], "argsDecorator": [ "$event" ], "deprecated": false, "deprecationMessage": "", "line": 231, "inheritance": { "file": "Search" } } ], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Search } from \"carbon-components-angular/search\";\nimport {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOnInit,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n@Component({\n\tselector: \"cds-table-toolbar-search, ibm-table-toolbar-search\",\n\ttemplateUrl: \"../../search/search.component.html\",\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: TableToolbarSearch,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class TableToolbarSearch extends Search implements AfterViewInit {\n\ttableSearch = true;\n\n\tsize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t@HostBinding(\"class.cds--toolbar-content\") hostClass = true;\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tif (this.value) {\n\t\t\t\tthis.openSearch();\n\t\t\t}\n\t\t});\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [ "Search" ], "implements": [ "AfterViewInit" ], "templateData": "\n\t\n\t\t{{ !skeleton ? label : ''}}\n\t\n\n\t
    \n\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t{{ clearButtonTitle }}\n\t\t\n\t\n\n" }, { "name": "Tabs", "id": "component-Tabs-1de04019724c6a95ad9d2c5e7d4427781de06093d5c042b38e13c18b0074978bd789e97293a44bc1dea2a0b43644d58aad3bccb0e918a39e0b0243d22a99554f", "file": "src/tabs/tabs.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-tabs, ibm-tabs", "styleUrls": [], "styles": [], "template": "\n\t\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t\n\t\t\n\t\n\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the aria label on the `TabHeader`s nav element.\n", "description": "

    Sets the aria label on the TabHeaders nav element.

    \n", "line": 93, "type": "string", "decorators": [] }, { "name": "ariaLabelledby", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the aria labelledby on the `TabHeader`s nav element.\n", "description": "

    Sets the aria labelledby on the TabHeaders nav element.

    \n", "line": 97, "type": "string", "decorators": [] }, { "name": "cacheActive", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to 'true' to have `Tab` items cached and not reloaded on tab switching.\n", "description": "

    Set to 'true' to have Tab items cached and not reloaded on tab switching.

    \n", "line": 81, "type": "boolean", "decorators": [] }, { "name": "followFocus", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to 'true' to have tabs automatically activated and have their content displayed when they receive focus.\n", "description": "

    Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.

    \n", "line": 85, "type": "boolean", "decorators": [] }, { "name": "isNavigation", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to have the tabIndex of the all tabpanels be -1.\n", "description": "

    Set to true to have the tabIndex of the all tabpanels be -1.

    \n", "line": 89, "type": "boolean", "decorators": [] }, { "name": "position", "defaultValue": "\"top\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTakes either the string value 'top' or 'bottom' to place TabHeader\nrelative to the `TabPanel`s.\n", "description": "

    Takes either the string value 'top' or 'bottom' to place TabHeader\nrelative to the TabPanels.

    \n", "line": 77, "type": "\"top\" | \"bottom\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet state of tabs to skeleton\n", "description": "

    Set state of tabs to skeleton

    \n", "line": 109, "type": "boolean", "decorators": [] }, { "name": "theme", "defaultValue": "\"dark\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the theme of `TabHeader`s\n", "description": "

    Sets the theme of TabHeaders

    \n", "line": 105, "type": "\"light\" | \"dark\"", "decorators": [] }, { "name": "type", "defaultValue": "\"line\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the type of the `TabHeader`s\n", "description": "

    Sets the type of the TabHeaders

    \n", "line": 101, "type": "\"line\" | \"contained\"", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "tabHeaders", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Content child of the projected header component

    \n", "line": 118, "rawdescription": "\n\nContent child of the projected header component\n", "decorators": [ { "name": "ContentChild", "stringifiedArguments": "TabHeaders" } ], "modifierKind": [ 170 ] }, { "name": "tabs", "deprecated": false, "deprecationMessage": "", "type": "QueryList", "optional": false, "description": "

    Maintains a QueryList of the Tab elements and updates if Tabs are added or removed.

    \n", "line": 114, "rawdescription": "\n\nMaintains a `QueryList` of the `Tab` elements and updates if `Tab`s are added or removed.\n", "decorators": [ { "name": "ContentChildren", "stringifiedArguments": "Tab, {descendants: false}" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "hasTabHeaders", "args": [], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 149, "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\ntrue if the n-tab's are passed directly to the component as children\n", "description": "

    true if the n-tab's are passed directly to the component as children

    \n" } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Build out your application's tabs using this component.\nThis is the parent of the Tab and TabHeader components.

    \n

    See demo

    \n

    Tabs expects a set of n-tab elements

    \nExample :
    <cds-tabs>\n    <cds-tab heading='tab1'>\n        tab 1 content\n    </cds-tab>\n    <cds-tab heading='tab1'>\n        tab 2 content\n    </cds-tab>\n    <!-- ... -->\n    <cds-tab heading='tab1'>\n        tab n content\n    </cds-tab>\n</cds-tabs>
    ", "rawdescription": "\n\nBuild out your application's tabs using this component.\nThis is the parent of the `Tab` and `TabHeader` components.\n\n[See demo](../../?path=/story/components-tabs--basic)\n\n`Tabs` expects a set of `n-tab` elements\n\n```html\n\n\t\n\t\ttab 1 content\n\t\n\t\n\t\ttab 2 content\n\t\n\t\n\t\n\t\ttab n content\n\t\n\n```\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tContentChild,\n\tOnChanges,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { Tab } from \"./tab.component\";\nimport { TabHeaders } from \"./tab-headers.component\";\n\n/**\n * Build out your application's tabs using this component.\n * This is the parent of the `Tab` and `TabHeader` components.\n *\n * [See demo](../../?path=/story/components-tabs--basic)\n *\n * `Tabs` expects a set of `n-tab` elements\n *\n * ```html\n * \n * \t\n * \t\ttab 1 content\n * \t\n * \t\n * \t\ttab 2 content\n * \t\n * \t\n * \t\n * \t\ttab n content\n * \t\n * \n * ```\n */\n@Component({\n\tselector: \"cds-tabs, ibm-tabs\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class Tabs implements AfterContentInit, OnChanges {\n\t/**\n\t * Takes either the string value 'top' or 'bottom' to place TabHeader\n\t * relative to the `TabPanel`s.\n\t */\n\t@Input() position: \"top\" | \"bottom\" = \"top\";\n\t/**\n\t * Set to 'true' to have `Tab` items cached and not reloaded on tab switching.\n\t */\n\t@Input() cacheActive = false;\n\t/**\n\t * Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.\n\t */\n\t@Input() followFocus = true;\n\t/**\n\t * Set to `true` to have the tabIndex of the all tabpanels be -1.\n\t */\n\t@Input() isNavigation = false;\n\t/**\n\t * Sets the aria label on the `TabHeader`s nav element.\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Sets the aria labelledby on the `TabHeader`s nav element.\n\t */\n\t@Input() ariaLabelledby: string;\n\t/**\n\t * Sets the type of the `TabHeader`s\n\t */\n\t@Input() type: \"line\" | \"contained\" = \"line\";\n\t/**\n\t * Sets the theme of `TabHeader`s\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set state of tabs to skeleton\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Maintains a `QueryList` of the `Tab` elements and updates if `Tab`s are added or removed.\n\t */\n\t@ContentChildren(Tab, { descendants: false }) tabs: QueryList;\n\t/**\n\t * Content child of the projected header component\n\t */\n\t@ContentChild(TabHeaders) tabHeaders;\n\n\t/**\n\t * After content is initialized update `Tab`s to cache (if turned on) and set the initial\n\t * selected Tab item.\n\t */\n\tngAfterContentInit() {\n\t\tif (this.tabHeaders) {\n\t\t\tthis.tabHeaders.cacheActive = this.cacheActive;\n\t\t}\n\n\t\tthis.tabs.forEach(tab => {\n\t\t\ttab.tabIndex = this.isNavigation ? null : 0;\n\t\t});\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (this.tabHeaders && changes.cacheActive) {\n\t\t\tthis.tabHeaders.cacheActive = this.cacheActive;\n\t\t}\n\n\t\tif (this.tabs && changes.isNavigation) {\n\t\t\tthis.tabs.forEach(tab => {\n\t\t\t\ttab.tabIndex = this.isNavigation ? null : 0;\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * true if the n-tab's are passed directly to the component as children\n\t */\n\thasTabHeaders() {\n\t\treturn this.tabs.length > 0;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "implements": [ "AfterContentInit", "OnChanges" ] }, { "name": "TabSkeleton", "id": "component-TabSkeleton-bd65b420190d48a8df78ac12ae7d2f56f8b81cd578e9884a8b0d715332b18f69c5918808efe18c0b7ec9c120d8206ef94717d7af5db2c41e1d90e4daa9da8de8", "file": "src/tabs/tab-skeleton.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-tabs-skeleton, ibm-tabs-skeleton", "styleUrls": [], "styles": [], "template": "
      \n\t\n\t\t
      \n\t\t\t\n\t\t
      \n\t\n
    \n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "numOftabs", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet number of skeleton tabs to render, default is 5\n", "description": "

    Set number of skeleton tabs to render, default is 5

    \n", "line": 28, "type": "number", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "numOfSkeletonTabs", "defaultValue": "new Array(5)", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 37 }, { "name": "skeleton", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "

    Set to true to put tabs in a loading state.

    \n", "line": 35, "rawdescription": "\n\nSet to `true` to put tabs in a loading state.\n", "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--skeleton'" } ], "modifierKind": [ 170 ] }, { "name": "tabs", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 36, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--tabs'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--skeleton", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to put tabs in a loading state.\n", "description": "

    Set to true to put tabs in a loading state.

    \n", "line": 35, "type": "boolean", "decorators": [] }, { "name": "class.cds--tabs", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 36, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Skeleton component for tabs

    \n", "rawdescription": "\n\nSkeleton component for tabs\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\n\n/**\n * Skeleton component for tabs\n */\n@Component({\n\tselector: \"cds-tabs-skeleton, ibm-tabs-skeleton\",\n\ttemplate: `\n\t\t
      \n\t\t\t\n\t\t\t\t
      \n\t\t\t\t\t\n\t\t\t\t
      \n\t\t\t\n\t\t
    \n\t`\n})\nexport class TabSkeleton {\n\t/**\n\t * Set number of skeleton tabs to render, default is 5\n\t */\n\t@Input() set numOftabs(num: number) {\n\t\tthis.numOfSkeletonTabs = new Array(num);\n\t}\n\n\t/**\n\t * Set to `true` to put tabs in a loading state.\n\t */\n\t@HostBinding(\"class.cds--skeleton\") skeleton = true;\n\t@HostBinding(\"class.cds--tabs\") tabs = true;\n\tnumOfSkeletonTabs = new Array(5);\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "accessors": { "numOftabs": { "name": "numOftabs", "setSignature": { "name": "numOftabs", "type": "void", "deprecated": false, "deprecationMessage": "", "args": [ { "name": "num", "type": "number", "deprecated": false, "deprecationMessage": "" } ], "returnType": "void", "line": 28, "rawdescription": "\n\nSet number of skeleton tabs to render, default is 5\n", "description": "

    Set number of skeleton tabs to render, default is 5

    \n", "jsdoctags": [ { "name": "num", "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } } } }, { "name": "TabStory", "id": "component-TabStory-35e3cc2b178dbd10101b3c7c4f8391f46deadb546226a6b4171d467978bb7d8d19c96fdf2c377c1bc7644cc9c50f97c7c61d686c34a5631876944195e0b18ce9", "file": "src/tabs/stories/tabs.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "app-header-group", "styleUrls": [], "styles": [], "template": "\n\t\n\t\n\t\n\t\n\t\n\n\n\n\tTab Content 1\n\n\n\tTab Content 2\n\n\n\tTab Content 3\n\n\n\tTab Content 4\n\n\n\tTab Content 5\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "cacheActive", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 48, "type": "boolean", "decorators": [] }, { "name": "followFocus", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 47, "type": "boolean", "decorators": [] }, { "name": "isNavigation", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 49, "type": "boolean", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 46, "type": "boolean", "decorators": [] }, { "name": "type", "defaultValue": "\"line\"", "deprecated": false, "deprecationMessage": "", "line": 50, "type": "string", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import { Component, Input } from \"@angular/core\";\n\n@Component({\n\tselector: \"app-header-group\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\tTab Content 1\n\t\t\n\t\t\n\t\t\tTab Content 2\n\t\t\n\t\t\n\t\t\tTab Content 3\n\t\t\n\t\t\n\t\t\tTab Content 4\n\t\t\n\t\t\n\t\t\tTab Content 5\n\t\t\n\t`\n})\nexport class TabStory {\n\t@Input() skeleton = false;\n\t@Input() followFocus = true;\n\t@Input() cacheActive = false;\n\t@Input() isNavigation = true;\n\t@Input() type = \"line\";\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [] }, { "name": "Tag", "id": "component-Tag-c1aae23a3d592b407693ad02f2748e209315c9e57f5e91ae24409644c1f78ae8d82074448fa0892bc98e27280876ac99d33aa10b6af1e92a7bdf86f17ba39889", "file": "src/tag/tag.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-tag, ibm-tag", "styleUrls": [], "styles": [], "template": "\n\t\n\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "class", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 54, "type": "string", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTag render size\n", "description": "

    Tag render size

    \n", "line": 52, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 56, "type": "boolean", "decorators": [] }, { "name": "type", "defaultValue": "\"gray\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nType of the tag determines the styling\n", "description": "

    Type of the tag determines the styling

    \n", "line": 47, "type": "TagType", "decorators": [] } ], "outputsClass": [], "propertiesClass": [], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.class", "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "pos": 1047, "end": 1097, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 1048, "end": 1052, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "

    Remove cds--tag--${this.size} in v7

    \n" } ], "line": 62, "type": "string", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Component that represents a tag for labelling/categorizing using keywords. Get started with importing the module:

    \nExample :
    import { TagModule } from 'carbon-components-angular';

    See demo

    \n", "rawdescription": "\n\nComponent that represents a tag for labelling/categorizing using keywords. Get started with importing the module:\n\n```typescript\nimport { TagModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-tag--basic)\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\n/**\n * Supported tag types for carbon v10\n */\nexport type TagType = \"red\" |\n\t\"magenta\" |\n\t\"purple\" |\n\t\"blue\" |\n\t\"cyan\" |\n\t\"teal\" |\n\t\"green\" |\n\t\"gray\" |\n\t\"cool-gray\" |\n\t\"warm-gray\" |\n\t\"high-contrast\" |\n\t\"outline\";\n\n/**\n * Component that represents a tag for labelling/categorizing using keywords. Get started with importing the module:\n *\n * ```typescript\n * import { TagModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tag--basic)\n */\n@Component({\n\tselector: \"cds-tag, ibm-tag\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class Tag {\n\t/**\n\t * Type of the tag determines the styling\n\t */\n\t@Input() type: TagType = \"gray\";\n\n\t/**\n\t * Tag render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@Input() class = \"\";\n\n\t@Input() skeleton = false;\n\n\t/**\n\t * @todo\n\t * Remove `cds--tag--${this.size}` in v7\n\t */\n\t@HostBinding(\"attr.class\") get attrClass() {\n\t\tconst skeletonClass = this.skeleton ? \"cds--skeleton\" : \"\";\n\t\tconst sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;\n\n\t\treturn `cds--tag cds--tag--${this.type} ${sizeClass} ${skeletonClass} ${this.class}`;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "accessors": { "attrClass": { "name": "attrClass", "getSignature": { "name": "attrClass", "type": "", "returnType": "", "line": 62, "rawdescription": "\n\nRemove `cds--tag--${this.size}` in v7\n", "description": "

    Remove cds--tag--${this.size} in v7

    \n", "jsdoctags": [ { "pos": 1047, "end": 1097, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 1048, "end": 1052, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "

    Remove cds--tag--${this.size} in v7

    \n" } ] } } } }, { "name": "TagFilter", "id": "component-TagFilter-798d22f3f19d7e6083cd447721b3260a2750650b5df1b41675b4179ac1e10fac49b974783e536111cdec5225f3597bf6de1ffe863b52a3fae3f51748f34528c3", "file": "src/tag/tag-filter.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-tag-filter, ibm-tag-filter", "styleUrls": [], "styles": [], "template": "\n\t\n\t\n\t\t\n\t\n\t\n\t\t{{closeButtonLabel}}\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "closeButtonLabel", "defaultValue": "\"Clear Filter\"", "deprecated": false, "deprecationMessage": "", "line": 34, "type": "string", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 35, "type": "boolean", "decorators": [] }, { "name": "title", "deprecated": false, "deprecationMessage": "", "line": 36, "type": "string", "decorators": [] }, { "name": "class", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 54, "type": "string", "decorators": [], "inheritance": { "file": "Tag" } }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTag render size\n", "description": "

    Tag render size

    \n", "line": 52, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [], "inheritance": { "file": "Tag" } }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 56, "type": "boolean", "decorators": [], "inheritance": { "file": "Tag" } }, { "name": "type", "defaultValue": "\"gray\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nType of the tag determines the styling\n", "description": "

    Type of the tag determines the styling

    \n", "line": 47, "type": "TagType", "decorators": [], "inheritance": { "file": "Tag" } } ], "outputsClass": [ { "name": "click", "defaultValue": "new EventEmitter<{ action: \"click\" | \"close\" }>()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nWe need to stop the immedate propagation of click on the close button\nto prevent undesired effects when used within dialogs.\n\nWe need to emit a click event on close to allow for clicks to be listened\nto on the immediate close button element. `action` distinguishes between clicks on\nthe tag vs. clicks on the close button.\n", "description": "

    We need to stop the immedate propagation of click on the close button\nto prevent undesired effects when used within dialogs.

    \n

    We need to emit a click event on close to allow for clicks to be listened\nto on the immediate close button element. action distinguishes between clicks on\nthe tag vs. clicks on the close button.

    \n", "line": 51, "type": "EventEmitter" }, { "name": "close", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nFunction for close/delete the tag\n", "description": "

    Function for close/delete the tag

    \n", "line": 41, "type": "EventEmitter" } ], "propertiesClass": [], "methodsClass": [ { "name": "onClick", "args": [ { "name": "event", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 53, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "onClose", "args": [ { "name": "event", "type": "any", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "void", "typeParameters": [], "line": 60, "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "name": "event", "type": "any", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.aria-label", "deprecated": false, "deprecationMessage": "", "line": 78, "type": "any", "decorators": [] }, { "name": "attr.class", "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "pos": 1662, "end": 1712, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 1663, "end": 1667, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "

    Remove cds--tag--${this.size} in v7

    \n" } ], "line": 70, "type": "string", "decorators": [], "inheritance": { "file": "Tag" } } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tComponent,\n\tOutput,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tTemplateRef\n} from \"@angular/core\";\nimport { Tag } from \"./tag.component\";\n\n@Component({\n\tselector: \"cds-tag-filter, ibm-tag-filter\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t{{closeButtonLabel}}\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class TagFilter extends Tag {\n\t@Input() closeButtonLabel = \"Clear Filter\";\n\t@Input() disabled = false;\n\t@Input() title: string;\n\n\t/**\n\t * Function for close/delete the tag\n\t */\n\t@Output() close = new EventEmitter();\n\n\t/**\n\t * We need to stop the immedate propagation of click on the close button\n\t * to prevent undesired effects when used within dialogs.\n\t *\n\t * We need to emit a click event on close to allow for clicks to be listened\n\t * to on the immediate close button element. `action` distinguishes between clicks on\n\t * the tag vs. clicks on the close button.\n\t */\n\t@Output() click = new EventEmitter<{ action: \"click\" | \"close\" }>();\n\n\tonClick(event: any) {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.click.emit({ action: \"click\" });\n\t\t}\n\t}\n\n\tonClose(event: any) {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.click.emit({ action: \"close\" });\n\t\tthis.close.emit();\n\t}\n\n\t/**\n\t * @todo\n\t * Remove `cds--tag--${this.size}` in v7\n\t */\n\t@HostBinding(\"attr.class\") get attrClass() {\n\t\tconst disabledClass = this.disabled ? \"cds--tag--disabled\" : \"\";\n\t\tconst sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;\n\t\tconst skeletonClass = this.skeleton ? \"cds--skeleton\" : \"\";\n\n\t\treturn `cds--tag cds--tag--filter cds--tag--${this.type} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;\n\t}\n\n\t@HostBinding(\"attr.aria-label\") get attrAriaLabel() {\n\t\treturn `${this.title || \"\"} ${this.closeButtonLabel}`.trim();\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [ "Tag" ], "accessors": { "attrClass": { "name": "attrClass", "getSignature": { "name": "attrClass", "type": "", "returnType": "", "line": 70, "rawdescription": "\n\nRemove `cds--tag--${this.size}` in v7\n", "description": "

    Remove cds--tag--${this.size} in v7

    \n", "jsdoctags": [ { "pos": 1662, "end": 1712, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 1663, "end": 1667, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "

    Remove cds--tag--${this.size} in v7

    \n" } ] } }, "attrAriaLabel": { "name": "attrAriaLabel", "getSignature": { "name": "attrAriaLabel", "type": "", "returnType": "", "line": 78 } } } }, { "name": "TagOperationalComponent", "id": "component-TagOperationalComponent-d2b919d83748916a545489466c570a5e13fe7e38e2667165259a99f41a09dc8c5f197d5bdd64e3842c6b5db96ba75dc2f78aec0fac73848d621496af5a51fe02", "file": "src/tag/tag-operational.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-tag-operational, ibm-tag-operational", "styleUrls": [], "styles": [], "template": "\n\t\n\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "boolean", "decorators": [] }, { "name": "class", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 54, "type": "string", "decorators": [], "inheritance": { "file": "Tag" } }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nTag render size\n", "description": "

    Tag render size

    \n", "line": 52, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [], "inheritance": { "file": "Tag" } }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 56, "type": "boolean", "decorators": [], "inheritance": { "file": "Tag" } }, { "name": "type", "defaultValue": "\"gray\"", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nType of the tag determines the styling\n", "description": "

    Type of the tag determines the styling

    \n", "line": 47, "type": "TagType", "decorators": [], "inheritance": { "file": "Tag" } } ], "outputsClass": [], "propertiesClass": [ { "name": "buttonType", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 23, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.type'" } ], "modifierKind": [ 170 ] }, { "name": "role", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 22, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] }, { "name": "tabIndex", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 24, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.tabindex'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.class", "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "pos": 690, "end": 740, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 691, "end": 695, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "

    Remove cds--tag--${this.size} in v7

    \n" } ], "line": 32, "type": "string", "decorators": [], "inheritance": { "file": "Tag" } }, { "name": "attr.role", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "line": 22, "type": "string", "decorators": [] }, { "name": "attr.tabindex", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "line": 24, "type": "number", "decorators": [] }, { "name": "attr.type", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "line": 23, "type": "string", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\nimport { Tag } from \"./tag.component\";\n\n@Component({\n\tselector: \"cds-tag-operational, ibm-tag-operational\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class TagOperationalComponent extends Tag {\n\t@HostBinding(\"attr.role\") role = \"button\";\n\t@HostBinding(\"attr.type\") buttonType = \"button\";\n\t@HostBinding(\"attr.tabindex\") tabIndex = 0;\n\n\t@Input() disabled = false;\n\n\t/**\n\t * @todo\n\t * Remove `cds--tag--${this.size}` in v7\n\t */\n\t@HostBinding(\"attr.class\") get attrClass() {\n\t\tconst disabledClass = this.disabled ? \"cds--tag--disabled\" : \"\";\n\t\tconst sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;\n\t\tconst skeletonClass = this.skeleton ? \"cds--skeleton\" : \"\";\n\n\t\treturn `cds--tag cds--tag--operational cds--tag--${this.type} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [ "Tag" ], "accessors": { "attrClass": { "name": "attrClass", "getSignature": { "name": "attrClass", "type": "", "returnType": "", "line": 32, "rawdescription": "\n\nRemove `cds--tag--${this.size}` in v7\n", "description": "

    Remove cds--tag--${this.size} in v7

    \n", "jsdoctags": [ { "pos": 690, "end": 740, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 691, "end": 695, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "

    Remove cds--tag--${this.size} in v7

    \n" } ] } } } }, { "name": "TagSelectableComponent", "id": "component-TagSelectableComponent-a65ac3aa63090d3652d72b074395f65256cdd474553539598bb9b655a9656f2fb566bb43b9bffdcf608acf7c5ab167a062977311511e9ecb06f404b8051acf7e", "file": "src/tag/tag-selectable.component.ts", "changeDetection": "ChangeDetectionStrategy.OnPush", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-tag-selectable, ibm-tag-selectable", "styleUrls": [], "styles": [], "template": "\n\t\n\t\n\t\t\n\t\n\n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "class", "defaultValue": "\"\"", "deprecated": false, "deprecationMessage": "", "line": 34, "type": "string", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 33, "type": "boolean", "decorators": [] }, { "name": "selected", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 35, "type": "boolean", "decorators": [] }, { "name": "size", "defaultValue": "\"md\"", "deprecated": false, "deprecationMessage": "", "line": 31, "type": "\"sm\" | \"md\" | \"lg\"", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "line": 32, "type": "boolean", "decorators": [] } ], "outputsClass": [ { "name": "selectedChange", "defaultValue": "new EventEmitter()", "deprecated": false, "deprecationMessage": "", "line": 37, "type": "EventEmitter" } ], "propertiesClass": [ { "name": "buttonType", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 25, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.type'" } ], "modifierKind": [ 170 ] }, { "name": "role", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "type": "string", "optional": false, "description": "", "line": 24, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.role'" } ], "modifierKind": [ 170 ] }, { "name": "tabIndex", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "", "line": 26, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'attr.tabindex'" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "onClick", "args": [], "optional": false, "returnType": "void", "typeParameters": [], "line": 40, "deprecated": false, "deprecationMessage": "", "decorators": [ { "name": "HostListener", "stringifiedArguments": "'click'" } ], "modifierKind": [ 170 ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "attr.aria-pressed", "deprecated": false, "deprecationMessage": "", "line": 27, "type": "boolean", "decorators": [] }, { "name": "attr.class", "deprecated": false, "deprecationMessage": "", "jsdoctags": [ { "pos": 1054, "end": 1104, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 1055, "end": 1059, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "

    Remove cds--tag--${this.size} in v7

    \n" } ], "line": 49, "type": "string", "decorators": [] }, { "name": "attr.role", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "line": 24, "type": "string", "decorators": [] }, { "name": "attr.tabindex", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "line": 26, "type": "number", "decorators": [] }, { "name": "attr.type", "defaultValue": "\"button\"", "deprecated": false, "deprecationMessage": "", "line": 25, "type": "string", "decorators": [] } ], "hostListeners": [ { "name": "click", "args": [], "argsDecorator": [], "deprecated": false, "deprecationMessage": "", "line": 40 } ], "standalone": false, "imports": [], "description": "", "rawdescription": "\n", "type": "component", "sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tHostListener,\n\tInput,\n\tOutput\n} from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-tag-selectable, ibm-tag-selectable\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class TagSelectableComponent {\n\t@HostBinding(\"attr.role\") role = \"button\";\n\t@HostBinding(\"attr.type\") buttonType = \"button\";\n\t@HostBinding(\"attr.tabindex\") tabIndex = 0;\n\t@HostBinding(\"attr.aria-pressed\") get ariaPressed() {\n\t\treturn this.selected;\n\t}\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t@Input() skeleton = false;\n\t@Input() disabled = false;\n\t@Input() class = \"\";\n\t@Input() selected = false;\n\n\t@Output() selectedChange = new EventEmitter();\n\n\t@HostListener(\"click\")\n\tonClick() {\n\t\tthis.selected = !this.selected;\n\t\tthis.selectedChange.emit(this.selected);\n\t}\n\n\t/**\n\t * @todo\n\t * Remove `cds--tag--${this.size}` in v7\n\t */\n\t@HostBinding(\"attr.class\") get attrClass() {\n\t\tconst disabledClass = this.disabled ? \"cds--tag--disabled\" : \"\";\n\t\tconst sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;\n\t\tconst skeletonClass = this.skeleton ? \"cds--skeleton\" : \"\";\n\t\tconst selectedClass = this.selected ? \"cds--tag--selectable-selected\" : \"\";\n\n\t\treturn `cds--tag cds--tag--selectable ${selectedClass} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;\n\t}\n}\n", "assetsDirs": [], "styleUrlsData": "", "stylesData": "", "extends": [], "accessors": { "ariaPressed": { "name": "ariaPressed", "getSignature": { "name": "ariaPressed", "type": "", "returnType": "", "line": 27 } }, "attrClass": { "name": "attrClass", "getSignature": { "name": "attrClass", "type": "", "returnType": "", "line": 49, "rawdescription": "\n\nRemove `cds--tag--${this.size}` in v7\n", "description": "

    Remove cds--tag--${this.size} in v7

    \n", "jsdoctags": [ { "pos": 1054, "end": 1104, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 334, "tagName": { "pos": 1055, "end": 1059, "flags": 16842752, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "todo" }, "comment": "

    Remove cds--tag--${this.size} in v7

    \n" } ] } } } }, { "name": "TextareaLabelComponent", "id": "component-TextareaLabelComponent-8433030a7fde2d29804317a250bbca59f7ba089e9b89712804e08222e3e68b24cf245c37d8eeefda4a577988d2c68c2295392b189cea305f60a7f73c5b817787", "file": "src/input/textarea-label.component.ts", "encapsulation": [], "entryComponents": [], "inputs": [], "outputs": [], "providers": [], "selector": "cds-textarea-label, ibm-textarea-label", "styleUrls": [], "styles": [], "template": "\n\t\n\t
    \n    \n\n\t
    \n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t
    \n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t\t\t{{invalidText}}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t\t\t{{warnText}}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t    \n\t\n\t\n\t\t\n\t\t\t{{helperText}}\n\t\t\t\n\t\t\n\t\t
    \n\t\t\t{{invalidText}}\n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\t{{warnText}}\n\t\t\t\n\t\t
    \n\t    \n    \n\t", "templateUrl": [], "viewProviders": [], "hostDirectives": [], "inputsClass": [ { "name": "ariaLabel", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet the arialabel for label\n", "description": "

    Set the arialabel for label

    \n", "line": 168, "type": "string", "decorators": [] }, { "name": "disabled", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a disabled label.\n", "description": "

    Set to true for a disabled label.

    \n", "line": 133, "type": "boolean", "decorators": [] }, { "name": "fluid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nExperimental: enable fluid state\n", "description": "

    Experimental: enable fluid state

    \n", "line": 173, "type": "boolean", "decorators": [] }, { "name": "helperText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nOptional helper text that appears under the label.\n", "description": "

    Optional helper text that appears under the label.

    \n", "line": 148, "type": "string | TemplateRef", "decorators": [] }, { "name": "invalid", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for an invalid label component.\n", "description": "

    Set to true for an invalid label component.

    \n", "line": 156, "type": "boolean", "decorators": [] }, { "name": "invalidText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the invalid text.\n", "description": "

    Sets the invalid text.

    \n", "line": 152, "type": "string | TemplateRef", "decorators": [] }, { "name": "labelInputID", "defaultValue": "\"ibm-textarea-\" + TextareaLabelComponent.labelCounter", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nThe id of the input item associated with the `Label`. This value is also used to associate the `Label` with\nits input counterpart through the 'for' attribute.\n", "description": "

    The id of the input item associated with the Label. This value is also used to associate the Label with\nits input counterpart through the 'for' attribute.

    \n", "line": 128, "type": "string", "decorators": [] }, { "name": "labelTemplate", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nHelper input property for ease of migration\nSince we cannot pass ng-content down easily from label component, we will accept the templates\n", "description": "

    Helper input property for ease of migration\nSince we cannot pass ng-content down easily from label component, we will accept the templates

    \n", "line": 143, "type": "TemplateRef", "decorators": [] }, { "name": "skeleton", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` for a loading label.\n", "description": "

    Set to true for a loading label.

    \n", "line": 137, "type": "boolean", "decorators": [] }, { "name": "textAreaTemplate", "deprecated": false, "deprecationMessage": "", "line": 144, "type": "TemplateRef", "decorators": [] }, { "name": "warn", "defaultValue": "false", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n", "description": "

    Set to true to show a warning (contents set by warningText)

    \n", "line": 160, "type": "boolean", "decorators": [] }, { "name": "warnText", "deprecated": false, "deprecationMessage": "", "rawdescription": "\n\nSets the warning text\n", "description": "

    Sets the warning text

    \n", "line": 164, "type": "string | TemplateRef", "decorators": [] } ], "outputsClass": [], "propertiesClass": [ { "name": "labelClass", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "type": "", "optional": false, "description": "", "line": 181, "decorators": [ { "name": "HostBinding", "stringifiedArguments": "'class.cds--form-item'" } ], "modifierKind": [ 170 ] }, { "name": "labelCounter", "defaultValue": "0", "deprecated": false, "deprecationMessage": "", "type": "number", "optional": false, "description": "

    Used to build the id of the input item associated with the Label.

    \n", "line": 123, "rawdescription": "\n\nUsed to build the id of the input item associated with the `Label`.\n", "modifierKind": [ 126 ] }, { "name": "textArea", "deprecated": false, "deprecationMessage": "", "type": "TextArea", "optional": false, "description": "", "line": 179, "decorators": [ { "name": "ContentChild", "stringifiedArguments": "TextArea, {static: false}" } ], "modifierKind": [ 170 ] }, { "name": "wrapper", "deprecated": false, "deprecationMessage": "", "type": "ElementRef", "optional": false, "description": "", "line": 176, "decorators": [ { "name": "ViewChild", "stringifiedArguments": "'wrapper', {static: false}" } ], "modifierKind": [ 170 ] } ], "methodsClass": [ { "name": "isTemplate", "args": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "" } ], "optional": false, "returnType": "boolean", "typeParameters": [], "line": 228, "deprecated": false, "deprecationMessage": "", "modifierKind": [ 125 ], "jsdoctags": [ { "name": "value", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "deprecated": false, "deprecationMessage": "", "hostBindings": [ { "name": "class.cds--form-item", "defaultValue": "true", "deprecated": false, "deprecationMessage": "", "line": 181, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-area__wrapper--readonly", "deprecated": false, "deprecationMessage": "", "line": 183, "type": "any", "decorators": [] }, { "name": "class.cds--text-area--fluid", "deprecated": false, "deprecationMessage": "", "line": 187, "type": "boolean", "decorators": [] }, { "name": "class.cds--text-area--fluid__skeleton", "deprecated": false, "deprecationMessage": "", "line": 191, "type": "boolean", "decorators": [] } ], "hostListeners": [], "standalone": false, "imports": [], "description": "

    Get started with importing the module:

    \nExample :
    import { InputModule } from 'carbon-components-angular';
    Example :
    <cds-textarea-label>\n    Label\n    <textarea cdsTextArea class="textarea-field">\n</cds-textarea-label>

    See demo

    \n", "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InputModule } from 'carbon-components-angular';\n```\n\n```html\n\n\tLabel\n\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/layer/layer.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    Layer 0
    \n\t\t
    \n\t\t\t
    Layer 1
    \n\t\t\t
    \n\t\t\t\t
    Layer 2
    \n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [\n\t\t`.example-layer {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-layer);\n\t\t\tcolor: theme.$text-primary;\n\t\t}`\n\t]\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/layout/stack.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t
    Item 1
    \n\t\t\t
    Item 2
    \n\t\t\t
    Item 3
    \n\t\t
    \n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/link/link.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\tlink\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/list/list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t

    Ordered List

    \n\t\t
      \n\t\t\t
    1. One
      2. \n\t\t\t
    2. Two
      3. \n\t\t\t
    3. Three
      4. \n\t\t
    \n\t\t

    Unordered List

    \n\t\t
      \n\t\t\t
    • One
      • \n\t\t\t
    • Two
      • \n\t\t\t
    • Three
      • \n\t\t
    \n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/loading/loading.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/menu-button/menu-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/number-input/number.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/pagination/pagination-nav.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/pagination/pagination.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/popover/popover.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t

    Available storage

    \n\t\t\t\t\t

    This server has 150GB of block storage remaining

    \n\t\t\t\t
    \n\t\t\t    \n\t\t
    \n\t`,\n\tstyles: [`\n\t\t.popover-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t\t.popover-title {\n\t\t\tfont-size: var(--cds-heading-compact-01-font-size);\n\t\t\tfont-weight: var(--cds-heading-compact-01-font-weight);\n\t\t\tline-height: var(--cds-heading-compact-01-line-height);\n\t\t\tmargin-bottom: 0.125rem;\n\t\t}\n\t\t.popover-content {\n\t\t\tfont-size: var(--cds-body-compact-01-font-size);\n\t\t\tfont-weight: var(--cds-body-compact-01-font-weight);\n\t\t\tline-height: var(--cds-body-compact-01-line-height);\n\t\t\tmargin-bottom: 0.125rem;\n\t\t}\n\t`]\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/progress-bar/progress-bar.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/progress-indicator/progress-indicator.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/radio/radio.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tZero\n\t\t\t\n\t\t\tOne\n\t\t\tTwo\n\t\t\tThree\n\t\t\tFour\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/search/search.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/skeleton/skeleton.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\n\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/slider/slider.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t{{minLabel}}\n\t\t\t{{maxLabel}}\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/structured-list/structured-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tColumn 1\n\t\t\t\tColumn 2\n\t\t\t\tColumn 3\n\t\t\t\n\t\t\t\n\t\t\t\tRow 1\n\t\t\t\tRow One\n\t\t\t\t\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\tRow 2\n\t\t\t\tRow Two\n\t\t\t\t\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    {{title}}

    \n\t\t\t\t

    {{description}}

    \n\t\t\t    \n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t    \n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tTab Content 1\n\t\t\tTab Content 2\n\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\n\t\t\tTab Content 3\n\t\t\n\n\t\t\n\t\t\tTab Content 4\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tag/tag.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t\tRead only\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/theme/theme.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t
    \n\t\t\t\t

    White theme

    \n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t

    G10 theme

    \n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t

    G90 theme

    \n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t

    G100 theme

    \n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [`\n\t\t.theme-section {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/clickable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tClick the tile to open the Carbon Design System\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/expandable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tAbove the fold content here\n\t\t\tBelow the fold content here\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tiles.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tTile content goes here...\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/timepicker/timepicker.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t
    \n\t\t

    Input: {{model}}

    \n\t\t

    Period: {{period}}

    \n\t\t

    Time Zone: {{timeZone}}

    \n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/timepicker-select/timepicker-select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/toggle/toggle.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/definition-tooptip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\tScrolling will update the position of the popover:\n\t\t\t
    \n\t\t\t\t

    Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t\n\t\t\t\t\tURL\n\t\t\t\t\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.

    \n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/tooltip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/toggletip/toggletip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\tToggletip label\n\t\t\n\t\t\t\n\t\t\t
    \n\t\t\t\t

    \n\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\tLink action\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t
    \n\t\t\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/treeview/treeview.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dialog/overflow-menu/overflow-menu.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tAn example option that is really long to show what should be done to handle long text\n\t\t\t\n\t\t\tOption 2\n\t\t\t
  • \n\t\t\t\t\n\t\t\t
    • \n\t\t\tOption 4\n\t\t\tDisabled\n\t\t\tDanger option\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/dialogs/modal-with-table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/filtering/multi-selection.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/filtering/multiple-categories.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/filtering/single-selection.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/forms/multi-step-form.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/loading/large-loading.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/loading/progressive-loading.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "TemplateWithInput", "ctype": "miscellaneous", "subtype": "variable", "file": "src/layer/layer.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    Layer 0
    \n\t\t
    \n\t\t\t
    Layer 1
    \n\t\t\t
    \n\t\t\t\t
    Layer 2
    \n\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t
    Layer 0
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    Layer 1
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t
    Layer 2
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [\n\t\t`.example-layer {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-layer);\n\t\t\tcolor: theme.$text-primary;\n\t\t}`\n\t]\n})" }, { "name": "Toast", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ToastTemplate.bind({})" }, { "name": "ToastTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t`\n})" }, { "name": "Together", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "TogetherTemplate.bind({})" }, { "name": "TogetherTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tCatalog\n\t\t\t\t\tDocs\n\t\t\t\t\tSupport\n\t\t\t\t\t\n\t\t\t\t\t\tLink 1\n\t\t\t\t\t\tLink 2\n\t\t\t\t\t\tLink 3\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tSwitcher item one\n\t\t\t\t\tSwitcher item two\n\t\t\t\t\tSwitcher item three\n\t\t\t\t\tSwitcher item four\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "ToolbarTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    {{title}}

    \n\t\t\t\t

    {{description}}

    \n\t\t\t    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tOption 1\n\t\t\t\t\t\tOption 2\n\t\t\t\t\t\tDisabled\n\t\t\t\t\t\tDanger option\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t    \n\t`\n})" }, { "name": "Transactional", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "TransactionTemplate.bind({})" }, { "name": "TransactionTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "treetools", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdowntools.ts", "deprecated": false, "deprecationMessage": "", "type": "object", "defaultValue": "{\n\t/** finds an item in a set of items and returns the item and path to the item as an array */\n\tfind: function(items, itemToFind, path = []) {\n\t\tlet found;\n\t\tfor (let i of items) {\n\t\t\tif (i === itemToFind) {\n\t\t\t\tpath.push(i);\n\t\t\t\tfound = i;\n\t\t\t}\n\t\t\tif (i.items && !found) {\n\t\t\t\tpath.push(i);\n\t\t\t\tfound = this.find(i.items, itemToFind, path).found;\n\t\t\t\tif (!found) { path = []; }\n\t\t\t}\n\t\t}\n\t\treturn {found, path};\n\t}\n}", "rawdescription": "bundle of functions to aid in manipulating tree structures", "description": "

    bundle of functions to aid in manipulating tree structures

    \n" }, { "name": "UploaderWithCustomFile", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "CustomFile.bind({})" }, { "name": "usageExamples", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "usageExamplesTemplate.bind({})" }, { "name": "usageExamplesTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tView details\n\t\t\t\t\tEdit\n\t\t\t\t\tRemove\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tDescription text\n\t\t\t\t\n\t\t\t    \n\t\t\t\n\t\t\t\tList item\n\t\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tDescription text\n\t\t\t\t\n\t\t\t    \n\t\t\t\n\t\t\t\tList item\n\t\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tDescription text\n\t\t\t\t\n\t\t\t    \n\t\t    \n\n\t\t\n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\tList item\n\t\t\t\t\tList item details\n\t\t\t\t\tList item details\n\t\t\t\t
    \n\t\t\t    \n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\tList item\n\t\t\t\t\tList item details\n\t\t\t\t\tList item details\n\t\t\t\t
    \n\t\t\t    \n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\tList item\n\t\t\t\t\tList item details\n\t\t\t\t\tList item details\n\t\t\t\t
    \n\t\t\t    \n\t\t    \n\t`\n})" }, { "name": "ValueProperty", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ValuePropertyTemplate.bind({})" }, { "name": "ValuePropertyTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Welcome", "ctype": "miscellaneous", "subtype": "variable", "file": "src/index.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "With", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "WithTemplate.bind({})" }, { "name": "withActions", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "withActionsTemplate.bind({})" }, { "name": "withActionsAndContextData", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => {\n\targs = {\n\t\t...args,\n\t\titems: [\n\t\t\t{\n\t\t\t\tid: 1,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t}\n\t\t],\n\t\tonActionClick: (item: any) => { alert(`${item.label} ${item.id} action click triggered`); }\n\t};\n\n\treturn {\n\t\tprops: args,\n\t\ttemplate: `\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{ item.label }} {{ item.id }}\n\t\t\t\t\n\t\t\t\n\t\t`\n\t};\n}" }, { "name": "withActionsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\n\t`\n})" }, { "name": "WithAutoAlign", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/icon-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "AutoAlignTemplate.bind({})" }, { "name": "WithAutoAlign", "ctype": "miscellaneous", "subtype": "variable", "file": "src/popover/popover.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "AutoAlignTemplate.bind({})" }, { "name": "WithAutoAlign", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/definition-tooptip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "AutoAlignTemplate.bind({})" }, { "name": "WithAutoAlign", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/tooltip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "AutoAlignTemplate.bind({})" }, { "name": "WithAutoAlign", "ctype": "miscellaneous", "subtype": "variable", "file": "src/toggletip/toggletip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "AutoAlignTemplate.bind({})" }, { "name": "WithDataTable", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/dialogs/modal-with-table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "WithDisabledRows", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "DisabledRowsTemplate.bind({})" }, { "name": "WithDynamicContent", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "DyanmicContentTemplate.bind({})" }, { "name": "WithExpansion", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ExpansionTemplate.bind({})" }, { "name": "WithIcon", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "WithIconTemplate.bind({})" }, { "name": "WithIcon", "ctype": "miscellaneous", "subtype": "variable", "file": "src/link/link.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "IconTemplate.bind({})" }, { "name": "withIcons", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "withIconsTemplate.bind({})" }, { "name": "WithIcons", "ctype": "miscellaneous", "subtype": "variable", "file": "src/treeview/treeview.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "IconsTemplate.bind({})" }, { "name": "withIconsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\n\t`\n})" }, { "name": "WithIconTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tWith icon\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "withInteractiveItems", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "withInteractiveItemsTemplate.bind({})" }, { "name": "withInteractiveItemsAndActions", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "withInteractiveItemsAndActionsTemplate.bind({})" }, { "name": "withInteractiveItemsAndActionsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "withInteractiveItemsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "withLayer", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "withLayerTemplate.bind({})" }, { "name": "WithLayer", "ctype": "miscellaneous", "subtype": "variable", "file": "src/theme/theme.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "LayeredTemplate.bind({})" }, { "name": "WithLayers", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/clickable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "LayerTemplate.bind({})" }, { "name": "WithLayers", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/expandable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "LayerTemplate.bind({})" }, { "name": "WithLayers", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tile-group.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "LayerTemplate.bind({})" }, { "name": "WithLayers", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tiles.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "LayerTemplate.bind({})" }, { "name": "withLayerTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\tList item\n\t\t\t\tList item\n\t\t\t\tList item\n\t\t\t\tList item\n\t\t\t\n\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\tList item\n\t\t\t\t\t\tList item\n\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t\t\tList item\n\t\t\t\t\t\t\tList item\n\t\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t`\n})" }, { "name": "WithLink", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dialog/overflow-menu/overflow-menu.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "LinkTemplate.bind({})" }, { "name": "withListTitleDecorators", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "withListTitleDecoratorsTemplate.bind({})" }, { "name": "withListTitleDecoratorsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t \tList title\n\t\t \t4\n\t\t
    \n\t\t    \n\t\t\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\n\t`\n})" }, { "name": "WithModel", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ModelTemplate.bind({})" }, { "name": "WithNgModel", "ctype": "miscellaneous", "subtype": "variable", "file": "src/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ModelTemplate.bind({})" }, { "name": "WithoutActionTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    {{title}}

    \n\t\t\t\t

    {{description}}

    \n\t\t\t    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t    \n\t`\n})" }, { "name": "WithoutData", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "NoDataTemplate.bind({})" }, { "name": "WithOverflowMenu", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "OverflowMenuTemplate.bind({})" }, { "name": "WithPagination", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "PaginationTemplate.bind({})" }, { "name": "WithReactiveForms", "ctype": "miscellaneous", "subtype": "variable", "file": "src/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ReactiveTemplate.bind({})" }, { "name": "WithSkeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/accordion/accordion.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "WithSkeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "withTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))" }, { "name": "WithTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdown.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "NgTemplate.bind({})" }, { "name": "WithTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t{{item ? item.name : \"wait for it\"}}\n\t\t\n\t\t\n\t\t\t
    \n\t\t\t\tSomething custom\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t    \n\t\t\n\t\t\t\n\t\t\t\tTab Content {{i + 1}}\n\t\t\t\n\t\t\tTab Content Custom\n\t\t\n\t`\n})" }, { "name": "WithTitle", "ctype": "miscellaneous", "subtype": "variable", "file": "src/accordion/accordion.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "WithTitleTemplate.bind({})" }, { "name": "WithTitleTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/accordion/accordion.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\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\n\t\t\t\t\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\n\t\t\t\n\t\t
    \n\t\t\n\t\t\t

    Section 1 title

    \n\t\t    \n\t\t\n\t\t\t

    Section {{ index }} title

    \n\t\t    \n\t`\n})" }, { "name": "WithToolbar", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ToolbarTemplate.bind({})" }, { "name": "WithToolbarWithoutToolbarAction", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "WithoutActionTemplate.bind({})" } ], "functions": [ { "name": "ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY", "file": "src/utils/utils.module.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "parentService", "type": "AnimationFrameServiceSingleton", "deprecated": false, "deprecationMessage": "" }, { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "parentService", "type": "AnimationFrameServiceSingleton", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "clone", "file": "src/utils/utils.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "obj", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "obj", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "closestAttr", "file": "src/utils/utils.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "s", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "t", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "s", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "t", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "cycleTabs", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "DOCUMENT_SERVICE_PROVIDER_FACTORY", "file": "src/utils/utils.module.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "parentService", "type": "DocumentService", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "parentService", "type": "DocumentService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "EXPERIMENTAL_SERVICE_PROVIDER_FACTORY", "file": "src/experimental/experimental.module.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "parentService", "type": "ExperimentalService", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "parentService", "type": "ExperimentalService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "findNextElem", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "target", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "target", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "findPrevElem", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "target", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "target", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "findSiblingElem", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "target", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "direction", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "target", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "direction", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "focusFirstFocusableElement", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "focusLastFocusableElement", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "focusNextElem", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "elem", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "rootElem", "type": "null", "deprecated": false, "deprecationMessage": "", "defaultValue": "null" } ], "jsdoctags": [ { "name": "elem", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "rootElem", "type": "null", "deprecated": false, "deprecationMessage": "", "defaultValue": "null", "tagName": { "text": "param" } } ] }, { "name": "focusNextTree", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "elem", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "rootElem", "type": "null", "deprecated": false, "deprecationMessage": "", "defaultValue": "null" } ], "jsdoctags": [ { "name": "elem", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "rootElem", "type": "null", "deprecated": false, "deprecationMessage": "", "defaultValue": "null", "tagName": { "text": "param" } } ] }, { "name": "focusPrevElem", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "elem", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "parentRef", "type": "null", "deprecated": false, "deprecationMessage": "", "defaultValue": "null" } ], "jsdoctags": [ { "name": "elem", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "parentRef", "type": "null", "deprecated": false, "deprecationMessage": "", "defaultValue": "null", "tagName": { "text": "param" } } ] }, { "name": "getFocusElementList", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "selector", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "tabbableSelector" } ], "jsdoctags": [ { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "selector", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "tabbableSelector", "tagName": { "text": "param" } } ] }, { "name": "getModelWithDisabledRows", "file": "src/table/table.stories.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [] }, { "name": "getScrollbarWidth", "file": "src/utils/window-tools.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [] }, { "name": "HcModeChecker", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [] }, { "name": "I18N_SERVICE_PROVIDER_FACTORY", "file": "src/i18n/i18n.module.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "parentService", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "parentService", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "ICON_SERVICE_PROVIDER_FACTORY", "file": "src/icon/icon.module.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "parentService", "type": "IconService", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "parentService", "type": "IconService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isElementFocused", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isFocusInFirstItem", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isFocusInLastItem", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isObject", "file": "src/exported-tests/component-tests.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "val", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "val", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isVisible", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "matchesAttr", "file": "src/utils/utils.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "el", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "attr", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "val", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "el", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "attr", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "val", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "PLACEHOLDER_SERVICE_PROVIDER_FACTORY", "file": "src/placeholder/placeholder.module.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "parentService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "parentService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "range", "file": "src/common/utils.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "

    Does what python's range function does, with a slightly different\nsignature because of Typescript limitations.

    \n

    Useful for numbered loops in angular templates, since we can do\na normal for loop.

    \n", "args": [ { "name": "stop", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "start", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0" }, { "name": "step", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "1" } ], "jsdoctags": [ { "name": { "pos": 239, "end": 243, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "stop" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 233, "end": 238, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    Generate numbers up to, but not including this number

    \n" }, { "name": { "pos": 309, "end": 314, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "start" }, "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0", "tagName": { "pos": 302, "end": 307, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    Starting number of the sequence

    \n" }, { "name": { "pos": 361, "end": 365, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "step" }, "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "1", "tagName": { "pos": 354, "end": 359, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    Difference between each number in the sequence

    \n" }, { "tagName": { "pos": 420, "end": 427, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "returns" }, "comment": "

    an array with resulting numbers

    \n" } ] }, { "name": "watchFocusJump", "file": "src/dropdown/dropdowntools.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "

    returns an observable bound to keydown events that\nfilters to a single element where the first letter of\nit's textContent matches the key pressed

    \n", "args": [ { "name": "target", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" }, { "name": "elements", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "Observable", "jsdoctags": [ { "name": { "pos": 279, "end": 285, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "target" }, "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 273, "end": 278, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    element to watch

    \n" }, { "name": { "pos": 313, "end": 321, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "elements" }, "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 307, "end": 312, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    elements to search

    \n" } ] } ], "typealiases": [ { "name": "ButtonSize", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"", "file": "src/button/button.types.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "ButtonType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | DangerButtonType", "file": "src/button/button.types.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "CheckboxValue", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "boolean | \"on\" | \"off\"", "file": "src/checkbox/checkbox.types.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "ComboButtonPlacement", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\"", "file": "src/combo-button/combo-button.component.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "DangerButtonType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"danger--primary\" | \"danger--tertiary\" | \"danger--ghost\"", "file": "src/button/button.types.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "EventHandler", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "function", "file": "src/utils/types.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 184 }, { "name": "HeaderType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "number | \"select\" | \"expand\"", "file": "src/table/table-model.class.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "MenuButtonPlacement", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\"", "file": "src/menu-button/menu-button.component.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "NotificationType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\"", "file": "src/notification/notification-content.interface.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "NotificationVariants", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"inline\" | \"toast\"", "file": "src/notification/notification-content.interface.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "oldPlacement", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\" | \"left-bottom\" | \"left-top\" | \"right-bottom\" | \"right-top\"", "file": "src/popover/popover.directive.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "SortType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"ASCENDING\" | \"DESCENDING\" | \"NONE\"", "file": "src/table/table-header-item.class.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "TableRowSize", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"", "file": "src/table/table.types.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "TagType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"red\" | \"magenta\" | \"purple\" | \"blue\" | \"cyan\" | \"teal\" | \"green\" | \"gray\" | \"cool-gray\" | \"warm-gray\" | \"high-contrast\" | \"outline\"", "file": "src/tag/tag.component.ts", "deprecated": false, "deprecationMessage": "", "description": "

    Supported tag types for carbon v10

    \n", "kind": 192 }, { "name": "ThemeType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"white\" | \"g10\" | \"g90\" | \"g100\"", "file": "src/theme/theme.directive.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "TooltipAlignments", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"", "file": "src/tooltip/tooltip.interface.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "TranslationStrings", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "literal type", "file": "src/i18n/i18n.service.ts", "deprecated": false, "deprecationMessage": "", "description": "

    An object of strings, should follow the same format as src/i18n/en.json

    \n", "kind": 187 } ], "enumerations": [ { "name": "AlertModalType", "childs": [ { "name": "default", "deprecated": false, "deprecationMessage": "", "value": "default" }, { "name": "danger", "deprecated": false, "deprecationMessage": "", "value": "danger" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/modal/alert-modal.interface.ts" }, { "name": "CheckboxState", "childs": [ { "name": "Init", "deprecated": false, "deprecationMessage": "" }, { "name": "Indeterminate", "deprecated": false, "deprecationMessage": "" }, { "name": "Checked", "deprecated": false, "deprecationMessage": "" }, { "name": "Unchecked", "deprecated": false, "deprecationMessage": "" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "

    Defines the set of states for a checkbox component.

    \n", "file": "src/checkbox/checkbox.component.ts" }, { "name": "CloseReasons", "childs": [ { "name": "destroyed", "deprecated": false, "deprecationMessage": "" }, { "name": "programmatic", "deprecated": false, "deprecationMessage": "" }, { "name": "interaction", "deprecated": false, "deprecationMessage": "" }, { "name": "hidden", "deprecated": false, "deprecationMessage": "" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "

    An enum of the various reasons a dialog may close. For use with CloseMeta and shouldClose

    \n

    It's expected that interaction will be a common closure reason.

    \n", "file": "src/dialog/dialog-config.interface.ts" }, { "name": "ContainedListKind", "childs": [ { "name": "OnPage", "deprecated": false, "deprecationMessage": "", "value": "on-page" }, { "name": "Disclosed", "deprecated": false, "deprecationMessage": "", "value": "disclosed" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/contained-list/contained-list.enums.ts" }, { "name": "ContainedListSize", "childs": [ { "name": "Small", "deprecated": false, "deprecationMessage": "", "value": "sm" }, { "name": "Medium", "deprecated": false, "deprecationMessage": "", "value": "md" }, { "name": "Large", "deprecated": false, "deprecationMessage": "", "value": "lg" }, { "name": "ExtraLarge", "deprecated": false, "deprecationMessage": "", "value": "xl" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/contained-list/contained-list.enums.ts" }, { "name": "InlineLoadingState", "childs": [ { "name": "Hidden", "deprecated": false, "deprecationMessage": "", "value": "hidden" }, { "name": "Inactive", "deprecated": false, "deprecationMessage": "", "value": "inactive" }, { "name": "Active", "deprecated": false, "deprecationMessage": "", "value": "active" }, { "name": "Finished", "deprecated": false, "deprecationMessage": "", "value": "finished" }, { "name": "Error", "deprecated": false, "deprecationMessage": "", "value": "error" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/inline-loading/inline-loading.component.ts" }, { "name": "ModalButtonType", "childs": [ { "name": "primary", "deprecated": false, "deprecationMessage": "", "value": "primary" }, { "name": "secondary", "deprecated": false, "deprecationMessage": "", "value": "secondary" }, { "name": "tertiary", "deprecated": false, "deprecationMessage": "", "value": "tertiary" }, { "name": "ghost", "deprecated": false, "deprecationMessage": "", "value": "ghost" }, { "name": "danger", "deprecated": false, "deprecationMessage": "", "value": "danger" }, { "name": "danger_primary", "deprecated": false, "deprecationMessage": "", "value": "danger--primary" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/modal/alert-modal.interface.ts" }, { "name": "SnippetType", "childs": [ { "name": "single", "deprecated": false, "deprecationMessage": "", "value": "single" }, { "name": "multi", "deprecated": false, "deprecationMessage": "", "value": "multi" }, { "name": "inline", "deprecated": false, "deprecationMessage": "", "value": "inline" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/code-snippet/code-snippet.component.ts" }, { "name": "TableDomSpanDirection", "childs": [ { "name": "colSpan", "deprecated": false, "deprecationMessage": "", "value": "colSpan" }, { "name": "rowSpan", "deprecated": false, "deprecationMessage": "", "value": "rowSpan" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/table/table-adapter.class.ts" }, { "name": "Target", "childs": [ { "name": "self", "deprecated": false, "deprecationMessage": "", "value": "_self" }, { "name": "blank", "deprecated": false, "deprecationMessage": "", "value": "_blank" }, { "name": "parent", "deprecated": false, "deprecationMessage": "", "value": "_parent" }, { "name": "top", "deprecated": false, "deprecationMessage": "", "value": "_top" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "

    Available HTML anchor targets

    \n", "file": "src/dialog/overflow-menu/overflow-menu-option.component.ts" }, { "name": "ToggleState", "childs": [ { "name": "Init", "deprecated": false, "deprecationMessage": "" }, { "name": "Checked", "deprecated": false, "deprecationMessage": "" }, { "name": "Unchecked", "deprecated": false, "deprecationMessage": "" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": true, "deprecationMessage": "since v5 - Use boolean\nDefines the set of states for a toggle component.", "description": "", "file": "src/toggle/toggle.component.ts" } ], "groupedVariables": { "src/utils/window-tools.ts": [ { "name": "_scrollbarWidth", "ctype": "miscellaneous", "subtype": "variable", "file": "src/utils/window-tools.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "-1" } ], "src/notification/notification.stories.ts": [ { "name": "Actionable", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ActionableTemplate.bind({})" }, { "name": "ActionableTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "CustomContent", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "CustomTemplate.bind({})" }, { "name": "CustomTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t

    {{data.title}}

    \n\t\t\t

    {{data.myData.subtitle}}

    \n\t\t\t

    {{data.myCaption}}

    \n\t\t    \n\t\t\n\t\t\t

    {{data.title}}

    \n\t\t\t

    {{data.myData.subtitle}}

    \n\t\t    \n\t\t\n\t\t\t

    {{data.title}}

    \n\t\t\t

    {{data.myData.subtitle}}

    \n\t\t    \n\t\t\n\t\t\t\n\t\t\t\tAction\n\t\t\t\n\t\t\n\t`,\n\tencapsulation: ViewEncapsulation.None,\n\tstyles: [`\n\t\tcds-toast {\n\t\t\twidth: 450px;\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\n\t\tcds-notification {\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\n\t\t.secondary-toast-button {\n\t\t\tmargin-right: 10px;\n\t\t}\n\n\t\t.actions {\n\t\t\tmargin-bottom: 25px;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: flex-end;\n\t\t}\n\t`]\n})" }, { "name": "DynamicActionable", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "DynamicActionableTemplate.bind({})" }, { "name": "DynamicActionableTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "DynamicInline", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "DynamicInlineTemplate.bind({})" }, { "name": "DynamicInlineTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "DynamicToast", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "DynamicToastTemplate.bind({})" }, { "name": "DynamicToastTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "InlineNotification", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "InlineTemplate.bind({})" }, { "name": "InlineTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Toast", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ToastTemplate.bind({})" }, { "name": "ToastTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/notification/notification.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t`\n})" } ], "src/icon/icon.stories.ts": [ { "name": "AllIcon", "ctype": "miscellaneous", "subtype": "variable", "file": "src/icon/icon.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "AllIconTemplate.bind({})" }, { "name": "AllIconTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/icon/icon.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/icon/icon.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "NonSVGRootTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/icon/icon.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t
    \n\t`\n})" }, { "name": "RootElement", "ctype": "miscellaneous", "subtype": "variable", "file": "src/icon/icon.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "NonSVGRootTemplate.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/icon/icon.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" } ], "src/ui-shell/ui-shell.stories.ts": [ { "name": "AngularRouting", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "AngularRoutingTemplate.bind({})" }, { "name": "AngularRoutingTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "Header", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "HeaderTemplate.bind({})" }, { "name": "HeaderFluid", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "HeaderFluidTemplate.bind({})" }, { "name": "HeaderFluidTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "HeaderRouterTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\tCatalog\n\t\t\t\t\tDocs\n\t\t\t\t\tSupport\n\t\t\t\t\t\n\t\t\t\t\t\tLink 1\n\t\t\t\t\t\tLink 2\n\t\t\t\t\t\tLink 3\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "HeaderTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tCatalog\n\t\t\t\t\tDocs\n\t\t\t\t\tSupport\n\t\t\t\t\t\n\t\t\t\t\t\tLink 1\n\t\t\t\t\t\tLink 2\n\t\t\t\t\t\tLink 3\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "HeaderWithRouter", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "HeaderRouterTemplate.bind({})" }, { "name": "HeaderWithTemp", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "HeaderWithTemplate.bind({})" }, { "name": "HeaderWithTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tCatalog\n\t\t\t\t\tDocs\n\t\t\t\t\tSupport\n\t\t\t\t\t\n\t\t\t\t\t\tLink 1\n\t\t\t\t\t\tLink 2\n\t\t\t\t\t\tLink 3\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\tIBM\n\t\t\t\t[Platform]\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "ModelTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tSwitcher item one\n\t\t\t\t\tSwitcher item two\n\t\t\t\t\tSwitcher item three\n\t\t\t\t\tSwitcher item four\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t\n\t`\n})" }, { "name": "SideNavigation", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SideNavigationTemplate.bind({})" }, { "name": "SideNavigationRail", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SideNavigationRailTemplate.bind({})" }, { "name": "SideNavigationRailTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "SideNavigationRouter", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SideNavigationRouterTemplate.bind({})" }, { "name": "SideNavigationRouterTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "SideNavigationTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "SideNavigationUseRouter", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SideNavigationUseRouterTemplate.bind({})" }, { "name": "SideNavigationUseRouterTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink with query params\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "SidePanel", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SidePanelTemplate.bind({})" }, { "name": "SidePanelTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\tSwitcher item one\n\t\t\t\t\tSwitcher item two\n\t\t\t\t\tSwitcher item three\n\t\t\t\t\tSwitcher item four\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t
    \n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "Together", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "TogetherTemplate.bind({})" }, { "name": "TogetherTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tCatalog\n\t\t\t\t\tDocs\n\t\t\t\t\tSupport\n\t\t\t\t\t\n\t\t\t\t\t\tLink 1\n\t\t\t\t\t\tLink 2\n\t\t\t\t\t\tLink 3\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\tLink\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tSwitcher item one\n\t\t\t\t\tSwitcher item two\n\t\t\t\t\tSwitcher item three\n\t\t\t\t\tSwitcher item four\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "WithModel", "ctype": "miscellaneous", "subtype": "variable", "file": "src/ui-shell/ui-shell.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ModelTemplate.bind({})" } ], "src/utils/utils.module.ts": [ { "name": "ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER", "ctype": "miscellaneous", "subtype": "variable", "file": "src/utils/utils.module.ts", "deprecated": false, "deprecationMessage": "", "type": "object", "defaultValue": "{\n\tprovide: AnimationFrameServiceSingleton,\n\tdeps: [[new Optional(), new SkipSelf(), AnimationFrameServiceSingleton], NgZone],\n\tuseFactory: ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY\n}" }, { "name": "DOCUMENT_SERVICE_PROVIDER", "ctype": "miscellaneous", "subtype": "variable", "file": "src/utils/utils.module.ts", "deprecated": false, "deprecationMessage": "", "type": "object", "defaultValue": "{\n\tprovide: DocumentService,\n\tdeps: [[new Optional(), new SkipSelf(), DocumentService]],\n\tuseFactory: DOCUMENT_SERVICE_PROVIDER_FACTORY\n}" } ], "src/button/icon-button.stories.ts": [ { "name": "AutoAlignTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/icon-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\tScrolling will update the position of the tooltip:\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t`\n})" }, { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/icon-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/icon-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "WithAutoAlign", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/icon-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "AutoAlignTemplate.bind({})" } ], "src/popover/popover.stories.ts": [ { "name": "AutoAlignTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/popover/popover.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\tScrolling will update the position of the popover:\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t

    Available storage

    \n\t\t\t\t\t\t\t

    This server has 150GB of block storage remaining

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t    \n\t\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [`\n\t\t.popover-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t\t.popover-title {\n\t\t\tfont-size: var(--cds-heading-compact-01-font-size);\n\t\t\tfont-weight: var(--cds-heading-compact-01-font-weight);\n\t\t\tline-height: var(--cds-heading-compact-01-line-height);\n\t\t\tmargin-bottom: 0.125rem;\n\t\t}\n\t\t.popover-content {\n\t\t\tfont-size: var(--cds-body-compact-01-font-size);\n\t\t\tfont-weight: var(--cds-body-compact-01-font-weight);\n\t\t\tline-height: var(--cds-body-compact-01-line-height);\n\t\t\tmargin-bottom: 0.125rem;\n\t\t}\n\t`]\n})" }, { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/popover/popover.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/popover/popover.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t

    Available storage

    \n\t\t\t\t\t

    This server has 150GB of block storage remaining

    \n\t\t\t\t
    \n\t\t\t    \n\t\t
    \n\t`,\n\tstyles: [`\n\t\t.popover-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t\t.popover-title {\n\t\t\tfont-size: var(--cds-heading-compact-01-font-size);\n\t\t\tfont-weight: var(--cds-heading-compact-01-font-weight);\n\t\t\tline-height: var(--cds-heading-compact-01-line-height);\n\t\t\tmargin-bottom: 0.125rem;\n\t\t}\n\t\t.popover-content {\n\t\t\tfont-size: var(--cds-body-compact-01-font-size);\n\t\t\tfont-weight: var(--cds-body-compact-01-font-weight);\n\t\t\tline-height: var(--cds-body-compact-01-line-height);\n\t\t\tmargin-bottom: 0.125rem;\n\t\t}\n\t`]\n})" }, { "name": "WithAutoAlign", "ctype": "miscellaneous", "subtype": "variable", "file": "src/popover/popover.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "AutoAlignTemplate.bind({})" } ], "src/tooltip/definition-tooptip.stories.ts": [ { "name": "AutoAlignTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/definition-tooptip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\tScrolling will update the position of the popover:\n\t\t\t
    \n\t\t\t\t

    Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t\n\t\t\t\t\tURL\n\t\t\t\t\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.

    \n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})" }, { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/definition-tooptip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/definition-tooptip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\tScrolling will update the position of the popover:\n\t\t\t
    \n\t\t\t\t

    Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t\n\t\t\t\t\tURL\n\t\t\t\t\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.

    \n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})" }, { "name": "WithAutoAlign", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/definition-tooptip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "AutoAlignTemplate.bind({})" } ], "src/tooltip/tooltip.stories.ts": [ { "name": "AutoAlignTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/tooltip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\tScrolling will update the position of the popover:\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})" }, { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/tooltip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Ellipses", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/tooltip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "EllipsesTemplate.bind({})" }, { "name": "EllipsesTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/tooltip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tTooltip for ellipsis because I can and I am really really long\n\t\t\t\n\t\t\n\t`,\n\tstyles: [`\n\t\t.overflowText {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twidth: 100px;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t`]\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/tooltip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})" }, { "name": "WithAutoAlign", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/tooltip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "AutoAlignTemplate.bind({})" } ], "src/toggletip/toggletip.stories.ts": [ { "name": "AutoAlignTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/toggletip/toggletip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\tScrolling will update the position of the popover:\n\t\t\t
    \n\t\t\tToggletip label\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\t\t

    \n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t\t\t

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\tLink action\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})" }, { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/toggletip/toggletip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/toggletip/toggletip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\tToggletip label\n\t\t\n\t\t\t\n\t\t\t
    \n\t\t\t\t

    \n\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\tLink action\n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t
    \n\t\t\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})" }, { "name": "WithAutoAlign", "ctype": "miscellaneous", "subtype": "variable", "file": "src/toggletip/toggletip.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "AutoAlignTemplate.bind({})" } ], "src/contained-list/contained-list.stories.ts": [ { "name": "basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "basicTemplate.bind({})" }, { "name": "basicTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\n\t\t\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\n\t`\n})" }, { "name": "disclosed", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "disclosedTemplate.bind({})" }, { "name": "disclosedTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\n\t\t\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\n\t`\n})" }, { "name": "usageExamples", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "usageExamplesTemplate.bind({})" }, { "name": "usageExamplesTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tView details\n\t\t\t\t\tEdit\n\t\t\t\t\tRemove\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tDescription text\n\t\t\t\t\n\t\t\t    \n\t\t\t\n\t\t\t\tList item\n\t\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tDescription text\n\t\t\t\t\n\t\t\t    \n\t\t\t\n\t\t\t\tList item\n\t\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tDescription text\n\t\t\t\t\n\t\t\t    \n\t\t    \n\n\t\t\n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\tList item\n\t\t\t\t\tList item details\n\t\t\t\t\tList item details\n\t\t\t\t
    \n\t\t\t    \n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\tList item\n\t\t\t\t\tList item details\n\t\t\t\t\tList item details\n\t\t\t\t
    \n\t\t\t    \n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\tList item\n\t\t\t\t\tList item details\n\t\t\t\t\tList item details\n\t\t\t\t
    \n\t\t\t    \n\t\t    \n\t`\n})" }, { "name": "withActions", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "withActionsTemplate.bind({})" }, { "name": "withActionsAndContextData", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => {\n\targs = {\n\t\t...args,\n\t\titems: [\n\t\t\t{\n\t\t\t\tid: 1,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: \"List Item\"\n\t\t\t}\n\t\t],\n\t\tonActionClick: (item: any) => { alert(`${item.label} ${item.id} action click triggered`); }\n\t};\n\n\treturn {\n\t\tprops: args,\n\t\ttemplate: `\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{ item.label }} {{ item.id }}\n\t\t\t\t\n\t\t\t\n\t\t`\n\t};\n}" }, { "name": "withActionsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\n\t`\n})" }, { "name": "withIcons", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "withIconsTemplate.bind({})" }, { "name": "withIconsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\n\t`\n})" }, { "name": "withInteractiveItems", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "withInteractiveItemsTemplate.bind({})" }, { "name": "withInteractiveItemsAndActions", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "withInteractiveItemsAndActionsTemplate.bind({})" }, { "name": "withInteractiveItemsAndActionsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "withInteractiveItemsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\t\n\t\t\t\tList item\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "withLayer", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "withLayerTemplate.bind({})" }, { "name": "withLayerTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\tList item\n\t\t\t\tList item\n\t\t\t\tList item\n\t\t\t\tList item\n\t\t\t\n\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\tList item\n\t\t\t\t\t\tList item\n\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t\t\tList item\n\t\t\t\t\t\t\tList item\n\t\t\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t`\n})" }, { "name": "withListTitleDecorators", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "withListTitleDecoratorsTemplate.bind({})" }, { "name": "withListTitleDecoratorsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/contained-list/contained-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => ({\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t \tList title\n\t\t \t4\n\t\t
    \n\t\t    \n\t\t\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\tList item\n\t\t\n\t`\n})" } ], "src/accordion/accordion.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/accordion/accordion.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/accordion/accordion.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "WithSkeleton.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/accordion/accordion.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\n\t\t\t\n\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\n\t\t\t\n\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "WithSkeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/accordion/accordion.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "WithTitle", "ctype": "miscellaneous", "subtype": "variable", "file": "src/accordion/accordion.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "WithTitleTemplate.bind({})" }, { "name": "WithTitleTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/accordion/accordion.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t\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\n\t\t\t\t\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\n\t\t\t\n\t\t
    \n\t\t\n\t\t\t

    Section 1 title

    \n\t\t    \n\t\t\n\t\t\t

    Section {{ index }} title

    \n\t\t    \n\t`\n})" } ], "src/breadcrumb/breadcrumb.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "breadcrumbItems", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "" }, { "name": "createBreadcrumbItems", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(count: number, content = \"Breadcrumb\"): Array => {\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": "CurrentPage", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "CurrentPageTemplate.bind({})" }, { "name": "CurrentPageTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tBreadcrumb 1\n\t\t\t\n\t\t\t\n\t\t\t\tBreadcrumb 2\n\t\t\t\n\t\t\t\n\t\t\t\tBreadcrumb 3\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Model", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ModelTemplate.bind({})" }, { "name": "ModelTemplate", "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\n\t\t\n\t`\n})" }, { "name": "ModelWithTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ModelWTemplate.bind({})" }, { "name": "ModelWTemplate", "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\twithTemplate\n\t},\n\ttemplate: `\n\t\t\n\t\t\t{{ templateContent }}{{ item.content }}\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "WithSkeleton.bind({})" }, { "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\n\t\t\t\n\t\t\t\tBreadcrumb 1\n\t\t\t\n\t\t\t\n\t\t\t\tBreadcrumb 2\n\t\t\t\n\t\t\t\n\t\t\t\tBreadcrumb 3\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "WithSkeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "withTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))" } ], "src/button/button-set.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/button-set.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/button-set.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" } ], "src/button/button.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tButton\n\t\t\n\t`\n})" }, { "name": "WithIcon", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "WithIconTemplate.bind({})" }, { "name": "WithIconTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/button/button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tWith icon\n\t\t\t\n\t\t\n\t`\n})" } ], "src/checkbox/checkbox.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "ModelTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tngModel checkbox\n\t\t\n\n\t\t
    \n\t\t\t\n\t\t\tChecked: {{ model }}\n\t\t
    \n\t`\n})" }, { "name": "ReactiveTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\n\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t{{label}}\n\t\t\t\n\t\t\t\tIndeterminate checkbox\n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "WithNgModel", "ctype": "miscellaneous", "subtype": "variable", "file": "src/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ModelTemplate.bind({})" }, { "name": "WithReactiveForms", "ctype": "miscellaneous", "subtype": "variable", "file": "src/checkbox/checkbox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ReactiveTemplate.bind({})" } ], "src/code-snippet/code-snippet.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/code-snippet/code-snippet.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Inline", "ctype": "miscellaneous", "subtype": "variable", "file": "src/code-snippet/code-snippet.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "InlineTemplate.bind({})" }, { "name": "InlineTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/code-snippet/code-snippet.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\tHere is some {{snippet}} for you.\n\t`\n})" }, { "name": "Multi", "ctype": "miscellaneous", "subtype": "variable", "file": "src/code-snippet/code-snippet.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "MultiTemplate.bind({})" }, { "name": "MultiTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/code-snippet/code-snippet.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t{{snippet}}\n\t\t\n\t`\n})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/code-snippet/code-snippet.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SkeletonTemplate.bind({})" }, { "name": "SkeletonTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/code-snippet/code-snippet.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t
    \n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/code-snippet/code-snippet.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t{{snippet}}\n\t`\n})" } ], "src/combo-button/combo-button.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combo-button/combo-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combo-button/combo-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" } ], "src/combobox/combobox.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "BasicMax", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "BasicMaxTemplate.bind({})" }, { "name": "BasicMaxTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Dynamic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "DynamicTemplate.bind({})" }, { "name": "DynamicTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Fluid", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "MockQuerySearch", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "MockQueryTemplate.bind({})" }, { "name": "MockQueryTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Multiselect", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "MultiTemplate.bind({})" }, { "name": "MultiTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "ReactiveForms", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ReactiveTemplate.bind({})" }, { "name": "ReactiveTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/combobox/combobox.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t\t{{model | json}}\n\t`\n})" } ], "src/content-switcher/content-switcher.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/content-switcher/content-switcher.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/content-switcher/content-switcher.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" } ], "src/context-menu/context-menu.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/context-menu/context-menu.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/context-menu/context-menu.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})" } ], "src/datepicker/datepicker.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/datepicker/datepicker.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Range", "ctype": "miscellaneous", "subtype": "variable", "file": "src/datepicker/datepicker.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "RangeTemplate.bind({})" }, { "name": "RangeTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/datepicker/datepicker.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t

    With initial value

    \n\t\t\n\t\t\n\t\t

    Without initial value

    \n\t\t\n\t\t\n\t`\n})" }, { "name": "Single", "ctype": "miscellaneous", "subtype": "variable", "file": "src/datepicker/datepicker.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SingleTemplate.bind({})" }, { "name": "SingleTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/datepicker/datepicker.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t

    With initial value

    \n\t\t\n\t\t\n\t\t

    Without initial value

    \n\t\t\n\t\t\n\t`\n})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/datepicker/datepicker.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SkeletonTemplate.bind({})" }, { "name": "SkeletonTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/datepicker/datepicker.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\n\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/datepicker/datepicker.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" } ], "src/dropdown/dropdown.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdown.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Fluid", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdown.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Multiselect", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdown.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "MultiTemplate.bind({})" }, { "name": "MultiTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdown.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t\t{{model | json}}\n\t`\n})" }, { "name": "NgTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdown.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t {{item.content}}\n\t\t\t
    \n\t\t    \n\t`\n})" }, { "name": "ReactiveForms", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdown.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ReactiveTemplate.bind({})" }, { "name": "ReactiveTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdown.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdown.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "WithTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdown.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "NgTemplate.bind({})" } ], "src/file-uploader/file-uploader.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "CustomFile", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "DragAndDrop", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "DragAndDropTemplate.bind({})" }, { "name": "DragAndDropTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "ModelTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "NgModel", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ModelTemplate.bind({})" }, { "name": "ReactiveForms", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ReactiveTemplate.bind({})" }, { "name": "ReactiveTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SkeletonTemplate.bind({})" }, { "name": "SkeletonTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "UploaderWithCustomFile", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "CustomFile.bind({})" } ], "src/grid/css-grid.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/css-grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "GridStart", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/css-grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "GridStartTemplate.bind({})" }, { "name": "GridStartTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/css-grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    span, start
    \n\t\t\t
    span, end
    \n\t\t\t
    start, end
    \n\t\t
    \n\t`\n})" }, { "name": "Responsive", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/css-grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ResponsiveTemplate.bind({})" }, { "name": "ResponsiveTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/css-grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t

    Small: Span 2 of 4

    \n\t\t\t\t

    Medium: Span 4 of 8

    \n\t\t\t\t

    Large: Span 6 of 16

    \n\t\t\t
    \n\t\t\t
    \n\t\t\t\t

    Small: Span 2 of 4

    \n\t\t\t\t

    Medium: Span 2 of 8

    \n\t\t\t\t

    Large: Span 3 of 16

    \n\t\t\t
    \n\t\t\t
    \n\t\t\t\t

    Small: Span 0 of 4

    \n\t\t\t\t

    Medium: Span 2 of 8

    \n\t\t\t\t

    Large: Span 3 of 16

    \n\t\t\t
    \n\t\t\t
    \n\t\t\t\t

    Small: Span 0 of 4

    \n\t\t\t\t

    Medium: Span 0 of 8

    \n\t\t\t\t

    Large: Span 4 of 16

    \n\t\t\t
    \n\t\t\t
    \n\t\t\t\t

    Small: Span 25%

    \n\t\t\t\t

    Medium: Span 50%

    \n\t\t\t\t

    Large: 75%

    \n\t\t\t
    \n\t\t\n\t`\n})" }, { "name": "Subgrid", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/css-grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SubgridTemplate.bind({})" }, { "name": "SubgridTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/css-grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t

    Small: Span 2 of 4

    \n\t\t\t\t

    Medium: Span 4 of 8

    \n\t\t\t\t

    Large: Span 3 of 16

    \n\t\t\t
    \n\t\t\t
    \n\t\t\t\t

    Small: Span 2 of 4

    \n\t\t\t\t

    Medium: Span 2 of 8

    \n\t\t\t\t

    Large: Span 10 of 16

    \n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    sm:1

    \n\t\t\t\t\t\t

    md:1

    \n\t\t\t\t\t\t

    lg:2

    \n\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    sm:1

    \n\t\t\t\t\t\t

    md:1

    \n\t\t\t\t\t\t

    lg:2

    \n\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    sm:0

    \n\t\t\t\t\t\t

    md:1

    \n\t\t\t\t\t\t

    lg:1

    \n\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    sm:0

    \n\t\t\t\t\t\t

    md:1

    \n\t\t\t\t\t\t

    lg:1

    \n\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    sm:0

    \n\t\t\t\t\t\t

    md:0

    \n\t\t\t\t\t\t

    lg:4

    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t\t
    \n\t\t\t\t

    Small: Span 0 of 4

    \n\t\t\t\t

    Medium: Span 0 of 8

    \n\t\t\t\t

    Large: Span 3 of 16

    \n\t\t\t
    \n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/css-grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t\t
    \n\t\t\t
    \n\t\t\n\t`\n})" } ], "src/grid/grid.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "CondensedRow", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "CondensedRowTemplate.bind({})" }, { "name": "CondensedRowTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Span 25%
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Span 25%
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Span 25%
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Span 25%
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t\n\t`\n})" }, { "name": "NarrowRow", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "NarrowRowTemplate.bind({})" }, { "name": "NarrowRowTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Span 25%
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Span 25%
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Span 25%
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Span 25%
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t\n\t`\n})" }, { "name": "Offset", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "OffsetTemplate.bind({})" }, { "name": "OffsetTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Small: Offset 3
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Small: Offset 2
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Small: Offset 1
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Small: Offset -
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t\n\t`\n})" }, { "name": "Responsive", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ResponsiveTemplate.bind({})" }, { "name": "ResponsiveTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    Small: Span 2 of 4

    \n\t\t\t\t\t\t

    Medium: Span 4 of 8

    \n\t\t\t\t\t\t

    Large: Span 6 of 16

    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    Small: Span 2 of 4

    \n\t\t\t\t\t\t

    Medium: Span 2 of 8

    \n\t\t\t\t\t\t

    Large: Span 3 of 16

    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    Small: Span 0 of 4

    \n\t\t\t\t\t\t

    Medium: Span 2 of 8

    \n\t\t\t\t\t\t

    Large: Span 3 of 16

    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/grid/grid.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Span 25%
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Span 25%
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Span 25%
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t
    Span 25%
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t\n\t`\n})" } ], "src/inline-loading/inline-loading.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/inline-loading/inline-loading.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/inline-loading/inline-loading.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" } ], "src/input/input.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/input.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Fluid", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/input.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/input.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SkeletonTemplate.bind({})" }, { "name": "SkeletonTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/input.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t\t
    \n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/input.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t{{label}}\n\t\t\n\t\t\n\t`\n})" } ], "src/input/password.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/password.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Fluid", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/password.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/password.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SkeletonTemplate.bind({})" }, { "name": "SkeletonTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/password.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/password.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t{{ label }}\n\t\t\t\n\t\t\n\t`\n})" } ], "src/input/textarea.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/textarea.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Fluid", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/textarea.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/textarea.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SkeletonTemplate.bind({})" }, { "name": "SkeletonTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/textarea.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t    \n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/input/textarea.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t{{label}}\n\t\t\n\t\t\n\t`\n})" } ], "src/layer/layer.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/layer/layer.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "CustomOrder", "ctype": "miscellaneous", "subtype": "variable", "file": "src/layer/layer.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "TemplateWithInput.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/layer/layer.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    Layer 0
    \n\t\t
    \n\t\t\t
    Layer 1
    \n\t\t\t
    \n\t\t\t\t
    Layer 2
    \n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [\n\t\t`.example-layer {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-layer);\n\t\t\tcolor: theme.$text-primary;\n\t\t}`\n\t]\n})" }, { "name": "TemplateWithInput", "ctype": "miscellaneous", "subtype": "variable", "file": "src/layer/layer.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    Layer 0
    \n\t\t
    \n\t\t\t
    Layer 1
    \n\t\t\t
    \n\t\t\t\t
    Layer 2
    \n\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t
    Layer 0
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    Layer 1
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t
    Layer 2
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [\n\t\t`.example-layer {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-layer);\n\t\t\tcolor: theme.$text-primary;\n\t\t}`\n\t]\n})" } ], "src/layout/stack.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/layout/stack.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/layout/stack.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t
    Item 1
    \n\t\t\t
    Item 2
    \n\t\t\t
    Item 3
    \n\t\t
    \n\t`\n})" } ], "src/link/link.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/link/link.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "IconTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/link/link.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tLink\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/link/link.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\tlink\n\t`\n})" }, { "name": "WithIcon", "ctype": "miscellaneous", "subtype": "variable", "file": "src/link/link.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "IconTemplate.bind({})" } ], "src/list/list.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/list/list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Nesting", "ctype": "miscellaneous", "subtype": "variable", "file": "src/list/list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "NestingTemplate.bind({})" }, { "name": "NestingTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/list/list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t

    Ordered List

    \n\t\t
      \n\t\t\t
    1. \n\t\t\t\tOne\n\t\t\t\t
        \n\t\t\t\t\t
      1. Nested one
        2. \n\t\t\t\t\t
      2. Nested two
        3. \n\t\t\t\t\t
      3. Nested three
        4. \n\t\t\t\t
      \n\t\t\t
      2. \n\t\t\t
    2. Two
      3. \n\t\t\t
    3. Three
      4. \n\t\t
    \n\t\t

    Unordered List

    \n\t\t
      \n\t\t\t
    • \n\t\t\t\tOne\n\t\t\t\t
        \n\t\t\t\t\t
      • Nested one
        • \n\t\t\t\t\t
      • Nested two
        • \n\t\t\t\t\t
      • Nested three
        • \n\t\t\t\t
      \n\t\t\t
      • \n\t\t\t
    • Two
      • \n\t\t\t
    • Three
      • \n\t\t
    \n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/list/list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t

    Ordered List

    \n\t\t
      \n\t\t\t
    1. One
      2. \n\t\t\t
    2. Two
      3. \n\t\t\t
    3. Three
      4. \n\t\t
    \n\t\t

    Unordered List

    \n\t\t
      \n\t\t\t
    • One
      • \n\t\t\t
    • Two
      • \n\t\t\t
    • Three
      • \n\t\t
    \n\t`\n})" } ], "src/loading/loading.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/loading/loading.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/loading/loading.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t`\n})" } ], "src/menu-button/menu-button.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/menu-button/menu-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/menu-button/menu-button.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" } ], "src/modal/modal.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "DataPassing", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "DataPassingTemplate.bind({})" }, { "name": "DataPassingTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "FormModal", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "FormTemplate.bind({})" }, { "name": "FormTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Passive", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "PassiveTemplate.bind({})" }, { "name": "PassiveTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "Simple", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SimpleTemplate.bind({})" }, { "name": "SimpleTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t

    No service required

    \n\t\t\t\t

    A very simple modal

    \n\t\t\t    \n\t\t\t
    \n\t\t\t\t

    hello world

    \n\t\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tOkay\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t    \n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "Transactional", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "TransactionTemplate.bind({})" }, { "name": "TransactionTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/modal/modal.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t\t\n\t`\n})" } ], "src/number-input/number.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/number-input/number.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Fluid", "ctype": "miscellaneous", "subtype": "variable", "file": "src/number-input/number.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "ModelTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/number-input/number.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t{{ value }}\n\t`\n})" }, { "name": "NgModel", "ctype": "miscellaneous", "subtype": "variable", "file": "src/number-input/number.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ModelTemplate.bind({})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/number-input/number.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SkeletonTemplate.bind({})" }, { "name": "SkeletonTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/number-input/number.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/number-input/number.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" } ], "src/pagination/pagination-nav.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/pagination/pagination-nav.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/pagination/pagination-nav.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" } ], "src/pagination/pagination.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/pagination/pagination.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/pagination/pagination.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" } ], "src/progress-bar/progress-bar.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/progress-bar/progress-bar.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Indeterminate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/progress-bar/progress-bar.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "IndeterminateTemplate.bind({})" }, { "name": "IndeterminateTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/progress-bar/progress-bar.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/progress-bar/progress-bar.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" } ], "src/progress-indicator/progress-indicator.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/progress-indicator/progress-indicator.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/progress-indicator/progress-indicator.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" } ], "src/radio/radio.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/radio/radio.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "ReactiveForms", "ctype": "miscellaneous", "subtype": "variable", "file": "src/radio/radio.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ReactiveFormsTemplate.bind({})" }, { "name": "ReactiveFormsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/radio/radio.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/radio/radio.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SkeletonTemplate.bind({})" }, { "name": "SkeletonTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/radio/radio.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/radio/radio.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tZero\n\t\t\t\n\t\t\tOne\n\t\t\tTwo\n\t\t\tThree\n\t\t\tFour\n\t\t\n\t`\n})" } ], "src/search/search.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/search/search.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Fluid", "ctype": "miscellaneous", "subtype": "variable", "file": "src/search/search.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/search/search.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" } ], "src/select/select.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Fluid", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "NgModel", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "NgModelTemplate.bind({})" }, { "name": "NgModelTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "OptionsSelected", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "OptionsSelectedTemplate.bind({})" }, { "name": "OptionsSelectedTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tOn hand\n\t\t\t\n\t\t\t\n\t\t\t\tInbound in-transit\n\t\t\t\n\t\t\t\n\t\t\t\tOutbound in-transit\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "ReactiveForms", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ReactiveTemplate.bind({})" }, { "name": "ReactiveTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "ValueProperty", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ValuePropertyTemplate.bind({})" }, { "name": "ValuePropertyTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/select/select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" } ], "src/skeleton/skeleton.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/skeleton/skeleton.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/skeleton/skeleton.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\n\t\n\t`\n})" } ], "src/slider/slider.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/slider/slider.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Range", "ctype": "miscellaneous", "subtype": "variable", "file": "src/slider/slider.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "RangeTemplate.bind({})" }, { "name": "RangeTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/slider/slider.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t{{minLabel}}\n\t\t\t{{maxLabel}}\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/slider/slider.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t{{minLabel}}\n\t\t\t{{maxLabel}}\n\t\t\t\n\t\t\n\t`\n})" } ], "src/structured-list/structured-list.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/structured-list/structured-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Selection", "ctype": "miscellaneous", "subtype": "variable", "file": "src/structured-list/structured-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SelectionTemplate.bind({})" }, { "name": "SelectionTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/structured-list/structured-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tColumn 1\n\t\t\t\tColumn 2\n\t\t\t\tColumn 3\n\t\t\t\n\t\t\t\n\t\t\t\tRow 1\n\t\t\t\tRow One\n\t\t\t\t\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\tRow 2\n\t\t\t\tRow Two\n\t\t\t\t\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\tRow 3\n\t\t\t\tRow Three\n\t\t\t\t\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\tRow 4\n\t\t\t\tRow Four\n\t\t\t\t\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t

    {{valueSelected}}

    \n\t`\n})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/structured-list/structured-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SkeletonTemplate.bind({})" }, { "name": "SkeletonTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/structured-list/structured-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/structured-list/structured-list.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tColumn 1\n\t\t\t\tColumn 2\n\t\t\t\tColumn 3\n\t\t\t\n\t\t\t\n\t\t\t\tRow 1\n\t\t\t\tRow One\n\t\t\t\t\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\tRow 2\n\t\t\t\tRow Two\n\t\t\t\t\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})" } ], "src/table/table.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "DisabledRowsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    {{title}}

    \n\t\t\t\t

    {{description}}

    \n\t\t\t    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t    \n\t`\n})" }, { "name": "DyanmicContentTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    {{title}}

    \n\t\t\t\t

    {{description}}

    \n\t\t\t    \n\t\t\t\n\t\t\t\n\t\t\t\n\t\t    \n\t`\n})" }, { "name": "emptyModel", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "new TableModel()" }, { "name": "ExpansionTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    {{title}}

    \n\t\t\t\t

    {{description}}

    \n\t\t\t    \n\t\t\t\n\t\t\t\n\t\t\t\n\t\t    \n\t`\n})" }, { "name": "Filtering", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "FilteringTemplate.bind({})" }, { "name": "FilteringOverriding", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "FilteringOverridingTemplate.bind({})" }, { "name": "FilteringOverridingTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "FilteringTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "FromComponents", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "FromComponentsTemplate.bind({})" }, { "name": "FromComponentsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "getProps", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(more = {}, type: \"args\" | \"argTypes\") => {\n\tconst defaultProps = type === \"args\" ? {\n\t\tmodel: simpleModel,\n\t\ttitle: \"Table title\",\n\t\tdescription: \"\",\n\t\tsize: \"md\",\n\t\tshowSelectionColumn: true,\n\t\tstriped: false,\n\t\tsortable: true,\n\t\tisDataGrid: true,\n\t\tstickyHeader: false,\n\t\tskeleton: false\n\t} : {\n\t\tsize: {\n\t\t\toptions: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n\t\t\tcontrol: \"select\"\n\t\t}\n\t};\n\treturn { ...defaultProps, ...more };\n}" }, { "name": "NoDataTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    {{title}}

    \n\t\t\t\t

    {{description}}

    \n\t\t\t    \n\n\t\t\t\n\t\t\t\n\t\t\t\t
    No data.
    \n\t\t\t\n\t\t    \n\t`,\n\tstyles: [`\n\t\t.no-data {\n\t\t\twidth: 100%;\n\t\t\theight: 150px;\n\t\t\ttext-align: center;\n\t\t}\n\t`]\n})" }, { "name": "OverflowMenuTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: {\n\t\t...getProps({\n\t\t\tdescription: \"With overflow menu\"\n\t\t}, \"args\")\n\t},\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    {{title}}

    \n\t\t\t\t

    {{description}}

    \n\t\t\t    \n\t\t\t\n\t\t\t\n\t\t\t\n\t\t    \n\t`\n})" }, { "name": "PaginationTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    {{title}}

    \n\t\t\t\t

    {{description}}

    \n\t\t\t    \n\t\t\t\n\t\t\t\n\t\t\t\n\t\t    \n\t`\n})" }, { "name": "simpleModel", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "new TableModel()" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SkeletonTemplate.bind({})" }, { "name": "SkeletonTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    {{title}}

    \n\t\t\t\t

    {{description}}

    \n\t\t\t    \n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t    \n\t`\n})" }, { "name": "ToolbarTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    {{title}}

    \n\t\t\t\t

    {{description}}

    \n\t\t\t    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tOption 1\n\t\t\t\t\t\tOption 2\n\t\t\t\t\t\tDisabled\n\t\t\t\t\t\tDanger option\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t    \n\t`\n})" }, { "name": "WithDisabledRows", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "DisabledRowsTemplate.bind({})" }, { "name": "WithDynamicContent", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "DyanmicContentTemplate.bind({})" }, { "name": "WithExpansion", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ExpansionTemplate.bind({})" }, { "name": "WithoutActionTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t

    {{title}}

    \n\t\t\t\t

    {{description}}

    \n\t\t\t    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t    \n\t`\n})" }, { "name": "WithoutData", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "NoDataTemplate.bind({})" }, { "name": "WithOverflowMenu", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "OverflowMenuTemplate.bind({})" }, { "name": "WithPagination", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "PaginationTemplate.bind({})" }, { "name": "WithToolbar", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ToolbarTemplate.bind({})" }, { "name": "WithToolbarWithoutToolbarAction", "ctype": "miscellaneous", "subtype": "variable", "file": "src/table/table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "WithoutActionTemplate.bind({})" } ], "src/tabs/tabs.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "BeforeAndAfter", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "BeforeAndAfterTemplate.bind({})" }, { "name": "BeforeAndAfterTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    before
    \n\t\t\n\t\t\tfoo\n\t\t\tbar\n\t\t\tcontent before\n\t\t\n\t\t
    after
    \n\t\t\n\t\t\tfoo\n\t\t\tbar\n\t\t\tcontent after\n\t\t\n\t\t
    both
    \n\t\t\n\t\t\tfoo\n\t\t\tbar\n\t\t\tcontent before\n\t\t\tcontent after\n\t\t\n\t`\n})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SkeletonTemplate.bind({})" }, { "name": "SkeletonTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\n\t\t
    \n\t\t\t

    Tab skeleton component for cds-tab-header-group:

    \n\t\t\t\n\t\t
    \n\t`\n})" }, { "name": "TabheaderGroup", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "TabHeaderGroupTemplate.bind({})" }, { "name": "TabHeaderGroupTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tTab Content 1\n\t\t\tTab Content 2\n\t\t\t\n\t\t\t\n\t\t\n\n\t\t\n\t\t\n\t\t\tTab Content 3\n\t\t\n\n\t\t\n\t\t\tTab Content 4\n\t\t\n\t`\n})" }, { "name": "With", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "WithTemplate.bind({})" }, { "name": "WithTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tabs/tabs.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t{{item ? item.name : \"wait for it\"}}\n\t\t\n\t\t\n\t\t\t
    \n\t\t\t\tSomething custom\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t    \n\t\t\n\t\t\t\n\t\t\t\tTab Content {{i + 1}}\n\t\t\t\n\t\t\tTab Content Custom\n\t\t\n\t`\n})" } ], "src/tag/tag.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tag/tag.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Filter", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tag/tag.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "FilteredTemplate.bind({})" }, { "name": "FilteredTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tag/tag.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t\tFiltered\n\t\t\n\t`\n})" }, { "name": "OperationalTag", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tag/tag.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "OperationalTagTemplate.bind({})" }, { "name": "OperationalTagTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tag/tag.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t\tOperational\n\t\t\n\n\n\t\t\n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t\tOperational w/ popover\n\t\t\t\n\t\t\t\n\t\t\t\t
    \n\t\t\t\t\tTag 1 name
    \n\t\t\t\t\tTag 2 name
    \n\t\t\t\t\tTag 3 name
    \n\t\t\t\t\tTag 4 name
    \n\t\t\t\t\tTag 5 name\n\t\t\t\t
    \n\t\t\t    \n\t\t
    \n\t`,\n\tstyles: [\n\t\t`.popover-content {\n\t\t\tline-height: 1.5;\n\t\t\tpadding: 1rem;\n\t\t\tfont-size: 14px;\n\t\t}`\n\t]\n})" }, { "name": "SelectedTag", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tag/tag.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SelectedTagTemplate.bind({})" }, { "name": "SelectedTagTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tag/tag.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t\tSelectable\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tag/tag.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t\tRead only\n\t\t\n\t`\n})" } ], "src/theme/theme.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/theme/theme.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "LayeredTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/theme/theme.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t
    \n\t\t\t\t
    White theme
    \n\t\t\t\t
    Layer one
    \n\t\t\t\t
    \n\t\t\t\t\t
    Layer two
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    Layer three
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t
    G10 theme
    \n\t\t\t\t
    Layer one
    \n\t\t\t\t
    \n\t\t\t\t\t
    Layer two
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    Layer three
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t
    G90 theme
    \n\t\t\t\t
    Layer one
    \n\t\t\t\t
    \n\t\t\t\t\t
    Layer two
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    Layer three
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t
    G100 theme
    \n\t\t\t\t
    Layer one
    \n\t\t\t\t
    \n\t\t\t\t\t
    Layer two
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t
    Layer three
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [`\n\t\t.theme-layer-example {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t\t.theme-layer-header {\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\t\t.theme-with-layer {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-layer);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/theme/theme.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t
    \n\t\t\t\t

    White theme

    \n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t

    G10 theme

    \n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t

    G90 theme

    \n\t\t\t
    \n\t\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t

    G100 theme

    \n\t\t\t
    \n\t\t
    \n\t`,\n\tstyles: [`\n\t\t.theme-section {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})" }, { "name": "WithLayer", "ctype": "miscellaneous", "subtype": "variable", "file": "src/theme/theme.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "LayeredTemplate.bind({})" } ], "src/tiles/clickable-tile.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/clickable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "LayerTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/clickable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tFirst layer\n\t\t\n\t\t
    \n\t\t\t\n\t\t\t\tSecond layer\n\t\t\t\n\t\t\t
    \n\t\t\t\tThird layer\n\t\t\t
    \n\t\t
    \n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/clickable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tClick the tile to open the Carbon Design System\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "WithLayers", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/clickable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "LayerTemplate.bind({})" } ], "src/tiles/expandable-tile.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/expandable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Interactive", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/expandable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "InteractiveTemplate.bind({})" }, { "name": "InteractiveTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/expandable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tAbove the fold content\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\tBelow the fold content here\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "LayerTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/expandable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tFirst Layer, above the fold content here\n\t\t\t\n\t\t\t\n\t\t\t\tFirst Layer, below the fold content here\n\t\t\t\n\t\t\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\tSecond layer, above the fold content here\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tSecond layer, below the fold content here\n\t\t\t\t\n\t\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tThird layer, above the fold content here\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tThird layer, below the fold content here\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/expandable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tAbove the fold content here\n\t\t\tBelow the fold content here\n\t\t\n\t`\n})" }, { "name": "WithLayers", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/expandable-tile.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "LayerTemplate.bind({})" } ], "src/tiles/tiles.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tiles.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "LayerTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tiles.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tFirst layer\n\t\t\n\t\t
    \n\t\t\t\n\t\t\t\tSecond layer\n\t\t\t\n\t\t\t
    \n\t\t\t\tThird layer\n\t\t\t
    \n\t\t
    \n\t`\n})" }, { "name": "Skeleton", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tiles.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SkeletonTemplate.bind({})" }, { "name": "SkeletonTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tiles.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t
    \n\t\t    \n\t`,\n\tstyles: [`\n\t\t.skeleton-placeholder {\n\t\t\tmargin-bottom: 10px;\n\t\t}\n\t`]\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tiles.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tTile content goes here...\n\t\t\n\t`\n})" }, { "name": "WithLayers", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tiles.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "LayerTemplate.bind({})" } ], "src/timepicker/timepicker.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/timepicker/timepicker.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/timepicker/timepicker.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t
    \n\t\t

    Input: {{model}}

    \n\t\t

    Period: {{period}}

    \n\t\t

    Time Zone: {{timeZone}}

    \n\t`\n})" } ], "src/timepicker-select/timepicker-select.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/timepicker-select/timepicker-select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/timepicker-select/timepicker-select.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t`\n})" } ], "src/toggle/toggle.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/toggle/toggle.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/toggle/toggle.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" } ], "src/treeview/treeview.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/treeview/treeview.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "IconsTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/treeview/treeview.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t`\n})" }, { "name": "nodes", "ctype": "miscellaneous", "subtype": "variable", "file": "src/treeview/treeview.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "[]", "defaultValue": "[\n\t{\n\t\tid: \"1\",\n\t\tvalue: \"Artificial intelligence\",\n\t\tlabel: \"Artificial intelligence\"\n\t},\n\t{\n\t\tid: \"2\",\n\t\tvalue: \"Blockchain\",\n\t\tlabel: \"Blockchain\"\n\t},\n\t{\n\t\tid: \"3\",\n\t\tvalue: \"Business automation\",\n\t\tlabel: \"Business automation\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"3-1\",\n\t\t\t\tvalue: \"Business process automation\",\n\t\t\t\tlabel: \"Business process automation\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"3-2\",\n\t\t\t\tvalue: \"Business process mapping\",\n\t\t\t\tlabel: \"Business process mapping\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"4\",\n\t\tvalue: \"Business operations\",\n\t\tlabel: \"Business operations\"\n\t},\n\t{\n\t\tid: \"5\",\n\t\tvalue: \"Cloud computing\",\n\t\tlabel: \"Cloud computing\",\n\t\texpanded: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"5-1\",\n\t\t\t\tvalue: \"Containers\",\n\t\t\t\tlabel: \"Containers\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"5-2\",\n\t\t\t\tvalue: \"Databases\",\n\t\t\t\tlabel: \"Databases\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"5-3\",\n\t\t\t\tvalue: \"DevOps\",\n\t\t\t\tlabel: \"DevOps\",\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-4\",\n\t\t\t\t\t\tvalue: \"Solutions\",\n\t\t\t\t\t\tlabel: \"Solutions\"\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-5\",\n\t\t\t\t\t\tvalue: \"Case studies\",\n\t\t\t\t\t\tlabel: \"Case studies\",\n\t\t\t\t\t\texpanded: true,\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: \"5-6\",\n\t\t\t\t\t\t\t\tvalue: \"Resources\",\n\t\t\t\t\t\t\t\tlabel: \"Resources\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t]\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"6\",\n\t\tvalue: \"Data & Analytics\",\n\t\tlabel: \"Data & Analytics\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"6-1\",\n\t\t\t\tvalue: \"Big data\",\n\t\t\t\tlabel: \"Big data\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"6-2\",\n\t\t\t\tvalue: \"Business intelligence\",\n\t\t\t\tlabel: \"Business intelligence\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"7\",\n\t\tvalue: \"Not selectable node\",\n\t\tlabel: \"Not selectable node\",\n\t\tselectable: false,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"7-1\",\n\t\t\t\tvalue: \"Child 1\",\n\t\t\t\tlabel: \"Child 1\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"7-2\",\n\t\t\t\tvalue: \"Child 2\",\n\t\t\t\tlabel: \"Child 2\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"8\",\n\t\tvalue: \"IT infrastructure\",\n\t\tlabel: \"IT infrastructure\",\n\t\texpanded: true,\n\t\tdisabled: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"8-1\",\n\t\t\t\tvalue: \"Data storage\",\n\t\t\t\tlabel: \"Data storage\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"8-2\",\n\t\t\t\tvalue: \"Enterprise servers\",\n\t\t\t\tlabel: \"Enterprise servers\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"9\",\n\t\t\t\tvalue: \"Hybrid cloud infrastructure\",\n\t\t\t\tlabel: \"Hybrid cloud infrastructure\",\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"9-1\",\n\t\t\t\t\t\tvalue: \"Insights\",\n\t\t\t\t\t\tlabel: \"Insights\"\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"9-2\",\n\t\t\t\t\t\tvalue: \"Benefits\",\n\t\t\t\t\t\tlabel: \"Benefits\"\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n]" }, { "name": "ProjectedContent", "ctype": "miscellaneous", "subtype": "variable", "file": "src/treeview/treeview.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "ProjectedNodesTemplate.bind({})" }, { "name": "ProjectedNodesTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/treeview/treeview.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\n\t\t\t\n\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\n\t\t\t\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/treeview/treeview.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "WithIcons", "ctype": "miscellaneous", "subtype": "variable", "file": "src/treeview/treeview.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "IconsTemplate.bind({})" } ], "src/dialog/overflow-menu/overflow-menu.stories.ts": [ { "name": "Basic", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dialog/overflow-menu/overflow-menu.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Custom", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dialog/overflow-menu/overflow-menu.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "CustomTemplate.bind({})" }, { "name": "CustomTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dialog/overflow-menu/overflow-menu.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t

    \n\t\tWhen writing a custom template to be inserted into an overflow menu\n\t\tit becomes your responsibility to make sure tab order/keyboard nav is implemented correctly\n\t\t

    \n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t
    \n\t\t\t\t
    Columns
    \n\t\t\t\t
    Status
    \n\t\t\t\t
    Last modified
    \n\t\t\t
    \n\t\t    \n\t`\n})" }, { "name": "CustomTrigger", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dialog/overflow-menu/overflow-menu.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "CustomTriggerTemplate.bind({})" }, { "name": "CustomTriggerTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dialog/overflow-menu/overflow-menu.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\tOverflow menu with custom trigger icon\n\t\t\n\t\t\tOption 1\n\t\t\tOption 2\n\t\t\tDisabled\n\t\t\tDanger option\n\t\t\n\t\t\n\t\t\n\t`\n})" }, { "name": "LinkTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dialog/overflow-menu/overflow-menu.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
    \n\t\t\t

    Bottom placement

    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\tAn example option that is really long to show what should be done to handle long text\n\t\t\t\t\n\t\t\t\tOption 2\n\t\t\t\tOption 3\n\t\t\t\tOption 4\n\t\t\t\tDisabled\n\t\t\t\t\n\t\t\t\t\tDanger option\n\t\t\t\t\n\t\t\t\n\t\t
    \n\t\t\n\t`\n})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dialog/overflow-menu/overflow-menu.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\t\tAn example option that is really long to show what should be done to handle long text\n\t\t\t\n\t\t\tOption 2\n\t\t\t
  • \n\t\t\t\t\n\t\t\t
    • \n\t\t\tOption 4\n\t\t\tDisabled\n\t\t\tDanger option\n\t\t\n\t\t\n\t`\n})" }, { "name": "WithLink", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dialog/overflow-menu/overflow-menu.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "LinkTemplate.bind({})" } ], "src/file-uploader/file.stories.ts": [ { "name": "BasicFile", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "BasicFileTemplate.bind({})" }, { "name": "BasicFileTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\tsize: {\n\t\toptions: [\"sm\", \"md\", \"lg\"],\n\t\tcontrol: \"radio\"\n\t},\n\ttemplate: `\n \n \n `\n})" }, { "name": "CustomFile", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "CustomFileTemplate.bind({})" }, { "name": "CustomFileTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\tsize: {\n\t\toptions: [\"sm\", \"md\", \"lg\"],\n\t\tcontrol: \"radio\"\n\t},\n\ttemplate: `\n \n \n `\n})" } ], "src/datepicker/carbon-flatpickr-month-select.ts": [ { "name": "carbonFlatpickrMonthSelectPlugin", "ctype": "miscellaneous", "subtype": "variable", "file": "src/datepicker/carbon-flatpickr-month-select.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "fp => {\n\tconst setupElements = () => {\n\t\tif (!fp.monthElements || !fp.yearElements) {\n\t\t\treturn;\n\t\t}\n\t\tfp.monthElements.forEach(elem => {\n\t\t\tif (!elem.parentNode) { return; }\n\t\t\telem.parentNode.removeChild(elem);\n\t\t});\n\t\tfp.monthElements.splice(\n\t\t\t0,\n\t\t\tfp.monthElements.length,\n\t\t\t...fp.monthElements.map(() => {\n\t\t\t\t// eslint-disable-next-line no-underscore-dangle\n\t\t\t\tconst monthElement = fp._createElement(\n\t\t\t\t\t\"span\",\n\t\t\t\t\tconfig.classFlatpickrCurrentMonth\n\t\t\t\t);\n\t\t\t\tmonthElement.textContent = monthToStr(\n\t\t\t\t\tfp.currentMonth,\n\t\t\t\t\tconfig.shorthand === true,\n\t\t\t\t\tfp.l10n\n\t\t\t\t);\n\t\t\t\tfp.yearElements[0]\n\t\t\t\t\t.closest(config.selectorFlatpickrMonthYearContainer)\n\t\t\t\t\t.insertBefore(\n\t\t\t\t\t\tmonthElement,\n\t\t\t\t\t\tfp.yearElements[0].closest(config.selectorFlatpickrYearContainer)\n\t\t\t\t\t);\n\t\t\t\treturn monthElement;\n\t\t\t})\n\t\t);\n\t};\n\tconst updateCurrentMonth = () => {\n\t\tif (!fp.yearElements) {\n\t\t\treturn;\n\t\t}\n\t\tconst monthStr = monthToStr(\n\t\t\tfp.currentMonth,\n\t\t\tconfig.shorthand === true,\n\t\t\tfp.l10n\n\t\t);\n\t\tfp.yearElements.forEach(elem => {\n\t\t\tconst currentMonthContainer = elem.closest(\n\t\t\t\tconfig.selectorFlatpickrMonthYearContainer\n\t\t\t);\n\t\t\tArray.prototype.forEach.call(\n\t\t\t\tcurrentMonthContainer.querySelectorAll(\".cur-month\"),\n\t\t\t\tmonthElement => {\n\t\t\t\t\tmonthElement.textContent = monthStr;\n\t\t\t\t}\n\t\t\t);\n\t\t});\n\t};\n\n\tconst register = () => {\n\t\tfp.loadedPlugins.push(\"carbonFlatpickrMonthSelectPlugin\");\n\t};\n\n\treturn {\n\t\tonMonthChange: updateCurrentMonth,\n\t\tonValueUpdate: updateCurrentMonth,\n\t\tonOpen: updateCurrentMonth,\n\t\tonReady: [setupElements, updateCurrentMonth, register]\n\t};\n}" }, { "name": "config", "ctype": "miscellaneous", "subtype": "variable", "file": "src/datepicker/carbon-flatpickr-month-select.ts", "deprecated": false, "deprecationMessage": "", "type": "object", "defaultValue": "{\n\tselectorInit: \"[data-date-picker]\",\n\tselectorDatePickerInput: \"[data-date-picker-input]\",\n\tselectorDatePickerInputFrom: \"[data-date-picker-input-from]\",\n\tselectorDatePickerInputTo: \"[data-date-picker-input-to]\",\n\tselectorDatePickerIcon: \"[data-date-picker-icon]\",\n\tselectorFlatpickrMonthYearContainer: \".flatpickr-current-month\",\n\tselectorFlatpickrYearContainer: \".numInputWrapper\",\n\tselectorFlatpickrCurrentMonth: \".cur-month\",\n\tclassCalendarContainer: `cds--date-picker__calendar`,\n\tclassMonth: `cds--date-picker__month`,\n\tclassWeekdays: `cds--date-picker__weekdays`,\n\tclassDays: `cds--date-picker__days`,\n\tclassWeekday: `cds--date-picker__weekday`,\n\tclassDay: `cds--date-picker__day`,\n\tclassFocused: `cds--focused`,\n\tclassVisuallyHidden: `cds--visually-hidden`,\n\tclassFlatpickrCurrentMonth: \"cur-month\",\n\tattribType: \"data-date-picker-type\",\n\tdateFormat: \"m/d/Y\",\n\tshorthand: false\n}" }, { "name": "monthToStr", "ctype": "miscellaneous", "subtype": "variable", "file": "src/datepicker/carbon-flatpickr-month-select.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(monthNumber, shorthand, locale) =>\n\tlocale.months[shorthand ? \"shorthand\" : \"longhand\"][monthNumber]", "rawdescription": "This is from carbon-components.\nWe need it to format the month select according to specs.\nCarbon currently doesn't expose this as a seperate package,\nand we don't import the carbon-components js (on purpose)\nso some copy pasta is required\n\nref: https://github.com/carbon-design-system/carbon/blob/\n\tf06f38f0c2ef624e409a3d5711e897a79f4c88fc/packages/components/src/components/date-picker/date-picker.js#L52-L123", "description": "

    This is from carbon-components.\nWe need it to format the month select according to specs.\nCarbon currently doesn't expose this as a seperate package,\nand we don't import the carbon-components js (on purpose)\nso some copy pasta is required

    \n

    ref: https://github.com/carbon-design-system/carbon/blob/\n f06f38f0c2ef624e409a3d5711e897a79f4c88fc/packages/components/src/components/date-picker/date-picker.js#L52-L123

    \n" } ], "src/test.ts": [ { "name": "context", "ctype": "miscellaneous", "subtype": "variable", "file": "src/test.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "require.context(\"./\", true, /\\.spec\\.ts$/)" }, { "name": "require", "ctype": "miscellaneous", "subtype": "variable", "file": "src/test.ts", "deprecated": false, "deprecationMessage": "", "type": "any" } ], "src/tooltip/tooltip.interface.ts": [ { "name": "DEFAULT_TOOLTIP_CONFIG", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tooltip/tooltip.interface.ts", "deprecated": false, "deprecationMessage": "", "type": "object", "defaultValue": "{\n\talign: \"bottom\" as TooltipAlignments,\n\tcaret: true,\n\tdropShadow: true,\n\thighContrast: true,\n\tisOpen: false,\n\tenterDelayMs: 100,\n\tleaveDelayMs: 300\n}", "rawdescription": "Default tooltip configuration for components to populate missing interface attributes", "description": "

    Default tooltip configuration for components to populate missing interface attributes

    \n" } ], "src/dropdown/dropdown.service.ts": [ { "name": "defaultOffset", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdown.service.ts", "deprecated": false, "deprecationMessage": "", "type": "object", "defaultValue": "{ top: 0, left: 0 }" } ], "src/checkbox/checkbox-exported-tests.ts": [ { "name": "defaults", "ctype": "miscellaneous", "subtype": "variable", "file": "src/checkbox/checkbox-exported-tests.ts", "deprecated": false, "deprecationMessage": "", "type": "object", "defaultValue": "{\n\tselectors: {\n\t\troot: \"cds-checkbox\",\n\t\tinput: \"input\"\n\t}\n}" } ], "src/experimental/experimental.module.ts": [ { "name": "EXPERIMENTAL_SERVICE_PROVIDER", "ctype": "miscellaneous", "subtype": "variable", "file": "src/experimental/experimental.module.ts", "deprecated": false, "deprecationMessage": "", "type": "object", "defaultValue": "{\n\tprovide: ExperimentalService,\n\tdeps: [[new Optional(), new SkipSelf(), ExperimentalService]],\n\tuseFactory: EXPERIMENTAL_SERVICE_PROVIDER_FACTORY\n}" } ], "src/utils/event-observable.ts": [ { "name": "getEventObservable", "ctype": "miscellaneous", "subtype": "variable", "file": "src/utils/event-observable.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(targetElement: HTMLElement | Element, eventType: string): Observable => {\n\tswitch (eventType) {\n\t\tcase \"scroll\":\n\t\tcase \"resize\":\n\t\tcase \"touchstart\":\n\t\tcase \"touchmove\":\n\t\tcase \"touchend\":\n\t\t\treturn fromEvent(targetElement, eventType, { passive: true });\n\t\tdefault:\n\t\t\treturn fromEvent(targetElement, eventType);\n\t}\n}" } ], "src/utils/scroll.ts": [ { "name": "getScrollableParents", "ctype": "miscellaneous", "subtype": "variable", "file": "src/utils/scroll.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(node: HTMLElement) => {\n\tconst elements = [document.body];\n\twhile (node.parentElement && node !== document.body) {\n\t\tif (isScrollableElement(node)) {\n\t\t\telements.push(node);\n\t\t}\n\t\tnode = node.parentElement;\n\t}\n\treturn elements;\n}" }, { "name": "hasScrollableParents", "ctype": "miscellaneous", "subtype": "variable", "file": "src/utils/scroll.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(node: HTMLElement) => {\n\twhile (node.parentElement && node !== document.body) {\n\t\tif (isScrollableElement(node)) {\n\t\t\treturn true;\n\t\t}\n\t\tnode = node.parentElement;\n\t}\n\treturn false;\n}" }, { "name": "isScrollableElement", "ctype": "miscellaneous", "subtype": "variable", "file": "src/utils/scroll.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(element: HTMLElement) => {\n\tconst computedStyle = getComputedStyle(element);\n\treturn (\n\t\tcomputedStyle.overflow === \"auto\" ||\n\t\tcomputedStyle.overflow === \"scroll\" ||\n\t\tcomputedStyle[\"overflow-y\"] === \"auto\" ||\n\t\tcomputedStyle[\"overflow-y\"] === \"scroll\" ||\n\t\tcomputedStyle[\"overflow-x\"] === \"auto\" ||\n\t\tcomputedStyle[\"overflow-x\"] === \"scroll\"\n\t);\n}", "rawdescription": "Checks if a given element is scrollable.\nIf the element has an overflow set as part of its computed style it can scroll.", "description": "

    Checks if a given element is scrollable.\nIf the element has an overflow set as part of its computed style it can scroll.

    \n" }, { "name": "isVisibleInContainer", "ctype": "miscellaneous", "subtype": "variable", "file": "src/utils/scroll.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(element: HTMLElement, container: HTMLElement) => {\n\tconst elementRect = element.getBoundingClientRect();\n\tconst containerRect = container.getBoundingClientRect();\n\t// If there exists `height: 100%` on the `html` or `body` tag of an application,\n\t// it causes the calculation to return true if you need to scroll before the element is seen.\n\t// In that case we calculate its visibility based on the window viewport.\n\tif (container.tagName === \"BODY\" || container.tagName === \"HTML\") {\n\t\t// This checks if element is within the top, bottom, left and right of viewport, ie. if the element is visible in\n\t\t// the screen. This also takes into account partial visibility of an element.\n\t\tconst isAboveViewport = elementRect.top < 0 && (elementRect.top + element.clientHeight) < 0;\n\t\tconst isLeftOfViewport = elementRect.left < 0;\n\t\tconst isBelowViewport =\n\t\t\t(elementRect.bottom - element.clientHeight) > (window.innerHeight || document.documentElement.clientHeight);\n\t\tconst isRightOfViewport = elementRect.right > (window.innerWidth || document.documentElement.clientWidth);\n\n\t\tconst isVisibleInViewport = !(isAboveViewport || isBelowViewport || isLeftOfViewport || isRightOfViewport);\n\n\t\treturn isVisibleInViewport;\n\t}\n\treturn (\n\t\t// This also accounts for partial visibility. It will still return true if the element is partially visible inside the container.\n\t\t(elementRect.bottom - element.clientHeight) <= (containerRect.bottom + (container.offsetHeight - container.clientHeight) / 2) &&\n\t\telementRect.top >= (- element.clientHeight)\n\t);\n}", "rawdescription": "Checks if an element is visible within a container", "description": "

    Checks if an element is visible within a container

    \n" }, { "name": "scrollableParentsObservable", "ctype": "miscellaneous", "subtype": "variable", "file": "src/utils/scroll.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(node: HTMLElement): Observable => {\n\tconst windowScroll = fromEvent(window, \"scroll\", { passive: true }).pipe(map(event => (\n\t\t// update the event target to be something useful. In this case `body` is a sensible replacement\n\t\tObject.assign({}, event, { target: document.body }) as Event\n\t)));\n\tlet observables = [windowScroll];\n\t// walk the parents and subscribe to all the scroll events we can\n\twhile (node.parentElement && node !== document.body) {\n\t\tif (isScrollableElement(node)) {\n\t\t\tobservables.push(fromEvent(node, \"scroll\", { passive: true }));\n\t\t}\n\t\tnode = node.parentElement;\n\t}\n\n\treturn merge(...observables);\n}", "rawdescription": "Returns an observable that emits whenever any scrollable parent element scrolls", "description": "

    Returns an observable that emits whenever any scrollable parent element scrolls

    \n" } ], "src/i18n/i18n.module.ts": [ { "name": "I18N_SERVICE_PROVIDER", "ctype": "miscellaneous", "subtype": "variable", "file": "src/i18n/i18n.module.ts", "deprecated": false, "deprecationMessage": "", "type": "object", "defaultValue": "{\n\tprovide: I18n,\n\tdeps: [[new Optional(), new SkipSelf(), I18n]],\n\tuseFactory: I18N_SERVICE_PROVIDER_FACTORY\n}" } ], "src/icon/icon.module.ts": [ { "name": "ICON_SERVICE_PROVIDER", "ctype": "miscellaneous", "subtype": "variable", "file": "src/icon/icon.module.ts", "deprecated": false, "deprecationMessage": "", "type": "object", "defaultValue": "{\n\tprovide: IconService,\n\tdeps: [[new Optional(), new SkipSelf(), IconService]],\n\tuseFactory: ICON_SERVICE_PROVIDER_FACTORY\n}" } ], "src/patterns/loading/large-loading.stories.ts": [ { "name": "LargeLoading", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/loading/large-loading.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/loading/large-loading.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" } ], "src/tiles/tile-group.stories.ts": [ { "name": "LayerTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tile-group.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tFirst Layer\n\t\t\tFirst Layer\n\t\t\n\t\t
    \n\t\t\t\n\t\t\t\tSecond Layer\n\t\t\t\tSecond Layer\n\t\t\t\n\t\t\t
    \n\t\t\t\t\n\t\t\t\t\tThird Layer\n\t\t\t\t\tThird Layer\n\t\t\t\t\n\t\t\t
    \n\t\t
    \n\t`\n})" }, { "name": "Multiselect", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tile-group.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "MultiTemplate.bind({})" }, { "name": "MultiTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tile-group.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tSelectable Tile\n\t\t\tSelectable Tile\n\t\t\tSelectable Tile\n\t\t\n\t`\n})" }, { "name": "Selectable", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tile-group.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "SelectableTemplate.bind({})" }, { "name": "SelectableTemplate", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tile-group.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\tSelectable Tile\n\t\t\tSelectable Tile\n\t\t\tSelectable Tile\n\t\t\n\t`\n})" }, { "name": "WithLayers", "ctype": "miscellaneous", "subtype": "variable", "file": "src/tiles/tile-group.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "LayerTemplate.bind({})" } ], "src/layer/layer.directive.ts": [ { "name": "MAX_LEVEL", "ctype": "miscellaneous", "subtype": "variable", "file": "src/layer/layer.directive.ts", "deprecated": false, "deprecationMessage": "", "type": "number", "defaultValue": "2" } ], "src/utils/object.ts": [ { "name": "merge", "ctype": "miscellaneous", "subtype": "variable", "file": "src/utils/object.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(target, ...objects) => {\n\tfor (const object of objects) {\n\t\tfor (const key in object) {\n\t\t\tif (object.hasOwnProperty(key)) {\n\t\t\t\t// since we're dealing just with JSON this simple check should be enough\n\t\t\t\tif (object[key] instanceof Object) {\n\t\t\t\t\tif (!target[key]) {\n\t\t\t\t\t\ttarget[key] = {};\n\t\t\t\t\t}\n\t\t\t\t\t// recursively merge into the target\n\t\t\t\t\t// most translations only run 3 or 4 levels deep, so no stack explosions\n\t\t\t\t\ttarget[key] = merge(target[key], object[key]);\n\t\t\t\t} else {\n\t\t\t\t\ttarget[key] = object[key];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\treturn target;\n}" } ], "src/breadcrumb/breadcrumb.component.ts": [ { "name": "MINIMUM_OVERFLOW_THRESHOLD", "ctype": "miscellaneous", "subtype": "variable", "file": "src/breadcrumb/breadcrumb.component.ts", "deprecated": false, "deprecationMessage": "", "type": "number", "defaultValue": "4" } ], "src/patterns/filtering/multiple-categories.stories.ts": [ { "name": "MultipleCategories", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/filtering/multiple-categories.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/filtering/multiple-categories.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" } ], "src/patterns/filtering/multi-selection.stories.ts": [ { "name": "MultiSelection", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/filtering/multi-selection.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/filtering/multi-selection.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" } ], "src/patterns/forms/multi-step-form.stories.ts": [ { "name": "MultiStep", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/forms/multi-step-form.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/forms/multi-step-form.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" } ], "src/file-uploader/file-uploader.component.ts": [ { "name": "noop", "ctype": "miscellaneous", "subtype": "variable", "file": "src/file-uploader/file-uploader.component.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "() => { }" } ], "src/placeholder/placeholder.module.ts": [ { "name": "PLACEHOLDER_SERVICE_PROVIDER", "ctype": "miscellaneous", "subtype": "variable", "file": "src/placeholder/placeholder.module.ts", "deprecated": false, "deprecationMessage": "", "type": "object", "defaultValue": "{\n\tprovide: PlaceholderService,\n\tdeps: [[new Optional(), new SkipSelf(), PlaceholderService]],\n\tuseFactory: PLACEHOLDER_SERVICE_PROVIDER_FACTORY\n}" } ], "src/patterns/loading/progressive-loading.stories.ts": [ { "name": "ProgressiveLoading", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/loading/progressive-loading.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/loading/progressive-loading.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" } ], "src/dialog/overflow-menu/overflow-menu-option.component.ts": [ { "name": "REL", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dialog/overflow-menu/overflow-menu-option.component.ts", "deprecated": false, "deprecationMessage": "", "type": "string", "defaultValue": "\"noreferrer noopener\"", "rawdescription": "Security HTML anchor rel when target is set", "description": "

    Security HTML anchor rel when target is set

    \n" } ], "src/i18n/i18n.service.ts": [ { "name": "replace", "ctype": "miscellaneous", "subtype": "variable", "file": "src/i18n/i18n.service.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(subject, variables) => subject.pipe(\n\tmap(str => {\n\t\tconst keys = Object.keys(variables);\n\t\tfor (const key of keys) {\n\t\t\tconst value = variables[key];\n\t\t\tstr = str.replace(new RegExp(`{{\\\\s*${key}\\\\s*}}`, \"g\"), value);\n\t\t}\n\t\treturn str;\n\t})\n)", "rawdescription": "Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n\nThe keys specify the variable name in the string.\n\nExample:\n```typescript\nservice.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n\nservice.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n```\n\nProduces: `\"test asdf\"`", "description": "

    Takes the Observable returned from i18n.get and an object of variables to replace.

    \n

    The keys specify the variable name in the string.

    \n

    Example:

    \nExample :
    service.set({ "TEST": "{{foo}} {{bar}}" });\n\nservice.replace(service.get("TEST"), { foo: "test", bar: "asdf" })

    Produces: "test asdf"

    \n" } ], "src/patterns/filtering/single-selection.stories.ts": [ { "name": "SingleSelection", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/filtering/single-selection.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" }, { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/filtering/single-selection.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" } ], "src/common/tab.service.ts": [ { "name": "tabbableSelector", "ctype": "miscellaneous", "subtype": "variable", "file": "src/common/tab.service.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "\"a[href], area[href], input:not([disabled]):not([tabindex=\\'-1\\']), \" +\n\t\t\"button:not([disabled]):not([tabindex=\\'-1\\']),select:not([disabled]):not([tabindex=\\'-1\\']), \" +\n\t\t\"textarea:not([disabled]):not([tabindex=\\'-1\\']), \" +\n\t\t\"iframe, object, embed, *[tabindex]:not([tabindex=\\'-1\\']), *[contenteditable=true]\"" }, { "name": "tabbableSelectorIgnoreTabIndex", "ctype": "miscellaneous", "subtype": "variable", "file": "src/common/tab.service.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "\"a[href], area[href], input:not([disabled]), \" +\n\t\t\"button:not([disabled]),select:not([disabled]), \" +\n\t\t\"textarea:not([disabled]), \" +\n\t\t\"iframe, object, embed, *[tabindex], *[contenteditable=true]\"" } ], "src/index.stories.ts": [ { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/index.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "Welcome", "ctype": "miscellaneous", "subtype": "variable", "file": "src/index.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" } ], "src/patterns/dialogs/modal-with-table.stories.ts": [ { "name": "Template", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/dialogs/modal-with-table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t\n\t\t\n\t`\n})" }, { "name": "WithDataTable", "ctype": "miscellaneous", "subtype": "variable", "file": "src/patterns/dialogs/modal-with-table.stories.ts", "deprecated": false, "deprecationMessage": "", "type": "", "defaultValue": "Template.bind({})" } ], "src/dropdown/dropdowntools.ts": [ { "name": "treetools", "ctype": "miscellaneous", "subtype": "variable", "file": "src/dropdown/dropdowntools.ts", "deprecated": false, "deprecationMessage": "", "type": "object", "defaultValue": "{\n\t/** finds an item in a set of items and returns the item and path to the item as an array */\n\tfind: function(items, itemToFind, path = []) {\n\t\tlet found;\n\t\tfor (let i of items) {\n\t\t\tif (i === itemToFind) {\n\t\t\t\tpath.push(i);\n\t\t\t\tfound = i;\n\t\t\t}\n\t\t\tif (i.items && !found) {\n\t\t\t\tpath.push(i);\n\t\t\t\tfound = this.find(i.items, itemToFind, path).found;\n\t\t\t\tif (!found) { path = []; }\n\t\t\t}\n\t\t}\n\t\treturn {found, path};\n\t}\n}", "rawdescription": "bundle of functions to aid in manipulating tree structures", "description": "

    bundle of functions to aid in manipulating tree structures

    \n" } ] }, "groupedFunctions": { "src/utils/utils.module.ts": [ { "name": "ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY", "file": "src/utils/utils.module.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "parentService", "type": "AnimationFrameServiceSingleton", "deprecated": false, "deprecationMessage": "" }, { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "parentService", "type": "AnimationFrameServiceSingleton", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "ngZone", "type": "NgZone", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "DOCUMENT_SERVICE_PROVIDER_FACTORY", "file": "src/utils/utils.module.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "parentService", "type": "DocumentService", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "parentService", "type": "DocumentService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "src/utils/utils.ts": [ { "name": "clone", "file": "src/utils/utils.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "obj", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "obj", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "closestAttr", "file": "src/utils/utils.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "s", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "t", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "s", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "t", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "matchesAttr", "file": "src/utils/utils.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "el", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "attr", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "val", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "el", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "attr", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "val", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "src/common/tab.service.ts": [ { "name": "cycleTabs", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "focusFirstFocusableElement", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "focusLastFocusableElement", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "getFocusElementList", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "selector", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "tabbableSelector" } ], "jsdoctags": [ { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "selector", "type": "", "deprecated": false, "deprecationMessage": "", "defaultValue": "tabbableSelector", "tagName": { "text": "param" } } ] }, { "name": "isElementFocused", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isFocusInFirstItem", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isFocusInLastItem", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "event", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "list", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "isVisible", "file": "src/common/tab.service.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "element", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "src/experimental/experimental.module.ts": [ { "name": "EXPERIMENTAL_SERVICE_PROVIDER_FACTORY", "file": "src/experimental/experimental.module.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "parentService", "type": "ExperimentalService", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "parentService", "type": "ExperimentalService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "src/utils/a11y.ts": [ { "name": "findNextElem", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "target", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "target", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "findPrevElem", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "target", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "target", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "findSiblingElem", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "target", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "direction", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "target", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "direction", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] }, { "name": "focusNextElem", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "elem", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "rootElem", "type": "null", "deprecated": false, "deprecationMessage": "", "defaultValue": "null" } ], "jsdoctags": [ { "name": "elem", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "rootElem", "type": "null", "deprecated": false, "deprecationMessage": "", "defaultValue": "null", "tagName": { "text": "param" } } ] }, { "name": "focusNextTree", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "elem", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "rootElem", "type": "null", "deprecated": false, "deprecationMessage": "", "defaultValue": "null" } ], "jsdoctags": [ { "name": "elem", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "rootElem", "type": "null", "deprecated": false, "deprecationMessage": "", "defaultValue": "null", "tagName": { "text": "param" } } ] }, { "name": "focusPrevElem", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "elem", "type": "", "deprecated": false, "deprecationMessage": "" }, { "name": "parentRef", "type": "null", "deprecated": false, "deprecationMessage": "", "defaultValue": "null" } ], "jsdoctags": [ { "name": "elem", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } }, { "name": "parentRef", "type": "null", "deprecated": false, "deprecationMessage": "", "defaultValue": "null", "tagName": { "text": "param" } } ] }, { "name": "HcModeChecker", "file": "src/utils/a11y.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [] } ], "src/table/table.stories.ts": [ { "name": "getModelWithDisabledRows", "file": "src/table/table.stories.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [] } ], "src/utils/window-tools.ts": [ { "name": "getScrollbarWidth", "file": "src/utils/window-tools.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [] } ], "src/i18n/i18n.module.ts": [ { "name": "I18N_SERVICE_PROVIDER_FACTORY", "file": "src/i18n/i18n.module.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "parentService", "type": "I18n", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "parentService", "type": "I18n", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "src/icon/icon.module.ts": [ { "name": "ICON_SERVICE_PROVIDER_FACTORY", "file": "src/icon/icon.module.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "parentService", "type": "IconService", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "parentService", "type": "IconService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "src/exported-tests/component-tests.ts": [ { "name": "isObject", "file": "src/exported-tests/component-tests.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "val", "type": "", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "val", "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "src/placeholder/placeholder.module.ts": [ { "name": "PLACEHOLDER_SERVICE_PROVIDER_FACTORY", "file": "src/placeholder/placeholder.module.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "", "args": [ { "name": "parentService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "" } ], "jsdoctags": [ { "name": "parentService", "type": "PlaceholderService", "deprecated": false, "deprecationMessage": "", "tagName": { "text": "param" } } ] } ], "src/common/utils.ts": [ { "name": "range", "file": "src/common/utils.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "

    Does what python's range function does, with a slightly different\nsignature because of Typescript limitations.

    \n

    Useful for numbered loops in angular templates, since we can do\na normal for loop.

    \n", "args": [ { "name": "stop", "type": "number", "deprecated": false, "deprecationMessage": "" }, { "name": "start", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0" }, { "name": "step", "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "1" } ], "jsdoctags": [ { "name": { "pos": 239, "end": 243, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "stop" }, "type": "number", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 233, "end": 238, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    Generate numbers up to, but not including this number

    \n" }, { "name": { "pos": 309, "end": 314, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "start" }, "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "0", "tagName": { "pos": 302, "end": 307, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    Starting number of the sequence

    \n" }, { "name": { "pos": 361, "end": 365, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "step" }, "type": "number", "deprecated": false, "deprecationMessage": "", "defaultValue": "1", "tagName": { "pos": 354, "end": 359, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    Difference between each number in the sequence

    \n" }, { "tagName": { "pos": 420, "end": 427, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "returns" }, "comment": "

    an array with resulting numbers

    \n" } ] } ], "src/dropdown/dropdowntools.ts": [ { "name": "watchFocusJump", "file": "src/dropdown/dropdowntools.ts", "ctype": "miscellaneous", "subtype": "function", "deprecated": false, "deprecationMessage": "", "description": "

    returns an observable bound to keydown events that\nfilters to a single element where the first letter of\nit's textContent matches the key pressed

    \n", "args": [ { "name": "target", "type": "HTMLElement", "deprecated": false, "deprecationMessage": "" }, { "name": "elements", "type": "", "deprecated": false, "deprecationMessage": "" } ], "returnType": "Observable", "jsdoctags": [ { "name": { "pos": 279, "end": 285, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "target" }, "type": "HTMLElement", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 273, "end": 278, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    element to watch

    \n" }, { "name": { "pos": 313, "end": 321, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "elements" }, "type": "", "deprecated": false, "deprecationMessage": "", "tagName": { "pos": 307, "end": 312, "flags": 16777216, "modifierFlagsCache": 0, "transformFlags": 0, "kind": 80, "escapedText": "param" }, "comment": "

    elements to search

    \n" } ] } ] }, "groupedEnumerations": { "src/modal/alert-modal.interface.ts": [ { "name": "AlertModalType", "childs": [ { "name": "default", "deprecated": false, "deprecationMessage": "", "value": "default" }, { "name": "danger", "deprecated": false, "deprecationMessage": "", "value": "danger" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/modal/alert-modal.interface.ts" }, { "name": "ModalButtonType", "childs": [ { "name": "primary", "deprecated": false, "deprecationMessage": "", "value": "primary" }, { "name": "secondary", "deprecated": false, "deprecationMessage": "", "value": "secondary" }, { "name": "tertiary", "deprecated": false, "deprecationMessage": "", "value": "tertiary" }, { "name": "ghost", "deprecated": false, "deprecationMessage": "", "value": "ghost" }, { "name": "danger", "deprecated": false, "deprecationMessage": "", "value": "danger" }, { "name": "danger_primary", "deprecated": false, "deprecationMessage": "", "value": "danger--primary" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/modal/alert-modal.interface.ts" } ], "src/checkbox/checkbox.component.ts": [ { "name": "CheckboxState", "childs": [ { "name": "Init", "deprecated": false, "deprecationMessage": "" }, { "name": "Indeterminate", "deprecated": false, "deprecationMessage": "" }, { "name": "Checked", "deprecated": false, "deprecationMessage": "" }, { "name": "Unchecked", "deprecated": false, "deprecationMessage": "" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "

    Defines the set of states for a checkbox component.

    \n", "file": "src/checkbox/checkbox.component.ts" } ], "src/dialog/dialog-config.interface.ts": [ { "name": "CloseReasons", "childs": [ { "name": "destroyed", "deprecated": false, "deprecationMessage": "" }, { "name": "programmatic", "deprecated": false, "deprecationMessage": "" }, { "name": "interaction", "deprecated": false, "deprecationMessage": "" }, { "name": "hidden", "deprecated": false, "deprecationMessage": "" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "

    An enum of the various reasons a dialog may close. For use with CloseMeta and shouldClose

    \n

    It's expected that interaction will be a common closure reason.

    \n", "file": "src/dialog/dialog-config.interface.ts" } ], "src/contained-list/contained-list.enums.ts": [ { "name": "ContainedListKind", "childs": [ { "name": "OnPage", "deprecated": false, "deprecationMessage": "", "value": "on-page" }, { "name": "Disclosed", "deprecated": false, "deprecationMessage": "", "value": "disclosed" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/contained-list/contained-list.enums.ts" }, { "name": "ContainedListSize", "childs": [ { "name": "Small", "deprecated": false, "deprecationMessage": "", "value": "sm" }, { "name": "Medium", "deprecated": false, "deprecationMessage": "", "value": "md" }, { "name": "Large", "deprecated": false, "deprecationMessage": "", "value": "lg" }, { "name": "ExtraLarge", "deprecated": false, "deprecationMessage": "", "value": "xl" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/contained-list/contained-list.enums.ts" } ], "src/inline-loading/inline-loading.component.ts": [ { "name": "InlineLoadingState", "childs": [ { "name": "Hidden", "deprecated": false, "deprecationMessage": "", "value": "hidden" }, { "name": "Inactive", "deprecated": false, "deprecationMessage": "", "value": "inactive" }, { "name": "Active", "deprecated": false, "deprecationMessage": "", "value": "active" }, { "name": "Finished", "deprecated": false, "deprecationMessage": "", "value": "finished" }, { "name": "Error", "deprecated": false, "deprecationMessage": "", "value": "error" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/inline-loading/inline-loading.component.ts" } ], "src/code-snippet/code-snippet.component.ts": [ { "name": "SnippetType", "childs": [ { "name": "single", "deprecated": false, "deprecationMessage": "", "value": "single" }, { "name": "multi", "deprecated": false, "deprecationMessage": "", "value": "multi" }, { "name": "inline", "deprecated": false, "deprecationMessage": "", "value": "inline" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/code-snippet/code-snippet.component.ts" } ], "src/table/table-adapter.class.ts": [ { "name": "TableDomSpanDirection", "childs": [ { "name": "colSpan", "deprecated": false, "deprecationMessage": "", "value": "colSpan" }, { "name": "rowSpan", "deprecated": false, "deprecationMessage": "", "value": "rowSpan" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "", "file": "src/table/table-adapter.class.ts" } ], "src/dialog/overflow-menu/overflow-menu-option.component.ts": [ { "name": "Target", "childs": [ { "name": "self", "deprecated": false, "deprecationMessage": "", "value": "_self" }, { "name": "blank", "deprecated": false, "deprecationMessage": "", "value": "_blank" }, { "name": "parent", "deprecated": false, "deprecationMessage": "", "value": "_parent" }, { "name": "top", "deprecated": false, "deprecationMessage": "", "value": "_top" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": false, "deprecationMessage": "", "description": "

    Available HTML anchor targets

    \n", "file": "src/dialog/overflow-menu/overflow-menu-option.component.ts" } ], "src/toggle/toggle.component.ts": [ { "name": "ToggleState", "childs": [ { "name": "Init", "deprecated": false, "deprecationMessage": "" }, { "name": "Checked", "deprecated": false, "deprecationMessage": "" }, { "name": "Unchecked", "deprecated": false, "deprecationMessage": "" } ], "ctype": "miscellaneous", "subtype": "enum", "deprecated": true, "deprecationMessage": "since v5 - Use boolean\nDefines the set of states for a toggle component.", "description": "", "file": "src/toggle/toggle.component.ts" } ] }, "groupedTypeAliases": { "src/button/button.types.ts": [ { "name": "ButtonSize", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"", "file": "src/button/button.types.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "ButtonType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | DangerButtonType", "file": "src/button/button.types.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "DangerButtonType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"danger--primary\" | \"danger--tertiary\" | \"danger--ghost\"", "file": "src/button/button.types.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 } ], "src/checkbox/checkbox.types.ts": [ { "name": "CheckboxValue", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "boolean | \"on\" | \"off\"", "file": "src/checkbox/checkbox.types.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 } ], "src/combo-button/combo-button.component.ts": [ { "name": "ComboButtonPlacement", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\"", "file": "src/combo-button/combo-button.component.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 } ], "src/utils/types.ts": [ { "name": "EventHandler", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "function", "file": "src/utils/types.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 184 } ], "src/table/table-model.class.ts": [ { "name": "HeaderType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "number | \"select\" | \"expand\"", "file": "src/table/table-model.class.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 } ], "src/menu-button/menu-button.component.ts": [ { "name": "MenuButtonPlacement", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\"", "file": "src/menu-button/menu-button.component.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 } ], "src/notification/notification-content.interface.ts": [ { "name": "NotificationType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\"", "file": "src/notification/notification-content.interface.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 }, { "name": "NotificationVariants", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"inline\" | \"toast\"", "file": "src/notification/notification-content.interface.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 } ], "src/popover/popover.directive.ts": [ { "name": "oldPlacement", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\" | \"left-bottom\" | \"left-top\" | \"right-bottom\" | \"right-top\"", "file": "src/popover/popover.directive.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 } ], "src/table/table-header-item.class.ts": [ { "name": "SortType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"ASCENDING\" | \"DESCENDING\" | \"NONE\"", "file": "src/table/table-header-item.class.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 } ], "src/table/table.types.ts": [ { "name": "TableRowSize", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"", "file": "src/table/table.types.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 } ], "src/tag/tag.component.ts": [ { "name": "TagType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"red\" | \"magenta\" | \"purple\" | \"blue\" | \"cyan\" | \"teal\" | \"green\" | \"gray\" | \"cool-gray\" | \"warm-gray\" | \"high-contrast\" | \"outline\"", "file": "src/tag/tag.component.ts", "deprecated": false, "deprecationMessage": "", "description": "

    Supported tag types for carbon v10

    \n", "kind": 192 } ], "src/theme/theme.directive.ts": [ { "name": "ThemeType", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"white\" | \"g10\" | \"g90\" | \"g100\"", "file": "src/theme/theme.directive.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 } ], "src/tooltip/tooltip.interface.ts": [ { "name": "TooltipAlignments", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"", "file": "src/tooltip/tooltip.interface.ts", "deprecated": false, "deprecationMessage": "", "description": "", "kind": 192 } ], "src/i18n/i18n.service.ts": [ { "name": "TranslationStrings", "ctype": "miscellaneous", "subtype": "typealias", "rawtype": "literal type", "file": "src/i18n/i18n.service.ts", "deprecated": false, "deprecationMessage": "", "description": "

    An object of strings, should follow the same format as src/i18n/en.json

    \n", "kind": 187 } ] } }, "routes": [], "coverage": { "count": 14, "status": "low", "files": [ { "filePath": "src/accordion/accordion-item.component.ts", "type": "component", "linktype": "component", "name": "AccordionItem", "coveragePercent": 0, "coverageCount": "0/15", "status": "low" }, { "filePath": "src/accordion/accordion.component.ts", "type": "component", "linktype": "component", "name": "Accordion", "coveragePercent": 40, "coverageCount": "2/5", "status": "medium" }, { "filePath": "src/accordion/accordion.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/accordion/accordion.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/accordion/accordion.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/accordion/accordion.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithSkeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/accordion/accordion.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithTitle", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/accordion/accordion.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithTitleTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb-item.component.ts", "type": "component", "linktype": "component", "name": "BreadcrumbItemComponent", "coveragePercent": 23, "coverageCount": "3/13", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb-item.interface.ts", "type": "interface", "linktype": "interface", "name": "BreadcrumbItem", "coveragePercent": 100, "coverageCount": "8/8", "status": "very-good" }, { "filePath": "src/breadcrumb/breadcrumb.component.ts", "type": "component", "linktype": "component", "name": "Breadcrumb", "coveragePercent": 25, "coverageCount": "3/12", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.component.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "MINIMUM_OVERFLOW_THRESHOLD", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "breadcrumbItems", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "createBreadcrumbItems", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CurrentPage", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CurrentPageTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Model", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ModelTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ModelWithTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ModelWTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithSkeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/breadcrumb/breadcrumb.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/button/base-icon-button.component.ts", "type": "component", "linktype": "component", "name": "BaseIconButton", "coveragePercent": 100, "coverageCount": "9/9", "status": "very-good" }, { "filePath": "src/button/button-set.component.ts", "type": "component", "linktype": "component", "name": "ButtonSet", "coveragePercent": 33, "coverageCount": "1/3", "status": "medium" }, { "filePath": "src/button/button-set.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/button/button-set.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/button/button.directive.ts", "type": "directive", "linktype": "directive", "name": "Button", "coveragePercent": 23, "coverageCount": "6/26", "status": "low" }, { "filePath": "src/button/button.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/button/button.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/button/button.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithIcon", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/button/button.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithIconTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/button/icon-button.component.ts", "type": "component", "linktype": "component", "name": "IconButton", "coveragePercent": 77, "coverageCount": "21/27", "status": "very-good" }, { "filePath": "src/button/icon-button.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "AutoAlignTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/button/icon-button.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/button/icon-button.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/button/icon-button.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithAutoAlign", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/checkbox/checkbox-exported-tests.ts", "type": "class", "linktype": "classe", "name": "CheckboxExportedTests", "coveragePercent": 0, "coverageCount": "0/8", "status": "low" }, { "filePath": "src/checkbox/checkbox-exported-tests.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "defaults", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/checkbox/checkbox.component.ts", "type": "component", "linktype": "component", "name": "Checkbox", "coveragePercent": 88, "coverageCount": "30/34", "status": "very-good" }, { "filePath": "src/checkbox/checkbox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/checkbox/checkbox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ModelTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/checkbox/checkbox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ReactiveTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/checkbox/checkbox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/checkbox/checkbox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithNgModel", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/checkbox/checkbox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithReactiveForms", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/checkbox/stories/reactive-form.component.ts", "type": "component", "linktype": "component", "name": "ReactiveFormsStory", "coveragePercent": 0, "coverageCount": "0/4", "status": "low" }, { "filePath": "src/code-snippet/code-snippet.component.ts", "type": "component", "linktype": "component", "name": "CodeSnippet", "coveragePercent": 45, "coverageCount": "21/46", "status": "medium" }, { "filePath": "src/code-snippet/code-snippet.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/code-snippet/code-snippet.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Inline", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/code-snippet/code-snippet.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "InlineTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/code-snippet/code-snippet.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Multi", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/code-snippet/code-snippet.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "MultiTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/code-snippet/code-snippet.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/code-snippet/code-snippet.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SkeletonTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/code-snippet/code-snippet.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combo-button/combo-button.component.ts", "type": "component", "linktype": "component", "name": "ComboButtonComponent", "coveragePercent": 22, "coverageCount": "6/27", "status": "low" }, { "filePath": "src/combo-button/combo-button.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combo-button/combo-button.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.component.ts", "type": "component", "linktype": "component", "name": "ComboBox", "coveragePercent": 69, "coverageCount": "51/73", "status": "good" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "BasicMax", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "BasicMaxTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Dynamic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DynamicTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Fluid", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "MockQuerySearch", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "MockQueryTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Multiselect", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "MultiTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ReactiveForms", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ReactiveTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/combobox.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/combobox/stories/app-dynamic-list-combobox.component.ts", "type": "component", "linktype": "component", "name": "DynamicListComboBox", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/combobox/stories/app-mock-query-search.component.ts", "type": "component", "linktype": "component", "name": "MockQueryCombobox", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/combobox/stories/app-reactive-combobox.component.ts", "type": "component", "linktype": "component", "name": "ReactiveFormsCombobox", "coveragePercent": 0, "coverageCount": "0/14", "status": "low" }, { "filePath": "src/common/tab.service.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "cycleTabs", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/common/tab.service.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "focusFirstFocusableElement", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/common/tab.service.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "focusLastFocusableElement", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/common/tab.service.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "getFocusElementList", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/common/tab.service.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "isElementFocused", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/common/tab.service.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "isFocusInFirstItem", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/common/tab.service.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "isFocusInLastItem", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/common/tab.service.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "isVisible", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/common/tab.service.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "tabbableSelector", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/common/tab.service.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "tabbableSelectorIgnoreTabIndex", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/common/utils.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "range", "coveragePercent": 100, "coverageCount": "1/1", "status": "very-good" }, { "filePath": "src/contained-list/contained-list-item.component.ts", "type": "component", "linktype": "component", "name": "ContainedListItem", "coveragePercent": 80, "coverageCount": "12/15", "status": "very-good" }, { "filePath": "src/contained-list/contained-list.component.ts", "type": "component", "linktype": "component", "name": "ContainedList", "coveragePercent": 90, "coverageCount": "10/11", "status": "very-good" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "basicTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "disclosed", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "disclosedTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "usageExamples", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "usageExamplesTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withActions", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withActionsAndContextData", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withActionsTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withIcons", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withIconsTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withInteractiveItems", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withInteractiveItemsAndActions", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withInteractiveItemsAndActionsTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withInteractiveItemsTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withLayer", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withLayerTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withListTitleDecorators", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/contained-list/contained-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "withListTitleDecoratorsTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/content-switcher/content-switcher-option.directive.ts", "type": "directive", "linktype": "directive", "name": "ContentSwitcherOption", "coveragePercent": 14, "coverageCount": "3/21", "status": "low" }, { "filePath": "src/content-switcher/content-switcher.component.ts", "type": "component", "linktype": "component", "name": "ContentSwitcher", "coveragePercent": 37, "coverageCount": "3/8", "status": "medium" }, { "filePath": "src/content-switcher/content-switcher.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/content-switcher/content-switcher.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/context-menu/context-menu-divider.component.ts", "type": "component", "linktype": "component", "name": "ContextMenuDividerComponent", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/context-menu/context-menu-group.component.ts", "type": "component", "linktype": "component", "name": "ContextMenuGroupComponent", "coveragePercent": 0, "coverageCount": "0/10", "status": "low" }, { "filePath": "src/context-menu/context-menu-item.component.ts", "type": "component", "linktype": "component", "name": "ContextMenuItemComponent", "coveragePercent": 0, "coverageCount": "0/43", "status": "low" }, { "filePath": "src/context-menu/context-menu-selection.service.ts", "type": "injectable", "linktype": "injectable", "name": "ContextMenuSelectionService", "coveragePercent": 0, "coverageCount": "0/6", "status": "low" }, { "filePath": "src/context-menu/context-menu.component.ts", "type": "component", "linktype": "component", "name": "ContextMenuComponent", "coveragePercent": 11, "coverageCount": "2/17", "status": "low" }, { "filePath": "src/context-menu/context-menu.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/context-menu/context-menu.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/context-menu/context-menu.types.ts", "type": "interface", "linktype": "interface", "name": "ItemClickEvent", "coveragePercent": 0, "coverageCount": "0/6", "status": "low" }, { "filePath": "src/datepicker-input/datepicker-input.component.ts", "type": "component", "linktype": "component", "name": "DatePickerInput", "coveragePercent": 21, "coverageCount": "6/28", "status": "low" }, { "filePath": "src/datepicker/carbon-flatpickr-month-select.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "carbonFlatpickrMonthSelectPlugin", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/datepicker/carbon-flatpickr-month-select.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "config", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/datepicker/carbon-flatpickr-month-select.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "monthToStr", "coveragePercent": 100, "coverageCount": "1/1", "status": "very-good" }, { "filePath": "src/datepicker/datepicker.component.ts", "type": "component", "linktype": "component", "name": "DatePicker", "coveragePercent": 43, "coverageCount": "20/46", "status": "medium" }, { "filePath": "src/datepicker/datepicker.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/datepicker/datepicker.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Range", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/datepicker/datepicker.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "RangeTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/datepicker/datepicker.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Single", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/datepicker/datepicker.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SingleTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/datepicker/datepicker.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/datepicker/datepicker.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SkeletonTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/datepicker/datepicker.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dialog/dialog-config.interface.ts", "type": "interface", "linktype": "interface", "name": "CloseMeta", "coveragePercent": 33, "coverageCount": "1/3", "status": "medium" }, { "filePath": "src/dialog/dialog-config.interface.ts", "type": "interface", "linktype": "interface", "name": "DialogConfig", "coveragePercent": 100, "coverageCount": "15/15", "status": "very-good" }, { "filePath": "src/dialog/dialog.component.ts", "type": "component", "linktype": "component", "name": "Dialog", "coveragePercent": 100, "coverageCount": "15/15", "status": "very-good" }, { "filePath": "src/dialog/dialog.directive.ts", "type": "directive", "linktype": "directive", "name": "DialogDirective", "coveragePercent": 68, "coverageCount": "20/29", "status": "good" }, { "filePath": "src/dialog/dialog.service.ts", "type": "injectable", "linktype": "injectable", "name": "DialogService", "coveragePercent": 100, "coverageCount": "6/6", "status": "very-good" }, { "filePath": "src/dialog/overflow-menu/overflow-menu-custom-pane.component.ts", "type": "component", "linktype": "component", "name": "OverflowMenuCustomPane", "coveragePercent": 81, "coverageCount": "13/16", "status": "very-good" }, { "filePath": "src/dialog/overflow-menu/overflow-menu-option.component.ts", "type": "component", "linktype": "component", "name": "OverflowMenuOption", "coveragePercent": 35, "coverageCount": "7/20", "status": "medium" }, { "filePath": "src/dialog/overflow-menu/overflow-menu-option.component.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "REL", "coveragePercent": 100, "coverageCount": "1/1", "status": "very-good" }, { "filePath": "src/dialog/overflow-menu/overflow-menu-pane.component.ts", "type": "component", "linktype": "component", "name": "OverflowMenuPane", "coveragePercent": 64, "coverageCount": "11/17", "status": "good" }, { "filePath": "src/dialog/overflow-menu/overflow-menu.component.ts", "type": "component", "linktype": "component", "name": "OverflowMenu", "coveragePercent": 54, "coverageCount": "12/22", "status": "good" }, { "filePath": "src/dialog/overflow-menu/overflow-menu.directive.ts", "type": "directive", "linktype": "directive", "name": "OverflowMenuDirective", "coveragePercent": 58, "coverageCount": "21/36", "status": "good" }, { "filePath": "src/dialog/overflow-menu/overflow-menu.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dialog/overflow-menu/overflow-menu.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Custom", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dialog/overflow-menu/overflow-menu.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CustomTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dialog/overflow-menu/overflow-menu.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CustomTrigger", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dialog/overflow-menu/overflow-menu.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CustomTriggerTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dialog/overflow-menu/overflow-menu.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "LinkTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dialog/overflow-menu/overflow-menu.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dialog/overflow-menu/overflow-menu.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithLink", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/documentation-component/documentation.component.ts", "type": "component", "linktype": "component", "name": "Documentation", "coveragePercent": 25, "coverageCount": "1/4", "status": "low" }, { "filePath": "src/dropdown/abstract-dropdown-view.class.ts", "type": "directive", "linktype": "directive", "name": "AbstractDropdownView", "coveragePercent": 90, "coverageCount": "20/22", "status": "very-good" }, { "filePath": "src/dropdown/dropdown.component.ts", "type": "component", "linktype": "component", "name": "Dropdown", "coveragePercent": 68, "coverageCount": "51/75", "status": "good" }, { "filePath": "src/dropdown/dropdown.service.ts", "type": "injectable", "linktype": "injectable", "name": "DropdownService", "coveragePercent": 60, "coverageCount": "3/5", "status": "good" }, { "filePath": "src/dropdown/dropdown.service.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "defaultOffset", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dropdown/dropdown.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dropdown/dropdown.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Fluid", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dropdown/dropdown.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Multiselect", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dropdown/dropdown.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "MultiTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dropdown/dropdown.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "NgTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dropdown/dropdown.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ReactiveForms", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dropdown/dropdown.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ReactiveTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dropdown/dropdown.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dropdown/dropdown.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/dropdown/dropdowntools.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "watchFocusJump", "coveragePercent": 100, "coverageCount": "1/1", "status": "very-good" }, { "filePath": "src/dropdown/dropdowntools.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "treetools", "coveragePercent": 100, "coverageCount": "1/1", "status": "very-good" }, { "filePath": "src/dropdown/list-item.interface.ts", "type": "interface", "linktype": "interface", "name": "ListItem", "coveragePercent": 100, "coverageCount": "5/5", "status": "very-good" }, { "filePath": "src/dropdown/list/dropdown-list.component.ts", "type": "component", "linktype": "component", "name": "DropdownList", "coveragePercent": 73, "coverageCount": "31/42", "status": "good" }, { "filePath": "src/dropdown/list/scroll-custom-event.interface.ts", "type": "interface", "linktype": "interface", "name": "ScrollCustomEvent", "coveragePercent": 100, "coverageCount": "4/4", "status": "very-good" }, { "filePath": "src/dropdown/scrollable-list.directive.ts", "type": "directive", "linktype": "directive", "name": "ScrollableList", "coveragePercent": 41, "coverageCount": "5/12", "status": "medium" }, { "filePath": "src/dropdown/stories/app-reactive-forms.component.ts", "type": "component", "linktype": "component", "name": "ReactiveFormsStory", "coveragePercent": 0, "coverageCount": "0/13", "status": "low" }, { "filePath": "src/experimental/experimental.module.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "EXPERIMENTAL_SERVICE_PROVIDER_FACTORY", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/experimental/experimental.module.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "EXPERIMENTAL_SERVICE_PROVIDER", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/experimental/experimental.service.ts", "type": "injectable", "linktype": "injectable", "name": "ExperimentalService", "coveragePercent": 83, "coverageCount": "5/6", "status": "very-good" }, { "filePath": "src/experimental/experimental.service.ts", "type": "interface", "linktype": "interface", "name": "Experiment", "coveragePercent": 50, "coverageCount": "1/2", "status": "medium" }, { "filePath": "src/exported-tests/component-tests.ts", "type": "class", "linktype": "classe", "name": "ComponentTests", "coveragePercent": 0, "coverageCount": "0/7", "status": "low" }, { "filePath": "src/exported-tests/component-tests.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "isObject", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-item.interface.ts", "type": "interface", "linktype": "interface", "name": "FileItem", "coveragePercent": 0, "coverageCount": "0/7", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.component.ts", "type": "component", "linktype": "component", "name": "FileUploader", "coveragePercent": 70, "coverageCount": "24/34", "status": "good" }, { "filePath": "src/file-uploader/file-uploader.component.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "noop", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CustomFile", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DragAndDrop", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DragAndDropTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ModelTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "NgModel", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ReactiveForms", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ReactiveTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SkeletonTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file-uploader.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "UploaderWithCustomFile", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file.component.ts", "type": "component", "linktype": "component", "name": "FileComponent", "coveragePercent": 26, "coverageCount": "4/15", "status": "medium" }, { "filePath": "src/file-uploader/file.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "BasicFile", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "BasicFileTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CustomFile", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/file.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CustomFileTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/file-uploader/stories/basic-file.component.ts", "type": "component", "linktype": "component", "name": "BasicFileStory", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/file-uploader/stories/custom-file.component.ts", "type": "component", "linktype": "component", "name": "CustomFileStory", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/file-uploader/stories/drag-drop.component.ts", "type": "component", "linktype": "component", "name": "DragAndDropStory", "coveragePercent": 0, "coverageCount": "0/11", "status": "low" }, { "filePath": "src/file-uploader/stories/uploader-custom-file.component.ts", "type": "component", "linktype": "component", "name": "FileUploaderWithCustomFileStory", "coveragePercent": 0, "coverageCount": "0/17", "status": "low" }, { "filePath": "src/file-uploader/stories/uploader-form.component.ts", "type": "component", "linktype": "component", "name": "NgModelFileUploaderStory", "coveragePercent": 0, "coverageCount": "0/12", "status": "low" }, { "filePath": "src/file-uploader/stories/uploader-reactive-form.component.ts", "type": "component", "linktype": "component", "name": "ReactiveFormsStory", "coveragePercent": 0, "coverageCount": "0/15", "status": "low" }, { "filePath": "src/file-uploader/stories/uploader.component.ts", "type": "component", "linktype": "component", "name": "FileUploaderStory", "coveragePercent": 0, "coverageCount": "0/13", "status": "low" }, { "filePath": "src/grid/column.directive.ts", "type": "directive", "linktype": "directive", "name": "ColumnDirective", "coveragePercent": 42, "coverageCount": "3/7", "status": "medium" }, { "filePath": "src/grid/css-grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/css-grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "GridStart", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/css-grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "GridStartTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/css-grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Responsive", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/css-grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ResponsiveTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/css-grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Subgrid", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/css-grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SubgridTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/css-grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/grid.directive.ts", "type": "directive", "linktype": "directive", "name": "GridDirective", "coveragePercent": 27, "coverageCount": "5/18", "status": "medium" }, { "filePath": "src/grid/grid.service.ts", "type": "injectable", "linktype": "injectable", "name": "GridService", "coveragePercent": 25, "coverageCount": "1/4", "status": "low" }, { "filePath": "src/grid/grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CondensedRow", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CondensedRowTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "NarrowRow", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "NarrowRowTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Offset", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "OffsetTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Responsive", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ResponsiveTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/grid.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/grid/row.directive.ts", "type": "directive", "linktype": "directive", "name": "RowDirective", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/i18n/i18n.module.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "I18N_SERVICE_PROVIDER_FACTORY", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/i18n/i18n.module.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "I18N_SERVICE_PROVIDER", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/i18n/i18n.service.ts", "type": "class", "linktype": "classe", "name": "Overridable", "coveragePercent": 66, "coverageCount": "2/3", "status": "good" }, { "filePath": "src/i18n/i18n.service.ts", "type": "injectable", "linktype": "injectable", "name": "I18n", "coveragePercent": 100, "coverageCount": "10/10", "status": "very-good" }, { "filePath": "src/i18n/i18n.service.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "replace", "coveragePercent": 100, "coverageCount": "1/1", "status": "very-good" }, { "filePath": "src/i18n/replace.pipe.ts", "type": "pipe", "linktype": "pipe", "name": "ReplacePipe", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/icon/icon.directive.ts", "type": "directive", "linktype": "directive", "name": "IconDirective", "coveragePercent": 8, "coverageCount": "1/12", "status": "low" }, { "filePath": "src/icon/icon.module.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "ICON_SERVICE_PROVIDER_FACTORY", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/icon/icon.module.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ICON_SERVICE_PROVIDER", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/icon/icon.service.ts", "type": "class", "linktype": "classe", "name": "IconCache", "coveragePercent": 100, "coverageCount": "3/3", "status": "very-good" }, { "filePath": "src/icon/icon.service.ts", "type": "class", "linktype": "classe", "name": "IconMemoryCache", "coveragePercent": 33, "coverageCount": "1/3", "status": "medium" }, { "filePath": "src/icon/icon.service.ts", "type": "class", "linktype": "classe", "name": "IconNameNotFoundError", "coveragePercent": 50, "coverageCount": "1/2", "status": "medium" }, { "filePath": "src/icon/icon.service.ts", "type": "class", "linktype": "classe", "name": "IconSizeNotFoundError", "coveragePercent": 50, "coverageCount": "1/2", "status": "medium" }, { "filePath": "src/icon/icon.service.ts", "type": "injectable", "linktype": "injectable", "name": "IconService", "coveragePercent": 100, "coverageCount": "6/6", "status": "very-good" }, { "filePath": "src/icon/icon.service.ts", "type": "interface", "linktype": "interface", "name": "IconDescriptor", "coveragePercent": 100, "coverageCount": "7/7", "status": "very-good" }, { "filePath": "src/icon/icon.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "AllIcon", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/icon/icon.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "AllIconTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/icon/icon.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/icon/icon.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "NonSVGRootTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/icon/icon.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "RootElement", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/icon/icon.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/icon/stories/icon-demo.component.ts", "type": "component", "linktype": "component", "name": "IconDemo", "coveragePercent": 0, "coverageCount": "0/2", "status": "low" }, { "filePath": "src/icon/stories/many-icons-demo.component.ts", "type": "component", "linktype": "component", "name": "ManyIconDemo", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/index.stories.ts", "type": "component", "linktype": "component", "name": "WelcomeStory", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/index.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/index.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Welcome", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/inline-loading/inline-loading.component.ts", "type": "component", "linktype": "component", "name": "InlineLoading", "coveragePercent": 75, "coverageCount": "9/12", "status": "good" }, { "filePath": "src/inline-loading/inline-loading.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/inline-loading/inline-loading.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/inline-loading/stories/inline.component.ts", "type": "component", "linktype": "component", "name": "InlineLoadingStory", "coveragePercent": 0, "coverageCount": "0/6", "status": "low" }, { "filePath": "src/input/input.directive.ts", "type": "directive", "linktype": "directive", "name": "TextInput", "coveragePercent": 12, "coverageCount": "2/16", "status": "low" }, { "filePath": "src/input/input.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/input.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Fluid", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/input.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/input.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SkeletonTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/input.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/label.component.ts", "type": "component", "linktype": "component", "name": "Label", "coveragePercent": 63, "coverageCount": "12/19", "status": "good" }, { "filePath": "src/input/password-input-label.component.ts", "type": "component", "linktype": "component", "name": "PasswordInputLabelComponent", "coveragePercent": 80, "coverageCount": "32/40", "status": "very-good" }, { "filePath": "src/input/password.directive.ts", "type": "directive", "linktype": "directive", "name": "PasswordInput", "coveragePercent": 5, "coverageCount": "1/20", "status": "low" }, { "filePath": "src/input/password.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/password.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Fluid", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/password.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/password.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SkeletonTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/password.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/text-area.directive.ts", "type": "directive", "linktype": "directive", "name": "TextArea", "coveragePercent": 12, "coverageCount": "1/8", "status": "low" }, { "filePath": "src/input/text-input-label.component.ts", "type": "component", "linktype": "component", "name": "TextInputLabelComponent", "coveragePercent": 58, "coverageCount": "14/24", "status": "good" }, { "filePath": "src/input/textarea-label.component.ts", "type": "component", "linktype": "component", "name": "TextareaLabelComponent", "coveragePercent": 60, "coverageCount": "14/23", "status": "good" }, { "filePath": "src/input/textarea.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/textarea.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Fluid", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/textarea.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/textarea.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SkeletonTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/input/textarea.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/layer/layer.directive.ts", "type": "directive", "linktype": "directive", "name": "LayerDirective", "coveragePercent": 42, "coverageCount": "3/7", "status": "medium" }, { "filePath": "src/layer/layer.directive.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "MAX_LEVEL", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/layer/layer.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/layer/layer.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CustomOrder", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/layer/layer.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/layer/layer.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "TemplateWithInput", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/layout/stack.directive.ts", "type": "directive", "linktype": "directive", "name": "StackDirective", "coveragePercent": 42, "coverageCount": "3/7", "status": "medium" }, { "filePath": "src/layout/stack.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/layout/stack.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/link/link-icon.directive.ts", "type": "directive", "linktype": "directive", "name": "LinkIconDirective", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/link/link.directive.ts", "type": "directive", "linktype": "directive", "name": "Link", "coveragePercent": 71, "coverageCount": "5/7", "status": "good" }, { "filePath": "src/link/link.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/link/link.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "IconTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/link/link.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/link/link.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithIcon", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/list/list-item.directive.ts", "type": "directive", "linktype": "directive", "name": "ListItemDirective", "coveragePercent": 33, "coverageCount": "1/3", "status": "medium" }, { "filePath": "src/list/list.directive.ts", "type": "directive", "linktype": "directive", "name": "List", "coveragePercent": 33, "coverageCount": "2/6", "status": "medium" }, { "filePath": "src/list/list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/list/list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Nesting", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/list/list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "NestingTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/list/list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/loading/loading.component.ts", "type": "component", "linktype": "component", "name": "Loading", "coveragePercent": 83, "coverageCount": "5/6", "status": "very-good" }, { "filePath": "src/loading/loading.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/loading/loading.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/menu-button/menu-button.component.ts", "type": "component", "linktype": "component", "name": "MenuButtonComponent", "coveragePercent": 23, "coverageCount": "5/21", "status": "low" }, { "filePath": "src/menu-button/menu-button.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/menu-button/menu-button.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/alert-modal.component.ts", "type": "component", "linktype": "component", "name": "AlertModal", "coveragePercent": 29, "coverageCount": "5/17", "status": "medium" }, { "filePath": "src/modal/alert-modal.interface.ts", "type": "interface", "linktype": "interface", "name": "AlertModalData", "coveragePercent": 90, "coverageCount": "9/10", "status": "very-good" }, { "filePath": "src/modal/alert-modal.interface.ts", "type": "interface", "linktype": "interface", "name": "ModalButton", "coveragePercent": 80, "coverageCount": "4/5", "status": "very-good" }, { "filePath": "src/modal/base-modal.class.ts", "type": "directive", "linktype": "directive", "name": "BaseModal", "coveragePercent": 100, "coverageCount": "4/4", "status": "very-good" }, { "filePath": "src/modal/base-modal.service.ts", "type": "injectable", "linktype": "injectable", "name": "BaseModalService", "coveragePercent": 80, "coverageCount": "4/5", "status": "very-good" }, { "filePath": "src/modal/modal-content-text.directive.ts", "type": "directive", "linktype": "directive", "name": "ModalContentText", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/modal/modal-content.directive.ts", "type": "directive", "linktype": "directive", "name": "ModalContent", "coveragePercent": 25, "coverageCount": "1/4", "status": "low" }, { "filePath": "src/modal/modal-footer.component.ts", "type": "component", "linktype": "component", "name": "ModalFooter", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/modal-header-heading.directive.ts", "type": "directive", "linktype": "directive", "name": "ModalHeaderHeading", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/modal/modal-header-label.directive.ts", "type": "directive", "linktype": "directive", "name": "ModalHeaderLabel", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/modal/modal-header.component.ts", "type": "component", "linktype": "component", "name": "ModalHeader", "coveragePercent": 55, "coverageCount": "5/9", "status": "good" }, { "filePath": "src/modal/modal.component.ts", "type": "component", "linktype": "component", "name": "Modal", "coveragePercent": 93, "coverageCount": "14/15", "status": "very-good" }, { "filePath": "src/modal/modal.service.ts", "type": "injectable", "linktype": "injectable", "name": "ModalService", "coveragePercent": 83, "coverageCount": "5/6", "status": "very-good" }, { "filePath": "src/modal/modal.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/modal.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DataPassing", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/modal.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DataPassingTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/modal.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "FormModal", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/modal.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "FormTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/modal.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Passive", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/modal.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "PassiveTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/modal.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Simple", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/modal.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SimpleTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/modal.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/modal.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Transactional", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/modal.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "TransactionTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/modal/overlay.component.ts", "type": "component", "linktype": "component", "name": "Overlay", "coveragePercent": 83, "coverageCount": "5/6", "status": "very-good" }, { "filePath": "src/modal/stories/alert-modal.component.ts", "type": "component", "linktype": "component", "name": "AlertModalStory", "coveragePercent": 0, "coverageCount": "0/10", "status": "low" }, { "filePath": "src/modal/stories/data-passing.component.ts", "type": "component", "linktype": "component", "name": "DataPassingModal", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/modal/stories/form-modal.component.ts", "type": "component", "linktype": "component", "name": "SampleFormModal", "coveragePercent": 75, "coverageCount": "3/4", "status": "good" }, { "filePath": "src/modal/stories/input-modal.component.ts", "type": "component", "linktype": "component", "name": "InputModal", "coveragePercent": 30, "coverageCount": "3/10", "status": "medium" }, { "filePath": "src/modal/stories/modal.component.ts", "type": "component", "linktype": "component", "name": "ModalStory", "coveragePercent": 0, "coverageCount": "0/6", "status": "low" }, { "filePath": "src/modal/stories/sample-modal.component.ts", "type": "component", "linktype": "component", "name": "SampleModal", "coveragePercent": 33, "coverageCount": "3/9", "status": "medium" }, { "filePath": "src/notification/actionable-button.directive.ts", "type": "directive", "linktype": "directive", "name": "ActionableButton", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/notification/actionable-notification.component.ts", "type": "component", "linktype": "component", "name": "ActionableNotification", "coveragePercent": 24, "coverageCount": "6/25", "status": "low" }, { "filePath": "src/notification/actionable-subtitle.directive.ts", "type": "directive", "linktype": "directive", "name": "ActionableSubtitle", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/notification/actionable-title.directive.ts", "type": "directive", "linktype": "directive", "name": "ActionableTitle", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/notification/base-notification.component.ts", "type": "component", "linktype": "component", "name": "BaseNotification", "coveragePercent": 44, "coverageCount": "4/9", "status": "medium" }, { "filePath": "src/notification/notification-content.interface.ts", "type": "interface", "linktype": "interface", "name": "ActionableContent", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/notification/notification-content.interface.ts", "type": "interface", "linktype": "interface", "name": "NotificationAction", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/notification/notification-content.interface.ts", "type": "interface", "linktype": "interface", "name": "NotificationContent", "coveragePercent": 0, "coverageCount": "0/11", "status": "low" }, { "filePath": "src/notification/notification-content.interface.ts", "type": "interface", "linktype": "interface", "name": "NotificationLink", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/notification/notification-content.interface.ts", "type": "interface", "linktype": "interface", "name": "ToastContent", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/notification/notification-display.service.ts", "type": "injectable", "linktype": "injectable", "name": "NotificationDisplayService", "coveragePercent": 33, "coverageCount": "1/3", "status": "medium" }, { "filePath": "src/notification/notification-subtitle.directive.ts", "type": "directive", "linktype": "directive", "name": "NotificationSubtitle", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/notification/notification-title.directive.ts", "type": "directive", "linktype": "directive", "name": "NotificationTitle", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/notification/notification.component.ts", "type": "component", "linktype": "component", "name": "Notification", "coveragePercent": 21, "coverageCount": "5/23", "status": "low" }, { "filePath": "src/notification/notification.service.ts", "type": "injectable", "linktype": "injectable", "name": "NotificationService", "coveragePercent": 66, "coverageCount": "6/9", "status": "good" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Actionable", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ActionableTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CustomContent", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "CustomTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DynamicActionable", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DynamicActionableTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DynamicInline", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DynamicInlineTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DynamicToast", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DynamicToastTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "InlineNotification", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "InlineTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Toast", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/notification.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ToastTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/notification/stories/dynamic-actionable.component.ts", "type": "component", "linktype": "component", "name": "DyanmicActionableStory", "coveragePercent": 0, "coverageCount": "0/4", "status": "low" }, { "filePath": "src/notification/stories/notification.component.ts", "type": "component", "linktype": "component", "name": "NotificationStory", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/notification/stories/toast.component.ts", "type": "component", "linktype": "component", "name": "ToastStory", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/notification/toast-caption.directive.ts", "type": "directive", "linktype": "directive", "name": "ToastCaption", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/notification/toast-subtitle.directive.ts", "type": "directive", "linktype": "directive", "name": "ToastSubtitle", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/notification/toast-title.directive.ts", "type": "directive", "linktype": "directive", "name": "ToastTitle", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/notification/toast.component.ts", "type": "component", "linktype": "component", "name": "Toast", "coveragePercent": 22, "coverageCount": "5/22", "status": "low" }, { "filePath": "src/number-input/number.component.ts", "type": "component", "linktype": "component", "name": "NumberComponent", "coveragePercent": 67, "coverageCount": "33/49", "status": "good" }, { "filePath": "src/number-input/number.component.ts", "type": "class", "linktype": "classe", "name": "NumberChange", "coveragePercent": 100, "coverageCount": "3/3", "status": "very-good" }, { "filePath": "src/number-input/number.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/number-input/number.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Fluid", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/number-input/number.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ModelTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/number-input/number.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "NgModel", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/number-input/number.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/number-input/number.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SkeletonTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/number-input/number.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/pagination/pagination-model.class.ts", "type": "class", "linktype": "classe", "name": "PaginationModel", "coveragePercent": 75, "coverageCount": "3/4", "status": "good" }, { "filePath": "src/pagination/pagination-nav.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/pagination/pagination-nav.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/pagination/pagination-nav/pagination-item.component.ts", "type": "component", "linktype": "component", "name": "PaginationNavItem", "coveragePercent": 80, "coverageCount": "4/5", "status": "very-good" }, { "filePath": "src/pagination/pagination-nav/pagination-nav.component.ts", "type": "component", "linktype": "component", "name": "PaginationNav", "coveragePercent": 38, "coverageCount": "7/18", "status": "medium" }, { "filePath": "src/pagination/pagination-nav/pagination-nav.component.ts", "type": "interface", "linktype": "interface", "name": "PaginationNavTranslations", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/pagination/pagination-nav/pagination-overflow.component.ts", "type": "component", "linktype": "component", "name": "PaginationOverflow", "coveragePercent": 42, "coverageCount": "3/7", "status": "medium" }, { "filePath": "src/pagination/pagination-nav/stories/pagination-nav-story.component.ts", "type": "component", "linktype": "component", "name": "PaginationNavStory", "coveragePercent": 0, "coverageCount": "0/8", "status": "low" }, { "filePath": "src/pagination/pagination.component.ts", "type": "component", "linktype": "component", "name": "Pagination", "coveragePercent": 40, "coverageCount": "10/25", "status": "medium" }, { "filePath": "src/pagination/pagination.component.ts", "type": "interface", "linktype": "interface", "name": "PaginationTranslations", "coveragePercent": 0, "coverageCount": "0/10", "status": "low" }, { "filePath": "src/pagination/pagination.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/pagination/pagination.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/pagination/stories/pagination.component.ts", "type": "component", "linktype": "component", "name": "PaginationStory", "coveragePercent": 0, "coverageCount": "0/9", "status": "low" }, { "filePath": "src/patterns/dialogs/modal-with-table.stories.ts", "type": "component", "linktype": "component", "name": "ModalWithTableStory", "coveragePercent": 33, "coverageCount": "3/9", "status": "medium" }, { "filePath": "src/patterns/dialogs/modal-with-table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/dialogs/modal-with-table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithDataTable", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/filtering/multi-selection.stories.ts", "type": "component", "linktype": "component", "name": "SampleMultiSelection", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/patterns/filtering/multi-selection.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "MultiSelection", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/filtering/multi-selection.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/filtering/multiple-categories.stories.ts", "type": "component", "linktype": "component", "name": "SampleMultiCategories", "coveragePercent": 0, "coverageCount": "0/13", "status": "low" }, { "filePath": "src/patterns/filtering/multiple-categories.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "MultipleCategories", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/filtering/multiple-categories.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/filtering/single-selection.stories.ts", "type": "component", "linktype": "component", "name": "SampleSingleSelection", "coveragePercent": 0, "coverageCount": "0/6", "status": "low" }, { "filePath": "src/patterns/filtering/single-selection.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SingleSelection", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/filtering/single-selection.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/forms/multi-step-form.stories.ts", "type": "component", "linktype": "component", "name": "MultiStepFormStory", "coveragePercent": 0, "coverageCount": "0/7", "status": "low" }, { "filePath": "src/patterns/forms/multi-step-form.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "MultiStep", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/forms/multi-step-form.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/loading/large-loading.stories.ts", "type": "component", "linktype": "component", "name": "SampleLargeLoading", "coveragePercent": 0, "coverageCount": "0/8", "status": "low" }, { "filePath": "src/patterns/loading/large-loading.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "LargeLoading", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/loading/large-loading.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/loading/progressive-loading.stories.ts", "type": "component", "linktype": "component", "name": "SampleProgressiveLoading", "coveragePercent": 0, "coverageCount": "0/9", "status": "low" }, { "filePath": "src/patterns/loading/progressive-loading.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ProgressiveLoading", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/patterns/loading/progressive-loading.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/placeholder/placeholder.component.ts", "type": "component", "linktype": "component", "name": "Placeholder", "coveragePercent": 60, "coverageCount": "3/5", "status": "good" }, { "filePath": "src/placeholder/placeholder.module.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "PLACEHOLDER_SERVICE_PROVIDER_FACTORY", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/placeholder/placeholder.module.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "PLACEHOLDER_SERVICE_PROVIDER", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/placeholder/placeholder.service.ts", "type": "injectable", "linktype": "injectable", "name": "PlaceholderService", "coveragePercent": 33, "coverageCount": "3/9", "status": "medium" }, { "filePath": "src/popover/popover-content.component.ts", "type": "component", "linktype": "component", "name": "PopoverContent", "coveragePercent": 16, "coverageCount": "1/6", "status": "low" }, { "filePath": "src/popover/popover.directive.ts", "type": "directive", "linktype": "directive", "name": "PopoverContainer", "coveragePercent": 57, "coverageCount": "12/21", "status": "good" }, { "filePath": "src/popover/popover.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "AutoAlignTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/popover/popover.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/popover/popover.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/popover/popover.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithAutoAlign", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/progress-bar/progress-bar.component.ts", "type": "component", "linktype": "component", "name": "ProgressBar", "coveragePercent": 36, "coverageCount": "8/22", "status": "medium" }, { "filePath": "src/progress-bar/progress-bar.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/progress-bar/progress-bar.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Indeterminate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/progress-bar/progress-bar.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "IndeterminateTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/progress-bar/progress-bar.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/progress-indicator/progress-indicator-step.interface.ts", "type": "interface", "linktype": "interface", "name": "Step", "coveragePercent": 87, "coverageCount": "7/8", "status": "very-good" }, { "filePath": "src/progress-indicator/progress-indicator.component.ts", "type": "component", "linktype": "component", "name": "ProgressIndicator", "coveragePercent": 23, "coverageCount": "3/13", "status": "low" }, { "filePath": "src/progress-indicator/progress-indicator.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/progress-indicator/progress-indicator.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/radio/radio-change.class.ts", "type": "class", "linktype": "classe", "name": "RadioChange", "coveragePercent": 75, "coverageCount": "3/4", "status": "good" }, { "filePath": "src/radio/radio-group.component.ts", "type": "component", "linktype": "component", "name": "RadioGroup", "coveragePercent": 82, "coverageCount": "28/34", "status": "very-good" }, { "filePath": "src/radio/radio.component.ts", "type": "component", "linktype": "component", "name": "Radio", "coveragePercent": 54, "coverageCount": "12/22", "status": "good" }, { "filePath": "src/radio/radio.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/radio/radio.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ReactiveForms", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/radio/radio.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ReactiveFormsTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/radio/radio.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/radio/radio.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SkeletonTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/radio/radio.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/radio/stories/app-reactive-forms.component.ts", "type": "component", "linktype": "component", "name": "ReactiveFormsStory", "coveragePercent": 0, "coverageCount": "0/6", "status": "low" }, { "filePath": "src/search/search.component.ts", "type": "component", "linktype": "component", "name": "Search", "coveragePercent": 73, "coverageCount": "36/49", "status": "good" }, { "filePath": "src/search/search.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/search/search.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Fluid", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/search/search.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/select/optgroup.directive.ts", "type": "directive", "linktype": "directive", "name": "OptGroup", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/select/option.directive.ts", "type": "directive", "linktype": "directive", "name": "Option", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/select/select.component.ts", "type": "component", "linktype": "component", "name": "Select", "coveragePercent": 68, "coverageCount": "22/32", "status": "good" }, { "filePath": "src/select/select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/select/select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Fluid", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/select/select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "NgModel", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/select/select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "NgModelTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/select/select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "OptionsSelected", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/select/select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "OptionsSelectedTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/select/select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ReactiveForms", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/select/select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ReactiveTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/select/select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/select/select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ValueProperty", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/select/select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ValuePropertyTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/select/stories/app-reactive-form.component.ts", "type": "component", "linktype": "component", "name": "ReactiveFormsSelect", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/skeleton/skeleton-placeholder.component.ts", "type": "component", "linktype": "component", "name": "SkeletonPlaceholder", "coveragePercent": 100, "coverageCount": "1/1", "status": "very-good" }, { "filePath": "src/skeleton/skeleton-text.component.ts", "type": "component", "linktype": "component", "name": "SkeletonText", "coveragePercent": 16, "coverageCount": "1/6", "status": "low" }, { "filePath": "src/skeleton/skeleton.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/skeleton/skeleton.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/slider/slider.component.ts", "type": "component", "linktype": "component", "name": "Slider", "coveragePercent": 71, "coverageCount": "33/46", "status": "good" }, { "filePath": "src/slider/slider.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/slider/slider.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Range", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/slider/slider.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "RangeTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/slider/slider.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/structured-list/list-column.component.ts", "type": "component", "linktype": "component", "name": "ListColumn", "coveragePercent": 22, "coverageCount": "2/9", "status": "low" }, { "filePath": "src/structured-list/list-header.component.ts", "type": "component", "linktype": "component", "name": "ListHeader", "coveragePercent": 25, "coverageCount": "2/8", "status": "low" }, { "filePath": "src/structured-list/list-row.component.ts", "type": "component", "linktype": "component", "name": "ListRow", "coveragePercent": 33, "coverageCount": "6/18", "status": "medium" }, { "filePath": "src/structured-list/structured-list.component.ts", "type": "component", "linktype": "component", "name": "StructuredList", "coveragePercent": 53, "coverageCount": "8/15", "status": "good" }, { "filePath": "src/structured-list/structured-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/structured-list/structured-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Selection", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/structured-list/structured-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SelectionTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/structured-list/structured-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/structured-list/structured-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SkeletonTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/structured-list/structured-list.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/body/table-body.component.ts", "type": "component", "linktype": "component", "name": "TableBody", "coveragePercent": 42, "coverageCount": "8/19", "status": "medium" }, { "filePath": "src/table/body/table-expanded-row.component.ts", "type": "component", "linktype": "component", "name": "TableExpandedRow", "coveragePercent": 0, "coverageCount": "0/11", "status": "low" }, { "filePath": "src/table/body/table-row.component.ts", "type": "component", "linktype": "component", "name": "TableRowComponent", "coveragePercent": 32, "coverageCount": "10/31", "status": "medium" }, { "filePath": "src/table/cell/table-checkbox.component.ts", "type": "component", "linktype": "component", "name": "TableCheckbox", "coveragePercent": 25, "coverageCount": "3/12", "status": "low" }, { "filePath": "src/table/cell/table-data.component.ts", "type": "component", "linktype": "component", "name": "TableData", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/table/cell/table-expand-button.component.ts", "type": "component", "linktype": "component", "name": "TableExpandButton", "coveragePercent": 18, "coverageCount": "2/11", "status": "low" }, { "filePath": "src/table/cell/table-radio.component.ts", "type": "component", "linktype": "component", "name": "TableRadio", "coveragePercent": 14, "coverageCount": "2/14", "status": "low" }, { "filePath": "src/table/data-grid-interaction-model.class.ts", "type": "class", "linktype": "classe", "name": "DataGridInteractionModel", "coveragePercent": 100, "coverageCount": "12/12", "status": "very-good" }, { "filePath": "src/table/data-grid-interaction-model.class.ts", "type": "interface", "linktype": "interface", "name": "DataGridPosition", "coveragePercent": 33, "coverageCount": "1/3", "status": "medium" }, { "filePath": "src/table/expanded-row-hover.directive.ts", "type": "directive", "linktype": "directive", "name": "ExpandedRowHover", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/table/head/table-head-cell-label.directive.ts", "type": "directive", "linktype": "directive", "name": "TableHeadCellLabel", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/table/head/table-head-cell.component.ts", "type": "component", "linktype": "component", "name": "TableHeadCell", "coveragePercent": 7, "coverageCount": "1/14", "status": "low" }, { "filePath": "src/table/head/table-head-checkbox.component.ts", "type": "component", "linktype": "component", "name": "TableHeadCheckbox", "coveragePercent": 0, "coverageCount": "0/11", "status": "low" }, { "filePath": "src/table/head/table-head-expand.component.ts", "type": "component", "linktype": "component", "name": "TableHeadExpand", "coveragePercent": 0, "coverageCount": "0/9", "status": "low" }, { "filePath": "src/table/head/table-head.component.ts", "type": "component", "linktype": "component", "name": "TableHead", "coveragePercent": 25, "coverageCount": "7/27", "status": "low" }, { "filePath": "src/table/header/table-header-description.directive.ts", "type": "directive", "linktype": "directive", "name": "TableHeaderDescription", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/table/header/table-header-title.directive.ts", "type": "directive", "linktype": "directive", "name": "TableHeaderTitle", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/table/header/table-header.component.ts", "type": "component", "linktype": "component", "name": "TableHeader", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/table/stories/app-custom-table.component.ts", "type": "component", "linktype": "component", "name": "DynamicTableStory", "coveragePercent": 0, "coverageCount": "0/14", "status": "low" }, { "filePath": "src/table/stories/app-custom-table.component.ts", "type": "class", "linktype": "classe", "name": "CustomHeaderItem", "coveragePercent": 85, "coverageCount": "17/20", "status": "very-good" }, { "filePath": "src/table/stories/app-expansion-table.component.ts", "type": "component", "linktype": "component", "name": "ExpansionTableStory", "coveragePercent": 0, "coverageCount": "0/13", "status": "low" }, { "filePath": "src/table/stories/app-expansion-table.component.ts", "type": "class", "linktype": "classe", "name": "CustomHeaderItem", "coveragePercent": 85, "coverageCount": "17/20", "status": "very-good" }, { "filePath": "src/table/stories/app-function-override-filter-table.component.ts", "type": "component", "linktype": "component", "name": "FilterByFunctionOverrideStory", "coveragePercent": 0, "coverageCount": "0/17", "status": "low" }, { "filePath": "src/table/stories/app-model-filter-table.component.ts", "type": "component", "linktype": "component", "name": "FilterWithModelStory", "coveragePercent": 0, "coverageCount": "0/16", "status": "low" }, { "filePath": "src/table/stories/app-no-data.component.ts", "type": "component", "linktype": "component", "name": "TableNoDataStory", "coveragePercent": 0, "coverageCount": "0/8", "status": "low" }, { "filePath": "src/table/stories/app-overflow-table.component.ts", "type": "component", "linktype": "component", "name": "OverflowTableStory", "coveragePercent": 0, "coverageCount": "0/10", "status": "low" }, { "filePath": "src/table/stories/app-pagination-table.component.ts", "type": "component", "linktype": "component", "name": "PaginationTableStory", "coveragePercent": 0, "coverageCount": "0/13", "status": "low" }, { "filePath": "src/table/stories/app-skeleton-table.component.ts", "type": "component", "linktype": "component", "name": "SkeletonTableStory", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/table/stories/app-table.component.ts", "type": "component", "linktype": "component", "name": "TableStory", "coveragePercent": 0, "coverageCount": "0/14", "status": "low" }, { "filePath": "src/table/table-adapter.class.ts", "type": "class", "linktype": "classe", "name": "TableAdapter", "coveragePercent": 100, "coverageCount": "7/7", "status": "very-good" }, { "filePath": "src/table/table-adapter.class.ts", "type": "class", "linktype": "classe", "name": "TableCellAdapter", "coveragePercent": 100, "coverageCount": "4/4", "status": "very-good" }, { "filePath": "src/table/table-adapter.class.ts", "type": "class", "linktype": "classe", "name": "TableDomAdapter", "coveragePercent": 100, "coverageCount": "9/9", "status": "very-good" }, { "filePath": "src/table/table-adapter.class.ts", "type": "class", "linktype": "classe", "name": "TableRowAdapter", "coveragePercent": 100, "coverageCount": "3/3", "status": "very-good" }, { "filePath": "src/table/table-container.component.ts", "type": "component", "linktype": "component", "name": "TableContainer", "coveragePercent": 0, "coverageCount": "0/6", "status": "low" }, { "filePath": "src/table/table-header-item.class.ts", "type": "class", "linktype": "classe", "name": "TableHeaderItem", "coveragePercent": 90, "coverageCount": "19/21", "status": "very-good" }, { "filePath": "src/table/table-item.class.ts", "type": "class", "linktype": "classe", "name": "TableItem", "coveragePercent": 88, "coverageCount": "8/9", "status": "very-good" }, { "filePath": "src/table/table-model.class.ts", "type": "class", "linktype": "classe", "name": "TableModel", "coveragePercent": 74, "coverageCount": "35/47", "status": "good" }, { "filePath": "src/table/table-row.class.ts", "type": "class", "linktype": "classe", "name": "TableRow", "coveragePercent": 100, "coverageCount": "2/2", "status": "very-good" }, { "filePath": "src/table/table.component.ts", "type": "component", "linktype": "component", "name": "Table", "coveragePercent": 47, "coverageCount": "32/68", "status": "medium" }, { "filePath": "src/table/table.directive.ts", "type": "directive", "linktype": "directive", "name": "TableDirective", "coveragePercent": 7, "coverageCount": "1/13", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "getModelWithDisabledRows", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DisabledRowsTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DyanmicContentTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "emptyModel", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ExpansionTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Filtering", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "FilteringOverriding", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "FilteringOverridingTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "FilteringTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "FromComponents", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "FromComponentsTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "getProps", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "NoDataTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "OverflowMenuTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "PaginationTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "simpleModel", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SkeletonTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ToolbarTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithDisabledRows", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithDynamicContent", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithExpansion", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithoutActionTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithoutData", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithOverflowMenu", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithPagination", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithToolbar", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithToolbarWithoutToolbarAction", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/table.types.ts", "type": "interface", "linktype": "interface", "name": "TableTranslations", "coveragePercent": 0, "coverageCount": "0/6", "status": "low" }, { "filePath": "src/table/toolbar/table-toolbar-actions.component.ts", "type": "component", "linktype": "component", "name": "TableToolbarActions", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/table/toolbar/table-toolbar-content.component.ts", "type": "component", "linktype": "component", "name": "TableToolbarContent", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/table/toolbar/table-toolbar-search.component.ts", "type": "component", "linktype": "component", "name": "TableToolbarSearch", "coveragePercent": 65, "coverageCount": "34/52", "status": "good" }, { "filePath": "src/table/toolbar/table-toolbar.component.ts", "type": "component", "linktype": "component", "name": "TableToolbar", "coveragePercent": 7, "coverageCount": "1/14", "status": "low" }, { "filePath": "src/tabs/base-tab-header.component.ts", "type": "component", "linktype": "component", "name": "BaseTabHeader", "coveragePercent": 34, "coverageCount": "8/23", "status": "medium" }, { "filePath": "src/tabs/stories/tabs.component.ts", "type": "component", "linktype": "component", "name": "TabStory", "coveragePercent": 0, "coverageCount": "0/6", "status": "low" }, { "filePath": "src/tabs/tab-header-group.component.ts", "type": "component", "linktype": "component", "name": "TabHeaderGroup", "coveragePercent": 34, "coverageCount": "10/29", "status": "medium" }, { "filePath": "src/tabs/tab-header.directive.ts", "type": "directive", "linktype": "directive", "name": "TabHeader", "coveragePercent": 19, "coverageCount": "5/26", "status": "low" }, { "filePath": "src/tabs/tab-headers.component.ts", "type": "component", "linktype": "component", "name": "TabHeaders", "coveragePercent": 50, "coverageCount": "17/34", "status": "medium" }, { "filePath": "src/tabs/tab-skeleton.component.ts", "type": "component", "linktype": "component", "name": "TabSkeleton", "coveragePercent": 57, "coverageCount": "4/7", "status": "good" }, { "filePath": "src/tabs/tab.component.ts", "type": "component", "linktype": "component", "name": "Tab", "coveragePercent": 87, "coverageCount": "14/16", "status": "very-good" }, { "filePath": "src/tabs/tabs.component.ts", "type": "component", "linktype": "component", "name": "Tabs", "coveragePercent": 100, "coverageCount": "13/13", "status": "very-good" }, { "filePath": "src/tabs/tabs.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tabs/tabs.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "BeforeAndAfter", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tabs/tabs.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "BeforeAndAfterTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tabs/tabs.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tabs/tabs.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SkeletonTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tabs/tabs.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "TabheaderGroup", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tabs/tabs.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "TabHeaderGroupTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tabs/tabs.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tabs/tabs.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "With", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tabs/tabs.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tag/tag-filter.component.ts", "type": "component", "linktype": "component", "name": "TagFilter", "coveragePercent": 28, "coverageCount": "4/14", "status": "medium" }, { "filePath": "src/tag/tag-icon.directive.ts", "type": "directive", "linktype": "directive", "name": "TagIconDirective", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/tag/tag-operational.component.ts", "type": "component", "linktype": "component", "name": "TagOperationalComponent", "coveragePercent": 15, "coverageCount": "2/13", "status": "low" }, { "filePath": "src/tag/tag-selectable.component.ts", "type": "component", "linktype": "component", "name": "TagSelectableComponent", "coveragePercent": 0, "coverageCount": "0/17", "status": "low" }, { "filePath": "src/tag/tag.component.ts", "type": "component", "linktype": "component", "name": "Tag", "coveragePercent": 50, "coverageCount": "3/6", "status": "medium" }, { "filePath": "src/tag/tag.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tag/tag.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Filter", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tag/tag.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "FilteredTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tag/tag.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "OperationalTag", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tag/tag.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "OperationalTagTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tag/tag.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SelectedTag", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tag/tag.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SelectedTagTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tag/tag.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/test.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "context", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/test.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "require", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/theme/theme.directive.ts", "type": "directive", "linktype": "directive", "name": "ThemeDirective", "coveragePercent": 30, "coverageCount": "3/10", "status": "medium" }, { "filePath": "src/theme/theme.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/theme/theme.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "LayeredTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/theme/theme.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/theme/theme.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithLayer", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/clickable-tile-icon.directive.ts", "type": "directive", "linktype": "directive", "name": "ClickableTileIconDirective", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/tiles/clickable-tile.component.ts", "type": "component", "linktype": "component", "name": "ClickableTile", "coveragePercent": 72, "coverageCount": "8/11", "status": "good" }, { "filePath": "src/tiles/clickable-tile.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/clickable-tile.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "LayerTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/clickable-tile.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/clickable-tile.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithLayers", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/expandable-tile-above.directive.ts", "type": "directive", "linktype": "directive", "name": "ExpandableTileAboveFoldDirective", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/tiles/expandable-tile-below.directive.ts", "type": "directive", "linktype": "directive", "name": "ExpandableTileBelowFoldDirective", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/tiles/expandable-tile.component.ts", "type": "component", "linktype": "component", "name": "ExpandableTile", "coveragePercent": 30, "coverageCount": "4/13", "status": "medium" }, { "filePath": "src/tiles/expandable-tile.component.ts", "type": "interface", "linktype": "interface", "name": "ExpandableTileTranslations", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/tiles/expandable-tile.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/expandable-tile.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Interactive", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/expandable-tile.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "InteractiveTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/expandable-tile.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "LayerTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/expandable-tile.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/expandable-tile.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithLayers", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/selection-tile.component.ts", "type": "component", "linktype": "component", "name": "SelectionTile", "coveragePercent": 43, "coverageCount": "7/16", "status": "medium" }, { "filePath": "src/tiles/tile-group.component.ts", "type": "component", "linktype": "component", "name": "TileGroup", "coveragePercent": 25, "coverageCount": "4/16", "status": "low" }, { "filePath": "src/tiles/tile-group.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "LayerTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/tile-group.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Multiselect", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/tile-group.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "MultiTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/tile-group.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Selectable", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/tile-group.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SelectableTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/tile-group.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithLayers", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/tile-selection.interface.ts", "type": "interface", "linktype": "interface", "name": "TileSelection", "coveragePercent": 0, "coverageCount": "0/4", "status": "low" }, { "filePath": "src/tiles/tile.component.ts", "type": "component", "linktype": "component", "name": "Tile", "coveragePercent": 20, "coverageCount": "1/5", "status": "low" }, { "filePath": "src/tiles/tiles.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/tiles.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "LayerTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/tiles.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Skeleton", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/tiles.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SkeletonTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/tiles.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tiles/tiles.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithLayers", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/timepicker-select/timepicker-select.component.ts", "type": "component", "linktype": "component", "name": "TimePickerSelect", "coveragePercent": 51, "coverageCount": "20/39", "status": "good" }, { "filePath": "src/timepicker-select/timepicker-select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/timepicker-select/timepicker-select.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/timepicker/timepicker.component.ts", "type": "component", "linktype": "component", "name": "TimePicker", "coveragePercent": 23, "coverageCount": "6/26", "status": "low" }, { "filePath": "src/timepicker/timepicker.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/timepicker/timepicker.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/toggle/toggle.component.ts", "type": "component", "linktype": "component", "name": "Toggle", "coveragePercent": 75, "coverageCount": "36/48", "status": "good" }, { "filePath": "src/toggle/toggle.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/toggle/toggle.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/toggletip/toggletip-action.directive.ts", "type": "directive", "linktype": "directive", "name": "ToggletipAction", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/toggletip/toggletip-button.directive.ts", "type": "directive", "linktype": "directive", "name": "ToggletipButton", "coveragePercent": 0, "coverageCount": "0/6", "status": "low" }, { "filePath": "src/toggletip/toggletip-content.directive.ts", "type": "directive", "linktype": "directive", "name": "ToggletipContent", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/toggletip/toggletip-label.directive.ts", "type": "directive", "linktype": "directive", "name": "ToggletipLabel", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/toggletip/toggletip.component.ts", "type": "component", "linktype": "component", "name": "Toggletip", "coveragePercent": 43, "coverageCount": "13/30", "status": "medium" }, { "filePath": "src/toggletip/toggletip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "AutoAlignTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/toggletip/toggletip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/toggletip/toggletip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/toggletip/toggletip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithAutoAlign", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tooltip/definition-tooptip.component.ts", "type": "component", "linktype": "component", "name": "TooltipDefinition", "coveragePercent": 38, "coverageCount": "15/39", "status": "medium" }, { "filePath": "src/tooltip/definition-tooptip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "AutoAlignTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tooltip/definition-tooptip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tooltip/definition-tooptip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tooltip/definition-tooptip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithAutoAlign", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tooltip/tooltip.component.ts", "type": "component", "linktype": "component", "name": "Tooltip", "coveragePercent": 42, "coverageCount": "18/42", "status": "medium" }, { "filePath": "src/tooltip/tooltip.interface.ts", "type": "interface", "linktype": "interface", "name": "TooltipConfig", "coveragePercent": 100, "coverageCount": "9/9", "status": "very-good" }, { "filePath": "src/tooltip/tooltip.interface.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DEFAULT_TOOLTIP_CONFIG", "coveragePercent": 100, "coverageCount": "1/1", "status": "very-good" }, { "filePath": "src/tooltip/tooltip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "AutoAlignTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tooltip/tooltip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tooltip/tooltip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Ellipses", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tooltip/tooltip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "EllipsesTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tooltip/tooltip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/tooltip/tooltip.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithAutoAlign", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/treeview/stories/app-treeview-icons.component.ts", "type": "component", "linktype": "component", "name": "IconTreeviewDemoComponent", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/treeview/tree-node.component.ts", "type": "component", "linktype": "component", "name": "TreeNodeComponent", "coveragePercent": 19, "coverageCount": "6/31", "status": "low" }, { "filePath": "src/treeview/tree-node.types.ts", "type": "interface", "linktype": "interface", "name": "EventOnNode", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/treeview/tree-node.types.ts", "type": "interface", "linktype": "interface", "name": "Node", "coveragePercent": 0, "coverageCount": "0/14", "status": "low" }, { "filePath": "src/treeview/treeview.component.ts", "type": "component", "linktype": "component", "name": "TreeViewComponent", "coveragePercent": 50, "coverageCount": "9/18", "status": "medium" }, { "filePath": "src/treeview/treeview.service.ts", "type": "injectable", "linktype": "injectable", "name": "TreeViewService", "coveragePercent": 60, "coverageCount": "6/10", "status": "good" }, { "filePath": "src/treeview/treeview.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Basic", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/treeview/treeview.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "IconsTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/treeview/treeview.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "nodes", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/treeview/treeview.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ProjectedContent", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/treeview/treeview.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ProjectedNodesTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/treeview/treeview.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Template", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/treeview/treeview.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithIcons", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/header/hamburger.component.ts", "type": "component", "linktype": "component", "name": "Hamburger", "coveragePercent": 75, "coverageCount": "6/8", "status": "good" }, { "filePath": "src/ui-shell/header/header-action.component.ts", "type": "component", "linktype": "component", "name": "HeaderAction", "coveragePercent": 93, "coverageCount": "14/15", "status": "very-good" }, { "filePath": "src/ui-shell/header/header-global.component.ts", "type": "component", "linktype": "component", "name": "HeaderGlobal", "coveragePercent": 33, "coverageCount": "1/3", "status": "medium" }, { "filePath": "src/ui-shell/header/header-item.component.ts", "type": "component", "linktype": "component", "name": "HeaderItem", "coveragePercent": 58, "coverageCount": "7/12", "status": "good" }, { "filePath": "src/ui-shell/header/header-menu.component.ts", "type": "component", "linktype": "component", "name": "HeaderMenu", "coveragePercent": 14, "coverageCount": "3/21", "status": "low" }, { "filePath": "src/ui-shell/header/header-navigation-items.interface.ts", "type": "interface", "linktype": "interface", "name": "HeaderItemInterface", "coveragePercent": 0, "coverageCount": "0/5", "status": "low" }, { "filePath": "src/ui-shell/header/header-navigation-items.interface.ts", "type": "interface", "linktype": "interface", "name": "NavigationItem", "coveragePercent": 10, "coverageCount": "1/10", "status": "low" }, { "filePath": "src/ui-shell/header/header-navigation.component.ts", "type": "component", "linktype": "component", "name": "HeaderNavigation", "coveragePercent": 40, "coverageCount": "2/5", "status": "medium" }, { "filePath": "src/ui-shell/header/header.component.ts", "type": "component", "linktype": "component", "name": "Header", "coveragePercent": 69, "coverageCount": "9/13", "status": "good" }, { "filePath": "src/ui-shell/panel/panel.component.ts", "type": "component", "linktype": "component", "name": "Panel", "coveragePercent": 66, "coverageCount": "2/3", "status": "good" }, { "filePath": "src/ui-shell/panel/switcher-list-item.component.ts", "type": "component", "linktype": "component", "name": "SwitcherListItem", "coveragePercent": 53, "coverageCount": "7/13", "status": "good" }, { "filePath": "src/ui-shell/panel/switcher-list.component.ts", "type": "component", "linktype": "component", "name": "SwitcherList", "coveragePercent": 20, "coverageCount": "1/5", "status": "low" }, { "filePath": "src/ui-shell/sidenav/routerlink-extended.directive.ts", "type": "directive", "linktype": "directive", "name": "RouterLinkExtendedDirective", "coveragePercent": 0, "coverageCount": "0/2", "status": "low" }, { "filePath": "src/ui-shell/sidenav/sidenav-item.component.ts", "type": "component", "linktype": "component", "name": "SideNavItem", "coveragePercent": 56, "coverageCount": "9/16", "status": "good" }, { "filePath": "src/ui-shell/sidenav/sidenav-item.interface.ts", "type": "interface", "linktype": "interface", "name": "SideNavItemInterface", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/ui-shell/sidenav/sidenav-menu.component.ts", "type": "component", "linktype": "component", "name": "SideNavMenu", "coveragePercent": 33, "coverageCount": "5/15", "status": "medium" }, { "filePath": "src/ui-shell/sidenav/sidenav.component.ts", "type": "component", "linktype": "component", "name": "SideNav", "coveragePercent": 33, "coverageCount": "5/15", "status": "medium" }, { "filePath": "src/ui-shell/stories/header-fluid.component.ts", "type": "component", "linktype": "component", "name": "BarComponent", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/stories/header-fluid.component.ts", "type": "component", "linktype": "component", "name": "FooComponent", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/stories/header-fluid.component.ts", "type": "component", "linktype": "component", "name": "HeaderFluidComponent", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "AngularRouting", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "AngularRoutingTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Header", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "HeaderFluid", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "HeaderFluidTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "HeaderRouterTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "HeaderTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "HeaderWithRouter", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "HeaderWithTemp", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "HeaderWithTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ModelTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SideNavigation", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SideNavigationRail", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SideNavigationRailTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SideNavigationRouter", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SideNavigationRouterTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SideNavigationTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SideNavigationUseRouter", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SideNavigationUseRouterTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SidePanel", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "SidePanelTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "Together", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "TogetherTemplate", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/ui-shell/ui-shell.stories.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "WithModel", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/a11y.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "findNextElem", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/a11y.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "findPrevElem", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/a11y.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "findSiblingElem", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/a11y.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "focusNextElem", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/a11y.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "focusNextTree", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/a11y.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "focusPrevElem", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/a11y.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "HcModeChecker", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/animation-frame.service.ts", "type": "injectable", "linktype": "injectable", "name": "AnimationFrameService", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/utils/animation-frame.service.ts", "type": "injectable", "linktype": "injectable", "name": "AnimationFrameServiceSingleton", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/utils/document.service.ts", "type": "injectable", "linktype": "injectable", "name": "DocumentService", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/utils/element.service.ts", "type": "injectable", "linktype": "injectable", "name": "ElementService", "coveragePercent": 0, "coverageCount": "0/3", "status": "low" }, { "filePath": "src/utils/element.types.ts", "type": "interface", "linktype": "interface", "name": "ElementVisibilityEvent", "coveragePercent": 0, "coverageCount": "0/2", "status": "low" }, { "filePath": "src/utils/event-observable.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "getEventObservable", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/event.service.ts", "type": "injectable", "linktype": "injectable", "name": "EventService", "coveragePercent": 0, "coverageCount": "0/4", "status": "low" }, { "filePath": "src/utils/object.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "merge", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/scroll.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "getScrollableParents", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/scroll.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "hasScrollableParents", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/scroll.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "isScrollableElement", "coveragePercent": 100, "coverageCount": "1/1", "status": "very-good" }, { "filePath": "src/utils/scroll.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "isVisibleInContainer", "coveragePercent": 100, "coverageCount": "1/1", "status": "very-good" }, { "filePath": "src/utils/scroll.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "scrollableParentsObservable", "coveragePercent": 100, "coverageCount": "1/1", "status": "very-good" }, { "filePath": "src/utils/utils.module.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/utils.module.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "DOCUMENT_SERVICE_PROVIDER_FACTORY", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/utils.module.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/utils.module.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "DOCUMENT_SERVICE_PROVIDER", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/utils.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "clone", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/utils.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "closestAttr", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/utils.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "matchesAttr", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/window-tools.ts", "type": "function", "linktype": "miscellaneous", "linksubtype": "function", "name": "getScrollbarWidth", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" }, { "filePath": "src/utils/window-tools.ts", "type": "variable", "linktype": "miscellaneous", "linksubtype": "variable", "name": "_scrollbarWidth", "coveragePercent": 0, "coverageCount": "0/1", "status": "low" } ] } }