24 | `
25 | });
26 | export const Basic = Template.bind({});
27 | Basic.args = {
28 | orientation: "vertical",
29 | gap: 1
30 | };
31 | Basic.argTypes = {
32 | orientation: {
33 | control: "radio",
34 | options: ["vertical", "horizontal"]
35 | }
36 | };
37 |
--------------------------------------------------------------------------------
/src/link/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./link.directive";
2 | export * from "./link-icon.directive";
3 | export * from "./link.module";
4 |
--------------------------------------------------------------------------------
/src/link/link-icon.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[ibmLinkIcon], [cdsLinkIcon]"
5 | })
6 | export class LinkIconDirective {
7 | @HostBinding("class.cds--link__icon") iconClass = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/link/link.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { Link } from "./link.directive";
5 | import { LinkIconDirective } from "./link-icon.directive";
6 |
7 | @NgModule({
8 | declarations: [
9 | Link,
10 | LinkIconDirective
11 | ],
12 | exports: [
13 | Link,
14 | LinkIconDirective
15 | ],
16 | imports: [
17 | CommonModule
18 | ]
19 | })
20 | export class LinkModule {}
21 |
--------------------------------------------------------------------------------
/src/link/link.stories.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable variable-name */
2 |
3 | import { moduleMetadata, Meta } from "@storybook/angular";
4 | import { LinkModule, Link } from "./";
5 |
6 | import { IconModule } from "../icon";
7 |
8 | export default {
9 | title: "Components/Link",
10 | decorators: [
11 | moduleMetadata({
12 | imports: [LinkModule, IconModule]
13 | })
14 | ],
15 | component: Link
16 | } as Meta;
17 |
18 | const Template = (args) => ({
19 | props: args,
20 | template: `
21 |
link
22 | `
23 | });
24 | export const Basic = Template.bind({});
25 | Basic.args = {
26 | disabled: false,
27 | inline: false
28 | };
29 |
30 | const IconTemplate = (args) => ({
31 | props: args,
32 | template: `
33 |
38 | Link
39 |
40 |
41 | `
42 | });
43 | export const WithIcon = IconTemplate.bind({});
44 | WithIcon.args = {
45 | disabled: false,
46 | inline: false
47 | };
48 |
--------------------------------------------------------------------------------
/src/link/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/list/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./list-item.directive";
2 | export * from "./list.directive";
3 | export * from "./list.module";
4 |
--------------------------------------------------------------------------------
/src/list/list-item.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | /**
4 | * Applies list styling to the item it is used on. Best used with `li`s.
5 | */
6 | @Directive({
7 | selector: "[cdsListItem], [ibmListItem]"
8 | })
9 | export class ListItemDirective {
10 | @HostBinding("class.cds--list__item") wrapper = true;
11 | }
12 |
--------------------------------------------------------------------------------
/src/list/list.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { ListItemDirective } from "./list-item.directive";
5 | import { List } from "./list.directive";
6 |
7 | @NgModule({
8 | declarations: [
9 | ListItemDirective,
10 | List
11 | ],
12 | exports: [
13 | ListItemDirective,
14 | List
15 | ],
16 | imports: [CommonModule]
17 | })
18 | export class ListModule {}
19 |
--------------------------------------------------------------------------------
/src/list/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/loading/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./loading.component";
2 | export * from "./loading.module";
3 |
--------------------------------------------------------------------------------
/src/loading/loading.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { Loading } from "./loading.component";
5 | import { I18nModule } from "carbon-components-angular/i18n";
6 |
7 | @NgModule({
8 | declarations: [Loading],
9 | exports: [Loading],
10 | imports: [CommonModule, I18nModule]
11 | })
12 | export class LoadingModule {}
13 |
--------------------------------------------------------------------------------
/src/loading/loading.stories.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable variable-name */
2 |
3 | import { moduleMetadata, Meta } from "@storybook/angular";
4 | import { LoadingModule, Loading } from "./";
5 |
6 | export default {
7 | title: "Components/Loading",
8 | decorators: [
9 | moduleMetadata({
10 | imports: [LoadingModule]
11 | })
12 | ],
13 | component: Loading
14 | } as Meta;
15 |
16 | const Template = (args) => ({
17 | props: args,
18 | template: `
19 |
20 | `
21 | });
22 | export const Basic = Template.bind({});
23 | Basic.args = {
24 | isActive: true,
25 | overlay: false,
26 | size: "normal"
27 | };
28 | Basic.argTypes = {
29 | size: {
30 | options: ["sm", "normal"],
31 | control: "radio"
32 | }
33 | };
34 |
--------------------------------------------------------------------------------
/src/loading/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/menu-button/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./menu-button.component";
2 | export * from "./menu-button.module";
3 |
--------------------------------------------------------------------------------
/src/menu-button/menu-button.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { ButtonModule } from "carbon-components-angular/button";
5 | import { IconModule } from "carbon-components-angular/icon";
6 | import { ContextMenuModule } from "carbon-components-angular/context-menu";
7 |
8 | import { MenuButtonComponent } from "./menu-button.component";
9 |
10 | @NgModule({
11 | imports: [
12 | CommonModule,
13 | ButtonModule,
14 | IconModule,
15 | ContextMenuModule
16 | ],
17 | exports: [MenuButtonComponent],
18 | declarations: [MenuButtonComponent],
19 | providers: []
20 | })
21 | export class MenuButtonModule { }
22 |
--------------------------------------------------------------------------------
/src/menu-button/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/modal/base-modal.class.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Output,
3 | EventEmitter,
4 | Input,
5 | Directive
6 | } from "@angular/core";
7 |
8 | /**
9 | * Extend `BaseModal` in your custom modal implementations to ensure consistent close behavior.
10 | *
11 | * `ModalService` depends on the `close` event to correctly clean up the component.
12 | */
13 | @Directive({
14 | selector: "[cdsBaseModal], [ibmBaseModal]"
15 | })
16 | export class BaseModal {
17 | /**
18 | * Base event emitter to propagate close events
19 | */
20 | @Output() close = new EventEmitter();
21 |
22 | /**
23 | * Controls the open state of the modal
24 | */
25 | @Input() open = false;
26 |
27 | /**
28 | * Default method to handle closing the modal
29 | */
30 | closeModal(): void {
31 | this.close.emit();
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/modal/index.ts:
--------------------------------------------------------------------------------
1 | export { AlertModal } from "./alert-modal.component";
2 | export {
3 | AlertModalData,
4 | AlertModalType,
5 | ModalButton,
6 | ModalButtonType
7 | } from "./alert-modal.interface";
8 | export { BaseModal } from "./base-modal.class";
9 | export { ModalFooter } from "./modal-footer.component";
10 | export { ModalHeader } from "./modal-header.component";
11 | export { Modal } from "./modal.component";
12 | export { ModalModule } from "./modal.module";
13 | export { BaseModalService } from "./base-modal.service";
14 | export { ModalService } from "./modal.service";
15 | export { Overlay } from "./overlay.component";
16 | export { ModalContent } from "./modal-content.directive";
17 | export { ModalContentText } from "./modal-content-text.directive";
18 | export { ModalHeaderHeading } from "./modal-header-heading.directive";
19 | export { ModalHeaderLabel } from "./modal-header-label.directive";
20 |
--------------------------------------------------------------------------------
/src/modal/modal-content-text.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsModalContentText], [ibmModalContentText]"
5 | })
6 | export class ModalContentText {
7 | @HostBinding("class.cds--modal-content__text") modalContentTextClass = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/modal/modal-content.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding, Input } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsModalContent], [ibmModalContent]"
5 | })
6 | export class ModalContent {
7 | @HostBinding("class.cds--modal-content") modalContentClass = true;
8 | /**
9 | * Provide whether the modal content has a form element.
10 | * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.
11 | */
12 | @HostBinding("class.cds--modal-content--with-form") @Input() hasForm = false;
13 | }
14 |
--------------------------------------------------------------------------------
/src/modal/modal-footer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 |
3 | @Component({
4 | selector: "cds-modal-footer, ibm-modal-footer",
5 | template: `
6 |
9 | `
10 | })
11 | export class ModalFooter {}
12 |
--------------------------------------------------------------------------------
/src/modal/modal-header-heading.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding, Input } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]"
5 | })
6 | export class ModalHeaderHeading {
7 | @HostBinding("class.cds--modal-header__heading") modalHeaderHeadingClass = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/modal/modal-header-label.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsModalHeaderLabel], [ibmModalHeaderLabel]"
5 | })
6 | export class ModalHeaderLabel {
7 | @HostBinding("class.cds--modal-header__label") modalHeaderLabelClass = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/modal/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/modal/stories/alert-modal.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from "@angular/core";
2 |
3 | import {
4 | ModalService,
5 | ModalButton,
6 | AlertModalType
7 | } from "../";
8 |
9 | @Component({
10 | selector: "app-alert-modal-story",
11 | template: `
12 |
13 | `
14 | })
15 | export class AlertModalStory {
16 | @Input() modalType: AlertModalType;
17 | @Input() modalLabel: string;
18 | @Input() modalTitle: string;
19 | @Input() modalContent: string;
20 | @Input() buttons: Array
;
21 | @Input() size: "xs" | "sm" | "md" | "lg";
22 | @Input() showCloseButton: boolean;
23 |
24 | constructor(protected modalService: ModalService) { }
25 |
26 | openModal() {
27 | this.modalService.show({
28 | type: this.modalType,
29 | label: this.modalLabel,
30 | title: this.modalTitle,
31 | content: this.modalContent,
32 | size: this.size,
33 | buttons: this.buttons,
34 | showCloseButton: this.showCloseButton
35 | });
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/modal/stories/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./alert-modal.component";
2 | export * from "./data-passing.component";
3 | export * from "./form-modal.component";
4 | export * from "./input-modal.component";
5 | export * from "./modal.component";
6 | export * from "./sample-modal.component";
7 |
--------------------------------------------------------------------------------
/src/modal/stories/modal.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from "@angular/core";
2 | import { ModalService } from "../";
3 |
4 | import { SampleModal } from "./sample-modal.component";
5 |
6 | @Component({
7 | selector: "app-modal-story",
8 | template: `
9 |
10 | `
11 | })
12 | export class ModalStory {
13 | @Input() modalText = "Hello, World";
14 | @Input() size = "md";
15 | @Input() showCloseButton = true;
16 |
17 | constructor(protected modalService: ModalService) { }
18 |
19 | openModal() {
20 | this.modalService.create({
21 | component: SampleModal,
22 | inputs: {
23 | modalText: this.modalText,
24 | size: this.size,
25 | showCloseButton: this.showCloseButton
26 | }
27 | });
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./../node_modules/ng-packagr/ng-package.schema.json",
3 | "dest": "./../dist",
4 | "lib": {
5 | "entryFile": "index.ts"
6 | },
7 | "allowedNonPeerDependencies": [
8 | "@carbon/utils-position",
9 | "@carbon/icon-helpers",
10 | "@carbon/icons",
11 | "@floating-ui/dom",
12 | "@ibm/telemetry-js",
13 | "flatpickr",
14 | "lodash-es"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/src/notification/actionable-button.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsActionableButton], [ibmActionableButton]"
5 | })
6 | export class ActionableButton {
7 | @HostBinding("class.cds--actionable-notification__action-button") actionableButton = true;
8 | @HostBinding("attr.type") type = "button";
9 | }
10 |
--------------------------------------------------------------------------------
/src/notification/actionable-subtitle.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsActionableSubtitle], [ibmActionableSubtitle]"
5 | })
6 | export class ActionableSubtitle {
7 | @HostBinding("class.cds--actionable-notification__subtitle") baseClass = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/notification/actionable-title.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsActionableTitle], [ibmActionableTitle]"
5 | })
6 | export class ActionableTitle {
7 | @HostBinding("class.cds--actionable-notification__title") baseClass = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/notification/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./actionable-button.directive";
2 | export * from "./actionable-subtitle.directive";
3 | export * from "./actionable-title.directive";
4 | export * from "./actionable-notification.component";
5 | export * from "./base-notification.component";
6 | export * from "./notification-content.interface";
7 | export * from "./notification-display.service";
8 | export * from "./notification-subtitle.directive";
9 | export * from "./notification-title.directive";
10 | export * from "./notification.component";
11 | export * from "./notification.module";
12 | export * from "./notification.service";
13 | export * from "./toast-caption.directive";
14 | export * from "./toast-subtitle.directive";
15 | export * from "./toast-title.directive";
16 | export * from "./toast.component";
17 |
--------------------------------------------------------------------------------
/src/notification/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/notification/notification-display.service.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Injectable,
3 | ApplicationRef
4 | } from "@angular/core";
5 |
6 | @Injectable()
7 | export class NotificationDisplayService {
8 | constructor(protected applicationRef: ApplicationRef) {}
9 |
10 | /**
11 | * Programatically closes notification based on `notificationRef`. *
12 | */
13 | close(notificationRef: any) {
14 | if (notificationRef.hostView) {
15 | setTimeout( () => {
16 | this.applicationRef.detachView(notificationRef.hostView);
17 | notificationRef.destroy();
18 | }, 200);
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/notification/notification-subtitle.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsNotificationSubtitle], [ibmNotificationSubtitle]"
5 | })
6 | export class NotificationSubtitle {
7 | @HostBinding("class.cds--inline-notification__subtitle") baseClass = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/notification/notification-title.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsNotificationTitle], [ibmNotificationTitle]"
5 | })
6 | export class NotificationTitle {
7 | @HostBinding("class.cds--inline-notification__title") baseClass = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/notification/stories/dynamic-actionable.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 | import { Subject } from "rxjs";
3 | import { NotificationService } from "../";
4 |
5 | @Component({
6 | selector: "app-dynamic-actionable-story",
7 | template: `
8 |
9 |
10 | `,
11 | providers: [NotificationService]
12 | })
13 | export class DyanmicActionableStory {
14 | actionSubject = new Subject();
15 | constructor(protected notificationService: NotificationService) { }
16 |
17 | showNotification() {
18 | this.notificationService.showActionable({
19 | type: "info",
20 | title: "Actionable notification",
21 | message: "Sample info message",
22 | target: ".notification-container",
23 | actions: [
24 | {
25 | text: "Action",
26 | click: this.actionSubject
27 | }
28 | ]
29 | });
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/notification/stories/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./dynamic-actionable.component";
2 | export * from "./notification.component";
3 | export * from "./toast.component";
4 |
--------------------------------------------------------------------------------
/src/notification/stories/notification.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 | import { NotificationService } from "../";
3 |
4 | @Component({
5 | selector: "app-notification-story",
6 | template: `
7 |
8 |
9 | `,
10 | providers: [NotificationService]
11 | })
12 | export class NotificationStory {
13 | constructor(protected notificationService: NotificationService) { }
14 |
15 | showNotification() {
16 | this.notificationService.showNotification({
17 | type: "info",
18 | title: "Sample notification",
19 | message: "Sample info message",
20 | target: ".notification-container"
21 | });
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/notification/stories/toast.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 | import { NotificationService } from "../";
3 |
4 | @Component({
5 | selector: "app-toast-story",
6 | template: `
7 |
8 |
9 | `,
10 | providers: [NotificationService]
11 | })
12 | export class ToastStory {
13 | constructor(protected notificationService: NotificationService) { }
14 |
15 | showToast() {
16 | this.notificationService.showToast({
17 | type: "info",
18 | title: "Sample toast",
19 | subtitle: "Sample subtitle message",
20 | caption: "Sample caption",
21 | target: ".notification-container",
22 | message: "message"
23 | });
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/notification/toast-caption.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsToastCaption], [ibmToastCaption]"
5 | })
6 | export class ToastCaption {
7 | @HostBinding("class.cds--toast-notification__caption") baseClass = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/notification/toast-subtitle.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsToastSubtitle], [ibmToastSubtitle]"
5 | })
6 | export class ToastSubtitle {
7 | @HostBinding("class.cds--toast-notification__subtitle") baseClass = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/notification/toast-title.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsToastTitle], [ibmToastTitle]"
5 | })
6 | export class ToastTitle {
7 | @HostBinding("class.cds--toast-notification__title") baseClass = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/number-input/index.ts:
--------------------------------------------------------------------------------
1 | export { Number, NumberChange, NumberComponent } from "./number.component";
2 | export { NumberModule } from "./number.module";
3 |
--------------------------------------------------------------------------------
/src/number-input/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/number-input/number.module.ts:
--------------------------------------------------------------------------------
1 | // modules
2 | import { NgModule } from "@angular/core";
3 | import { FormsModule } from "@angular/forms";
4 | import { CommonModule } from "@angular/common";
5 |
6 | // imports
7 | import { Number } from "./number.component";
8 | import { I18nModule } from "carbon-components-angular/i18n";
9 | import { IconModule } from "carbon-components-angular/icon";
10 |
11 | @NgModule({
12 | declarations: [
13 | Number
14 | ],
15 | exports: [
16 | Number
17 | ],
18 | imports: [
19 | FormsModule,
20 | CommonModule,
21 | I18nModule,
22 | IconModule
23 | ]
24 | })
25 | export class NumberModule { }
26 |
--------------------------------------------------------------------------------
/src/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "carbon-components-angular",
3 | "version": "0.0.0",
4 | "description": "Next generation components",
5 | "main": "index.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "git@github.com:carbon-design-system/carbon-components-angular.git"
9 | },
10 | "scripts": {
11 | "postinstall": "ibmtelemetry --config=telemetry.yml"
12 | },
13 | "license": "Apache-2.0",
14 | "author": "IBM",
15 | "peerDependencies": {
16 | "@carbon/styles": "^1.54.0"
17 | },
18 | "dependencies": {
19 | "@carbon/icon-helpers": "10.37.0",
20 | "@carbon/icons": "11.58.0",
21 | "@carbon/utils-position": "1.1.4",
22 | "@floating-ui/dom": "1.6.13",
23 | "@ibm/telemetry-js": "^1.5.0",
24 | "flatpickr": "4.6.13",
25 | "lodash-es": "4.17.21",
26 | "tslib": "2.3.0"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/pagination/index.ts:
--------------------------------------------------------------------------------
1 | export { PaginationModel } from "./pagination-model.class";
2 | export { Pagination, PaginationTranslations } from "./pagination.component";
3 | export { PaginationModule } from "./pagination.module";
4 | export { PaginationNav, PaginationNavTranslations } from "./pagination-nav/pagination-nav.component";
5 | export { PaginationNavItem } from "./pagination-nav/pagination-item.component";
6 | export { PaginationOverflow } from "./pagination-nav/pagination-overflow.component";
7 |
--------------------------------------------------------------------------------
/src/pagination/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/pagination/pagination-model.class.ts:
--------------------------------------------------------------------------------
1 | export class PaginationModel {
2 | /**
3 | * Tracks the current page.
4 | */
5 | currentPage = 1;
6 |
7 | /**
8 | * Length of page.
9 | */
10 | /* tslint:disable-next-line*/
11 | pageLength? = 10;
12 |
13 | /**
14 | * Absolute total number of items needed to paginate.
15 | */
16 | totalDataLength = 0;
17 | }
18 |
--------------------------------------------------------------------------------
/src/pagination/pagination-nav/index.ts:
--------------------------------------------------------------------------------
1 | export { PaginationNav, PaginationNavTranslations } from "./pagination-nav.component";
2 | export { PaginationNavItem } from "./pagination-item.component";
3 | export { PaginationOverflow } from "./pagination-overflow.component";
4 |
--------------------------------------------------------------------------------
/src/pagination/pagination-nav/stories/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./pagination-nav-story.component";
2 |
--------------------------------------------------------------------------------
/src/pagination/pagination-nav/stories/pagination-nav-story.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | Input,
4 | OnInit
5 | } from "@angular/core";
6 |
7 | import { PaginationModel } from "../..";
8 |
9 | @Component({
10 | selector: "app-pagination",
11 | template: `
12 |
18 |
19 | `
20 | })
21 | export class PaginationNavStory implements OnInit {
22 | @Input() model = new PaginationModel();
23 | @Input() disabled = false;
24 | @Input() pageInputDisabled = false;
25 | @Input() numOfItemsToShow = false;
26 | @Input() size: "sm" | "md" | "lg" = "md";
27 |
28 | @Input() get totalDataLength() {
29 | return this.model.totalDataLength;
30 | }
31 | set totalDataLength(value) {
32 | this.model.totalDataLength = value;
33 | }
34 |
35 | ngOnInit() {
36 | this.model.currentPage = 1;
37 | }
38 |
39 | selectPage(page) {
40 | console.log("Loading page", page, "from pagination model");
41 | this.model.currentPage = page;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/pagination/stories/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./pagination.component";
2 |
--------------------------------------------------------------------------------
/src/placeholder/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./placeholder.component";
2 | export * from "./placeholder.module";
3 | export * from "./placeholder.service";
4 |
--------------------------------------------------------------------------------
/src/placeholder/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/placeholder/placeholder.module.ts:
--------------------------------------------------------------------------------
1 | // modules
2 | import { NgModule, SkipSelf, Optional } from "@angular/core";
3 | import { CommonModule } from "@angular/common";
4 |
5 | // imports
6 | import { Placeholder } from "./placeholder.component";
7 | import { PlaceholderService } from "./placeholder.service";
8 |
9 | // either provides a new instance of PlaceholderService, or returns the parent
10 | export function PLACEHOLDER_SERVICE_PROVIDER_FACTORY(parentService: PlaceholderService) {
11 | return parentService || new PlaceholderService();
12 | }
13 |
14 | // placeholder service *must* be a singleton to ensure the placeholder viewRef is accessible globally
15 | export const PLACEHOLDER_SERVICE_PROVIDER = {
16 | provide: PlaceholderService,
17 | deps: [[new Optional(), new SkipSelf(), PlaceholderService]],
18 | useFactory: PLACEHOLDER_SERVICE_PROVIDER_FACTORY
19 | };
20 |
21 | @NgModule({
22 | declarations: [ Placeholder ],
23 | exports: [ Placeholder ],
24 | providers: [ PLACEHOLDER_SERVICE_PROVIDER ],
25 | imports: [ CommonModule ]
26 | })
27 | export class PlaceholderModule { }
28 |
--------------------------------------------------------------------------------
/src/popover/index.ts:
--------------------------------------------------------------------------------
1 | export { PopoverContainer } from "./popover.directive";
2 | export { PopoverContent } from "./popover-content.component";
3 | export * from "./popover.module";
4 |
--------------------------------------------------------------------------------
/src/popover/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/popover/popover.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { PopoverContainer } from "./popover.directive";
5 | import { PopoverContent } from "./popover-content.component";
6 |
7 | @NgModule({
8 | declarations: [
9 | PopoverContainer,
10 | PopoverContent
11 | ],
12 | exports: [
13 | PopoverContainer,
14 | PopoverContent
15 | ],
16 | imports: [CommonModule]
17 | })
18 | export class PopoverModule {}
19 |
--------------------------------------------------------------------------------
/src/progress-bar/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./progress-bar.component";
2 | export * from "./progress-bar.module";
3 |
--------------------------------------------------------------------------------
/src/progress-bar/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/progress-bar/progress-bar.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { ProgressBar } from "./progress-bar.component";
5 | import { IconModule } from "carbon-components-angular/icon";
6 |
7 | @NgModule({
8 | declarations: [
9 | ProgressBar
10 | ],
11 | exports: [
12 | ProgressBar
13 | ],
14 | imports: [
15 | CommonModule,
16 | IconModule
17 | ]
18 | })
19 | export class ProgressBarModule { }
20 |
--------------------------------------------------------------------------------
/src/progress-indicator/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./progress-indicator-step.interface";
2 | export * from "./progress-indicator.component";
3 | export * from "./progress-indicator.module";
4 |
--------------------------------------------------------------------------------
/src/progress-indicator/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/progress-indicator/progress-indicator-step.interface.ts:
--------------------------------------------------------------------------------
1 | export interface Step {
2 | /**
3 | * The label of the `step`
4 | */
5 | label: string;
6 | /**
7 | * Optional label with additional information
8 | */
9 | secondaryLabel?: string;
10 | /**
11 | * Determines whether the step is complete or incomplete
12 | */
13 | complete?: boolean;
14 | /**
15 | * Determines whether the step is invalid or valid
16 | */
17 | invalid?: boolean;
18 | /**
19 | * Function to execute on click
20 | */
21 | onClick?: Function;
22 | /**
23 | * Determines whether the step is disabled or not
24 | */
25 | disabled?: boolean;
26 | /**
27 | * Icon description
28 | */
29 | description?: string;
30 | }
31 |
--------------------------------------------------------------------------------
/src/progress-indicator/progress-indicator.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { ProgressIndicator } from "./progress-indicator.component";
5 | import { IconModule } from "carbon-components-angular/icon";
6 | import { I18nModule } from "carbon-components-angular/i18n";
7 |
8 | @NgModule({
9 | declarations: [
10 | ProgressIndicator
11 | ],
12 | exports: [
13 | ProgressIndicator
14 | ],
15 | imports: [
16 | CommonModule,
17 | IconModule,
18 | I18nModule
19 | ]
20 | })
21 | export class ProgressIndicatorModule {}
22 |
--------------------------------------------------------------------------------
/src/radio/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./radio-change.class";
2 | export * from "./radio-group.component";
3 | export * from "./radio.component";
4 | export * from "./radio.module";
5 |
--------------------------------------------------------------------------------
/src/radio/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/radio/radio-change.class.ts:
--------------------------------------------------------------------------------
1 | import { Radio } from "./radio.component";
2 |
3 | /**
4 | * Used to emit changes performed on a `Radio`.
5 | */
6 | export class RadioChange {
7 | /**
8 | * Contains the `Radio` that has been changed.
9 | */
10 | source: Radio | null;
11 | /**
12 | * The value of the `Radio` encompassed in the `RadioChange` class.
13 | */
14 | value: string;
15 |
16 | constructor(source: Radio, value: string) {
17 | this.source = source;
18 | this.value = value;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/radio/radio.module.ts:
--------------------------------------------------------------------------------
1 | // modules
2 | import { NgModule } from "@angular/core";
3 | import { FormsModule } from "@angular/forms";
4 | import { CommonModule } from "@angular/common";
5 |
6 | // imports
7 | import { Radio } from "./radio.component";
8 | import { RadioGroup } from "./radio-group.component";
9 | import { IconModule } from "carbon-components-angular/icon";
10 |
11 | @NgModule({
12 | declarations: [
13 | Radio,
14 | RadioGroup
15 | ],
16 | exports: [
17 | Radio,
18 | RadioGroup
19 | ],
20 | imports: [
21 | CommonModule,
22 | FormsModule,
23 | IconModule
24 | ]
25 | })
26 | export class RadioModule { }
27 |
--------------------------------------------------------------------------------
/src/radio/stories/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./app-reactive-forms.component";
2 |
--------------------------------------------------------------------------------
/src/search/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./search.component";
2 | export * from "./search.module";
3 |
--------------------------------------------------------------------------------
/src/search/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/search/search.module.ts:
--------------------------------------------------------------------------------
1 | // modules
2 | import { NgModule } from "@angular/core";
3 | import { FormsModule } from "@angular/forms";
4 | import { CommonModule } from "@angular/common";
5 |
6 | // imports
7 | import { I18nModule } from "carbon-components-angular/i18n";
8 | import { Search } from "./search.component";
9 | import { IconModule } from "carbon-components-angular/icon";
10 |
11 | @NgModule({
12 | declarations: [
13 | Search
14 | ],
15 | exports: [
16 | Search
17 | ],
18 | imports: [
19 | FormsModule,
20 | CommonModule,
21 | I18nModule,
22 | IconModule
23 | ]
24 | })
25 | export class SearchModule { }
26 |
--------------------------------------------------------------------------------
/src/select/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./optgroup.directive";
2 | export * from "./option.directive";
3 | export * from "./select.component";
4 | export * from "./select.module";
5 |
--------------------------------------------------------------------------------
/src/select/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/select/optgroup.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | // tslint:disable-next-line
5 | selector: "optgroup"
6 | })
7 | export class OptGroup {
8 | @HostBinding("class") inputClass = "cds--select-optgroup";
9 | }
10 |
--------------------------------------------------------------------------------
/src/select/option.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | // tslint:disable-next-line
5 | selector: "option"
6 | })
7 | export class Option {
8 | @HostBinding("class") inputClass = "cds--select-option";
9 | }
10 |
--------------------------------------------------------------------------------
/src/select/select.module.ts:
--------------------------------------------------------------------------------
1 | // modules
2 | import { NgModule } from "@angular/core";
3 | import { FormsModule } from "@angular/forms";
4 | import { CommonModule } from "@angular/common";
5 |
6 | // imports
7 | import { Select } from "./select.component";
8 | import { Option } from "./option.directive";
9 | import { OptGroup } from "./optgroup.directive";
10 | import { IconModule } from "carbon-components-angular/icon";
11 |
12 | @NgModule({
13 | declarations: [
14 | Select,
15 | Option,
16 | OptGroup
17 | ],
18 | exports: [
19 | Select,
20 | Option,
21 | OptGroup
22 | ],
23 | imports: [
24 | CommonModule,
25 | FormsModule,
26 | IconModule
27 | ]
28 | })
29 | export class SelectModule { }
30 |
--------------------------------------------------------------------------------
/src/select/stories/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./app-reactive-form.component";
2 |
--------------------------------------------------------------------------------
/src/skeleton/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./skeleton-placeholder.component";
2 | export * from "./skeleton-text.component";
3 | export * from "./skeleton.module";
4 |
--------------------------------------------------------------------------------
/src/skeleton/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/skeleton/skeleton-placeholder.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 |
3 | /**
4 | * Get started with importing the module:
5 | *
6 | * ```typescript
7 | * import { SkeletonModule } from 'carbon-components-angular';
8 | * ```
9 | *
10 | * [See demo](../../?path=/story/components-skeleton--basic)
11 | */
12 | @Component({
13 | selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder",
14 | template: `
15 | `
16 | })
17 | export class SkeletonPlaceholder { }
18 |
--------------------------------------------------------------------------------
/src/skeleton/skeleton-text.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnChanges } from "@angular/core";
2 |
3 | @Component({
4 | selector: "cds-skeleton-text, ibm-skeleton-text",
5 | template: `
6 |
10 |
11 | `
12 | })
13 | export class SkeletonText implements OnChanges {
14 | @Input() lines = 5;
15 |
16 | @Input() minLineWidth = 100;
17 |
18 | @Input() maxLineWidth = 300;
19 |
20 | lineWidths: Array;
21 |
22 | /**
23 | * Returns a random width in pixels based off a min width, and a max width.
24 | */
25 | getRandomInt(min, max) {
26 | return `${Math.floor(Math.random() * (max - min + 1) + min) + "px"}`;
27 | }
28 |
29 | ngOnChanges() {
30 | // Creates an array of length defined by input lines with content from
31 | // 0 to lines - 1, maps each value to a random width in pixels.
32 | this.lineWidths =
33 | Array.from(Array(this.lines).keys())
34 | .map(num => this.getRandomInt(this.minLineWidth, this.maxLineWidth));
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/skeleton/skeleton.module.ts:
--------------------------------------------------------------------------------
1 | import { SkeletonPlaceholder } from "./skeleton-placeholder.component";
2 | import { SkeletonText } from "./skeleton-text.component";
3 | import { NgModule } from "@angular/core";
4 | import { CommonModule } from "@angular/common";
5 |
6 | @NgModule({
7 | declarations: [
8 | SkeletonPlaceholder,
9 | SkeletonText
10 | ],
11 | exports: [
12 | SkeletonPlaceholder,
13 | SkeletonText
14 | ],
15 | imports: [
16 | CommonModule
17 | ]
18 | })
19 | export class SkeletonModule { }
20 |
--------------------------------------------------------------------------------
/src/skeleton/skeleton.stories.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable variable-name */
2 |
3 | import { moduleMetadata, Meta } from "@storybook/angular";
4 | import { SkeletonModule, SkeletonPlaceholder } from "./";
5 |
6 | export default {
7 | title: "Components/Skeleton",
8 | decorators: [
9 | moduleMetadata({
10 | imports: [SkeletonModule]
11 | })
12 | ],
13 | args: {
14 | lines: 5,
15 | minLineWidth: 100,
16 | maxLineWidth: 300
17 | },
18 | component: SkeletonPlaceholder
19 | } as Meta;
20 |
21 | const Template = (args) => ({
22 | props: args,
23 | template: `
24 |
28 |
29 | `
30 | });
31 | export const Basic = Template.bind({});
32 |
--------------------------------------------------------------------------------
/src/slider/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./slider.component";
2 | export * from "./slider.module";
3 |
--------------------------------------------------------------------------------
/src/slider/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/slider/slider.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { Slider } from "./slider.component";
5 | import { UtilsModule } from "carbon-components-angular/utils";
6 |
7 | @NgModule({
8 | declarations: [Slider],
9 | exports: [Slider],
10 | imports: [
11 | CommonModule,
12 | UtilsModule
13 | ]
14 | })
15 | export class SliderModule {}
16 |
--------------------------------------------------------------------------------
/src/structured-list/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./list-column.component";
2 | export * from "./list-header.component";
3 | export * from "./list-row.component";
4 | export * from "./structured-list.component";
5 | export * from "./structured-list.module";
6 |
--------------------------------------------------------------------------------
/src/structured-list/list-column.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostBinding, Input } from "@angular/core";
2 |
3 | /**
4 | * `ListColumn` represents a single column in a `StructuredList`.
5 | *
6 | * `ListColumn`s can be used in a `ListHeader` to specify the column headers, or in `ListRow`s to specify the column data.
7 | *
8 | * Example:
9 | * ```html
10 | * Column 1
11 | * ```
12 | */
13 | @Component({
14 | selector: "cds-list-column, ibm-list-column",
15 | template: `
16 |
17 |
18 | `
19 | })
20 | export class ListColumn {
21 | @Input() skeleton = false;
22 |
23 | @HostBinding("attr.role") role = "cell";
24 | @HostBinding("class.cds--structured-list-th") isHeaderColumn = true;
25 | @HostBinding("class.cds--structured-list-td") isBodyColumn = true;
26 | /**
27 | * Applies `white-space: nowrap` to the content of this `ListColumn`
28 | */
29 | @HostBinding("class.cds--structured-list-content--nowrap") @Input() nowrap = false;
30 | }
31 |
--------------------------------------------------------------------------------
/src/structured-list/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/structured-list/structured-list.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { StructuredList } from "./structured-list.component";
5 | import { ListRow } from "./list-row.component";
6 | import { ListHeader } from "./list-header.component";
7 | import { ListColumn } from "./list-column.component";
8 | import { IconModule } from "carbon-components-angular/icon";
9 |
10 | @NgModule({
11 | declarations: [
12 | StructuredList,
13 | ListRow,
14 | ListHeader,
15 | ListColumn
16 | ],
17 | exports: [
18 | StructuredList,
19 | ListRow,
20 | ListHeader,
21 | ListColumn
22 | ],
23 | imports: [
24 | CommonModule,
25 | IconModule
26 | ]
27 | })
28 | export class StructuredListModule { }
29 |
--------------------------------------------------------------------------------
/src/table/cell/table-data.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | Input
4 | } from "@angular/core";
5 | import { TableItem } from "../table-item.class";
6 |
7 | @Component({
8 | // tslint:disable-next-line: component-selector
9 | selector: "[cdsTableData], [ibmTableData]",
10 | template: `
11 | {{item.data}}
12 |
16 |
17 | `
18 | })
19 | export class TableData {
20 | @Input() item: TableItem;
21 |
22 | @Input() skeleton = false;
23 | }
24 |
--------------------------------------------------------------------------------
/src/table/expanded-row-hover.directive.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | HostListener
4 | } from "@angular/core";
5 |
6 | @Directive({
7 | selector: "[cdsExpandedRowHover], [ibmExpandedRowHover]"
8 | })
9 | export class ExpandedRowHover {
10 | @HostListener("mouseenter", ["$event"])
11 | addHoverClass(event) {
12 | event.target.previousElementSibling.classList.add("cds--expandable-row--hover");
13 | }
14 |
15 | @HostListener("mouseleave", ["$event"])
16 | removeHoverClass(event) {
17 | event.target.previousElementSibling.classList.remove("cds--expandable-row--hover");
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/table/head/table-head-cell-label.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]"
5 | })
6 | export class TableHeadCellLabel {
7 | @HostBinding("class.cds--table-header-label") baseClass = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/table/header/table-header-description.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding, Input } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsTableHeaderDescription], [ibmTableHeaderDescription]"
5 | })
6 | export class TableHeaderDescription {
7 | static counter = 0;
8 |
9 | @HostBinding("attr.id") @Input() id = `table-description-${TableHeaderDescription.counter++}`;
10 | @HostBinding("class.cds--data-table-header__description") descriptionClass = true;
11 | }
12 |
--------------------------------------------------------------------------------
/src/table/header/table-header-title.directive.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | HostBinding,
4 | Input
5 | } from "@angular/core";
6 |
7 | @Directive({
8 | selector: "[cdsTableHeaderTitle], [ibmTableHeaderTitle]"
9 | })
10 | export class TableHeaderTitle {
11 | static counter = 0;
12 |
13 | @HostBinding("attr.id") @Input() id = `table-title-${TableHeaderTitle.counter++}`;
14 | @HostBinding("class.cds--data-table-header__title") titleClass = true;
15 | }
16 |
--------------------------------------------------------------------------------
/src/table/header/table-header.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostBinding } from "@angular/core";
2 |
3 | @Component({
4 | selector: "cds-table-header, ibm-table-header",
5 | template: `
6 |
7 | `
8 | })
9 | export class TableHeader {
10 | @HostBinding("class.cds--data-table-header") headerClass = true;
11 | @HostBinding("style.display") displayStyle = "block";
12 | }
13 |
--------------------------------------------------------------------------------
/src/table/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/table/stories/app-skeleton-table.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | OnInit,
4 | Input
5 | } from "@angular/core";
6 | import { TableModel } from "../table-model.class";
7 | import { Table } from "../index";
8 |
9 | @Component({
10 | selector: "app-skeleton-table",
11 | template: `
12 |
18 |
19 |
20 | `
21 | })
22 | export class SkeletonTableStory implements OnInit {
23 | @Input() size = "md";
24 | @Input() striped = false;
25 | @Input() skeleton = true;
26 | @Input() skeletonModel = new TableModel();
27 |
28 | ngOnInit() {
29 | // Creates an empty table with 5 rows and 5 columns
30 | this.skeletonModel = Table.skeletonModel(5, 5);
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/table/stories/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./app-custom-table.component";
2 | export * from "./app-expansion-table.component";
3 | export * from "./app-model-filter-table.component";
4 | export * from "./app-overflow-table.component";
5 | export * from "./app-pagination-table.component";
6 | export * from "./app-skeleton-table.component";
7 | export * from "./app-function-override-filter-table.component";
8 | export * from "./app-table.component";
9 | export * from "./app-no-data.component";
10 |
--------------------------------------------------------------------------------
/src/table/table-container.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | AfterContentInit,
3 | Component,
4 | ContentChild,
5 | HostBinding
6 | } from "@angular/core";
7 | import { TableHeaderDescription } from "./header/table-header-description.directive";
8 | import { TableHeaderTitle } from "./header/table-header-title.directive";
9 | import { Table } from "./table.component";
10 |
11 | @Component({
12 | selector: "cds-table-container, ibm-table-container",
13 | template: ``,
14 | styles: [`
15 | :host { display: block }
16 | `]
17 | })
18 | export class TableContainer implements AfterContentInit {
19 | @HostBinding("class.cds--data-table-container") containerClass = true;
20 |
21 | @ContentChild(TableHeaderTitle) headerTitle: TableHeaderTitle;
22 | @ContentChild(TableHeaderDescription) headerDescription: TableHeaderDescription;
23 | @ContentChild(Table) table: Table;
24 |
25 | ngAfterContentInit() {
26 | // Set aria properties if values exist otherwise keep undefined
27 | if (this.table) {
28 | this.table.ariaLabelledby = this.headerTitle?.id;
29 | this.table.ariaDescribedby = this.headerDescription?.id;
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/table/table-row.class.ts:
--------------------------------------------------------------------------------
1 | import { TableItem } from "./table-item.class";
2 |
3 | /**
4 | * Represents a table row, which is essentially an array of TableItem.
5 | */
6 | export class TableRow extends Array {
7 | /**
8 | * Whether row is disabled or not.
9 | */
10 | disabled = false;
11 | }
12 |
--------------------------------------------------------------------------------
/src/table/table.types.ts:
--------------------------------------------------------------------------------
1 | export interface TableTranslations {
2 | FILTER: string;
3 | END_OF_DATA: string;
4 | SCROLL_TOP: string;
5 | CHECKBOX_HEADER: string;
6 | CHECKBOX_ROW: string;
7 | }
8 |
9 | export type TableRowSize = "xs" | "sm" | "md" | "lg" | "xl";
10 |
--------------------------------------------------------------------------------
/src/table/toolbar/table-toolbar-actions.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostBinding } from "@angular/core";
2 |
3 | @Component({
4 | selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions",
5 | template: ``
6 | })
7 | export class TableToolbarActions {}
8 |
--------------------------------------------------------------------------------
/src/table/toolbar/table-toolbar-content.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostBinding } from "@angular/core";
2 |
3 | @Component({
4 | selector: "cds-table-toolbar-content, ibm-table-toolbar-content",
5 | template: ``
6 | })
7 | export class TableToolbarContent {
8 | @HostBinding("class.cds--toolbar-content") class = true;
9 | }
10 |
--------------------------------------------------------------------------------
/src/table/toolbar/table-toolbar-search.component.ts:
--------------------------------------------------------------------------------
1 | import { Search } from "carbon-components-angular/search";
2 | import {
3 | Component,
4 | HostBinding,
5 | Input,
6 | OnInit,
7 | AfterViewInit
8 | } from "@angular/core";
9 | import { NG_VALUE_ACCESSOR } from "@angular/forms";
10 |
11 | @Component({
12 | selector: "cds-table-toolbar-search, ibm-table-toolbar-search",
13 | templateUrl: "../../search/search.component.html",
14 | providers: [
15 | {
16 | provide: NG_VALUE_ACCESSOR,
17 | useExisting: TableToolbarSearch,
18 | multi: true
19 | }
20 | ]
21 | })
22 | export class TableToolbarSearch extends Search implements AfterViewInit {
23 | tableSearch = true;
24 |
25 | size: "sm" | "md" | "lg" = "lg";
26 |
27 | @HostBinding("class.cds--toolbar-content") hostClass = true;
28 |
29 | ngAfterViewInit() {
30 | setTimeout(() => {
31 | if (this.value) {
32 | this.openSearch();
33 | }
34 | });
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export { BaseTabHeader } from "./base-tab-header.component";
2 | export { TabHeaderGroup } from "./tab-header-group.component";
3 | export { TabHeader } from "./tab-header.directive";
4 | export { TabHeaders } from "./tab-headers.component";
5 | export { Tab } from "./tab.component";
6 | export { Tabs } from "./tabs.component";
7 | export { TabSkeleton } from "./tab-skeleton.component";
8 | export * from "./tabs.module";
9 |
--------------------------------------------------------------------------------
/src/tabs/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/tabs/stories/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./tabs.component";
2 |
--------------------------------------------------------------------------------
/src/tabs/tab-skeleton.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | HostBinding,
4 | Input
5 | } from "@angular/core";
6 |
7 | /**
8 | * Skeleton component for tabs
9 | */
10 | @Component({
11 | selector: "cds-tabs-skeleton, ibm-tabs-skeleton",
12 | template: `
13 |
14 | -
17 |
18 |
19 |
20 |
21 |
22 | `
23 | })
24 | export class TabSkeleton {
25 | /**
26 | * Set number of skeleton tabs to render, default is 5
27 | */
28 | @Input() set numOftabs(num: number) {
29 | this.numOfSkeletonTabs = new Array(num);
30 | }
31 |
32 | /**
33 | * Set to `true` to put tabs in a loading state.
34 | */
35 | @HostBinding("class.cds--skeleton") skeleton = true;
36 | @HostBinding("class.cds--tabs") tabs = true;
37 | numOfSkeletonTabs = new Array(5);
38 | }
39 |
--------------------------------------------------------------------------------
/src/tabs/tabs.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 | import { UtilsModule } from "carbon-components-angular/utils";
4 | import { I18nModule } from "carbon-components-angular/i18n";
5 |
6 | import { TabSkeleton } from "./tab-skeleton.component";
7 | import { BaseTabHeader } from "./base-tab-header.component";
8 | import { Tabs } from "./tabs.component";
9 | import { Tab } from "./tab.component";
10 | import { TabHeader } from "./tab-header.directive";
11 | import { TabHeaders } from "./tab-headers.component";
12 | import { TabHeaderGroup } from "./tab-header-group.component";
13 |
14 | @NgModule({
15 | declarations: [
16 | BaseTabHeader,
17 | Tabs,
18 | Tab,
19 | TabHeader,
20 | TabHeaders,
21 | TabHeaderGroup,
22 | TabSkeleton
23 | ],
24 | exports: [
25 | Tabs,
26 | Tab,
27 | TabHeader,
28 | TabHeaders,
29 | TabHeaderGroup,
30 | TabSkeleton
31 | ],
32 | imports: [
33 | CommonModule,
34 | UtilsModule,
35 | I18nModule
36 | ]
37 | })
38 | export class TabsModule {}
39 |
--------------------------------------------------------------------------------
/src/tag/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./tag-filter.component";
2 | export * from "./tag.component";
3 | export * from "./tag-icon.directive";
4 | export * from "./tag-selectable.component";
5 | export * from "./tag-operational.component";
6 | export * from "./tag.module";
7 |
--------------------------------------------------------------------------------
/src/tag/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/tag/tag-icon.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsTagIcon], [ibmTagIcon]"
5 | })
6 | export class TagIconDirective {
7 | @HostBinding("class.cds--tag__custom-icon") tagIcon = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/tag/tag.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { Tag } from "./tag.component";
5 | import { TagFilter } from "./tag-filter.component";
6 | import { IconModule } from "carbon-components-angular/icon";
7 | import { TagIconDirective } from "./tag-icon.directive";
8 | import { TagSelectableComponent } from "./tag-selectable.component";
9 | import { TagOperationalComponent } from "./tag-operational.component";
10 |
11 | @NgModule({
12 | declarations: [
13 | Tag,
14 | TagFilter,
15 | TagIconDirective,
16 | TagSelectableComponent,
17 | TagOperationalComponent
18 | ],
19 | exports: [
20 | Tag,
21 | TagFilter,
22 | TagIconDirective,
23 | TagSelectableComponent,
24 | TagOperationalComponent
25 | ],
26 | imports: [CommonModule, IconModule]
27 | })
28 | export class TagModule {}
29 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import "core-js";
4 | import "zone.js";
5 | import "zone.js/testing";
6 | import { getTestBed } from "@angular/core/testing";
7 | import {
8 | BrowserDynamicTestingModule,
9 | platformBrowserDynamicTesting
10 | } from "@angular/platform-browser-dynamic/testing";
11 |
12 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
13 | declare var require: any;
14 |
15 | // First, initialize the Angular testing environment.
16 | getTestBed().initTestEnvironment(
17 | BrowserDynamicTestingModule,
18 | platformBrowserDynamicTesting(),
19 | { teardown: { destroyAfterEach: false } }
20 | );
21 | // Then we find all the tests.
22 | const context = require.context("./", true, /\.spec\.ts$/);
23 | // And load the modules.
24 | context.keys().map(context);
25 |
--------------------------------------------------------------------------------
/src/theme/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./theme.directive";
2 | export * from "./theme.module";
3 |
--------------------------------------------------------------------------------
/src/theme/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/theme/theme.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { ThemeDirective } from "./theme.directive";
5 | import { LayerModule } from "carbon-components-angular/layer";
6 |
7 | @NgModule({
8 | declarations: [ThemeDirective],
9 | exports: [ThemeDirective],
10 | imports: [CommonModule, LayerModule]
11 | })
12 | export class ThemeModule {}
13 |
--------------------------------------------------------------------------------
/src/thumbnails/skeleton.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/tiles/clickable-tile-icon.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsClickableTileIcon], [ibmClickableTileIcon]"
5 | })
6 | export class ClickableTileIconDirective {
7 | @HostBinding("class.cds--tile--icon") icon = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/tiles/expandable-tile-above.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsAboveFold], [ibmAboveFold]"
5 | })
6 | export class ExpandableTileAboveFoldDirective {
7 | @HostBinding("class.cds--tile-content__above-the-fold") aboveFold = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/tiles/expandable-tile-below.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsBelowFold], [ibmBelowFold]"
5 | })
6 | export class ExpandableTileBelowFoldDirective {
7 | @HostBinding("class.cds--tile-content__below-the-fold") belowFold = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/tiles/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./clickable-tile-icon.directive";
2 | export * from "./clickable-tile.component";
3 | export * from "./expandable-tile.component";
4 | export * from "./expandable-tile-above.directive";
5 | export * from "./expandable-tile-below.directive";
6 | export * from "./selection-tile.component";
7 | export * from "./tile-group.component";
8 | export * from "./tile-selection.interface";
9 | export * from "./tile.component";
10 | export * from "./tiles.module";
11 |
--------------------------------------------------------------------------------
/src/tiles/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/tiles/tile-selection.interface.ts:
--------------------------------------------------------------------------------
1 | export interface TileSelection {
2 | value: string;
3 | selected: boolean;
4 | name: string;
5 | }
6 |
--------------------------------------------------------------------------------
/src/tiles/tile.component.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
4 |
5 | import { Tile } from "./tile.component";
6 |
7 | describe("Tile", () => {
8 | let component: Tile;
9 | let fixture: ComponentFixture;
10 |
11 | beforeEach(waitForAsync(() => {
12 | TestBed.configureTestingModule({
13 | declarations: [Tile]
14 | }).compileComponents();
15 | }));
16 |
17 | beforeEach(() => {
18 | fixture = TestBed.createComponent(Tile);
19 | component = fixture.componentInstance;
20 | fixture.detectChanges();
21 | });
22 |
23 | it("should create a Tile", () => {
24 | expect(component).toBeTruthy();
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/src/tiles/tile.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | HostBinding,
4 | Input
5 | } from "@angular/core";
6 |
7 | /**
8 | * Build application's tiles using this component. Get started with importing the module:
9 | *
10 | * ```typescript
11 | * import { TilesModule } from 'carbon-components-angular';
12 | * ```
13 | *
14 | * ```html
15 | *
16 | * tile content
17 | *
18 | * ```
19 | *
20 | * [See demo](../../?path=/story/components-tiles--basic)
21 | */
22 | @Component({
23 | selector: "cds-tile, ibm-tile",
24 | template: ``
25 | })
26 | export class Tile {
27 | @HostBinding("class.cds--tile") tileClass = true;
28 |
29 | @HostBinding("class.cds--tile--light") get lightThemeEnabled() {
30 | return this.theme === "light";
31 | }
32 |
33 | /**
34 | * @deprecated since v5 - Use `cdsLayer` directive instead
35 | * Set to `"light"` to apply the light style
36 | */
37 | @Input() theme: "light" | "dark" = "dark";
38 | }
39 |
--------------------------------------------------------------------------------
/src/timepicker-select/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./timepicker-select.component";
2 | export * from "./timepicker-select.module";
3 |
--------------------------------------------------------------------------------
/src/timepicker-select/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/timepicker-select/timepicker-select.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 | import { TimePickerSelect } from "./timepicker-select.component";
4 | import { SelectModule } from "carbon-components-angular/select";
5 | import { IconModule } from "carbon-components-angular/icon";
6 |
7 | @NgModule({
8 | declarations: [
9 | TimePickerSelect
10 | ],
11 | exports: [
12 | TimePickerSelect
13 | ],
14 | imports: [
15 | SelectModule,
16 | CommonModule,
17 | IconModule
18 | ]
19 | })
20 | export class TimePickerSelectModule { }
21 |
--------------------------------------------------------------------------------
/src/timepicker-select/timepicker-select.stories.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable variable-name */
2 |
3 | import { FormsModule } from "@angular/forms";
4 | import { moduleMetadata, Meta } from "@storybook/angular";
5 | import { TimePickerSelectModule, TimePickerSelect } from "./";
6 |
7 | export default {
8 | title: "Components/Timepicker Select",
9 | decorators: [
10 | moduleMetadata({
11 | imports: [
12 | TimePickerSelectModule,
13 | FormsModule
14 | ]
15 | })
16 | ],
17 | component: TimePickerSelect
18 | } as Meta;
19 |
20 | const Template = (args) => ({
21 | props: args,
22 | template: `
23 |
35 | `
36 | });
37 | export const Basic = Template.bind({});
38 |
--------------------------------------------------------------------------------
/src/timepicker/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./timepicker.component";
2 | export * from "./timepicker.module";
3 |
--------------------------------------------------------------------------------
/src/timepicker/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/timepicker/timepicker.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 | import { TimePicker } from "./timepicker.component";
4 | import { TimePickerSelectModule } from "carbon-components-angular/timepicker-select";
5 |
6 | @NgModule({
7 | declarations: [
8 | TimePicker
9 | ],
10 | exports: [
11 | TimePicker
12 | ],
13 | imports: [
14 | TimePickerSelectModule,
15 | CommonModule
16 | ]
17 | })
18 | export class TimePickerModule { }
19 |
--------------------------------------------------------------------------------
/src/toggle/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./toggle.component";
2 | export * from "./toggle.module";
3 |
--------------------------------------------------------------------------------
/src/toggle/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/toggle/toggle.module.ts:
--------------------------------------------------------------------------------
1 | // modules
2 | import { NgModule } from "@angular/core";
3 | import { FormsModule } from "@angular/forms";
4 | import { CommonModule } from "@angular/common";
5 |
6 | // imports
7 | import { I18nModule } from "carbon-components-angular/i18n";
8 | import { Toggle } from "./toggle.component";
9 |
10 | @NgModule({
11 | declarations: [
12 | Toggle
13 | ],
14 | exports: [
15 | Toggle
16 | ],
17 | imports: [
18 | CommonModule,
19 | FormsModule,
20 | I18nModule
21 | ]
22 | })
23 | export class ToggleModule { }
24 |
--------------------------------------------------------------------------------
/src/toggle/toggle.stories.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable variable-name */
2 |
3 | import { moduleMetadata, Meta } from "@storybook/angular";
4 |
5 |
6 | import { ToggleModule, Toggle } from "./";
7 |
8 | export default {
9 | title: "Components/Toggle",
10 | decorators: [
11 | moduleMetadata({
12 | imports: [ToggleModule]
13 | })
14 | ],
15 | component: Toggle
16 | } as Meta;
17 |
18 | const Template = (args) => ({
19 | props: args,
20 | template: `
21 |
31 |
32 | `
33 | });
34 | export const Basic = Template.bind({});
35 | Basic.args = {
36 | disabled: false,
37 | checked: false,
38 | hideLabel: false,
39 | label: "Toggle element label",
40 | onText: "On",
41 | offText: "Off",
42 | skeleton: false,
43 | size: "md"
44 | };
45 | Basic.argTypes = {
46 | onChange: {
47 | control: "Toggled!"
48 | },
49 | size: {
50 | options: ["sm", "md"],
51 | control: "radio"
52 | }
53 | };
54 |
--------------------------------------------------------------------------------
/src/toggletip/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./toggletip-action.directive";
2 | export * from "./toggletip-button.directive";
3 | export * from "./toggletip-content.directive";
4 | export * from "./toggletip-label.directive";
5 | export * from "./toggletip.component";
6 | export * from "./toggletip.module";
7 |
--------------------------------------------------------------------------------
/src/toggletip/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/toggletip/toggletip-action.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsToggletipAction], [ibmToggletipAction]"
5 | })
6 | export class ToggletipAction {
7 | @HostBinding("class.cds--toggletip-actions") toggleTipActions = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/toggletip/toggletip-button.directive.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | HostBinding,
4 | Input
5 | } from "@angular/core";
6 |
7 | @Directive({
8 | selector: "[cdsToggletipButton], [ibmToggletipButton]"
9 | })
10 | export class ToggletipButton {
11 | @HostBinding("class.cds--toggletip-button") toggletipButton = true;
12 | @HostBinding("attr.type") toggletipButtonType = "button";
13 | @HostBinding("attr.aria-label") @Input() ariaLabel = "Show information";
14 | }
15 |
--------------------------------------------------------------------------------
/src/toggletip/toggletip-content.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsToggletipContent], [ibmToggletipContent]"
5 | })
6 | export class ToggletipContent {
7 | @HostBinding("class.cds--toggletip-content") toggletipContent = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/toggletip/toggletip-label.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding } from "@angular/core";
2 |
3 | @Directive({
4 | selector: "[cdsToggletipLabel], [ibmToggletipLabel]"
5 | })
6 | export class ToggletipLabel {
7 | @HostBinding("class.cds--toggletip-label") toggleTipLabel = true;
8 | }
9 |
--------------------------------------------------------------------------------
/src/toggletip/toggletip.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { PopoverModule } from "carbon-components-angular/popover";
5 |
6 | import { ToggletipLabel } from "./toggletip-label.directive";
7 | import { ToggletipAction } from "./toggletip-action.directive";
8 | import { Toggletip } from "./toggletip.component";
9 | import { ToggletipButton } from "./toggletip-button.directive";
10 | import { ToggletipContent } from "./toggletip-content.directive";
11 |
12 | @NgModule({
13 | declarations: [
14 | Toggletip,
15 | ToggletipLabel,
16 | ToggletipAction,
17 | ToggletipButton,
18 | ToggletipContent
19 | ],
20 | exports: [
21 | Toggletip,
22 | ToggletipLabel,
23 | ToggletipAction,
24 | ToggletipButton,
25 | ToggletipContent
26 | ],
27 | imports: [CommonModule, PopoverModule]
28 | })
29 | export class ToggletipModule {}
30 |
--------------------------------------------------------------------------------
/src/tooltip/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./tooltip.interface";
2 | export * from "./tooltip.component";
3 | export * from "./definition-tooptip.component";
4 | export * from "./tooltip.module";
5 |
--------------------------------------------------------------------------------
/src/tooltip/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/tooltip/tooltip.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { PopoverModule } from "carbon-components-angular/popover";
5 | import { Tooltip } from "./tooltip.component";
6 | import { TooltipDefinition } from "./definition-tooptip.component";
7 |
8 | @NgModule({
9 | declarations: [
10 | Tooltip,
11 | TooltipDefinition
12 | ],
13 | exports: [
14 | Tooltip,
15 | TooltipDefinition
16 | ],
17 | imports: [CommonModule, PopoverModule]
18 | })
19 | export class TooltipModule {}
20 |
--------------------------------------------------------------------------------
/src/treeview/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./treeview.module";
2 | export * from "./tree-node.component";
3 | export * from "./treeview.component";
4 | export * from "./treeview.service";
5 |
--------------------------------------------------------------------------------
/src/treeview/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/treeview/tree-node.types.ts:
--------------------------------------------------------------------------------
1 | import { TemplateRef } from "@angular/core";
2 |
3 | export interface Node {
4 | label: string | TemplateRef;
5 | labelContext?: any;
6 | value?: any;
7 | id?: string;
8 | active?: boolean;
9 | disabled?: boolean;
10 | // Selectable is only valid for nodes with children.
11 | // If true, the node won't become selected and if clicked it would only expand/compress itself
12 | selectable?: boolean;
13 | expanded?: boolean;
14 | selected?: boolean;
15 | icon?: string | TemplateRef;
16 | iconContext?: any;
17 | gap?: number;
18 | children?: Node[];
19 | [key: string]: any;
20 | }
21 |
22 | export interface EventOnNode {
23 | node: Node;
24 | event: Event;
25 | }
26 |
--------------------------------------------------------------------------------
/src/treeview/treeview.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { IconModule } from "carbon-components-angular/icon";
5 |
6 | import { TreeViewComponent } from "./treeview.component";
7 | import { TreeNodeComponent } from "./tree-node.component";
8 |
9 | @NgModule({
10 | declarations: [TreeViewComponent, TreeNodeComponent],
11 | exports: [TreeViewComponent, TreeNodeComponent],
12 | imports: [CommonModule, IconModule]
13 | })
14 | export class TreeviewModule {}
15 |
--------------------------------------------------------------------------------
/src/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./../tsconfig.json",
3 | "compilerOptions": {
4 | "declarationMap": false,
5 | "rootDir": "."
6 | },
7 | "angularCompilerOptions": {
8 | "enableIvy": true,
9 | "compliationMode": "partial"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/ui-shell/header/header-global.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostBinding } from "@angular/core";
2 |
3 | /**
4 | * Container for `HeaderAction`s.
5 | */
6 | @Component({
7 | selector: "cds-header-global, ibm-header-global",
8 | template: `
9 |
10 | `
11 | })
12 | export class HeaderGlobal {
13 | @HostBinding("class.cds--header__global") hostClass = true;
14 | }
15 |
--------------------------------------------------------------------------------
/src/ui-shell/header/header-navigation-items.interface.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Used for both HeaderMenus and HeaderItems in the header navigation to generate
3 | * items and menus through a model.
4 | */
5 | export interface NavigationItem {
6 | type: "menu" | "item";
7 | title?: string;
8 | href?: string;
9 | trigger?: "click" | "mouseover";
10 | route?: any[];
11 | routeExtras?: any[];
12 | content?: string;
13 | isCurrentPage?: boolean;
14 | menuItems?: HeaderItemInterface[];
15 | }
16 |
17 | export interface HeaderItemInterface {
18 | href?: string;
19 | route?: any[];
20 | routeExtras?: any[];
21 | content?: string;
22 | }
23 |
--------------------------------------------------------------------------------
/src/ui-shell/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./header/header.module";
2 | export * from "./sidenav/sidenav.module";
3 | export * from "./panel/panel.module";
4 | export * from "./ui-shell.module";
5 |
--------------------------------------------------------------------------------
/src/ui-shell/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "index.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/ui-shell/panel/panel.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from "@angular/core";
2 |
3 | /**
4 | * `Panel` is a component that can be used to display content on the right side of the screen.
5 | * `Panel`s are generally activated by and linked to a `HeaderAction` component.
6 | */
7 | @Component({
8 | selector: "cds-panel, ibm-panel",
9 | template: `
10 |
18 | `
19 | })
20 | export class Panel {
21 | /**
22 | * Controls the visibility of the panel
23 | */
24 | @Input() expanded = false;
25 |
26 | @Input() ariaLabel;
27 | }
28 |
--------------------------------------------------------------------------------
/src/ui-shell/panel/panel.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { I18nModule } from "carbon-components-angular/i18n";
5 |
6 | import { Panel } from "./panel.component";
7 | import { SwitcherList } from "./switcher-list.component";
8 | import { SwitcherListItem } from "./switcher-list-item.component";
9 |
10 | export {
11 | Panel,
12 | SwitcherList,
13 | SwitcherListItem
14 | };
15 |
16 | @NgModule({
17 | declarations: [
18 | Panel,
19 | SwitcherList,
20 | SwitcherListItem
21 | ],
22 | imports: [CommonModule, I18nModule],
23 | exports: [
24 | Panel,
25 | SwitcherList,
26 | SwitcherListItem
27 | ]
28 | })
29 | export class PanelModule { }
30 |
--------------------------------------------------------------------------------
/src/ui-shell/panel/switcher-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostBinding } from "@angular/core";
2 |
3 | /**
4 | * Container for switcher items.
5 | *
6 | * ```html
7 | *
8 | * one
9 | * two
10 | * three
11 | *
12 | * ```
13 | */
14 | @Component({
15 | selector: "cds-switcher-list, ibm-switcher-list",
16 | template: `
17 |
18 | `,
19 | styles: [`
20 | :host {
21 | display: block;
22 | }
23 | `]
24 | })
25 | export class SwitcherList {
26 | @HostBinding("class.cds--switcher") switcher = true;
27 | @HostBinding("attr.role") role = "list";
28 | }
29 |
--------------------------------------------------------------------------------
/src/ui-shell/sidenav/routerlink-extended.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, Input, OnChanges, SimpleChanges } from "@angular/core";
2 | import { NavigationExtras, RouterLinkWithHref } from "@angular/router";
3 | import keys from "lodash-es/keys";
4 |
5 | @Directive({
6 | // tslint:disable-next-line
7 | selector: "[routerLink]"
8 | })
9 | export class RouterLinkExtendedDirective extends RouterLinkWithHref implements OnChanges {
10 | // TODO: Change RouterLinkWithHref with RouterLink from angular 15 since RouterLinkWithHref has been deprecated
11 | @Input() routeExtras: NavigationExtras;
12 |
13 | ngOnChanges(changes: SimpleChanges): void {
14 | if (changes.routeExtras && this.routeExtras) {
15 | keys(this.routeExtras).forEach(routeExtraProperty => this[routeExtraProperty] = this.routeExtras[routeExtraProperty]);
16 | }
17 |
18 | super.ngOnChanges(changes);
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/ui-shell/sidenav/sidenav-item.interface.ts:
--------------------------------------------------------------------------------
1 | import { HeaderItemInterface } from "../header/header.module";
2 |
3 | export interface SideNavItemInterface extends HeaderItemInterface {
4 | isSubMenu?: boolean;
5 | active?: boolean;
6 | }
7 |
--------------------------------------------------------------------------------
/src/ui-shell/sidenav/sidenav.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 | import { RouterModule } from "@angular/router";
4 |
5 | import { I18nModule } from "carbon-components-angular/i18n";
6 |
7 | import { SideNav } from "./sidenav.component";
8 | import { SideNavItem } from "./sidenav-item.component";
9 | import { SideNavMenu } from "./sidenav-menu.component";
10 | import { RouterLinkExtendedDirective } from "./routerlink-extended.directive";
11 |
12 | export { SideNavItemInterface } from "./sidenav-item.interface";
13 |
14 | export {
15 | SideNav,
16 | SideNavItem,
17 | SideNavMenu
18 | };
19 |
20 | @NgModule({
21 | declarations: [
22 | SideNav,
23 | SideNavItem,
24 | SideNavMenu,
25 | RouterLinkExtendedDirective
26 | ],
27 | imports: [CommonModule, I18nModule, RouterModule],
28 | exports: [
29 | SideNav,
30 | SideNavItem,
31 | SideNavMenu
32 | ]
33 | })
34 | export class SideNavModule { }
35 |
--------------------------------------------------------------------------------
/src/ui-shell/stories/header-fluid.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from "@angular/core";
2 | import { NavigationItem } from "../";
3 |
4 | @Component({
5 | selector: "app-bar",
6 | template: "bar
"
7 | })
8 | export class BarComponent { }
9 |
10 | @Component({
11 | selector: "app-foo",
12 | template: "foo
"
13 | })
14 | export class FooComponent { }
15 |
16 | @Component({
17 | selector: "app-header-fluid",
18 | template: `
19 |
20 |
23 |
24 |
28 |
29 | `
30 | })
31 | export class HeaderFluidComponent {
32 | @Input() headerItems: NavigationItem[];
33 | hasHamburger = false;
34 | }
35 |
--------------------------------------------------------------------------------
/src/ui-shell/stories/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./header-fluid.component";
2 |
--------------------------------------------------------------------------------
/src/ui-shell/ui-shell.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { CommonModule } from "@angular/common";
3 |
4 | import { I18nModule } from "carbon-components-angular/i18n";
5 |
6 | import { HeaderModule } from "./header/header.module";
7 | import { SideNavModule } from "./sidenav/sidenav.module";
8 | import { PanelModule } from "./panel/panel.module";
9 |
10 | @NgModule({
11 | imports: [
12 | CommonModule,
13 | I18nModule,
14 | HeaderModule,
15 | SideNavModule,
16 | PanelModule
17 | ],
18 | exports: [
19 | HeaderModule,
20 | SideNavModule,
21 | PanelModule
22 | ]
23 | })
24 | export class UIShellModule { }
25 |
--------------------------------------------------------------------------------
/src/utils/animation-frame.service.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Injectable,
3 | OnDestroy,
4 | NgZone
5 | } from "@angular/core";
6 | import { Observable, Subject, from } from "rxjs";
7 |
8 | @Injectable()
9 | export class AnimationFrameServiceSingleton implements OnDestroy {
10 | public tick: Observable;
11 |
12 | protected frameSource = new Subject();
13 |
14 | protected animationFrameId: number;
15 |
16 | constructor(protected ngZone: NgZone) {
17 | this.tick = this.frameSource.asObservable();
18 | this.ngZone.runOutsideAngular(() => {
19 | this.animationFrameId = requestAnimationFrame(this.doTick.bind(this));
20 | });
21 | }
22 |
23 | ngOnDestroy() {
24 | cancelAnimationFrame(this.animationFrameId);
25 | }
26 |
27 | protected doTick(frame: number) {
28 | this.frameSource.next(frame);
29 | this.ngZone.runOutsideAngular(() => {
30 | requestAnimationFrame(this.doTick.bind(this));
31 | });
32 | }
33 | }
34 |
35 | @Injectable()
36 | export class AnimationFrameService {
37 | public tick: Observable;
38 |
39 | constructor(protected singleton: AnimationFrameServiceSingleton) {
40 | this.tick = from(this.singleton.tick);
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/utils/document.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, OnDestroy } from "@angular/core";
2 | import { Observable, Subscription } from "rxjs";
3 | import { EventHandler } from "./types";
4 | import { getEventObservable } from "./event-observable";
5 |
6 | @Injectable()
7 | export class DocumentService implements OnDestroy {
8 | protected globalEvents = new Map>();
9 |
10 | protected documentRef = document;
11 |
12 | protected subscriptions = new Subscription();
13 |
14 | handleEvent(eventType: string, callback: EventHandler) {
15 | if (!this.globalEvents.has(eventType)) {
16 | if (this.documentRef) {
17 | this.globalEvents.set(eventType, getEventObservable(this.documentRef as any, eventType));
18 | } else {
19 | this.globalEvents.set(eventType, new Observable());
20 | }
21 | }
22 | const observable = this.globalEvents.get(eventType);
23 | this.subscriptions.add(observable.subscribe(callback));
24 | }
25 |
26 | handleClick(callback: EventHandler) {
27 | this.handleEvent("click", callback);
28 | }
29 |
30 | ngOnDestroy() {
31 | this.subscriptions.unsubscribe();
32 | this.globalEvents = null;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/utils/element.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from "@angular/core";
2 | import { Observable, from } from "rxjs";
3 | import { map } from "rxjs/operators";
4 | import { getScrollableParents, isVisibleInContainer } from "./scroll";
5 | import { AnimationFrameServiceSingleton } from "./animation-frame.service";
6 | import { ElementVisibilityEvent } from "./element.types";
7 |
8 | @Injectable()
9 | export class ElementService {
10 | protected tick: Observable;
11 |
12 | constructor(protected singleton: AnimationFrameServiceSingleton) {
13 | this.tick = from(this.singleton.tick);
14 | }
15 |
16 | visibility(target: HTMLElement, parentElement: HTMLElement = target): Observable {
17 | const scrollableParents = getScrollableParents(parentElement);
18 | return this.tick.pipe(map(() => {
19 | for (const parent of scrollableParents) {
20 | if (!isVisibleInContainer(target, parent)) {
21 | return {
22 | visible: false
23 | };
24 | }
25 | }
26 | return {
27 | visible: true
28 | };
29 | }));
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/utils/element.types.ts:
--------------------------------------------------------------------------------
1 | export interface ElementVisibilityEvent {
2 | visible: boolean;
3 | }
4 |
--------------------------------------------------------------------------------
/src/utils/event-observable.ts:
--------------------------------------------------------------------------------
1 | import { Observable, fromEvent } from "rxjs";
2 |
3 | export const getEventObservable = (targetElement: HTMLElement | Element, eventType: string): Observable => {
4 | switch (eventType) {
5 | case "scroll":
6 | case "resize":
7 | case "touchstart":
8 | case "touchmove":
9 | case "touchend":
10 | return fromEvent(targetElement, eventType, { passive: true });
11 | default:
12 | return fromEvent(targetElement, eventType);
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./public_api";
2 |
--------------------------------------------------------------------------------
/src/utils/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "lib": {
3 | "entryFile": "public_api.ts"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/utils/object.ts:
--------------------------------------------------------------------------------
1 | // custom deep object merge
2 | export const merge = (target, ...objects) => {
3 | for (const object of objects) {
4 | for (const key in object) {
5 | if (object.hasOwnProperty(key)) {
6 | // since we're dealing just with JSON this simple check should be enough
7 | if (object[key] instanceof Object) {
8 | if (!target[key]) {
9 | target[key] = {};
10 | }
11 | // recursively merge into the target
12 | // most translations only run 3 or 4 levels deep, so no stack explosions
13 | target[key] = merge(target[key], object[key]);
14 | } else {
15 | target[key] = object[key];
16 | }
17 | }
18 | }
19 | }
20 | return target;
21 | };
22 |
--------------------------------------------------------------------------------
/src/utils/position.ts:
--------------------------------------------------------------------------------
1 | export * from "@carbon/utils-position";
2 |
--------------------------------------------------------------------------------
/src/utils/types.ts:
--------------------------------------------------------------------------------
1 | export type EventHandler = (event: Event) => void;
2 |
--------------------------------------------------------------------------------
/src/utils/utils.ts:
--------------------------------------------------------------------------------
1 | export function clone(obj) {
2 | return JSON.parse(JSON.stringify(obj));
3 | }
4 |
5 | function matchesAttr(el, attr, val) {
6 | const styles = window.getComputedStyle(el);
7 | return val.includes(styles[attr]);
8 | }
9 |
10 | export function closestAttr(s, t, element) {
11 | let el = element;
12 |
13 | if (!element) {
14 | return null;
15 | }
16 |
17 | do {
18 | if (matchesAttr(el, s, t)) {
19 | return el;
20 | }
21 | el = el.parentElement || el.parentNode;
22 | } while (el !== null && el.nodeType === 1);
23 | return null;
24 | }
25 |
--------------------------------------------------------------------------------
/src/utils/window-tools.ts:
--------------------------------------------------------------------------------
1 | let _scrollbarWidth = -1;
2 |
3 | export function getScrollbarWidth() {
4 | // lets not recreate this whole thing every time
5 | if (_scrollbarWidth >= 0) {
6 | return _scrollbarWidth;
7 | }
8 |
9 | // do the calculations the first time
10 | const outer = document.createElement("div");
11 | outer.style.visibility = "hidden";
12 | outer.style.width = "100px";
13 | outer.style["msOverflowStyle"] = "scrollbar"; // needed for WinJS apps
14 |
15 | document.body.appendChild(outer);
16 |
17 | const widthNoScroll = outer.offsetWidth;
18 | // force scrollbars
19 | outer.style.overflow = "scroll";
20 |
21 | // add innerdiv
22 | const inner = document.createElement("div");
23 | inner.style.width = "100%";
24 | outer.appendChild(inner);
25 |
26 | const widthWithScroll = inner.offsetWidth;
27 |
28 | // remove divs
29 | outer.parentNode.removeChild(outer);
30 |
31 | _scrollbarWidth = widthNoScroll - widthWithScroll;
32 | return _scrollbarWidth;
33 | }
34 |
--------------------------------------------------------------------------------
/telemetry.yml:
--------------------------------------------------------------------------------
1 | # yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json
2 |
3 | version: 1
4 | projectId: dc98c0cb-616b-4fe4-9699-2ec03578aae6
5 | endpoint: https://www-api.ibm.com/ibm-telemetry/v1/metrics
6 | collect:
7 | npm:
8 | dependencies: null
9 | js:
10 | functions: {}
11 | tokens: null
12 |
--------------------------------------------------------------------------------
/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import "core-js";
4 | import "zone.js";
5 | import "zone.js/testing";
6 | import { getTestBed } from "@angular/core/testing";
7 | import {
8 | BrowserDynamicTestingModule,
9 | platformBrowserDynamicTesting
10 | } from "@angular/platform-browser-dynamic/testing";
11 |
12 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
13 | declare var require: any;
14 |
15 | // First, initialize the Angular testing environment.
16 | getTestBed().initTestEnvironment(
17 | BrowserDynamicTestingModule,
18 | platformBrowserDynamicTesting()
19 | );
20 | // Then we find all the tests.
21 | const context = require.context("./", true, /\.spec\.ts$/);
22 | // And load the modules.
23 | context.keys().map(context);
24 |
--------------------------------------------------------------------------------
/tsconfig.doc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": [
4 | "src/**/*.ts"
5 | ],
6 | "exclude": [
7 | "src/test.ts",
8 | "src/**/*.spec.ts",
9 | "src/**/*.stories.ts",
10 | "src/**/stories/**"
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "declaration": true,
5 | "experimentalDecorators": true,
6 | "downlevelIteration": true,
7 | "esModuleInterop": true,
8 | "importHelpers": true,
9 | "lib": [
10 | "es2016",
11 | "dom"
12 | ],
13 | "sourceMap": true,
14 | "inlineSources": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "outDir": "./dist-pkg",
18 | "rootDir": ".",
19 | "target": "es2020",
20 | "skipLibCheck": true,
21 | "typeRoots": [
22 | "./node_modules/@types"
23 | ],
24 | "paths": {
25 | "carbon-components-angular/*": [
26 | "./src/*/index"
27 | ]
28 | }
29 | },
30 | "exclude": [
31 | "**/*.stories.ts",
32 | "**/stories/**",
33 | "**/*.spec.ts",
34 | "**/node_modules/**",
35 | "**/dist/**"
36 | ],
37 | "angularCompilerOptions": {
38 | "skipTemplateCodegen": true,
39 | "strictMetadataEmit": false,
40 | "fullTemplateTypeCheck": false,
41 | "enableIvy": true,
42 | "compilationMode": "partial"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "",
4 | "declaration": true,
5 | "experimentalDecorators": true,
6 | "downlevelIteration": true,
7 | "esModuleInterop": true,
8 | "importHelpers": true,
9 | "lib": [
10 | "es2016",
11 | "dom"
12 | ],
13 | "sourceMap": true,
14 | "inlineSources": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "outDir": "./dist/spec",
18 | "target": "es2020",
19 | "typeRoots": [
20 | "./node_modules/@types"
21 | ],
22 | "types": [
23 | "jasmine",
24 | "node",
25 | "resize-observer-browser"
26 | ],
27 | "paths": {
28 | "carbon-components-angular": [
29 | "./src/index"
30 | ],
31 | "carbon-components-angular/*": [
32 | "./src/*/index"
33 | ]
34 | },
35 | },
36 | "files": [
37 | "src/test.ts"
38 | ],
39 | "include": [
40 | "src/**/*.spec.ts"
41 | ],
42 | "angularCompilerOptions": {
43 | "annotateForClosureCompiler": true,
44 | "skipTemplateCodegen": true,
45 | "strictMetadataEmit": true,
46 | "fullTemplateTypeCheck": true,
47 | "strictInjectionParameters": true,
48 | "enableResourceInlining": true
49 | }
50 | }
51 |
--------------------------------------------------------------------------------