diff --git a/src/accordion/accordion-item.component.ts b/src/accordion/accordion-item.component.ts index a2912d0573..eb77fe8b6f 100644 --- a/src/accordion/accordion-item.component.ts +++ b/src/accordion/accordion-item.component.ts @@ -7,6 +7,9 @@ import { EventEmitter, ChangeDetectionStrategy } from "@angular/core"; +import { NgTemplateOutlet, NgClass } from "@angular/common"; +import { IconDirective, IconService, ICON_SERVICE_PROVIDER } from "carbon-components-angular/icon"; +import ChevronDown16 from "@carbon/icons/es/chevron--down/16"; @Component({ selector: "cds-accordion-item, ibm-accordion-item", @@ -48,7 +51,10 @@ import { display: list-item; } `], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + providers: [ICON_SERVICE_PROVIDER], + imports: [IconDirective, NgTemplateOutlet, NgClass] }) export class AccordionItem { static accordionItemCount = 0; @@ -63,6 +69,10 @@ export class AccordionItem { @HostBinding("class.cds--accordion__item--disabled") @Input() disabled = false; @HostBinding("attr.role") role = "listitem"; + constructor(private iconService: IconService) { + this.iconService.registerAll([ChevronDown16]); + } + public toggleExpanded() { if (!this.skeleton) { this.expanded = !this.expanded; diff --git a/src/accordion/accordion.component.spec.ts b/src/accordion/accordion.component.spec.ts index f45ef7b08d..a39ab5d5c4 100644 --- a/src/accordion/accordion.component.spec.ts +++ b/src/accordion/accordion.component.spec.ts @@ -2,7 +2,7 @@ import { TestBed } from "@angular/core/testing"; import { FormsModule } from "@angular/forms"; import { By } from "@angular/platform-browser"; import { Component } from "@angular/core"; -import { IconModule } from "../icon/index"; +import { IconDirective } from "../icon/index"; import { AccordionItem } from "./accordion-item.component"; import { Accordion } from "./accordion.component"; @@ -15,7 +15,12 @@ import { Accordion } from "./accordion.component"; [skeleton]="skeleton"> test-content - ` + `, + standalone: true, + imports: [ + Accordion, + AccordionItem + ] }) class AccordionTest { disabled = false; @@ -28,14 +33,8 @@ describe("Accordion", () => { let fixture, wrapper, debugElement; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - Accordion, - AccordionItem, - AccordionTest - ], imports: [ - FormsModule, - IconModule + AccordionTest ] }); }); diff --git a/src/accordion/accordion.component.ts b/src/accordion/accordion.component.ts index 5601877b3c..ac7e0e7a89 100644 --- a/src/accordion/accordion.component.ts +++ b/src/accordion/accordion.component.ts @@ -7,12 +7,13 @@ import { ChangeDetectionStrategy } from "@angular/core"; import { AccordionItem } from "./accordion-item.component"; +import { NgClass } from "@angular/common"; /** * Get started with importing the module: * * ```typescript - * import { AccordionModule } from 'carbon-components-angular'; + * import { Accordion, AccordionItem } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-accordion--basic) @@ -35,7 +36,9 @@ import { AccordionItem } from "./accordion-item.component"; `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass] }) export class Accordion implements AfterContentInit { /** diff --git a/src/accordion/accordion.module.ts b/src/accordion/accordion.module.ts index cc4c0315b2..b9c7983df5 100644 --- a/src/accordion/accordion.module.ts +++ b/src/accordion/accordion.module.ts @@ -6,17 +6,15 @@ import { AccordionItem } from "./accordion-item.component"; import { IconModule } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ - Accordion, - AccordionItem - ], exports: [ Accordion, AccordionItem ], imports: [ CommonModule, - IconModule + IconModule, + Accordion, + AccordionItem ] }) export class AccordionModule { } diff --git a/src/accordion/accordion.stories.ts b/src/accordion/accordion.stories.ts index df116b59c8..ecc4b54382 100644 --- a/src/accordion/accordion.stories.ts +++ b/src/accordion/accordion.stories.ts @@ -1,12 +1,12 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { DocumentationModule } from "../documentation-component/documentation.module"; -import { AccordionModule, Accordion } from "./"; +import { Documentation } from "../documentation-component/documentation.component"; +import { Accordion, AccordionItem } from "./"; export default { title: "Components/Accordion", decorators: [ moduleMetadata({ - imports: [AccordionModule, DocumentationModule] + imports: [Accordion, Documentation, AccordionItem] }) ], component: Accordion diff --git a/src/breadcrumb/breadcrumb-item.component.ts b/src/breadcrumb/breadcrumb-item.component.ts index 40fa851a3b..ccbdf4a787 100644 --- a/src/breadcrumb/breadcrumb-item.component.ts +++ b/src/breadcrumb/breadcrumb-item.component.ts @@ -9,12 +9,14 @@ import { } from "@angular/core"; import { DomSanitizer } from "@angular/platform-browser"; import { Router } from "@angular/router"; +import { PlaceholderService } from "carbon-components-angular/placeholder"; +import { NgTemplateOutlet } from "@angular/common"; @Component({ selector: "cds-breadcrumb-item, ibm-breadcrumb-item", template: ` - + @if (useTemplate()) { @@ -29,7 +31,10 @@ import { Router } from "@angular/router"; } `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgTemplateOutlet], + providers: [PlaceholderService] }) export class BreadcrumbItemComponent { @Input() set href(v: string) { diff --git a/src/breadcrumb/breadcrumb.component.spec.ts b/src/breadcrumb/breadcrumb.component.spec.ts index 2b6370dcf1..ff77a6aa14 100644 --- a/src/breadcrumb/breadcrumb.component.spec.ts +++ b/src/breadcrumb/breadcrumb.component.spec.ts @@ -1,15 +1,12 @@ import { Component } from "@angular/core"; import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; -import { FormsModule } from "@angular/forms"; -import { I18nModule } from "../i18n/index"; import { By } from "@angular/platform-browser"; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing"; import { Breadcrumb } from "./breadcrumb.component"; import { BreadcrumbItemComponent } from "./breadcrumb-item.component"; -import { BreadcrumbItem } from "./breadcrumb-item.interface"; -import { OverflowMenu } from "carbon-components-angular/dialog"; +import { OverflowMenu } from "../dialog"; @Component({ selector: "test-breadcrumb", @@ -30,7 +27,12 @@ import { OverflowMenu } from "carbon-components-angular/dialog"; Breadcrumb 5 - ` + `, + standalone: true, + imports: [ + Breadcrumb, + BreadcrumbItemComponent + ] }) class TestBreadcrumb { noTrailingSlash = true; @@ -43,7 +45,11 @@ class TestBreadcrumb { [noTrailingSlash]="noTrailingSlash" [threshold]="threshold" [items]="items"> - ` + `, + standalone: true, + imports: [ + Breadcrumb + ] }) class TestBreadcrumbModel { noTrailingSlash = true; @@ -63,16 +69,10 @@ describe("Breadcrumb", () => { TestBed.configureTestingModule({ imports: [ - FormsModule, - I18nModule - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [ - Breadcrumb, - BreadcrumbItemComponent, TestBreadcrumb, TestBreadcrumbModel - ] + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }).compileComponents(); })); diff --git a/src/breadcrumb/breadcrumb.component.ts b/src/breadcrumb/breadcrumb.component.ts index ac1923e4be..94da1750d0 100644 --- a/src/breadcrumb/breadcrumb.component.ts +++ b/src/breadcrumb/breadcrumb.component.ts @@ -14,7 +14,11 @@ import { import { BreadcrumbItem } from "./breadcrumb-item.interface"; import { BreadcrumbItemComponent } from "./breadcrumb-item.component"; import { Router } from "@angular/router"; -import { I18n } from "carbon-components-angular/i18n"; +import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; +import { OverflowMenu } from "carbon-components-angular/dialog"; +import { DOCUMENT_SERVICE_PROVIDER, EventService } from "carbon-components-angular/utils"; const MINIMUM_OVERFLOW_THRESHOLD = 4; @@ -22,7 +26,7 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4; * Get started with importing the module: * * ```typescript - * import { BreadcrumbModule } from 'carbon-components-angular'; + * import { Breadcrumb } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-breadcrumb--basic) @@ -123,7 +127,10 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4; } `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + providers: [I18N_SERVICE_PROVIDER, EventService, DOCUMENT_SERVICE_PROVIDER], + imports: [NgClass, BreadcrumbItemComponent, NgTemplateOutlet, IconDirective, OverflowMenu] }) export class Breadcrumb implements AfterContentInit { @ContentChildren(BreadcrumbItemComponent) children: QueryList; diff --git a/src/breadcrumb/breadcrumb.module.ts b/src/breadcrumb/breadcrumb.module.ts index eb5e2532af..d16d4fa3e8 100644 --- a/src/breadcrumb/breadcrumb.module.ts +++ b/src/breadcrumb/breadcrumb.module.ts @@ -10,15 +10,13 @@ import { ButtonModule } from "carbon-components-angular/button"; import { IconModule } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ - Breadcrumb, - BreadcrumbItemComponent - ], exports: [ Breadcrumb, BreadcrumbItemComponent ], imports: [ + Breadcrumb, + BreadcrumbItemComponent, CommonModule, ButtonModule, DialogModule, diff --git a/src/breadcrumb/breadcrumb.stories.ts b/src/breadcrumb/breadcrumb.stories.ts index 379d875d38..980657e7c7 100644 --- a/src/breadcrumb/breadcrumb.stories.ts +++ b/src/breadcrumb/breadcrumb.stories.ts @@ -1,10 +1,10 @@ import { moduleMetadata, Meta } from "@storybook/angular"; import { - BreadcrumbModule, Breadcrumb, BreadcrumbItemComponent, BreadcrumbItem } from "./"; +import { I18N_SERVICE_PROVIDER } from "../i18n"; let breadcrumbItems; @@ -25,7 +25,11 @@ export default { title: "Components/Breadcrumb", decorators: [ moduleMetadata({ - imports: [BreadcrumbModule] + imports: [ + Breadcrumb, + BreadcrumbItemComponent + ], + providers: [I18N_SERVICE_PROVIDER] }) ], args: { @@ -41,8 +45,7 @@ export default { control: false } }, - component: Breadcrumb, - subcomponents: { BreadcrumbItemComponent } + component: Breadcrumb } as Meta; const Template = (args) => ({ @@ -149,4 +152,3 @@ Skeleton.parameters = { disable: true } }; - diff --git a/src/button/base-icon-button.component.ts b/src/button/base-icon-button.component.ts index 2c842f40cc..8d36f896d7 100644 --- a/src/button/base-icon-button.component.ts +++ b/src/button/base-icon-button.component.ts @@ -8,7 +8,8 @@ import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; */ @Component({ template: "", - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true }) export class BaseIconButton { /** diff --git a/src/button/button-set.component.ts b/src/button/button-set.component.ts index 38d9108b7e..78f7cad77e 100644 --- a/src/button/button-set.component.ts +++ b/src/button/button-set.component.ts @@ -4,7 +4,7 @@ import { ChangeDetectionStrategy, Component, HostBinding } from "@angular/core"; * Get started with importing the module: * * ```typescript - * import { ButtonModule } from 'carbon-components-angular'; + * import { Button } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-button-button-set--basic) @@ -12,7 +12,8 @@ import { ChangeDetectionStrategy, Component, HostBinding } from "@angular/core"; @Component({ selector: "cds-button-set, ibm-button-set", template: "", - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true }) export class ButtonSet { @HostBinding("class.cds--btn-set") buttonSetClass = true; diff --git a/src/button/button-set.stories.ts b/src/button/button-set.stories.ts index 61bcf72ad1..4d45f06e01 100644 --- a/src/button/button-set.stories.ts +++ b/src/button/button-set.stories.ts @@ -1,14 +1,14 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { IconModule } from "../icon"; -import { ButtonModule, ButtonSet } from "./"; +import { IconDirective } from "../icon"; +import { Button, ButtonSet } from "./"; export default { title: "Components/Button/Button Set", decorators: [ moduleMetadata({ imports: [ - ButtonModule, - IconModule + Button, + IconDirective ] }) ], diff --git a/src/button/button.directive.ts b/src/button/button.directive.ts index 054a51f814..bbe8eeadb7 100644 --- a/src/button/button.directive.ts +++ b/src/button/button.directive.ts @@ -9,7 +9,7 @@ import { ButtonSize, ButtonType } from "./button.types"; * A convenience directive for applying styling to a button. Get started with importing the module: * * ```typescript - * import { ButtonModule } from 'carbon-components-angular'; + * import { Button } from 'carbon-components-angular'; * ``` * * Example: @@ -24,7 +24,8 @@ import { ButtonSize, ButtonType } from "./button.types"; * [See demo](../../?path=/story/components-button--basic) */ @Directive({ - selector: "[cdsButton], [ibmButton]" + selector: "[cdsButton], [ibmButton]", + standalone: true }) export class Button { /** diff --git a/src/button/button.module.ts b/src/button/button.module.ts index de41adc337..8b6dc4daf8 100644 --- a/src/button/button.module.ts +++ b/src/button/button.module.ts @@ -9,17 +9,18 @@ import { IconButton } from "./icon-button.component"; import { TooltipModule } from "carbon-components-angular/tooltip"; @NgModule({ - declarations: [ + exports: [ Button, ButtonSet, - BaseIconButton, IconButton ], - exports: [ + imports: [ + CommonModule, + TooltipModule, Button, ButtonSet, + BaseIconButton, IconButton - ], - imports: [CommonModule, TooltipModule] + ] }) export class ButtonModule { } diff --git a/src/button/button.stories.ts b/src/button/button.stories.ts index 416c483977..0ccc629187 100644 --- a/src/button/button.stories.ts +++ b/src/button/button.stories.ts @@ -1,14 +1,14 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { IconModule } from "../icon"; -import { ButtonModule, Button } from "./"; +import { IconDirective } from "../icon"; +import { Button } from "./"; export default { title: "Components/Button", decorators: [ moduleMetadata({ imports: [ - ButtonModule, - IconModule + Button, + IconDirective ] }) ], diff --git a/src/button/icon-button.component.ts b/src/button/icon-button.component.ts index 80efded319..ea61d45160 100644 --- a/src/button/icon-button.component.ts +++ b/src/button/icon-button.component.ts @@ -12,12 +12,16 @@ import { } from "@angular/core"; import { BaseIconButton } from "./base-icon-button.component"; import { ButtonSize, ButtonType } from "./button.types"; +import { Tooltip } from "carbon-components-angular/tooltip"; +import { NgClass } from "@angular/common"; +import { Button } from "./button.directive"; +import { IconService, ICON_SERVICE_PROVIDER } from "carbon-components-angular/icon"; /** * Get started with importing the module: * * ```typescript - * import { ButtonModule } from 'carbon-components-angular'; + * import { Button } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-button-icon-button--basic) @@ -55,7 +59,10 @@ import { ButtonSize, ButtonType } from "./button.types"; `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + providers: [ICON_SERVICE_PROVIDER], + imports: [Tooltip, NgClass, Button] }) export class IconButton extends BaseIconButton implements AfterViewInit { /** @@ -133,8 +140,11 @@ export class IconButton extends BaseIconButton implements AfterViewInit { /** * Common button events */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() click = new EventEmitter(); + // eslint-disable-next-line @angular-eslint/no-output-native @Output() focus = new EventEmitter(); + // eslint-disable-next-line @angular-eslint/no-output-native @Output() blur = new EventEmitter(); /** * Event to emit when click event is fired from tooltip diff --git a/src/button/icon-button.stories.ts b/src/button/icon-button.stories.ts index 1847e78934..0145f5715f 100644 --- a/src/button/icon-button.stories.ts +++ b/src/button/icon-button.stories.ts @@ -1,7 +1,7 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { IconModule } from "../icon"; +import { IconDirective } from "../icon"; import { - ButtonModule, + Button, IconButton } from "./"; @@ -10,8 +10,8 @@ export default { decorators: [ moduleMetadata({ imports: [ - ButtonModule, - IconModule + Button, + IconDirective ] }) ], @@ -138,4 +138,3 @@ WithAutoAlign.args = { align: "top", isOpen: true }; - diff --git a/src/checkbox/checkbox.component.spec.ts b/src/checkbox/checkbox.component.spec.ts index 973f9626be..b27ecc971b 100644 --- a/src/checkbox/checkbox.component.spec.ts +++ b/src/checkbox/checkbox.component.spec.ts @@ -1,4 +1,3 @@ -import { CommonModule } from "@angular/common"; import { FormsModule } from "@angular/forms"; import { TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; @@ -17,7 +16,12 @@ import CheckboxExportedTest from "./checkbox-exported-tests"; [indeterminate]="indeterminate" [(ngModel)]="model"> - ` + `, + standalone: true, + imports: [ + Checkbox, + FormsModule + ] }) class CheckboxTest { model = false; @@ -33,8 +37,7 @@ const testingSetup = (checkboxComponent) => { // configureTestingModule normally happens in `beforeEach`, but needed here because // Exported Tests need access to the compiled component into the `fixture` variable TestBed.configureTestingModule({ - declarations: [Checkbox, CheckboxTest], - imports: [CommonModule, FormsModule] + imports: [CheckboxTest] }); return TestBed.createComponent(checkboxComponent); diff --git a/src/checkbox/checkbox.component.ts b/src/checkbox/checkbox.component.ts index 5dbdd29c69..0897972f80 100644 --- a/src/checkbox/checkbox.component.ts +++ b/src/checkbox/checkbox.component.ts @@ -12,6 +12,7 @@ import { } from "@angular/core"; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms"; import { CheckboxValue } from "./checkbox.types"; +import { NgClass } from "@angular/common"; /** * Defines the set of states for a checkbox component. @@ -27,7 +28,7 @@ export enum CheckboxState { * Get started with importing the module: * * ```typescript - * import { CheckboxModule } from 'carbon-components-angular'; + * import { Checkbox } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-checkbox--basic) @@ -69,7 +70,9 @@ export enum CheckboxState { multi: true } ], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass] }) export class Checkbox implements ControlValueAccessor, AfterViewInit { /** @@ -159,6 +162,7 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit { /** * Emits click event. */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() click = new EventEmitter(); /** diff --git a/src/checkbox/checkbox.module.ts b/src/checkbox/checkbox.module.ts index 2bdba31774..2faf251c7d 100644 --- a/src/checkbox/checkbox.module.ts +++ b/src/checkbox/checkbox.module.ts @@ -7,15 +7,13 @@ import { CommonModule } from "@angular/common"; import { Checkbox } from "./checkbox.component"; @NgModule({ - declarations: [ - Checkbox - ], exports: [ Checkbox ], imports: [ CommonModule, - FormsModule + FormsModule, + Checkbox ] }) export class CheckboxModule { } diff --git a/src/checkbox/checkbox.stories.ts b/src/checkbox/checkbox.stories.ts index 272d1bf81c..1ada500d32 100644 --- a/src/checkbox/checkbox.stories.ts +++ b/src/checkbox/checkbox.stories.ts @@ -1,6 +1,6 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { CheckboxModule, Checkbox } from "./"; +import { Checkbox } from "./"; import { ReactiveFormsStory } from "./stories"; export default { @@ -11,7 +11,7 @@ export default { imports: [ FormsModule, ReactiveFormsModule, - CheckboxModule + Checkbox ] }) ], diff --git a/src/code-snippet/code-snippet.component.spec.ts b/src/code-snippet/code-snippet.component.spec.ts index 4a597a86d8..7231f81a04 100644 --- a/src/code-snippet/code-snippet.component.spec.ts +++ b/src/code-snippet/code-snippet.component.spec.ts @@ -1,8 +1,5 @@ import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; import { ComponentFixture, TestBed } from "@angular/core/testing"; -import { I18nModule } from "../i18n/index"; -import { IconModule } from "../icon/index"; -import { UtilsModule } from "../utils/index"; import { CodeSnippet } from "./code-snippet.component"; @@ -13,11 +10,8 @@ describe("CodeSnippet", () => { beforeEach(() => { TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [CodeSnippet], imports: [ - I18nModule, - IconModule, - UtilsModule + CodeSnippet ] }); diff --git a/src/code-snippet/code-snippet.component.ts b/src/code-snippet/code-snippet.component.ts index 5e64b0fb28..0b7f290b3a 100644 --- a/src/code-snippet/code-snippet.component.ts +++ b/src/code-snippet/code-snippet.component.ts @@ -9,8 +9,11 @@ import { } from "@angular/core"; import { BaseIconButton } from "carbon-components-angular/button"; -import { I18n } from "carbon-components-angular/i18n"; -import { EventService } from "carbon-components-angular/utils"; +import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n"; +import { DOCUMENT_SERVICE_PROVIDER, EventService } from "carbon-components-angular/utils"; +import { NgTemplateOutlet, NgClass, NgStyle } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; +import { IconButton } from "carbon-components-angular/button"; export enum SnippetType { single = "single", @@ -136,7 +139,10 @@ export enum SnippetType { `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + providers: [I18N_SERVICE_PROVIDER, EventService, DOCUMENT_SERVICE_PROVIDER], + imports: [NgTemplateOutlet, NgClass, NgStyle, IconDirective, IconButton] }) export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit { @HostBinding("class.cds--snippet") get snippetClass() { diff --git a/src/code-snippet/code-snippet.module.ts b/src/code-snippet/code-snippet.module.ts index 42a17f8383..4c2cb6352c 100644 --- a/src/code-snippet/code-snippet.module.ts +++ b/src/code-snippet/code-snippet.module.ts @@ -10,13 +10,11 @@ import { UtilsModule } from "carbon-components-angular/utils"; import { CodeSnippet } from "./code-snippet.component"; @NgModule({ - declarations: [ - CodeSnippet - ], exports: [ CodeSnippet ], imports: [ + CodeSnippet, CommonModule, ButtonModule, I18nModule, diff --git a/src/code-snippet/code-snippet.stories.ts b/src/code-snippet/code-snippet.stories.ts index 982ccc7721..3b1d52dc14 100644 --- a/src/code-snippet/code-snippet.stories.ts +++ b/src/code-snippet/code-snippet.stories.ts @@ -1,11 +1,11 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { CodeSnippetModule, CodeSnippet } from "./"; +import { CodeSnippet } from "./"; export default { title: "Components/Code Snippet", decorators: [ moduleMetadata({ - imports: [CodeSnippetModule] + imports: [CodeSnippet] }) ], argTypes: { diff --git a/src/combo-button/combo-button.component.ts b/src/combo-button/combo-button.component.ts index 65f0f78132..0c1b442751 100644 --- a/src/combo-button/combo-button.component.ts +++ b/src/combo-button/combo-button.component.ts @@ -26,6 +26,9 @@ import { flip } from "@floating-ui/dom"; import { ContextMenuItemComponent, ItemClickEvent } from "carbon-components-angular/context-menu"; +import { Button, IconButton } from "carbon-components-angular/button"; +import { IconDirective } from "carbon-components-angular/icon"; +import { ContextMenuComponent } from "carbon-components-angular/context-menu"; type ComboButtonPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end"; @@ -72,7 +75,9 @@ type ComboButtonPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [Button, IconButton, IconDirective, ContextMenuComponent] }) export class ComboButtonComponent implements OnChanges, AfterViewInit, OnDestroy { static comboButtonCounter = 0; diff --git a/src/combo-button/combo-button.module.ts b/src/combo-button/combo-button.module.ts index 75ea9db532..ed1c4eb0e4 100644 --- a/src/combo-button/combo-button.module.ts +++ b/src/combo-button/combo-button.module.ts @@ -12,9 +12,9 @@ import { ComboButtonComponent } from "./combo-button.component"; CommonModule, ButtonModule, IconModule, - ContextMenuModule + ContextMenuModule, + ComboButtonComponent ], - exports: [ComboButtonComponent], - declarations: [ComboButtonComponent] + exports: [ComboButtonComponent] }) export class ComboButtonModule { } diff --git a/src/combo-button/combo-button.spec.ts b/src/combo-button/combo-button.spec.ts index 19db0cdb72..ee131e7546 100644 --- a/src/combo-button/combo-button.spec.ts +++ b/src/combo-button/combo-button.spec.ts @@ -1,11 +1,9 @@ import { Component, Input } from "@angular/core"; import { TestBed } from "@angular/core/testing"; -import { ContextMenuModule } from "../context-menu"; -import { IconModule } from "../icon"; import { By } from "@angular/platform-browser"; -import { ComboButtonModule } from "./combo-button.module"; -import { Button } from "../button"; +import { ComboButtonComponent } from "./combo-button.component"; +import { ContextMenuDividerComponent, ContextMenuItemComponent } from "../context-menu"; @Component({ @@ -20,7 +18,13 @@ import { Button } from "../button"; - ` + `, + standalone: true, + imports: [ + ComboButtonComponent, + ContextMenuItemComponent, + ContextMenuDividerComponent + ] }) class ComboButtonTestComponent {} @@ -28,13 +32,8 @@ describe("Combo button", () => { let fixture, wrapper; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - ComboButtonTestComponent - ], imports: [ - ComboButtonModule, - ContextMenuModule, - IconModule + ComboButtonTestComponent ] }); }); diff --git a/src/combo-button/combo-button.stories.ts b/src/combo-button/combo-button.stories.ts index 6c6ac23899..5a5228554e 100644 --- a/src/combo-button/combo-button.stories.ts +++ b/src/combo-button/combo-button.stories.ts @@ -1,17 +1,19 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { ComboButtonModule, ComboButtonComponent } from "./"; +import { ComboButtonComponent } from "./"; -import { IconModule } from "../icon"; -import { ContextMenuModule } from "../context-menu"; +import { IconDirective } from "../icon"; +import { ContextMenuComponent, ContextMenuDividerComponent, ContextMenuItemComponent } from "../context-menu"; export default { title: "Components/Combo button", decorators: [ moduleMetadata({ imports: [ - ComboButtonModule, - IconModule, - ContextMenuModule + ComboButtonComponent, + IconDirective, + ContextMenuComponent, + ContextMenuItemComponent, + ContextMenuDividerComponent ] }) ], diff --git a/src/combobox/combobox.component.spec.ts b/src/combobox/combobox.component.spec.ts index 5b012d2aa5..824a884241 100644 --- a/src/combobox/combobox.component.spec.ts +++ b/src/combobox/combobox.component.spec.ts @@ -2,17 +2,12 @@ import { Component, Input } from "@angular/core"; import { TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; -import { IconModule } from "../icon/index"; -import { I18nModule } from "../i18n/index"; - import { ListItem } from "./../dropdown/list-item.interface"; import { ComboBox } from "./combobox.component"; import { DropdownList } from "./../dropdown/list/dropdown-list.component"; -import { ScrollableList } from "./../dropdown/scrollable-list.directive"; import { FormsModule } from "@angular/forms"; -import { UtilsModule } from "../utils"; +import { AnimationFrameService, AnimationFrameServiceSingleton } from "../utils"; import { DropdownService } from "./../dropdown/index"; -import { PlaceholderModule } from "./../placeholder/index"; @Component({ @@ -25,7 +20,13 @@ import { PlaceholderModule } from "./../placeholder/index"; [type]="type" [itemValueKey]="itemValueKey"> - ` + `, + standalone: true, + imports: [ + ComboBox, + DropdownList, + FormsModule + ] }) class ComboboxTest { items = [ @@ -42,20 +43,9 @@ describe("Combo box", () => { let fixture, wrapper, element; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - ComboBox, - DropdownList, - ComboboxTest, - ScrollableList - ], imports: [ - IconModule, - I18nModule, - FormsModule, - UtilsModule, - PlaceholderModule - ], - providers: [DropdownService] + ComboboxTest + ] }); }); diff --git a/src/combobox/combobox.component.ts b/src/combobox/combobox.component.ts index 211334f85e..3fd0311620 100644 --- a/src/combobox/combobox.component.ts +++ b/src/combobox/combobox.component.ts @@ -16,16 +16,20 @@ import { ChangeDetectionStrategy, ChangeDetectorRef } from "@angular/core"; -import { AbstractDropdownView, DropdownService } from "carbon-components-angular/dropdown"; -import { ListItem } from "carbon-components-angular/dropdown"; +import { AbstractDropdownView, DropdownService, ListItem } from "carbon-components-angular/dropdown"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { filter } from "rxjs/operators"; import { + AnimationFrameService, + AnimationFrameServiceSingleton, getScrollableParents, hasScrollableParents } from "carbon-components-angular/utils"; -import { I18n, Overridable } from "carbon-components-angular/i18n"; +import { I18n } from "carbon-components-angular/i18n"; import { Observable } from "rxjs"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; +import { PlaceholderService } from "carbon-components-angular/placeholder"; /** * Get started with importing the module: @@ -222,9 +226,16 @@ import { Observable } from "rxjs"; provide: NG_VALUE_ACCESSOR, useExisting: ComboBox, multi: true - } + }, + DropdownService, + AnimationFrameService, + AnimationFrameServiceSingleton, + PlaceholderService, + I18n ], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass, NgTemplateOutlet, IconDirective] }) export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy { /** @@ -445,6 +456,7 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD * } * ``` */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() submit = new EventEmitter<{ items: ListItem[], index: number, diff --git a/src/combobox/combobox.module.ts b/src/combobox/combobox.module.ts index 3cc5ab8127..da2c2de9b5 100644 --- a/src/combobox/combobox.module.ts +++ b/src/combobox/combobox.module.ts @@ -8,14 +8,12 @@ import { UtilsModule } from "carbon-components-angular/utils"; import { IconModule } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ - ComboBox - ], exports: [ ComboBox, DropdownModule ], imports: [ + ComboBox, CommonModule, DropdownModule, I18nModule, diff --git a/src/combobox/combobox.stories.ts b/src/combobox/combobox.stories.ts index 0e9e8bb30b..55f4abb724 100644 --- a/src/combobox/combobox.stories.ts +++ b/src/combobox/combobox.stories.ts @@ -1,12 +1,13 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { ComboBoxModule, ComboBox } from "./"; +import { ComboBox } from "./"; import { DynamicListComboBox, ReactiveFormsCombobox, MockQueryCombobox } from "./stories"; +import { DropdownList } from "../dropdown"; export default { title: "Components/Combobox", @@ -20,8 +21,10 @@ export default { imports: [ FormsModule, ReactiveFormsModule, - ComboBoxModule + ComboBox, + DropdownList ] + }) ], args: { diff --git a/src/combobox/stories/app-dynamic-list-combobox.component.ts b/src/combobox/stories/app-dynamic-list-combobox.component.ts index 06c3b54d59..261d679d75 100644 --- a/src/combobox/stories/app-dynamic-list-combobox.component.ts +++ b/src/combobox/stories/app-dynamic-list-combobox.component.ts @@ -1,4 +1,6 @@ import { Component, AfterViewInit } from "@angular/core"; +import { ComboBox } from "../combobox.component"; +import { DropdownList } from "carbon-components-angular/dropdown"; @Component({ selector: "app-dynamic-list-combobox", @@ -9,7 +11,8 @@ import { Component, AfterViewInit } from "@angular/core"; (selected)="updateSelected($event)"> - ` + `, + imports: [ComboBox, DropdownList] }) export class DynamicListComboBox implements AfterViewInit { items = [ diff --git a/src/contained-list/contained-list-item.component.ts b/src/contained-list/contained-list-item.component.ts index 21babf94da..04e67c8b9a 100644 --- a/src/contained-list/contained-list-item.component.ts +++ b/src/contained-list/contained-list-item.component.ts @@ -7,6 +7,8 @@ import { Output, TemplateRef } from "@angular/core"; +import { NgTemplateOutlet } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; @Component({ selector: "cds-contained-list-item, ibm-contained-list-item", @@ -39,7 +41,9 @@ import { } `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgTemplateOutlet, IconDirective] }) export class ContainedListItem { /** @@ -74,6 +78,7 @@ export class ContainedListItem { /** * Emits click event. */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() click = new EventEmitter(); /** diff --git a/src/contained-list/contained-list.component.spec.ts b/src/contained-list/contained-list.component.spec.ts index 016be7092f..2760341bdc 100644 --- a/src/contained-list/contained-list.component.spec.ts +++ b/src/contained-list/contained-list.component.spec.ts @@ -1,8 +1,8 @@ import { Component } from "@angular/core"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; -import { ButtonModule } from "../button"; -import { IconModule, IconService } from "../icon"; +import { Button, IconButton } from "../button"; +import { IconDirective, IconService, ICON_SERVICE_PROVIDER } from "../icon"; import { ContainedListItem } from "./contained-list-item.component"; import Apple16 from "@carbon/icons/es/apple/16"; import Fish16 from "@carbon/icons/es/fish/16"; @@ -38,7 +38,10 @@ import { ContainedListKind, ContainedListSize } from "./contained-list.enums"; Clickable list item - ` + `, + standalone: true, + providers: [ICON_SERVICE_PROVIDER], + imports: [ContainedList, ContainedListItem, IconDirective, IconButton, Button] }) class WrapperComponent { constructor(private iconService: IconService) { @@ -52,8 +55,7 @@ describe("ContainedList", () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ContainedList, ContainedListItem, WrapperComponent], - imports: [IconModule, ButtonModule] + imports: [WrapperComponent] }).compileComponents(); fixture = TestBed.createComponent(ContainedList); diff --git a/src/contained-list/contained-list.component.ts b/src/contained-list/contained-list.component.ts index 6ea127cb6c..7b87f4e179 100644 --- a/src/contained-list/contained-list.component.ts +++ b/src/contained-list/contained-list.component.ts @@ -1,11 +1,11 @@ import { ChangeDetectionStrategy, Component, - HostBinding, Input, TemplateRef } from "@angular/core"; import { ContainedListKind, ContainedListSize } from "./contained-list.enums"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; /** * Get started with importing the module: @@ -54,7 +54,9 @@ import { ContainedListKind, ContainedListSize } from "./contained-list.enums"; `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass, NgTemplateOutlet] }) export class ContainedList { /** Used to generate unique IDs */ diff --git a/src/contained-list/contained-list.module.ts b/src/contained-list/contained-list.module.ts index 9ffac128f5..ea0011d753 100644 --- a/src/contained-list/contained-list.module.ts +++ b/src/contained-list/contained-list.module.ts @@ -5,8 +5,12 @@ import { ContainedListItem } from "./contained-list-item.component"; import { IconModule } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ContainedList, ContainedListItem], exports: [ContainedList, ContainedListItem], - imports: [CommonModule, IconModule] + imports: [ + CommonModule, + IconModule, + ContainedList, + ContainedListItem + ] }) export class ContainedListModule {} diff --git a/src/contained-list/contained-list.stories.ts b/src/contained-list/contained-list.stories.ts index e33d2f3888..6ba2627ffc 100644 --- a/src/contained-list/contained-list.stories.ts +++ b/src/contained-list/contained-list.stories.ts @@ -1,38 +1,46 @@ import { moduleMetadata, Meta, Story } from "@storybook/angular"; -import { ContainedListModule, ContainedList, ContainedListItem } from "."; -import { ButtonModule } from "../button"; -import { IconModule } from "../icon"; -import { LayerModule } from "../layer"; -import { LayoutModule } from "../layout"; -import { TagModule } from "../tag"; -import { DialogModule } from "../dialog"; -import { TooltipModule } from "../tooltip"; -import { SearchModule } from "../search"; +import { ContainedList, ContainedListItem } from "."; +import { Button, IconButton } from "../button"; +import { LayerDirective } from "../layer"; +import { StackDirective } from "../layout"; +import { Tag } from "../tag"; +import { Tooltip } from "../tooltip"; +import { Search } from "../search"; import { ContainedListKind, ContainedListSize } from "./contained-list.enums"; -import { ContainedListStoryModule } from "./stories/contained-list-story.module"; +import { ContainedListStoryModule } from "./stories/contained-list-story.module"; +import { OverflowMenu, OverflowMenuOption } from "../dialog"; +import { IconDirective } from "../icon"; +import { I18n } from "../i18n"; +import { PlaceholderService } from "../placeholder"; + + export default { title: "Components/Contained List", decorators: [ moduleMetadata({ imports: [ - ContainedListModule, + Button, + ContainedList, + ContainedListItem, ContainedListStoryModule, - ButtonModule, - IconModule, - LayerModule, - LayoutModule, - TagModule, - DialogModule, - TooltipModule, - SearchModule + IconButton, + IconDirective, + LayerDirective, + OverflowMenu, + OverflowMenuOption, + StackDirective, + Search, + Tag, + Tooltip + ], + providers: [ + I18n, + PlaceholderService ] }) ], component: ContainedList, - subcomponents: { - ContainedListItem - }, args: { isInset: false, kind: ContainedListKind.OnPage, @@ -362,4 +370,3 @@ const withListTitleDecoratorsTemplate = () => ({ ` }); export const withListTitleDecorators = withListTitleDecoratorsTemplate.bind({}); - diff --git a/src/contained-list/stories/contained-list-story.module.ts b/src/contained-list/stories/contained-list-story.module.ts index 466a6eccc1..6fd17f30a9 100644 --- a/src/contained-list/stories/contained-list-story.module.ts +++ b/src/contained-list/stories/contained-list-story.module.ts @@ -1,5 +1,5 @@ -import { NgModule } from "@angular/core"; -import { IconService } from "../../icon/icon.service"; +import { NgModule, Inject, Directive } from "@angular/core"; +import { IconService, ICON_SERVICE_PROVIDER, IconDirective } from "../../icon"; import Apple16 from "@carbon/icons/es/apple/16"; import Fish16 from "@carbon/icons/es/fish/16"; import Strawberry16 from "@carbon/icons/es/strawberry/16"; @@ -8,10 +8,13 @@ import Wheat16 from "@carbon/icons/es/wheat/16"; import { CommonModule } from "@angular/common"; @NgModule({ - imports: [CommonModule] + imports: [CommonModule, IconDirective], + providers: [ICON_SERVICE_PROVIDER] }) export class ContainedListStoryModule { - constructor(private iconService: IconService) { + constructor( + protected iconService: IconService + ) { this.iconService.registerAll([ Apple16, Fish16, diff --git a/src/content-switcher/content-switcher-option.directive.ts b/src/content-switcher/content-switcher-option.directive.ts index 5a1474eaf5..2d288e5eaf 100644 --- a/src/content-switcher/content-switcher-option.directive.ts +++ b/src/content-switcher/content-switcher-option.directive.ts @@ -11,7 +11,8 @@ import { } from "@angular/core"; @Directive({ - selector: "[cdsContentOption], [ibmContentOption]" + selector: "[cdsContentOption], [ibmContentOption]", + standalone: true }) export class ContentSwitcherOption implements OnInit { /** diff --git a/src/content-switcher/content-switcher.component.spec.ts b/src/content-switcher/content-switcher.component.spec.ts index 904929d4fe..4aec5b09c6 100644 --- a/src/content-switcher/content-switcher.component.spec.ts +++ b/src/content-switcher/content-switcher.component.spec.ts @@ -2,7 +2,7 @@ import { TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { Component } from "@angular/core"; import { ContentSwitcher } from "./content-switcher.component"; -import { ContentSwitcherModule, ContentSwitcherOption } from "./index"; +import { ContentSwitcherOption } from "./index"; @Component({ template: ` @@ -11,7 +11,9 @@ import { ContentSwitcherModule, ContentSwitcherOption } from "./index"; - ` + `, + standalone: true, + imports: [ContentSwitcher, ContentSwitcherOption] }) class ContentSwitcherTest { selectedValue = null; @@ -24,8 +26,7 @@ describe("ContentSwitcher", () => { let fixture, wrapper, element; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ContentSwitcherTest], - imports: [ContentSwitcherModule] + imports: [ContentSwitcherTest] }); }); diff --git a/src/content-switcher/content-switcher.component.ts b/src/content-switcher/content-switcher.component.ts index d112606d4b..b6c4440ce0 100644 --- a/src/content-switcher/content-switcher.component.ts +++ b/src/content-switcher/content-switcher.component.ts @@ -12,6 +12,7 @@ import { } from "@angular/core"; import { ContentSwitcherOption } from "./content-switcher-option.directive"; import { isFocusInLastItem, isFocusInFirstItem } from "carbon-components-angular/common"; +import { NgClass } from "@angular/common"; /** * The content switcher can be used for toggling between distinct options. @@ -48,7 +49,9 @@ import { isFocusInLastItem, isFocusInFirstItem } from "carbon-components-angular `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass] }) export class ContentSwitcher implements AfterViewInit { @Input() ariaLabel = "content switcher"; diff --git a/src/content-switcher/content-switcher.module.ts b/src/content-switcher/content-switcher.module.ts index 1e131e45a5..d1fc8c9037 100644 --- a/src/content-switcher/content-switcher.module.ts +++ b/src/content-switcher/content-switcher.module.ts @@ -5,14 +5,14 @@ import { ContentSwitcher } from "./content-switcher.component"; import { ContentSwitcherOption } from "./content-switcher-option.directive"; @NgModule({ - declarations: [ + exports: [ ContentSwitcher, ContentSwitcherOption ], - exports: [ + imports: [ + CommonModule, ContentSwitcher, ContentSwitcherOption - ], - imports: [CommonModule] + ] }) export class ContentSwitcherModule { } diff --git a/src/content-switcher/content-switcher.stories.ts b/src/content-switcher/content-switcher.stories.ts index 91f77f36fa..189fd4a639 100644 --- a/src/content-switcher/content-switcher.stories.ts +++ b/src/content-switcher/content-switcher.stories.ts @@ -1,6 +1,5 @@ import { moduleMetadata, Meta } from "@storybook/angular"; import { - ContentSwitcherModule, ContentSwitcher, ContentSwitcherOption } from "./"; @@ -9,7 +8,10 @@ export default { title: "Components/Content Switcher", decorators: [ moduleMetadata({ - imports: [ContentSwitcherModule] + imports: [ + ContentSwitcher, + ContentSwitcherOption + ] }) ], argTypes: { diff --git a/src/context-menu/context-menu-divider.component.ts b/src/context-menu/context-menu-divider.component.ts index 33608b8301..d148dcaffd 100644 --- a/src/context-menu/context-menu-divider.component.ts +++ b/src/context-menu/context-menu-divider.component.ts @@ -3,7 +3,8 @@ import { ChangeDetectionStrategy, Component, HostBinding } from "@angular/core"; @Component({ selector: "cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider", template: "", - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true }) export class ContextMenuDividerComponent { @HostBinding("class.cds--menu-item-divider") dividerClass = true; diff --git a/src/context-menu/context-menu-group.component.ts b/src/context-menu/context-menu-group.component.ts index edaee0097f..b16fd58a88 100644 --- a/src/context-menu/context-menu-group.component.ts +++ b/src/context-menu/context-menu-group.component.ts @@ -19,7 +19,8 @@ import { ContextMenuSelectionService } from "./context-menu-selection.service"; `, providers: [ContextMenuSelectionService], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true }) export class ContextMenuGroupComponent implements OnInit, OnChanges, OnDestroy { @HostBinding("attr.role") role = "group"; diff --git a/src/context-menu/context-menu-item.component.ts b/src/context-menu/context-menu-item.component.ts index c75d79a52d..09a925f071 100644 --- a/src/context-menu/context-menu-item.component.ts +++ b/src/context-menu/context-menu-item.component.ts @@ -17,6 +17,7 @@ import { Subscription } from "rxjs"; import { ContextMenuSelectionService } from "./context-menu-selection.service"; import { ContextMenuComponent } from "./context-menu.component"; import { ItemClickEvent } from "./context-menu.types"; +import { IconDirective } from "carbon-components-angular/icon"; @Component({ selector: "cds-menu-item, cds-context-menu-item, ibm-context-menu-item", @@ -44,7 +45,9 @@ import { ItemClickEvent } from "./context-menu.types"; grid-template-columns: 1rem 1fr max-content; } `], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [IconDirective] }) export class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDestroy { @HostBinding("class.cds--menu-item") optionClass = true; diff --git a/src/context-menu/context-menu.component.ts b/src/context-menu/context-menu.component.ts index d3d726c16e..f88f718f6f 100644 --- a/src/context-menu/context-menu.component.ts +++ b/src/context-menu/context-menu.component.ts @@ -29,7 +29,8 @@ import { display: block; } `], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true }) export class ContextMenuComponent implements OnChanges, AfterViewInit { @Input() open = false; diff --git a/src/context-menu/context-menu.module.ts b/src/context-menu/context-menu.module.ts index d5ede37dfd..97824b2124 100644 --- a/src/context-menu/context-menu.module.ts +++ b/src/context-menu/context-menu.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from "@angular/common"; import { NgModule } from "@angular/core"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; import { ContextMenuDividerComponent } from "./context-menu-divider.component"; import { ContextMenuGroupComponent } from "./context-menu-group.component"; @@ -8,18 +8,19 @@ import { ContextMenuItemComponent } from "./context-menu-item.component"; import { ContextMenuComponent } from "./context-menu.component"; @NgModule({ - declarations: [ + exports: [ ContextMenuDividerComponent, ContextMenuGroupComponent, ContextMenuItemComponent, ContextMenuComponent ], - exports: [ + imports: [ + CommonModule, + IconDirective, ContextMenuDividerComponent, ContextMenuGroupComponent, ContextMenuItemComponent, ContextMenuComponent - ], - imports: [CommonModule, IconModule] + ] }) export class ContextMenuModule { } diff --git a/src/context-menu/context-menu.spec.ts b/src/context-menu/context-menu.spec.ts index 6b5adeb071..36dfa47295 100644 --- a/src/context-menu/context-menu.spec.ts +++ b/src/context-menu/context-menu.spec.ts @@ -1,8 +1,10 @@ import { Component, Input } from "@angular/core"; import { TestBed } from "@angular/core/testing"; -import { ContextMenuModule } from "./context-menu.module"; -import { IconModule } from "../icon"; import { By } from "@angular/platform-browser"; +import { ContextMenuComponent } from "./context-menu.component"; +import { ContextMenuItemComponent } from "./context-menu-item.component"; +import { ContextMenuDividerComponent } from "./context-menu-divider.component"; +import { ContextMenuGroupComponent } from "./context-menu-group.component"; @@ -32,7 +34,14 @@ import { By } from "@angular/platform-browser"; - ` + `, + standalone: true, + imports: [ + ContextMenuComponent, + ContextMenuItemComponent, + ContextMenuDividerComponent, + ContextMenuGroupComponent + ] }) class MenuTestComponent { @Input() open = true; @@ -45,12 +54,8 @@ describe("Menu", () => { let fixture, wrapper; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - MenuTestComponent - ], imports: [ - ContextMenuModule, - IconModule + MenuTestComponent ] }); }); diff --git a/src/context-menu/context-menu.stories.ts b/src/context-menu/context-menu.stories.ts index 6046328cd8..2a108e93a3 100644 --- a/src/context-menu/context-menu.stories.ts +++ b/src/context-menu/context-menu.stories.ts @@ -1,6 +1,5 @@ import { moduleMetadata, Meta } from "@storybook/angular"; import { - ContextMenuModule, ContextMenuComponent, ContextMenuDividerComponent, ContextMenuItemComponent, @@ -11,7 +10,12 @@ export default { title: "Components/Context Menu", decorators: [ moduleMetadata({ - imports: [ContextMenuModule] + imports: [ + ContextMenuComponent, + ContextMenuDividerComponent, + ContextMenuItemComponent, + ContextMenuGroupComponent + ] }) ], args: { diff --git a/src/datepicker-input/datepicker-input.component.spec.ts b/src/datepicker-input/datepicker-input.component.spec.ts index dd4eb45800..676859696b 100644 --- a/src/datepicker-input/datepicker-input.component.spec.ts +++ b/src/datepicker-input/datepicker-input.component.spec.ts @@ -3,8 +3,6 @@ import { By } from "@angular/platform-browser"; import { FormsModule } from "@angular/forms"; import { Component } from "@angular/core"; import { DatePickerInput } from "./datepicker-input.component"; -import { IconModule } from "../icon/index"; -import { CommonModule } from "@angular/common"; @Component({ template: ` @@ -18,7 +16,12 @@ import { CommonModule } from "@angular/common"; (valueChange)="valueChange($event)" [(ngModel)]="model"> - ` + `, + standalone: true, + imports: [ + DatePickerInput, + FormsModule + ] }) class DatePickerInputTest { model = null; @@ -34,14 +37,8 @@ describe("Select", () => { let fixture, wrapper, element; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - DatePickerInput, - DatePickerInputTest - ], imports: [ - CommonModule, - IconModule, - FormsModule + DatePickerInputTest ] }); }); diff --git a/src/datepicker-input/datepicker-input.component.ts b/src/datepicker-input/datepicker-input.component.ts index ffe34382ca..05a075bf6f 100644 --- a/src/datepicker-input/datepicker-input.component.ts +++ b/src/datepicker-input/datepicker-input.component.ts @@ -9,6 +9,8 @@ import { ChangeDetectionStrategy } from "@angular/core"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; +import { IconDirective, ICON_SERVICE_PROVIDER } from "carbon-components-angular/icon"; @Component({ selector: "cds-date-picker-input, ibm-date-picker-input", @@ -124,9 +126,12 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms"; provide: NG_VALUE_ACCESSOR, useExisting: DatePickerInput, multi: true - } + }, + ICON_SERVICE_PROVIDER ], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass, NgTemplateOutlet, IconDirective] }) export class DatePickerInput { private static datePickerCount = 0; diff --git a/src/datepicker-input/datepicker-input.module.ts b/src/datepicker-input/datepicker-input.module.ts index 9a08ed229f..6ffed758f4 100644 --- a/src/datepicker-input/datepicker-input.module.ts +++ b/src/datepicker-input/datepicker-input.module.ts @@ -1,18 +1,16 @@ import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { DatePickerInput } from "./datepicker-input.component"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ - DatePickerInput - ], exports: [ DatePickerInput ], imports: [ CommonModule, - IconModule + IconDirective, + DatePickerInput ] }) export class DatePickerInputModule { } diff --git a/src/datepicker/datepicker.component.spec.ts b/src/datepicker/datepicker.component.spec.ts index ab936862e3..313d7f622b 100644 --- a/src/datepicker/datepicker.component.spec.ts +++ b/src/datepicker/datepicker.component.spec.ts @@ -1,12 +1,8 @@ -import { TestBed, fakeAsync, waitForAsync } from "@angular/core/testing"; +import { TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { Component } from "@angular/core"; import { DatePicker } from "./datepicker.component"; -import { DatePickerInput } from "../datepicker-input/datepicker-input.component"; -import { IconModule } from "../icon/index"; import { FormsModule } from "@angular/forms"; -import { UtilsModule } from "../utils/utils.module"; -import { I18nModule } from "../i18n/i18n.module"; @Component({ template: ` @@ -21,7 +17,12 @@ import { I18nModule } from "../i18n/i18n.module"; dateFormat="m/d/Y" (valueChange)="onValueChange()"> - ` + `, + standalone: true, + imports: [ + DatePicker, + FormsModule + ] }) class DatePickerTest { value = new Date(new Date().getFullYear(), 5, 15); @@ -34,16 +35,8 @@ describe("DatePicker", () => { let fixture, element, wrapper; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - DatePicker, - DatePickerTest, - DatePickerInput - ], imports: [ - IconModule, - UtilsModule, - FormsModule, - I18nModule + DatePickerTest ] }); }); diff --git a/src/datepicker/datepicker.component.ts b/src/datepicker/datepicker.component.ts index 02b3521a55..48e0f0f5f2 100644 --- a/src/datepicker/datepicker.component.ts +++ b/src/datepicker/datepicker.component.ts @@ -23,8 +23,9 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { carbonFlatpickrMonthSelectPlugin } from "./carbon-flatpickr-month-select"; import * as languages from "flatpickr/dist/l10n/index"; import { Options } from "flatpickr/dist/types/options"; -import { DatePickerInput } from "carbon-components-angular/datepicker-input"; import { I18n } from "carbon-components-angular/i18n"; +import { NgClass } from "@angular/common"; +import { DatePickerInput } from "carbon-components-angular/datepicker-input"; /** * Due to type error, we have to use square brackets property accessor @@ -122,7 +123,9 @@ if (languages.default?.default["en"]?.weekdays) { } ], encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass, DatePickerInput] }) export class DatePicker implements OnInit, diff --git a/src/datepicker/datepicker.module.ts b/src/datepicker/datepicker.module.ts index ee4afaeba4..aaa660ea12 100644 --- a/src/datepicker/datepicker.module.ts +++ b/src/datepicker/datepicker.module.ts @@ -6,9 +6,6 @@ import { UtilsModule } from "carbon-components-angular/utils"; import { I18nModule } from "carbon-components-angular/i18n"; @NgModule({ - declarations: [ - DatePicker - ], exports: [ DatePicker, DatePickerInputModule @@ -17,7 +14,8 @@ import { I18nModule } from "carbon-components-angular/i18n"; CommonModule, DatePickerInputModule, UtilsModule, - I18nModule + I18nModule, + DatePicker ] }) export class DatePickerModule { } diff --git a/src/datepicker/datepicker.stories.ts b/src/datepicker/datepicker.stories.ts index 77bd44b59d..72a437f595 100644 --- a/src/datepicker/datepicker.stories.ts +++ b/src/datepicker/datepicker.stories.ts @@ -1,11 +1,12 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { DatePickerModule, DatePicker } from "./"; +import { DatePicker } from "./"; +import { DatePickerInput } from "../datepicker-input/datepicker-input.component"; export default { title: "Components/Date Picker", decorators: [ moduleMetadata({ - imports: [DatePickerModule] + imports: [DatePickerInput] }) ], args: { diff --git a/src/dialog/dialog.component.ts b/src/dialog/dialog.component.ts index 5644eb7736..006210c833 100644 --- a/src/dialog/dialog.component.ts +++ b/src/dialog/dialog.component.ts @@ -17,8 +17,9 @@ import { // the AbsolutePosition is required to import the declaration correctly import Position, { position, Positions } from "@carbon/utils-position"; import { cycleTabs, getFocusElementList } from "carbon-components-angular/common"; -import { AnimationFrameService, ElementService } from "carbon-components-angular/utils"; +import { AnimationFrameService, AnimationFrameServiceSingleton, ElementService } from "carbon-components-angular/utils"; import { CloseMeta, CloseReasons, DialogConfig } from "./dialog-config.interface"; +import { DialogService } from "./dialog.service"; /** * Implements a `Dialog` that can be positioned anywhere on the page. @@ -26,7 +27,9 @@ import { CloseMeta, CloseReasons, DialogConfig } from "./dialog-config.interface */ @Component({ selector: "cds-dialog, ibm-dialog", - template: "" + template: "", + providers: [DialogService, AnimationFrameService, ElementService, AnimationFrameServiceSingleton], + standalone: true }) export class Dialog implements OnInit, AfterViewInit, OnDestroy { /** diff --git a/src/dialog/dialog.directive.ts b/src/dialog/dialog.directive.ts index e1358048d2..653347d473 100644 --- a/src/dialog/dialog.directive.ts +++ b/src/dialog/dialog.directive.ts @@ -15,7 +15,7 @@ import { } from "@angular/core"; import { DialogService } from "./dialog.service"; import { CloseMeta, CloseReasons, DialogConfig } from "./dialog-config.interface"; -import { EventService } from "carbon-components-angular/utils"; +import { DOCUMENT_SERVICE_PROVIDER, EventService } from "carbon-components-angular/utils"; import { Dialog } from "./dialog.component"; import { fromEvent, Subscription } from "rxjs"; @@ -32,8 +32,11 @@ import { fromEvent, Subscription } from "rxjs"; selector: "[cdsDialog], [ibmDialog]", exportAs: "dialog", providers: [ - DialogService - ] + DialogService, + EventService, + DOCUMENT_SERVICE_PROVIDER + ], + standalone: true }) export class DialogDirective implements OnInit, OnDestroy, OnChanges { static dialogCounter = 0; diff --git a/src/dialog/dialog.module.ts b/src/dialog/dialog.module.ts index 5e9c5afefc..e8365cffd5 100644 --- a/src/dialog/dialog.module.ts +++ b/src/dialog/dialog.module.ts @@ -9,46 +9,39 @@ import { DialogDirective } from "./dialog.directive"; import { OverflowMenu } from "./overflow-menu/overflow-menu.component"; import { OverflowMenuPane } from "./overflow-menu/overflow-menu-pane.component"; -import { OverflowMenuCustomPane } from "./overflow-menu/overflow-menu-custom-pane.component"; import { OverflowMenuDirective } from "./overflow-menu/overflow-menu.directive"; import { OverflowMenuOption } from "./overflow-menu/overflow-menu-option.component"; import { I18nModule } from "carbon-components-angular/i18n"; -import { PlaceholderModule } from "carbon-components-angular/placeholder"; +import { Placeholder } from "carbon-components-angular/placeholder"; import { ExperimentalModule } from "carbon-components-angular/experimental"; import { UtilsModule } from "carbon-components-angular/utils"; -import { IconModule } from "carbon-components-angular/icon"; -import { ButtonModule } from "carbon-components-angular/button"; -import { TooltipModule } from "carbon-components-angular/tooltip"; +import { IconDirective } from "carbon-components-angular/icon"; + + @NgModule({ - declarations: [ - Dialog, - OverflowMenu, - OverflowMenuPane, - OverflowMenuCustomPane, - DialogDirective, - OverflowMenuDirective, - OverflowMenuOption - ], exports: [ Dialog, OverflowMenu, OverflowMenuPane, - OverflowMenuCustomPane, DialogDirective, OverflowMenuDirective, OverflowMenuOption ], - providers: [ DialogService ], + providers: [DialogService], imports: [ CommonModule, I18nModule, - PlaceholderModule, + Placeholder, ExperimentalModule, UtilsModule, - IconModule, - ButtonModule, - TooltipModule + IconDirective, + Dialog, + OverflowMenu, + OverflowMenuPane, + DialogDirective, + OverflowMenuDirective, + OverflowMenuOption ] }) export class DialogModule {} diff --git a/src/dialog/overflow-menu/overflow-menu-custom-pane.component.ts b/src/dialog/overflow-menu/overflow-menu-custom-pane.component.ts index 37cb218d3d..197dafbac4 100644 --- a/src/dialog/overflow-menu/overflow-menu-custom-pane.component.ts +++ b/src/dialog/overflow-menu/overflow-menu-custom-pane.component.ts @@ -1,10 +1,11 @@ import { AfterViewInit, Component, ElementRef, Optional } from "@angular/core"; import { position } from "@carbon/utils-position"; -import { I18n } from "carbon-components-angular/i18n"; -import { AnimationFrameService, ElementService } from "carbon-components-angular/utils"; +import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n"; +import { AnimationFrameService, AnimationFrameServiceSingleton, ElementService } from "carbon-components-angular/utils"; import { closestAttr } from "carbon-components-angular/utils"; import { CloseReasons } from "../dialog-config.interface"; import { Dialog } from "../dialog.component"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; /** * @deprecated as of v5 @@ -25,7 +26,10 @@ import { Dialog } from "../dialog.component"; [attr.aria-label]="dialogConfig.menuLabel"> - ` + `, + standalone: true, + providers: [I18N_SERVICE_PROVIDER, ElementService, AnimationFrameService, AnimationFrameServiceSingleton], + imports: [NgClass, NgTemplateOutlet] }) export class OverflowMenuCustomPane extends Dialog implements AfterViewInit { constructor( diff --git a/src/dialog/overflow-menu/overflow-menu-option.component.ts b/src/dialog/overflow-menu/overflow-menu-option.component.ts index 00c89d0a98..7841a6ae7a 100644 --- a/src/dialog/overflow-menu/overflow-menu-option.component.ts +++ b/src/dialog/overflow-menu/overflow-menu-option.component.ts @@ -7,6 +7,7 @@ import { EventEmitter, AfterViewInit } from "@angular/core"; +import { NgTemplateOutlet } from "@angular/common"; /** * Available HTML anchor targets @@ -72,7 +73,9 @@ const REL = "noreferrer noopener"; - ` + `, + standalone: true, + imports: [NgTemplateOutlet] }) export class OverflowMenuOption implements AfterViewInit { @HostBinding("class.cds--overflow-menu-options__option") optionClass = true; diff --git a/src/dialog/overflow-menu/overflow-menu-pane.component.ts b/src/dialog/overflow-menu/overflow-menu-pane.component.ts index 8cef480572..a86c498269 100644 --- a/src/dialog/overflow-menu/overflow-menu-pane.component.ts +++ b/src/dialog/overflow-menu/overflow-menu-pane.component.ts @@ -9,10 +9,11 @@ import { Dialog } from "../dialog.component"; import { position } from "@carbon/utils-position"; import { isFocusInLastItem, isFocusInFirstItem } from "carbon-components-angular/common"; import { I18n } from "carbon-components-angular/i18n"; -import { ExperimentalService } from "carbon-components-angular/experimental"; -import { AnimationFrameService, ElementService } from "carbon-components-angular/utils"; +import { ExperimentalService, EXPERIMENTAL_SERVICE_PROVIDER } from "carbon-components-angular/experimental"; +import { AnimationFrameService, AnimationFrameServiceSingleton, ElementService } from "carbon-components-angular/utils"; import { CloseReasons } from "../dialog-config.interface"; import { closestAttr } from "carbon-components-angular/utils"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; /** * Extend the `Dialog` component to create an overflow menu. @@ -34,7 +35,10 @@ import { closestAttr } from "carbon-components-angular/utils"; [attr.aria-label]="dialogConfig.menuLabel"> - ` + `, + standalone: true, + providers: [I18n, EXPERIMENTAL_SERVICE_PROVIDER, AnimationFrameService, ElementService, AnimationFrameServiceSingleton], + imports: [NgClass, NgTemplateOutlet] }) export class OverflowMenuPane extends Dialog implements AfterViewInit { constructor( diff --git a/src/dialog/overflow-menu/overflow-menu.component.ts b/src/dialog/overflow-menu/overflow-menu.component.ts index 834db6c905..27b0b37bb6 100644 --- a/src/dialog/overflow-menu/overflow-menu.component.ts +++ b/src/dialog/overflow-menu/overflow-menu.component.ts @@ -8,9 +8,13 @@ import { TemplateRef, ViewEncapsulation } from "@angular/core"; -import { I18n } from "carbon-components-angular/i18n"; +import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n"; import { OverflowMenuDirective } from "./overflow-menu.directive"; -import { BaseIconButton } from "carbon-components-angular/button"; +import { BaseIconButton, Button } from "carbon-components-angular/button"; +import { Tooltip } from "carbon-components-angular/tooltip"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; +import { PlaceholderService } from "carbon-components-angular/placeholder"; /** * The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component. @@ -18,7 +22,7 @@ import { BaseIconButton } from "carbon-components-angular/button"; * Get started with importing the module: * * ```typescript - * import { DialogModule } from 'carbon-components-angular'; + * import { OverflowMenu, OverflowMenuOption } from 'carbon-components-angular'; * ``` * * ```html @@ -92,7 +96,10 @@ import { BaseIconButton } from "carbon-components-angular/button"; transform: rotate(180deg); } `], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + standalone: true, + providers: [PlaceholderService, I18N_SERVICE_PROVIDER], + imports: [Tooltip, Button, OverflowMenuDirective, NgClass, NgTemplateOutlet, IconDirective] }) export class OverflowMenu extends BaseIconButton { @Input() buttonLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW; diff --git a/src/dialog/overflow-menu/overflow-menu.directive.ts b/src/dialog/overflow-menu/overflow-menu.directive.ts index d85a952d85..33490667f0 100644 --- a/src/dialog/overflow-menu/overflow-menu.directive.ts +++ b/src/dialog/overflow-menu/overflow-menu.directive.ts @@ -10,7 +10,8 @@ import { DialogDirective } from "../dialog.directive"; import { DialogService } from "../dialog.service"; import { OverflowMenuPane } from "./overflow-menu-pane.component"; import { OverflowMenuCustomPane } from "./overflow-menu-custom-pane.component"; -import { EventService } from "carbon-components-angular/utils"; +import { DOCUMENT_SERVICE_PROVIDER, EventService } from "carbon-components-angular/utils"; +import { PlaceholderService } from "carbon-components-angular/placeholder"; /** @@ -40,8 +41,12 @@ import { EventService } from "carbon-components-angular/utils"; selector: "[cdsOverflowMenu], [ibmOverflowMenu]", exportAs: "overflowMenu", providers: [ - DialogService - ] + DialogService, + EventService, + DOCUMENT_SERVICE_PROVIDER, + PlaceholderService + ], + standalone: true }) export class OverflowMenuDirective extends DialogDirective { /** diff --git a/src/dialog/overflow-menu/overflow-menu.stories.ts b/src/dialog/overflow-menu/overflow-menu.stories.ts index 3742477c4d..1a82ce5e8f 100644 --- a/src/dialog/overflow-menu/overflow-menu.stories.ts +++ b/src/dialog/overflow-menu/overflow-menu.stories.ts @@ -1,8 +1,8 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { DialogModule, OverflowMenu } from "../"; -import { PlaceholderModule } from "../../placeholder"; -import { IconModule } from "../../icon"; -import { CheckboxModule } from "../../checkbox"; +import { Dialog, OverflowMenu, OverflowMenuDirective, OverflowMenuOption, OverflowMenuPane } from "../"; +import { PLACEHOLDER_SERVICE_PROVIDER, Placeholder } from "../../placeholder"; +import { IconDirective } from "../../icon"; +import { Checkbox } from "../../checkbox"; export default { @@ -10,11 +10,15 @@ export default { decorators: [ moduleMetadata({ imports: [ - DialogModule, - PlaceholderModule, - IconModule, - CheckboxModule - ] + Dialog, + Placeholder, + IconDirective, + Checkbox, + OverflowMenuOption, + OverflowMenuDirective, + OverflowMenuPane + ], + providers: [PLACEHOLDER_SERVICE_PROVIDER] }) ], args: { @@ -25,6 +29,13 @@ export default { control: false } }, + docs: { + story: { + inline: false, + height: "30rem" + } + }, + layout: "centered", component: OverflowMenu } as Meta; @@ -63,11 +74,13 @@ Basic.args = { Basic.argTypes = { click: { type: "function", + // eslint-disable-next-line no-console defaultValue: () => { console.log("clicked!"); }, control: false }, selected: { type: "function", + // eslint-disable-next-line no-console defaultValue: () => { console.log("selected!"); }, control: false } @@ -120,11 +133,13 @@ WithLink.args = { WithLink.argTypes = { click: { type: "function", + // eslint-disable-next-line no-console defaultValue: () => { console.log("clicked!"); }, control: false }, selected: { type: "function", + // eslint-disable-next-line no-console defaultValue: () => { console.log("selected!"); }, control: false } diff --git a/src/documentation-component/documentation.component.ts b/src/documentation-component/documentation.component.ts index 5344194481..ed8c53d569 100644 --- a/src/documentation-component/documentation.component.ts +++ b/src/documentation-component/documentation.component.ts @@ -21,7 +21,8 @@ import { DomSanitizer } from "@angular/platform-browser"; (load)="onLoad()" [src]="src"> - ` + `, + standalone: true }) export class Documentation implements OnInit, OnDestroy { @Input() set src(src: string) { diff --git a/src/documentation-component/documentation.module.ts b/src/documentation-component/documentation.module.ts index bff50eb0eb..7d5ff18d7e 100644 --- a/src/documentation-component/documentation.module.ts +++ b/src/documentation-component/documentation.module.ts @@ -6,13 +6,11 @@ import { Documentation } from "./documentation.component"; export { Documentation } from "./documentation.component"; @NgModule({ - declarations: [ - Documentation - ], exports: [ Documentation ], imports: [ + Documentation, CommonModule ] }) diff --git a/src/dropdown/abstract-dropdown-view.class.ts b/src/dropdown/abstract-dropdown-view.class.ts index 946ca3a02d..5a0adbbd5d 100644 --- a/src/dropdown/abstract-dropdown-view.class.ts +++ b/src/dropdown/abstract-dropdown-view.class.ts @@ -14,7 +14,8 @@ import { Observable } from "rxjs"; * ex: `providers: [{provide: AbstractDropdownView, useExisting: forwardRef(() => MyDropdownView)}]` */ @Directive({ - selector: "[cdsAbstractDropdownView], [ibmAbstractDropdownView]" + selector: "[cdsAbstractDropdownView], [ibmAbstractDropdownView]", + standalone: true }) export class AbstractDropdownView { /** diff --git a/src/dropdown/dropdown.component.spec.ts b/src/dropdown/dropdown.component.spec.ts index abdbc38727..da5f70cae4 100644 --- a/src/dropdown/dropdown.component.spec.ts +++ b/src/dropdown/dropdown.component.spec.ts @@ -5,13 +5,7 @@ import { By } from "@angular/platform-browser"; import { Dropdown } from "./dropdown.component"; import { DropdownList } from "./list/dropdown-list.component"; import { ListItem } from "./list-item.interface"; -import { ScrollableList } from "./scrollable-list.directive"; -import { I18nModule } from "../i18n/index"; -import { DropdownService } from "./dropdown.service"; -import { PlaceholderModule } from "./../placeholder/index"; import { FormsModule } from "@angular/forms"; -import { UtilsModule } from "../utils/utils.module"; -import { IconModule } from "../icon/index"; @Component({ template: ` @@ -22,7 +16,13 @@ import { IconModule } from "../icon/index"; (selected)="onSelect()" [(ngModel)]="model"> - ` + `, + standalone: true, + imports: [ + Dropdown, + DropdownList, + FormsModule + ] }) class DropdownTest { model = null; @@ -36,20 +36,9 @@ describe("Dropdown", () => { let fixture, element, wrapper; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - Dropdown, - DropdownList, - DropdownTest, - ScrollableList - ], imports: [ - I18nModule, - PlaceholderModule, - FormsModule, - IconModule, - UtilsModule - ], - providers: [DropdownService] + DropdownTest + ] }); }); diff --git a/src/dropdown/dropdown.component.ts b/src/dropdown/dropdown.component.ts index f065f9d618..e41d8c0556 100644 --- a/src/dropdown/dropdown.component.ts +++ b/src/dropdown/dropdown.component.ts @@ -26,10 +26,20 @@ import { } from "rxjs"; import { AbstractDropdownView } from "./abstract-dropdown-view.class"; -import { I18n } from "carbon-components-angular/i18n"; +import { I18n, I18N_SERVICE_PROVIDER } from "carbon-components-angular/i18n"; import { DropdownService } from "./dropdown.service"; -import { ElementService, getScrollableParents } from "carbon-components-angular/utils"; +import { + AnimationFrameService, + AnimationFrameServiceSingleton, + DOCUMENT_SERVICE_PROVIDER, + ElementService, + EventService, + getScrollableParents +} from "carbon-components-angular/utils"; import { hasScrollableParents } from "carbon-components-angular/utils"; +import { NgClass, NgTemplateOutlet, AsyncPipe } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; +import { PlaceholderService } from "carbon-components-angular/placeholder"; /** * Drop-down lists enable users to select one or more items from a list. @@ -48,7 +58,7 @@ import { hasScrollableParents } from "carbon-components-angular/utils"; * Get started with importing the module: * * ```typescript - * import { DropdownModule } from 'carbon-components-angular'; + * import { Dropdown, DropdownList } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-dropdown--basic) @@ -209,9 +219,19 @@ import { hasScrollableParents } from "carbon-components-angular/utils"; provide: NG_VALUE_ACCESSOR, useExisting: Dropdown, multi: true - } + }, + PlaceholderService, + AnimationFrameService, + AnimationFrameServiceSingleton, + DropdownService, + ElementService, + EventService, + DOCUMENT_SERVICE_PROVIDER, + I18N_SERVICE_PROVIDER ], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass, NgTemplateOutlet, IconDirective, AsyncPipe] }) export class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor { static dropdownCount = 0; diff --git a/src/dropdown/dropdown.module.ts b/src/dropdown/dropdown.module.ts index 709e468abe..6f85145623 100644 --- a/src/dropdown/dropdown.module.ts +++ b/src/dropdown/dropdown.module.ts @@ -14,12 +14,6 @@ import { UtilsModule } from "carbon-components-angular/utils"; import { IconModule } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ - Dropdown, - DropdownList, - ScrollableList, - AbstractDropdownView - ], exports: [ Dropdown, DropdownList, @@ -32,7 +26,11 @@ import { IconModule } from "carbon-components-angular/icon"; I18nModule, PlaceholderModule, UtilsModule, - IconModule + IconModule, + Dropdown, + DropdownList, + ScrollableList, + AbstractDropdownView ], providers: [ DropdownService ] }) diff --git a/src/dropdown/dropdown.service.ts b/src/dropdown/dropdown.service.ts index 3ff1a76e46..ef8c753cec 100644 --- a/src/dropdown/dropdown.service.ts +++ b/src/dropdown/dropdown.service.ts @@ -2,8 +2,7 @@ import { Injectable, ElementRef, OnDestroy } from "@angular/core"; import { PlaceholderService } from "carbon-components-angular/placeholder"; import { Subscription } from "rxjs"; import { position } from "@carbon/utils-position"; -import { AnimationFrameService } from "carbon-components-angular/utils"; -import { closestAttr } from "carbon-components-angular/utils"; +import { AnimationFrameService, closestAttr } from "carbon-components-angular/utils"; const defaultOffset = { top: 0, left: 0 }; diff --git a/src/dropdown/dropdown.stories.ts b/src/dropdown/dropdown.stories.ts index 9acfec6619..3d525a55cb 100644 --- a/src/dropdown/dropdown.stories.ts +++ b/src/dropdown/dropdown.stories.ts @@ -1,20 +1,23 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { DropdownModule, Dropdown } from "./"; -import { PlaceholderModule } from "../placeholder"; +import { Dropdown, DropdownList } from "./"; +import { Placeholder } from "../placeholder"; import { ReactiveFormsStory } from "./stories"; +import { JsonPipe } from "@angular/common"; export default { title: "Components/Dropdown", decorators: [ moduleMetadata({ - declarations: [ReactiveFormsStory], imports: [ FormsModule, ReactiveFormsModule, - DropdownModule, - PlaceholderModule + Dropdown, + DropdownList, + Placeholder, + ReactiveFormsStory, + JsonPipe ] }) ], diff --git a/src/dropdown/list/dropdown-list.component.spec.ts b/src/dropdown/list/dropdown-list.component.spec.ts index 18a07531f3..d048977b5b 100644 --- a/src/dropdown/list/dropdown-list.component.spec.ts +++ b/src/dropdown/list/dropdown-list.component.spec.ts @@ -5,10 +5,11 @@ import { By } from "@angular/platform-browser"; import { DropdownList } from "./dropdown-list.component"; import { ListItem } from "./../list-item.interface"; import { ScrollableList } from "./../scrollable-list.directive"; -import { I18nModule } from "../../i18n/index"; @Component({ - template: `` + template: ``, + imports: [DropdownList], + standalone: true }) class DropdownListTest { items = [ @@ -22,7 +23,9 @@ class DropdownListTest { } @Component({ - template: `` + template: ``, + imports: [DropdownList], + standalone: true }) class MultiTest { items = [ @@ -39,13 +42,8 @@ describe("Dropdown list", () => { let fixture: ComponentFixture, wrapper: DropdownListTest; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - DropdownList, - DropdownListTest, - ScrollableList - ], imports: [ - I18nModule + DropdownListTest ] }); }); @@ -87,13 +85,10 @@ describe("Dropdown multi list", () => { let fixture: ComponentFixture, wrapper: MultiTest; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ + imports: [ DropdownList, MultiTest, ScrollableList - ], - imports: [ - I18nModule ] }); }); diff --git a/src/dropdown/list/dropdown-list.component.ts b/src/dropdown/list/dropdown-list.component.ts index a9c24d26a3..df628b60ed 100644 --- a/src/dropdown/list/dropdown-list.component.ts +++ b/src/dropdown/list/dropdown-list.component.ts @@ -21,11 +21,15 @@ import { } from "rxjs"; import { first } from "rxjs/operators"; -import { I18n } from "carbon-components-angular/i18n"; +import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n"; import { AbstractDropdownView } from "../abstract-dropdown-view.class"; import { ListItem } from "../list-item.interface"; import { watchFocusJump } from "../dropdowntools"; import { ScrollCustomEvent } from "./scroll-custom-event.interface"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; +import { DropdownService } from "../dropdown.service"; +import { AnimationFrameService, AnimationFrameServiceSingleton } from "carbon-components-angular/utils"; /** @@ -118,9 +122,15 @@ import { ScrollCustomEvent } from "./scroll-custom-event.interface"; { provide: AbstractDropdownView, useExisting: DropdownList - } + }, + DropdownService, + AnimationFrameService, + AnimationFrameServiceSingleton, + I18N_SERVICE_PROVIDER ], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass, IconDirective, NgTemplateOutlet] }) export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDestroy { static listCount = 0; diff --git a/src/dropdown/scrollable-list.directive.ts b/src/dropdown/scrollable-list.directive.ts index 24b784dd01..dfcb1e4ee6 100644 --- a/src/dropdown/scrollable-list.directive.ts +++ b/src/dropdown/scrollable-list.directive.ts @@ -10,7 +10,8 @@ import { @Directive({ selector: "[cdsScrollableList], [ibmScrollableList]", - exportAs: "scrollable-list" + exportAs: "scrollable-list", + standalone: true }) export class ScrollableList implements OnChanges, AfterViewInit { /** diff --git a/src/dropdown/stories/app-reactive-forms.component.ts b/src/dropdown/stories/app-reactive-forms.component.ts index c42bb8cd74..e745755fee 100644 --- a/src/dropdown/stories/app-reactive-forms.component.ts +++ b/src/dropdown/stories/app-reactive-forms.component.ts @@ -8,8 +8,13 @@ import { import { FormBuilder, FormGroup, - FormControl + FormControl, + FormsModule, + NgControl, + ReactiveFormsModule } from "@angular/forms"; +import { Dropdown, DropdownList } from "../"; +import { JsonPipe } from "@angular/common"; @Component({ selector: "app-reactive-forms", @@ -35,7 +40,9 @@ import {
{{ formGroup.get("roles").value | json }} - ` + `, + imports: [Dropdown, DropdownList, JsonPipe, ReactiveFormsModule], + standalone: true }) export class ReactiveFormsStory implements OnInit { public formGroup: FormGroup; diff --git a/src/experimental/experimental.module.ts b/src/experimental/experimental.module.ts index 987df1fec4..5cb2fb3722 100644 --- a/src/experimental/experimental.module.ts +++ b/src/experimental/experimental.module.ts @@ -1,4 +1,4 @@ -import { NgModule, SkipSelf, Optional } from "@angular/core"; +import { SkipSelf, Optional, NgModule } from "@angular/core"; import { ExperimentalService } from "./experimental.service"; // either provides a new instance of ExperimentalService, or returns the parent diff --git a/src/file-uploader/file-uploader.component.spec.ts b/src/file-uploader/file-uploader.component.spec.ts index 85b26b18e8..fe1a54a3c5 100644 --- a/src/file-uploader/file-uploader.component.spec.ts +++ b/src/file-uploader/file-uploader.component.spec.ts @@ -1,12 +1,7 @@ import { FormsModule } from "@angular/forms"; import { TestBed } from "@angular/core/testing"; import { Component } from "@angular/core"; -import { ButtonModule } from "carbon-components-angular/button"; -import { LoadingModule } from "carbon-components-angular/loading"; import { FileUploader } from "./file-uploader.component"; -import { FileComponent } from "./file.component"; -import { CommonModule } from "@angular/common"; -import { IconModule } from "../icon/index"; import { By } from "@angular/platform-browser"; import { FileItem } from "./file-item.interface"; @@ -20,7 +15,12 @@ import { FileItem } from "./file-item.interface"; multiple="true" [(ngModel)]="files"> - ` + `, + standalone: true, + imports: [ + FileUploader, + FormsModule + ] }) class FileUploaderTest { files = null; @@ -30,17 +30,8 @@ describe("FileUploader", () => { let fixture, wrapper, element; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - FileUploader, - FileUploaderTest, - FileComponent - ], imports: [ - FormsModule, - CommonModule, - ButtonModule, - LoadingModule, - IconModule + FileUploaderTest ] }); }); @@ -142,4 +133,3 @@ describe("FileUploader", () => { expect(!!filesArray.find((fileItem: FileItem) => fileItem.file.name === fileToAdd.name)).toBe(true); }); }); - diff --git a/src/file-uploader/file-uploader.component.ts b/src/file-uploader/file-uploader.component.ts index 5f22b50cf9..4eb7118373 100644 --- a/src/file-uploader/file-uploader.component.ts +++ b/src/file-uploader/file-uploader.component.ts @@ -11,6 +11,9 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; import { I18n } from "carbon-components-angular/i18n"; import { FileItem } from "./file-item.interface"; +import { Button } from "carbon-components-angular/button"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; +import { FileComponent } from "./file.component"; const noop = () => { }; @@ -97,7 +100,9 @@ const noop = () => { }; multi: true } ], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [Button, NgClass, NgTemplateOutlet, FileComponent] }) export class FileUploader implements ControlValueAccessor { /** diff --git a/src/file-uploader/file-uploader.module.ts b/src/file-uploader/file-uploader.module.ts index 2152377753..3497026452 100644 --- a/src/file-uploader/file-uploader.module.ts +++ b/src/file-uploader/file-uploader.module.ts @@ -3,18 +3,17 @@ import { CommonModule } from "@angular/common"; import { FileUploader } from "./file-uploader.component"; import { FileComponent } from "./file.component"; -import { ButtonModule } from "carbon-components-angular/button"; + import { LoadingModule } from "carbon-components-angular/loading"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; @NgModule({ - declarations: [FileUploader, FileComponent], exports: [FileUploader, FileComponent], imports: [ CommonModule, - ButtonModule, LoadingModule, - IconModule + IconDirective, + FileUploader, FileComponent ] }) export class FileUploaderModule { } diff --git a/src/file-uploader/file-uploader.stories.ts b/src/file-uploader/file-uploader.stories.ts index ed06750e30..09b6a28962 100644 --- a/src/file-uploader/file-uploader.stories.ts +++ b/src/file-uploader/file-uploader.stories.ts @@ -1,8 +1,8 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { FileUploaderModule, FileUploader } from "./"; -import { NotificationModule } from "../notification"; -import { ButtonModule } from "../button"; +import { FileUploader } from "./"; +import { Notification } from "../notification"; +import { Button } from "../button"; import { FileUploaderStory, NgModelFileUploaderStory, @@ -21,11 +21,11 @@ export default { ReactiveFormsStory ], imports: [ - FileUploaderModule, + FileUploader, FormsModule, ReactiveFormsModule, - NotificationModule, - ButtonModule + Notification, + Button ] }) ], diff --git a/src/file-uploader/file.component.ts b/src/file-uploader/file.component.ts index 60f48e31ca..86c5d8e80a 100644 --- a/src/file-uploader/file.component.ts +++ b/src/file-uploader/file.component.ts @@ -10,6 +10,8 @@ import { import { I18n } from "carbon-components-angular/i18n"; import { FileItem } from "./file-item.interface"; +import { IconDirective } from "carbon-components-angular/icon"; +import { Loading } from "carbon-components-angular/loading"; @Component({ selector: "cds-file, ibm-file", @@ -62,7 +64,9 @@ import { FileItem } from "./file-item.interface"; } `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [IconDirective, Loading] }) export class FileComponent implements OnDestroy { /** diff --git a/src/file-uploader/stories/drag-drop.component.ts b/src/file-uploader/stories/drag-drop.component.ts index 07add6779f..50e64baf65 100644 --- a/src/file-uploader/stories/drag-drop.component.ts +++ b/src/file-uploader/stories/drag-drop.component.ts @@ -87,6 +87,7 @@ export class DragAndDropStory { filePromiseArray.filter(filePromise => filePromise.accept) .map(acceptedFile => acceptedFile.file)) .then(acceptedFiles => this.files = new Set(acceptedFiles)) + // eslint-disable-next-line no-console .catch(error => console.log(error)); } @@ -98,6 +99,7 @@ export class DragAndDropStory { setTimeout(() => { fileItem.state = "complete"; fileItem.uploaded = true; + // eslint-disable-next-line no-console console.log(fileItem); }, 1500); } diff --git a/src/file-uploader/stories/uploader-form.component.ts b/src/file-uploader/stories/uploader-form.component.ts index 3e89474611..64a4c55785 100644 --- a/src/file-uploader/stories/uploader-form.component.ts +++ b/src/file-uploader/stories/uploader-form.component.ts @@ -54,6 +54,7 @@ export class NgModelFileUploaderStory { setTimeout(() => { fileItem.state = "complete"; fileItem.uploaded = true; + // eslint-disable-next-line no-console console.log(fileItem); }, 1500); } diff --git a/src/file-uploader/stories/uploader-reactive-form.component.ts b/src/file-uploader/stories/uploader-reactive-form.component.ts index 941a95d78f..eed8174e9c 100644 --- a/src/file-uploader/stories/uploader-reactive-form.component.ts +++ b/src/file-uploader/stories/uploader-reactive-form.component.ts @@ -3,7 +3,6 @@ import { Input, OnInit } from "@angular/core"; -import { NotificationService } from "../../notification"; import { FormBuilder, diff --git a/src/file-uploader/stories/uploader.component.ts b/src/file-uploader/stories/uploader.component.ts index dfdb2e8a15..48a8735fa8 100644 --- a/src/file-uploader/stories/uploader.component.ts +++ b/src/file-uploader/stories/uploader.component.ts @@ -48,6 +48,7 @@ export class FileUploaderStory { setTimeout(() => { fileItem.state = "complete"; fileItem.uploaded = true; + // eslint-disable-next-line no-console console.log(fileItem); }, 1500); } diff --git a/src/forms/index.ts b/src/forms/index.ts index 969cfb08ea..852edd2d67 100644 --- a/src/forms/index.ts +++ b/src/forms/index.ts @@ -2,26 +2,20 @@ export { NFormsModule } from "./forms.module"; // re-export from form related modules and components +export { Checkbox, CheckboxState, CheckboxValue } from "carbon-components-angular/checkbox"; export { - CheckboxModule, - Checkbox, - CheckboxState, - CheckboxValue -} from "carbon-components-angular/checkbox"; -export { - ToggleModule, Toggle, ToggleState } from "carbon-components-angular/toggle"; export { - RadioModule, Radio, RadioChange, RadioGroup } from "carbon-components-angular/radio"; export { - InputModule, Label, + PasswordInputLabelComponent, + PasswordInput, TextArea, TextInput, TextInputLabelComponent, diff --git a/src/grid/column.directive.ts b/src/grid/column.directive.ts index ddbf23df18..9df9e67046 100644 --- a/src/grid/column.directive.ts +++ b/src/grid/column.directive.ts @@ -11,7 +11,8 @@ import { Subscription } from "rxjs"; import { GridService } from "./grid.service"; @Directive({ - selector: "[cdsCol], [ibmCol]" + selector: "[cdsCol], [ibmCol]", + standalone: true }) export class ColumnDirective implements OnInit, OnChanges, OnDestroy { @HostBinding("class") diff --git a/src/grid/css-grid.stories.ts b/src/grid/css-grid.stories.ts index 90455eae83..2bef741d3d 100644 --- a/src/grid/css-grid.stories.ts +++ b/src/grid/css-grid.stories.ts @@ -1,7 +1,7 @@ import { moduleMetadata, componentWrapperDecorator } from "@storybook/angular"; import { Story, Meta } from "@storybook/angular"; import { - GridModule, + GridService, GridDirective, RowDirective, ColumnDirective @@ -11,7 +11,7 @@ export default { title: "Components/Grid/CSS", decorators: [ moduleMetadata({ - imports: [GridModule] + imports: [GridDirective, ColumnDirective, RowDirective] }), componentWrapperDecorator((story) => `
${story}
`) ], diff --git a/src/grid/grid.directive.spec.ts b/src/grid/grid.directive.spec.ts index 19ca2ce999..88a7a31377 100644 --- a/src/grid/grid.directive.spec.ts +++ b/src/grid/grid.directive.spec.ts @@ -3,7 +3,6 @@ import { TestBed, waitForAsync, fakeAsync, - tick, flush } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; @@ -14,18 +13,17 @@ import { GridDirective } from "./grid.directive"; @Component({ selector: "cds-test-grid", - template: "" + template: "", + standalone: true, + imports: [GridDirective, RowDirective, ColumnDirective] }) class TestGridComponent {} describe("GridDirective", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - TestGridComponent, - GridDirective, - RowDirective, - ColumnDirective + imports: [ + TestGridComponent ] }); }); diff --git a/src/grid/grid.directive.ts b/src/grid/grid.directive.ts index 32c8eb35ea..dfe54926a1 100644 --- a/src/grid/grid.directive.ts +++ b/src/grid/grid.directive.ts @@ -17,7 +17,7 @@ import { GridService } from "./grid.service"; * Get started with importing the module: * * ```typescript - * import { GridModule } from 'carbon-components-angular'; + * import { GridDirective, GridService } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-grid--basic) @@ -32,7 +32,8 @@ import { GridService } from "./grid.service"; return parentService || new GridService(); } } - ] + ], + standalone: true }) export class GridDirective implements OnInit, OnDestroy { /** diff --git a/src/grid/grid.module.ts b/src/grid/grid.module.ts index fac06f665c..0e75a4439b 100644 --- a/src/grid/grid.module.ts +++ b/src/grid/grid.module.ts @@ -7,17 +7,17 @@ import { GridDirective } from "./grid.directive"; import { GridService } from "./grid.service"; @NgModule({ - declarations: [ + exports: [ ColumnDirective, GridDirective, RowDirective ], - exports: [ + providers: [GridService], + imports: [ + CommonModule, ColumnDirective, GridDirective, RowDirective - ], - providers: [GridService], - imports: [CommonModule] + ] }) export class GridModule {} diff --git a/src/grid/grid.stories.ts b/src/grid/grid.stories.ts index 66bb115eef..17c575efee 100644 --- a/src/grid/grid.stories.ts +++ b/src/grid/grid.stories.ts @@ -1,8 +1,8 @@ import { moduleMetadata, componentWrapperDecorator } from "@storybook/angular"; import { Story, Meta } from "@storybook/angular"; import { - GridModule, GridDirective, + GridService, RowDirective, ColumnDirective } from "./"; @@ -11,15 +11,11 @@ export default { title: "Components/Grid/Flex", decorators: [ moduleMetadata({ - imports: [GridModule] + imports: [GridDirective, RowDirective, ColumnDirective] }), componentWrapperDecorator((story) => `
${story}
`) ], component: GridDirective, - subcomponents: { - RowDirective, - ColumnDirective - }, argTypes: { useCssGrid: { control: false diff --git a/src/grid/row.directive.ts b/src/grid/row.directive.ts index 33997df0ef..eddeadfe40 100644 --- a/src/grid/row.directive.ts +++ b/src/grid/row.directive.ts @@ -5,7 +5,8 @@ import { } from "@angular/core"; @Directive({ - selector: "[cdsRow], [ibmRow]" + selector: "[cdsRow], [ibmRow]", + standalone: true }) export class RowDirective { @HostBinding("class.cds--row") baseClass = true; diff --git a/src/i18n/i18n.module.ts b/src/i18n/i18n.module.ts index d62da5e2a9..2c7e84a480 100644 --- a/src/i18n/i18n.module.ts +++ b/src/i18n/i18n.module.ts @@ -1,5 +1,4 @@ -import { NgModule, SkipSelf, Optional } from "@angular/core"; - +import { SkipSelf, Optional, NgModule } from "@angular/core"; import { I18n } from "./i18n.service"; import { ReplacePipe } from "./replace.pipe"; @@ -16,7 +15,7 @@ export const I18N_SERVICE_PROVIDER = { }; @NgModule({ - declarations: [ReplacePipe], + imports: [ReplacePipe], exports: [ReplacePipe], providers: [ I18n, diff --git a/src/i18n/i18n.service.ts b/src/i18n/i18n.service.ts index 0b7e19207d..20683a17a1 100644 --- a/src/i18n/i18n.service.ts +++ b/src/i18n/i18n.service.ts @@ -148,7 +148,7 @@ export interface TranslationStrings { * are a better choice) * */ -@Injectable() +@Injectable({providedIn: "root"}) export class I18n { protected translationStrings: TranslationStrings = EN; diff --git a/src/i18n/replace.pipe.ts b/src/i18n/replace.pipe.ts index 78a8b6acf1..29716fed0f 100644 --- a/src/i18n/replace.pipe.ts +++ b/src/i18n/replace.pipe.ts @@ -2,7 +2,8 @@ import { Pipe, PipeTransform } from "@angular/core"; import { replace } from "./i18n.service"; @Pipe({ - name: "i18nReplace" + name: "i18nReplace", + standalone: true }) export class ReplacePipe implements PipeTransform { transform(value, variables) { diff --git a/src/icon/icon.directive.ts b/src/icon/icon.directive.ts index 8d93b56f8b..9c42841d0a 100644 --- a/src/icon/icon.directive.ts +++ b/src/icon/icon.directive.ts @@ -6,8 +6,9 @@ import { OnChanges, SimpleChanges } from "@angular/core"; -import { IconService } from "./icon.service"; +import { IconService, ICON_SERVICE_PROVIDER } from "./icon.service"; import { getAttributes } from "@carbon/icon-helpers"; +import { PlaceholderService } from "carbon-components-angular/placeholder"; /** * A directive for populating a svg element based on the provided carbon icon name. @@ -15,13 +16,15 @@ import { getAttributes } from "@carbon/icon-helpers"; * Get started with importing the module: * * ```typescript - * import { IconModule } from 'carbon-components-angular'; + * import { IconDirective } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-icon--basic) */ @Directive({ - selector: "[cdsIcon], [ibmIcon]" + selector: "[cdsIcon], [ibmIcon]", + providers: [ICON_SERVICE_PROVIDER, PlaceholderService], + standalone: true }) export class IconDirective implements AfterViewInit, OnChanges { diff --git a/src/icon/icon.module.ts b/src/icon/icon.module.ts index eea2a0d21c..8d24811b6c 100644 --- a/src/icon/icon.module.ts +++ b/src/icon/icon.module.ts @@ -4,84 +4,15 @@ import { CommonModule } from "@angular/common"; // imports import { IconDirective } from "./icon.directive"; -import { IconService } from "./icon.service"; - -// icon imports -import Add16 from "@carbon/icons/es/add/16"; -import Add20 from "@carbon/icons/es/add/20"; -import Bee16 from "@carbon/icons/es/bee/16"; -import Bee20 from "@carbon/icons/es/bee/20"; -import Calendar16 from "@carbon/icons/es/calendar/16"; -import Carbon16 from "@carbon/icons/es/carbon/16"; -import Carbon20 from "@carbon/icons/es/carbon/20"; -import CaretDown16 from "@carbon/icons/es/caret--down/16"; -import CaretLeft16 from "@carbon/icons/es/caret--left/16"; -import CaretRight16 from "@carbon/icons/es/caret--right/16"; -import CaretUp16 from "@carbon/icons/es/caret--up/16"; -import Checkmark16 from "@carbon/icons/es/checkmark/16"; -import CheckmarkFilled16 from "@carbon/icons/es/checkmark--filled/16"; -import CheckmarkFilled20 from "@carbon/icons/es/checkmark--filled/20"; -import CheckmarkOutline16 from "@carbon/icons/es/checkmark--outline/16"; -import ChevronDown16 from "@carbon/icons/es/chevron--down/16"; -import ChevronRight16 from "@carbon/icons/es/chevron--right/16"; -import CircleDash16 from "@carbon/icons/es/circle-dash/16"; -import Close16 from "@carbon/icons/es/close/16"; -import Close20 from "@carbon/icons/es/close/20"; -import Copy16 from "@carbon/icons/es/copy/16"; -import Copy20 from "@carbon/icons/es/copy/20"; -import Data216 from "@carbon/icons/es/data--2/16"; -import Data220 from "@carbon/icons/es/data--2/20"; -import Document16 from "@carbon/icons/es/document/16"; -import Document20 from "@carbon/icons/es/document/20"; -import Download16 from "@carbon/icons/es/download/16"; -import ErrorFilled16 from "@carbon/icons/es/error--filled/16"; -import ErrorFilled20 from "@carbon/icons/es/error--filled/20"; -import Fade16 from "@carbon/icons/es/fade/16"; -import Fade20 from "@carbon/icons/es/fade/20"; -import Folder16 from "@carbon/icons/es/folder/16"; -import Incomplete16 from "@carbon/icons/es/incomplete/16"; -import InformationFilled16 from "@carbon/icons/es/information--filled/16"; -import InformationFilled20 from "@carbon/icons/es/information--filled/20"; -import InformationSquareFilled20 from "@carbon/icons/es/information--square--filled/20"; -import Menu16 from "@carbon/icons/es/menu/16"; -import Menu20 from "@carbon/icons/es/menu/20"; -import OverflowMenuVertical16 from "@carbon/icons/es/overflow-menu--vertical/16"; -import OverflowMenuHorizontal16 from "@carbon/icons/es/overflow-menu--horizontal/16"; -import Save16 from "@carbon/icons/es/save/16"; -import Search16 from "@carbon/icons/es/search/16"; -import Settings16 from "@carbon/icons/es/settings/16"; -import SettingsAdjust16 from "@carbon/icons/es/settings--adjust/16"; -import Subtract16 from "@carbon/icons/es/subtract/16"; -import TrashCan16 from "@carbon/icons/es/trash-can/16"; -import Warning16 from "@carbon/icons/es/warning/16"; -import WarningFilled16 from "@carbon/icons/es/warning--filled/16"; -import WarningFilled20 from "@carbon/icons/es/warning--filled/20"; -import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16"; -import WarningAltFilled20 from "@carbon/icons/es/warning--alt--filled/20"; -import View16 from "@carbon/icons/es/view/16"; -import ViewOff16 from "@carbon/icons/es/view--off/16"; - -// either provides a new instance of IconService, or returns the parent -export function ICON_SERVICE_PROVIDER_FACTORY(parentService: IconService) { - return parentService || new IconService(); -} - -// icon service *must* be a singleton to ensure that icons are accessible globally and not duplicated -export const ICON_SERVICE_PROVIDER = { - provide: IconService, - deps: [[new Optional(), new SkipSelf(), IconService]], - useFactory: ICON_SERVICE_PROVIDER_FACTORY -}; +import { IconService, ICON_SERVICE_PROVIDER } from "./icon.service"; @NgModule({ - declarations: [ - IconDirective - ], exports: [ IconDirective ], imports: [ - CommonModule + CommonModule, + IconDirective ], providers: [ ICON_SERVICE_PROVIDER @@ -89,60 +20,5 @@ export const ICON_SERVICE_PROVIDER = { }) export class IconModule { constructor(protected iconService: IconService) { - iconService.registerAll([ - Add16, - Add20, - Bee16, - Bee20, - Calendar16, - Carbon16, - Carbon20, - CaretDown16, - CaretLeft16, - CaretRight16, - CaretUp16, - Checkmark16, - CheckmarkFilled16, - CheckmarkFilled20, - CheckmarkOutline16, - ChevronDown16, - ChevronRight16, - CircleDash16, - Close16, - Close20, - Copy16, - Copy20, - Data216, - Data220, - Document16, - Document20, - Download16, - ErrorFilled16, - ErrorFilled20, - Fade16, - Fade20, - Folder16, - Incomplete16, - InformationFilled16, - InformationFilled20, - InformationSquareFilled20, - Menu16, - Menu20, - OverflowMenuVertical16, - OverflowMenuHorizontal16, - Save16, - Search16, - Settings16, - SettingsAdjust16, - Subtract16, - TrashCan16, - View16, - ViewOff16, - Warning16, - WarningFilled16, - WarningFilled20, - WarningAltFilled16, - WarningAltFilled20 - ]); } } diff --git a/src/icon/icon.service.ts b/src/icon/icon.service.ts index 98cc87d5ff..19990bcfea 100644 --- a/src/icon/icon.service.ts +++ b/src/icon/icon.service.ts @@ -1,32 +1,60 @@ -import { Injectable } from "@angular/core"; +import { Injectable, Optional, SkipSelf } from "@angular/core"; import { toString } from "@carbon/icon-helpers"; // icon imports -import { - Add16, - Calendar16, - CaretDown16, - CaretLeft16, - CaretRight16, - CaretUp16, - Checkmark16, - CheckmarkFilled16, - CheckmarkOutline16, - ChevronDown16, - ChevronRight16, - Close16, - Copy16, - Download16, - ErrorFilled16, - InformationFilled16, - Menu16, - OverflowMenuVertical16, - Save16, - Settings16, - TrashCan16, - Warning16, - WarningFilled16 -} from "@carbon/icons"; +import Add16 from "@carbon/icons/es/add/16"; +import Add20 from "@carbon/icons/es/add/20"; +import Bee16 from "@carbon/icons/es/bee/16"; +import Bee20 from "@carbon/icons/es/bee/20"; +import Calendar16 from "@carbon/icons/es/calendar/16"; +import Carbon16 from "@carbon/icons/es/carbon/16"; +import Carbon20 from "@carbon/icons/es/carbon/20"; +import CaretDown16 from "@carbon/icons/es/caret--down/16"; +import CaretLeft16 from "@carbon/icons/es/caret--left/16"; +import CaretRight16 from "@carbon/icons/es/caret--right/16"; +import CaretUp16 from "@carbon/icons/es/caret--up/16"; +import Checkmark16 from "@carbon/icons/es/checkmark/16"; +import CheckmarkFilled16 from "@carbon/icons/es/checkmark--filled/16"; +import CheckmarkFilled20 from "@carbon/icons/es/checkmark--filled/20"; +import CheckmarkOutline16 from "@carbon/icons/es/checkmark--outline/16"; +import ChevronDown16 from "@carbon/icons/es/chevron--down/16"; +import ChevronRight16 from "@carbon/icons/es/chevron--right/16"; +import CircleDash16 from "@carbon/icons/es/circle-dash/16"; +import Close16 from "@carbon/icons/es/close/16"; +import Close20 from "@carbon/icons/es/close/20"; +import Copy16 from "@carbon/icons/es/copy/16"; +import Copy20 from "@carbon/icons/es/copy/20"; +import Data216 from "@carbon/icons/es/data--2/16"; +import Data220 from "@carbon/icons/es/data--2/20"; +import Document16 from "@carbon/icons/es/document/16"; +import Document20 from "@carbon/icons/es/document/20"; +import Download16 from "@carbon/icons/es/download/16"; +import ErrorFilled16 from "@carbon/icons/es/error--filled/16"; +import ErrorFilled20 from "@carbon/icons/es/error--filled/20"; +import Fade16 from "@carbon/icons/es/fade/16"; +import Fade20 from "@carbon/icons/es/fade/20"; +import Folder16 from "@carbon/icons/es/folder/16"; +import Incomplete16 from "@carbon/icons/es/incomplete/16"; +import InformationFilled16 from "@carbon/icons/es/information--filled/16"; +import InformationFilled20 from "@carbon/icons/es/information--filled/20"; +import InformationSquareFilled20 from "@carbon/icons/es/information--square--filled/20"; +import Menu16 from "@carbon/icons/es/menu/16"; +import Menu20 from "@carbon/icons/es/menu/20"; +import OverflowMenuVertical16 from "@carbon/icons/es/overflow-menu--vertical/16"; +import OverflowMenuHorizontal16 from "@carbon/icons/es/overflow-menu--horizontal/16"; +import Save16 from "@carbon/icons/es/save/16"; +import Search16 from "@carbon/icons/es/search/16"; +import Settings16 from "@carbon/icons/es/settings/16"; +import SettingsAdjust16 from "@carbon/icons/es/settings--adjust/16"; +import Subtract16 from "@carbon/icons/es/subtract/16"; +import TrashCan16 from "@carbon/icons/es/trash-can/16"; +import Warning16 from "@carbon/icons/es/warning/16"; +import WarningFilled16 from "@carbon/icons/es/warning--filled/16"; +import WarningFilled20 from "@carbon/icons/es/warning--filled/20"; +import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16"; +import WarningAltFilled20 from "@carbon/icons/es/warning--alt--filled/20"; +import View16 from "@carbon/icons/es/view/16"; +import ViewOff16 from "@carbon/icons/es/view--off/16"; /** * An object that represents a parsed icon @@ -174,8 +202,68 @@ export class IconMemoryCache extends IconCache { */ @Injectable() export class IconService { + private iconCache: IconCache = new IconMemoryCache(); + constructor() { + this.registerAll([ + Add16, + Add20, + Bee16, + Bee20, + Calendar16, + Carbon16, + Carbon20, + CaretDown16, + CaretLeft16, + CaretRight16, + CaretUp16, + Checkmark16, + CheckmarkFilled16, + CheckmarkFilled20, + CheckmarkOutline16, + ChevronDown16, + ChevronRight16, + CircleDash16, + Close16, + Close20, + Copy16, + Copy20, + Data216, + Data220, + Document16, + Document20, + Download16, + ErrorFilled16, + ErrorFilled20, + Fade16, + Fade20, + Folder16, + Incomplete16, + InformationFilled16, + InformationFilled20, + InformationSquareFilled20, + Menu16, + Menu20, + OverflowMenuVertical16, + OverflowMenuHorizontal16, + Save16, + Search16, + Settings16, + SettingsAdjust16, + Subtract16, + TrashCan16, + View16, + ViewOff16, + Warning16, + WarningFilled16, + WarningFilled20, + WarningAltFilled16, + WarningAltFilled20 + ]); + } + + /** * Registers an array of icons based on the metadata provided by `@carbon/icons` */ @@ -221,3 +309,15 @@ export class IconService { this.iconCache = options.cache; } } + +// either provides a new instance of IconService, or returns the parent +export function ICON_SERVICE_PROVIDER_FACTORY(parentService: IconService) { + return parentService || new IconService(); +} + +// icon service *must* be a singleton to ensure that icons are accessible globally and not duplicated +export const ICON_SERVICE_PROVIDER = { + provide: IconService, + deps: [[new Optional(), new SkipSelf(), IconService]], + useFactory: ICON_SERVICE_PROVIDER_FACTORY +}; diff --git a/src/icon/icon.stories.ts b/src/icon/icon.stories.ts index 6c1b90c76d..c4a2bfbdba 100644 --- a/src/icon/icon.stories.ts +++ b/src/icon/icon.stories.ts @@ -1,17 +1,16 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { IconModule, IconDirective } from "./"; +import { ICON_SERVICE_PROVIDER, IconDirective, IconService } from "./"; import { IconDemo, ManyIconDemo } from "./stories"; export default { title: "Components/Icon", decorators: [ moduleMetadata({ + imports: [IconDirective], + providers: [ICON_SERVICE_PROVIDER], declarations: [ IconDemo, ManyIconDemo - ], - imports: [ - IconModule ] }) ], diff --git a/src/icon/public_api.ts b/src/icon/public_api.ts index 4e73c982d6..e9ad0e9617 100644 --- a/src/icon/public_api.ts +++ b/src/icon/public_api.ts @@ -2,8 +2,6 @@ export { IconDirective } from "./icon.directive"; export { - ICON_SERVICE_PROVIDER, - ICON_SERVICE_PROVIDER_FACTORY, IconModule } from "./icon.module"; export { @@ -12,5 +10,7 @@ export { IconMemoryCache, IconNameNotFoundError, IconService, - IconSizeNotFoundError + IconSizeNotFoundError, + ICON_SERVICE_PROVIDER, + ICON_SERVICE_PROVIDER_FACTORY } from "./icon.service"; diff --git a/src/icon/stories/many-icons-demo.component.ts b/src/icon/stories/many-icons-demo.component.ts index 5923dcbf03..c7d1b4196d 100644 --- a/src/icon/stories/many-icons-demo.component.ts +++ b/src/icon/stories/many-icons-demo.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from "@angular/core"; import * as Icons from "@carbon/icons"; -import { IconService } from "../"; +import { IconService, ICON_SERVICE_PROVIDER } from "../"; @Component({ selector: "app-demo-many-icon", @@ -27,7 +27,8 @@ import { IconService } from "../"; padding: 10px 0; } ` - ] + ], + providers: [ICON_SERVICE_PROVIDER] }) export class ManyIconDemo implements OnInit { groupedIcons: any = []; diff --git a/src/index.stories.ts b/src/index.stories.ts index 4ac1fc5c01..e81de90bed 100644 --- a/src/index.stories.ts +++ b/src/index.stories.ts @@ -1,8 +1,8 @@ import { moduleMetadata, Meta } from "@storybook/angular"; import { Component, OnInit, OnDestroy } from "@angular/core"; -import { ButtonModule } from "./button"; -import { IconModule } from "./icon/icon.module"; +import { Button } from "./button"; +import { IconDirective } from "./icon"; @Component({ selector: "app-welcome", @@ -171,7 +171,7 @@ export default { title: "Getting Started", decorators: [ moduleMetadata({ - imports: [ButtonModule, IconModule], + imports: [Button, IconDirective], declarations: [WelcomeStory] }) ], diff --git a/src/inline-loading/inline-loading.component.ts b/src/inline-loading/inline-loading.component.ts index 745ae911d9..918eef2dab 100644 --- a/src/inline-loading/inline-loading.component.ts +++ b/src/inline-loading/inline-loading.component.ts @@ -6,6 +6,8 @@ import { HostBinding, ChangeDetectionStrategy } from "@angular/core"; +import { NgClass } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; export enum InlineLoadingState { /** It hides the whole component. */ @@ -76,7 +78,9 @@ export enum InlineLoadingState { } } `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass, IconDirective] }) export class InlineLoading { InlineLoadingState = InlineLoadingState; diff --git a/src/inline-loading/inline-loading.module.ts b/src/inline-loading/inline-loading.module.ts index ed5382ed03..8cfc2d8eb1 100644 --- a/src/inline-loading/inline-loading.module.ts +++ b/src/inline-loading/inline-loading.module.ts @@ -2,11 +2,10 @@ import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { InlineLoading } from "./inline-loading.component"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; @NgModule({ - declarations: [InlineLoading], exports: [InlineLoading], - imports: [CommonModule, IconModule] + imports: [CommonModule, IconDirective, InlineLoading] }) export class InlineLoadingModule { } diff --git a/src/inline-loading/inline-loading.spec.ts b/src/inline-loading/inline-loading.spec.ts index 9044109c9c..9767612362 100644 --- a/src/inline-loading/inline-loading.spec.ts +++ b/src/inline-loading/inline-loading.spec.ts @@ -1,7 +1,6 @@ import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; import { InlineLoading, InlineLoadingState } from "./inline-loading.component"; -import { I18nModule } from "../i18n/i18n.module"; describe("Inline Loading", () => { let component: InlineLoading; @@ -9,8 +8,7 @@ describe("Inline Loading", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [InlineLoading], - imports: [I18nModule] + imports: [InlineLoading] }); fixture = TestBed.createComponent(InlineLoading); diff --git a/src/inline-loading/inline-loading.stories.ts b/src/inline-loading/inline-loading.stories.ts index a17873c756..4f0ee160e8 100644 --- a/src/inline-loading/inline-loading.stories.ts +++ b/src/inline-loading/inline-loading.stories.ts @@ -1,5 +1,5 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { InlineLoadingModule, InlineLoading } from "./"; +import { InlineLoading } from "./"; import { InlineLoadingStory } from "./stories"; @@ -7,8 +7,7 @@ export default { title: "Components/Inline loading", decorators: [ moduleMetadata({ - declarations: [InlineLoadingStory], - imports: [InlineLoadingModule] + declarations: [InlineLoadingStory] }) ], args: { diff --git a/src/input/input.directive.ts b/src/input/input.directive.ts index 5cd6329f55..866324d762 100644 --- a/src/input/input.directive.ts +++ b/src/input/input.directive.ts @@ -12,7 +12,8 @@ import { Directive, HostBinding, Input } from "@angular/core"; * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail. */ @Directive({ - selector: "[cdsText], [ibmText]" + selector: "[cdsText], [ibmText]", + standalone: true }) export class TextInput { /** diff --git a/src/input/input.module.ts b/src/input/input.module.ts index 141799fa45..2dfc3893af 100644 --- a/src/input/input.module.ts +++ b/src/input/input.module.ts @@ -9,22 +9,13 @@ import { TextInput } from "./input.directive"; import { TextArea } from "./text-area.directive"; import { TextareaLabelComponent } from "./textarea-label.component"; import { TextInputLabelComponent } from "./text-input-label.component"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; import { PasswordInput } from "./password.directive"; import { PasswordInputLabelComponent } from "./password-input-label.component"; -import { TooltipModule } from "carbon-components-angular/tooltip"; -import { ButtonModule } from "carbon-components-angular/button"; + + @NgModule({ - declarations: [ - Label, - TextInput, - TextArea, - PasswordInput, - TextareaLabelComponent, - TextInputLabelComponent, - PasswordInputLabelComponent - ], exports: [ Label, TextareaLabelComponent, @@ -37,9 +28,14 @@ import { ButtonModule } from "carbon-components-angular/button"; imports: [ CommonModule, FormsModule, - IconModule, - ButtonModule, - TooltipModule + IconDirective, + Label, + TextInput, + TextArea, + PasswordInput, + TextareaLabelComponent, + TextInputLabelComponent, + PasswordInputLabelComponent ] }) export class InputModule { } diff --git a/src/input/input.stories.ts b/src/input/input.stories.ts index 1712937556..d99a8d5329 100644 --- a/src/input/input.stories.ts +++ b/src/input/input.stories.ts @@ -1,11 +1,11 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { InputModule, TextInputLabelComponent } from "./"; +import { Label, TextInput, TextInputLabelComponent } from "./"; export default { title: "Components/Input", decorators: [ moduleMetadata({ - imports: [InputModule] + imports: [TextInput, Label] }) ], args: { diff --git a/src/input/label.component.spec.ts b/src/input/label.component.spec.ts index 5ff8138d69..3a8bf4051b 100644 --- a/src/input/label.component.spec.ts +++ b/src/input/label.component.spec.ts @@ -12,8 +12,7 @@ describe("Label", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [Label], - imports: [], + imports: [Label], providers: [] }); diff --git a/src/input/label.component.ts b/src/input/label.component.ts index 65b972b22f..32e1dccc32 100644 --- a/src/input/label.component.ts +++ b/src/input/label.component.ts @@ -14,6 +14,11 @@ import { import { TextArea } from "./text-area.directive"; import { TextInput } from "./input.directive"; import { PasswordInput } from "./password.directive"; +import { TextareaLabelComponent } from "./textarea-label.component"; +import { TextInputLabelComponent } from "./text-input-label.component"; +import { PasswordInputLabelComponent } from "./password-input-label.component"; +import { NgTemplateOutlet, NgClass } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; /** * Get started with importing the module: @@ -158,7 +163,9 @@ import { PasswordInput } from "./password.directive"; } - ` + `, + standalone: true, + imports: [TextareaLabelComponent, TextInputLabelComponent, PasswordInputLabelComponent, NgTemplateOutlet, NgClass, IconDirective] }) export class Label implements AfterContentInit, AfterViewInit { /** diff --git a/src/input/password-input-label.component.ts b/src/input/password-input-label.component.ts index cf2843e9e3..04b8536407 100644 --- a/src/input/password-input-label.component.ts +++ b/src/input/password-input-label.component.ts @@ -11,6 +11,9 @@ import { } from "@angular/core"; import { PasswordInput } from "./password.directive"; import { BaseIconButton } from "carbon-components-angular/button"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; +import { Tooltip } from "carbon-components-angular/tooltip"; /** * Get started with importing the module: @@ -149,7 +152,9 @@ import { BaseIconButton } from "carbon-components-angular/button"; } } - ` + `, + standalone: true, + imports: [NgClass, NgTemplateOutlet, IconDirective, Tooltip] }) /** * Represents the Password Input Label Component. diff --git a/src/input/password.directive.ts b/src/input/password.directive.ts index b92def3d16..573e432d43 100644 --- a/src/input/password.directive.ts +++ b/src/input/password.directive.ts @@ -8,7 +8,8 @@ import { } from "@angular/core"; @Directive({ - selector: "[cdsPassword], [ibmPassword]" + selector: "[cdsPassword], [ibmPassword]", + standalone: true }) export class PasswordInput implements AfterViewInit { diff --git a/src/input/password.spec.ts b/src/input/password.spec.ts index a9526b6918..73b08804c1 100644 --- a/src/input/password.spec.ts +++ b/src/input/password.spec.ts @@ -3,7 +3,6 @@ import { Component, DebugElement } from "@angular/core"; import { By } from "@angular/platform-browser"; import { PasswordInputLabelComponent, PasswordInput } from "./"; -import { Tooltip } from "../tooltip"; @Component({ template: ` @@ -11,7 +10,9 @@ import { Tooltip } from "../tooltip"; Password - ` + `, + imports: [PasswordInputLabelComponent, PasswordInput], + standalone: true }) class TestPasswordInputComponent {} @@ -22,7 +23,7 @@ describe("Password", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [PasswordInputLabelComponent, PasswordInput, Tooltip, TestPasswordInputComponent] + imports: [TestPasswordInputComponent] }); fixture = TestBed.createComponent(TestPasswordInputComponent); component = fixture.componentInstance; diff --git a/src/input/password.stories.ts b/src/input/password.stories.ts index fa8ed92f64..edebc2cc6a 100644 --- a/src/input/password.stories.ts +++ b/src/input/password.stories.ts @@ -1,12 +1,12 @@ import { FormsModule } from "@angular/forms"; import { Meta, moduleMetadata } from "@storybook/angular"; -import { InputModule, PasswordInputLabelComponent } from "."; +import { PasswordInput, PasswordInputLabelComponent } from "."; export default { title: "Components/Input/Password", decorators: [ moduleMetadata({ - imports: [InputModule, FormsModule] + imports: [FormsModule, PasswordInput] }) ], args: { diff --git a/src/input/text-area.directive.ts b/src/input/text-area.directive.ts index 06b473cabb..81c9079a3b 100644 --- a/src/input/text-area.directive.ts +++ b/src/input/text-area.directive.ts @@ -12,7 +12,8 @@ import { Directive, HostBinding, Input } from "@angular/core"; * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail. */ @Directive({ - selector: "[cdsTextArea], [ibmTextArea]" + selector: "[cdsTextArea], [ibmTextArea]", + standalone: true }) export class TextArea { /** diff --git a/src/input/text-input-label.component.ts b/src/input/text-input-label.component.ts index 0c43bd358a..d6924208d9 100644 --- a/src/input/text-input-label.component.ts +++ b/src/input/text-input-label.component.ts @@ -9,6 +9,8 @@ import { TemplateRef, ViewChild } from "@angular/core"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; /** * Get started with importing the module: @@ -124,7 +126,9 @@ import { } } - ` + `, + standalone: true, + imports: [NgClass, NgTemplateOutlet, IconDirective] }) export class TextInputLabelComponent implements AfterViewInit, AfterContentInit { /** diff --git a/src/input/textarea-label.component.ts b/src/input/textarea-label.component.ts index 470e2b4fbc..435cb48a8c 100644 --- a/src/input/textarea-label.component.ts +++ b/src/input/textarea-label.component.ts @@ -11,6 +11,8 @@ import { } from "@angular/core"; import { TextArea } from "./text-area.directive"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; /** * Get started with importing the module: @@ -137,7 +139,9 @@ import { TextArea } from "./text-area.directive"; } } } - ` + `, + standalone: true, + imports: [NgClass, NgTemplateOutlet, IconDirective] }) export class TextareaLabelComponent implements AfterViewInit { /** diff --git a/src/input/textarea.stories.ts b/src/input/textarea.stories.ts index 3aaf5ce6ca..1f6188807f 100644 --- a/src/input/textarea.stories.ts +++ b/src/input/textarea.stories.ts @@ -1,11 +1,11 @@ import { Meta, moduleMetadata } from "@storybook/angular"; -import { InputModule, TextareaLabelComponent } from "./"; +import { TextArea, TextInput, TextInputLabelComponent, TextareaLabelComponent } from "./"; export default { title: "Components/Input/Text area", decorators: [ moduleMetadata({ - imports: [InputModule] + imports: [TextArea, TextInput, TextInputLabelComponent] }) ], args: { diff --git a/src/layer/layer.directive.ts b/src/layer/layer.directive.ts index db9f3791cb..f3f6ec41c4 100644 --- a/src/layer/layer.directive.ts +++ b/src/layer/layer.directive.ts @@ -14,14 +14,15 @@ const MAX_LEVEL = 2; * Applies layering styles to the div container it is applied to. Get started with importing the module: * * ```typescript - * import { LayerModule } from 'carbon-components-angular'; + * import { LayerDirective } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-layer--basic) */ @Directive({ selector: "[cdsLayer], [ibmLayer]", - exportAs: "layer" + exportAs: "layer", + standalone: true }) export class LayerDirective implements AfterContentInit { diff --git a/src/layer/layer.module.ts b/src/layer/layer.module.ts index 5871dcc6b3..304e02e678 100644 --- a/src/layer/layer.module.ts +++ b/src/layer/layer.module.ts @@ -4,8 +4,10 @@ import { CommonModule } from "@angular/common"; import { LayerDirective } from "./layer.directive"; @NgModule({ - declarations: [LayerDirective], exports: [LayerDirective], - imports: [CommonModule] + imports: [ + CommonModule, + LayerDirective + ] }) export class LayerModule {} diff --git a/src/layer/layer.spec.ts b/src/layer/layer.spec.ts index 51c7cac64e..3fe9dd9e07 100644 --- a/src/layer/layer.spec.ts +++ b/src/layer/layer.spec.ts @@ -5,7 +5,9 @@ import { By } from "@angular/platform-browser"; import { LayerDirective } from "./layer.directive"; @Component({ - template: `
` + template: `
`, + imports: [LayerDirective], + standalone: true }) class TestLayerComponent { } @@ -15,15 +17,16 @@ class TestLayerComponent {
- ` + `, + imports: [LayerDirective], + standalone: true }) class TestNestedLayerComponent { } describe("Layer", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - LayerDirective, + imports: [ TestLayerComponent, TestNestedLayerComponent ] diff --git a/src/layer/layer.stories.ts b/src/layer/layer.stories.ts index 53fc5d9f1a..e075e43cab 100644 --- a/src/layer/layer.stories.ts +++ b/src/layer/layer.stories.ts @@ -1,11 +1,11 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { LayerModule, LayerDirective } from "./"; +import { LayerDirective } from "./"; export default { title: "Components/Layer", decorators: [ moduleMetadata({ - imports: [LayerModule] + imports: [LayerDirective] }) ], parameters: { diff --git a/src/layout/layout.module.ts b/src/layout/layout.module.ts index 5ac927cb88..3c5c1058c4 100644 --- a/src/layout/layout.module.ts +++ b/src/layout/layout.module.ts @@ -4,8 +4,10 @@ import { CommonModule } from "@angular/common"; import { StackDirective } from "./stack.directive"; @NgModule({ - declarations: [StackDirective], exports: [StackDirective], - imports: [CommonModule] + imports: [ + CommonModule, + StackDirective + ] }) export class LayoutModule { } diff --git a/src/layout/stack.directive.ts b/src/layout/stack.directive.ts index 39eb84c782..17183ec1c0 100644 --- a/src/layout/stack.directive.ts +++ b/src/layout/stack.directive.ts @@ -16,7 +16,8 @@ import { * [See demo](../../?path=/story/layout-stack--basic) */ @Directive({ - selector: "[cdsStack], [ibmStack]" + selector: "[cdsStack], [ibmStack]", + standalone: true }) export class StackDirective { @HostBinding("class.cds--stack-horizontal") get isHorizontal() { diff --git a/src/layout/stack.spec.ts b/src/layout/stack.spec.ts index 59b1247ed5..d199bcc65a 100644 --- a/src/layout/stack.spec.ts +++ b/src/layout/stack.spec.ts @@ -5,23 +5,23 @@ import { By } from "@angular/platform-browser"; import { StackDirective } from "./stack.directive"; @Component({ - template: `
Test
` + template: `
Test
`, + imports: [StackDirective], + standalone: true }) class TestStackComponent { } describe("Stack", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - TestStackComponent, - StackDirective - ] + imports: [TestStackComponent, + StackDirective] }); }); it("should assign default stack class to div", () => { TestBed.configureTestingModule({ - declarations: [TestStackComponent, StackDirective] + imports: [TestStackComponent] }); let fixture: ComponentFixture = TestBed.createComponent(TestStackComponent); diff --git a/src/layout/stack.stories.ts b/src/layout/stack.stories.ts index 8d32b2c60f..847838de3c 100644 --- a/src/layout/stack.stories.ts +++ b/src/layout/stack.stories.ts @@ -1,11 +1,11 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { LayoutModule, StackDirective } from "./"; +import { StackDirective } from "./"; export default { title: "Layout/Stack", decorators: [ moduleMetadata({ - imports: [LayoutModule] + imports: [StackDirective] }) ], component: StackDirective diff --git a/src/link/link-icon.directive.ts b/src/link/link-icon.directive.ts index 792e79679f..0d833530c1 100644 --- a/src/link/link-icon.directive.ts +++ b/src/link/link-icon.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[ibmLinkIcon], [cdsLinkIcon]" + selector: "[ibmLinkIcon], [cdsLinkIcon]", + standalone: true }) export class LinkIconDirective { @HostBinding("class.cds--link__icon") iconClass = true; diff --git a/src/link/link.directive.ts b/src/link/link.directive.ts index dc35151e3c..1dfba34b17 100644 --- a/src/link/link.directive.ts +++ b/src/link/link.directive.ts @@ -8,7 +8,7 @@ import { * A convenience directive for applying styling to a link. Get started with importing the module: * * ```typescript - * import { LinkModule } from 'carbon-components-angular'; + * import { Link } from 'carbon-components-angular'; * ``` * * ```html @@ -20,7 +20,8 @@ import { * [See demo](../../?path=/story/components-link--basic) */ @Directive({ - selector: "[cdsLink], [ibmLink]" + selector: "[cdsLink], [ibmLink]", + standalone: true }) diff --git a/src/link/link.module.ts b/src/link/link.module.ts index 9781fe18af..b6bbf02195 100644 --- a/src/link/link.module.ts +++ b/src/link/link.module.ts @@ -5,16 +5,14 @@ import { Link } from "./link.directive"; import { LinkIconDirective } from "./link-icon.directive"; @NgModule({ - declarations: [ - Link, - LinkIconDirective - ], exports: [ Link, LinkIconDirective ], imports: [ - CommonModule + CommonModule, + Link, + LinkIconDirective ] }) export class LinkModule {} diff --git a/src/link/link.spec.ts b/src/link/link.spec.ts index bc4ddf6439..d80bf5d80e 100644 --- a/src/link/link.spec.ts +++ b/src/link/link.spec.ts @@ -5,19 +5,25 @@ import { By } from "@angular/platform-browser"; import { Link } from "./link.directive"; @Component({ - template: `link` + template: `link`, + standalone: true, + imports: [Link] }) class TestLinkComponent { } @Component({ - template: `link` + template: `link`, + imports: [Link], + standalone: true }) class TestDisabledLinkComponent { } @Component({ - template: `link` + template: `link`, + standalone: true, + imports: [Link] }) class TestInlineLinkComponent { } @@ -25,7 +31,7 @@ class TestInlineLinkComponent { describe("Link", () => { it("should create a Link", () => { TestBed.configureTestingModule({ - declarations: [TestLinkComponent, Link] + imports: [TestLinkComponent, Link] }); let fixture: ComponentFixture = TestBed.createComponent(TestLinkComponent); @@ -42,7 +48,7 @@ describe("Link", () => { it("should create a disabled link", () => { TestBed.configureTestingModule({ - declarations: [TestDisabledLinkComponent, Link] + imports: [TestDisabledLinkComponent, Link] }); let fixture: ComponentFixture = TestBed.createComponent(TestDisabledLinkComponent); @@ -56,7 +62,7 @@ describe("Link", () => { it("should create an inline link", () => { TestBed.configureTestingModule({ - declarations: [TestInlineLinkComponent, Link] + imports: [TestInlineLinkComponent, Link] }); let fixture: ComponentFixture = TestBed.createComponent(TestInlineLinkComponent); diff --git a/src/link/link.stories.ts b/src/link/link.stories.ts index f9176822bd..ca31629e5f 100644 --- a/src/link/link.stories.ts +++ b/src/link/link.stories.ts @@ -1,13 +1,13 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { LinkModule, Link } from "./"; +import { Link } from "./"; -import { IconModule } from "../icon"; +import { IconDirective } from "../icon"; export default { title: "Components/Link", decorators: [ moduleMetadata({ - imports: [LinkModule, IconModule] + imports: [Link, IconDirective] }) ], component: Link diff --git a/src/list/list-item.directive.ts b/src/list/list-item.directive.ts index d0258bd34e..e3de714a47 100644 --- a/src/list/list-item.directive.ts +++ b/src/list/list-item.directive.ts @@ -4,7 +4,8 @@ import { Directive, HostBinding } from "@angular/core"; * Applies list styling to the item it is used on. Best used with `li`s. */ @Directive({ - selector: "[cdsListItem], [ibmListItem]" + selector: "[cdsListItem], [ibmListItem]", + standalone: true }) export class ListItemDirective { @HostBinding("class.cds--list__item") wrapper = true; diff --git a/src/list/list.directive.ts b/src/list/list.directive.ts index d43a22feb4..ef559621dc 100644 --- a/src/list/list.directive.ts +++ b/src/list/list.directive.ts @@ -21,7 +21,8 @@ import { * [See demo](../../?path=/story/components-list--basic) */ @Directive({ - selector: "[cdsList], [ibmList]" + selector: "[cdsList], [ibmList]", + standalone: true }) export class List { @HostBinding("class.cds--list--ordered") get ordered() { diff --git a/src/list/list.module.ts b/src/list/list.module.ts index 3eb35826cc..ff9ac91aa9 100644 --- a/src/list/list.module.ts +++ b/src/list/list.module.ts @@ -5,14 +5,14 @@ import { ListItemDirective } from "./list-item.directive"; import { List } from "./list.directive"; @NgModule({ - declarations: [ + exports: [ ListItemDirective, List ], - exports: [ + imports: [ + CommonModule, ListItemDirective, List - ], - imports: [CommonModule] + ] }) export class ListModule {} diff --git a/src/list/list.stories.ts b/src/list/list.stories.ts index 21d8ebecad..f4002d60bc 100644 --- a/src/list/list.stories.ts +++ b/src/list/list.stories.ts @@ -1,11 +1,11 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { ListModule, List } from "./"; +import { List } from "./"; export default { title: "Components/List", decorators: [ moduleMetadata({ - imports: [ListModule] + imports: [List] }) ], parameters: { diff --git a/src/loading/loading.component.spec.ts b/src/loading/loading.component.spec.ts index 684575886c..cc1e9c9ee4 100644 --- a/src/loading/loading.component.spec.ts +++ b/src/loading/loading.component.spec.ts @@ -1,7 +1,6 @@ -import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; +import { TestBed } from "@angular/core/testing"; import { Loading } from "./loading.component"; -import { I18nModule } from "../i18n/index"; import { Component } from "@angular/core"; import { By } from "@angular/platform-browser"; @@ -12,7 +11,9 @@ import { By } from "@angular/platform-browser"; [size]="size" [overlay]="overlay" title="title"> - ` + `, + imports: [Loading], + standalone: true }) class LoadingTest { isActive = true; @@ -25,8 +26,7 @@ describe("Loading", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [Loading, LoadingTest], - imports: [I18nModule] + imports: [LoadingTest] }); }); diff --git a/src/loading/loading.component.ts b/src/loading/loading.component.ts index ba2d2d604f..7dc5b7d57c 100644 --- a/src/loading/loading.component.ts +++ b/src/loading/loading.component.ts @@ -5,6 +5,7 @@ import { Input } from "@angular/core"; import { I18n } from "carbon-components-angular/i18n"; +import { NgClass } from "@angular/common"; /** * Get started with importing the module: @@ -31,7 +32,9 @@ import { I18n } from "carbon-components-angular/i18n"; `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass] }) export class Loading { /** diff --git a/src/loading/loading.module.ts b/src/loading/loading.module.ts index cedc83d437..5ad8fb2226 100644 --- a/src/loading/loading.module.ts +++ b/src/loading/loading.module.ts @@ -5,8 +5,7 @@ import { Loading } from "./loading.component"; import { I18nModule } from "carbon-components-angular/i18n"; @NgModule({ - declarations: [Loading], exports: [Loading], - imports: [CommonModule, I18nModule] + imports: [CommonModule, I18nModule, Loading] }) export class LoadingModule {} diff --git a/src/loading/loading.stories.ts b/src/loading/loading.stories.ts index 47df1d5f48..7eb57f865a 100644 --- a/src/loading/loading.stories.ts +++ b/src/loading/loading.stories.ts @@ -1,13 +1,8 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { LoadingModule, Loading } from "./"; +import { Loading } from "./"; export default { title: "Components/Loading", - decorators: [ - moduleMetadata({ - imports: [LoadingModule] - }) - ], component: Loading } as Meta; diff --git a/src/menu-button/index.ts b/src/menu-button/index.ts index c733527565..d0b38563af 100644 --- a/src/menu-button/index.ts +++ b/src/menu-button/index.ts @@ -1,2 +1,2 @@ export * from "./menu-button.component"; -export * from "./menu-button.module"; +// export * from "./menu-button.module"; diff --git a/src/menu-button/menu-button.component.ts b/src/menu-button/menu-button.component.ts index b38edebc91..00707ba38f 100644 --- a/src/menu-button/menu-button.component.ts +++ b/src/menu-button/menu-button.component.ts @@ -26,6 +26,10 @@ import { } from "@floating-ui/dom"; import { ContextMenuItemComponent, ItemClickEvent } from "carbon-components-angular/context-menu"; import { Subscription } from "rxjs"; +import { NgClass } from "@angular/common"; +import { Button } from "carbon-components-angular/button"; +import { IconDirective } from "carbon-components-angular/icon"; +import { ContextMenuComponent } from "carbon-components-angular/context-menu"; type MenuButtonPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end"; @@ -70,7 +74,9 @@ type MenuButtonPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom- `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass, Button, IconDirective, ContextMenuComponent] }) export class MenuButtonComponent implements OnChanges, AfterViewInit, OnDestroy { static menuButtonCounter = 0; diff --git a/src/menu-button/menu-button.module.ts b/src/menu-button/menu-button.module.ts index 4b78249f15..bb3f1252c6 100644 --- a/src/menu-button/menu-button.module.ts +++ b/src/menu-button/menu-button.module.ts @@ -1,8 +1,8 @@ import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; -import { ButtonModule } from "carbon-components-angular/button"; -import { IconModule } from "carbon-components-angular/icon"; + +import { IconDirective } from "carbon-components-angular/icon"; import { ContextMenuModule } from "carbon-components-angular/context-menu"; import { MenuButtonComponent } from "./menu-button.component"; @@ -10,12 +10,11 @@ import { MenuButtonComponent } from "./menu-button.component"; @NgModule({ imports: [ CommonModule, - ButtonModule, - IconModule, - ContextMenuModule + IconDirective, + ContextMenuModule, + MenuButtonComponent ], exports: [MenuButtonComponent], - declarations: [MenuButtonComponent], providers: [] }) -export class MenuButtonModule { } +export class MenuButton { } diff --git a/src/menu-button/menu-button.spec.ts b/src/menu-button/menu-button.spec.ts index c934e4bf45..e6abfb30fe 100644 --- a/src/menu-button/menu-button.spec.ts +++ b/src/menu-button/menu-button.spec.ts @@ -1,10 +1,9 @@ -import { Component, Input } from "@angular/core"; +import { Component } from "@angular/core"; import { TestBed } from "@angular/core/testing"; -import { ContextMenuModule } from "../context-menu"; -import { IconModule } from "../icon"; +import { ContextMenuComponent, ContextMenuDividerComponent, ContextMenuItemComponent } from "../context-menu"; +import { MenuButtonComponent } from "../menu-button"; import { By } from "@angular/platform-browser"; -import { MenuButtonModule } from "./menu-button.module"; import { Button } from "../button"; @@ -20,7 +19,14 @@ import { Button } from "../button"; - ` + `, + standalone: true, + imports: [ + MenuButtonComponent, + ContextMenuComponent, + ContextMenuItemComponent, + ContextMenuDividerComponent + ] }) class MenuButtonTestComponent {} @@ -28,13 +34,8 @@ describe("Menu button", () => { let fixture, wrapper; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - MenuButtonTestComponent - ], imports: [ - MenuButtonModule, - ContextMenuModule, - IconModule + MenuButtonTestComponent ] }); }); diff --git a/src/menu-button/menu-button.stories.ts b/src/menu-button/menu-button.stories.ts index d8e544eef4..b3c9cfa4ba 100644 --- a/src/menu-button/menu-button.stories.ts +++ b/src/menu-button/menu-button.stories.ts @@ -1,17 +1,18 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { MenuButtonModule, MenuButtonComponent } from "./"; +import { MenuButtonComponent } from "./"; -import { IconModule } from "../icon"; -import { ContextMenuModule } from "../context-menu"; +import { IconDirective } from "../icon"; +import { ContextMenuComponent, ContextMenuDividerComponent, ContextMenuItemComponent } from "../context-menu"; export default { title: "Components/Menu button", decorators: [ moduleMetadata({ imports: [ - MenuButtonModule, - IconModule, - ContextMenuModule + IconDirective, + ContextMenuComponent, + ContextMenuItemComponent, + ContextMenuDividerComponent ] }) ], diff --git a/src/modal/alert-modal.component.ts b/src/modal/alert-modal.component.ts index 8a43d03bbf..dae439d7f8 100644 --- a/src/modal/alert-modal.component.ts +++ b/src/modal/alert-modal.component.ts @@ -6,6 +6,14 @@ import { Optional } from "@angular/core"; import { BaseModal } from "./base-modal.class"; +import { Modal } from "./modal.component"; +import { ModalHeader } from "./modal-header.component"; +import { ModalHeaderLabel } from "./modal-header-label.directive"; +import { ModalHeaderHeading } from "./modal-header-heading.directive"; +import { ModalContent } from "./modal-content.directive"; +import { ModalFooter } from "./modal-footer.component"; +import { Button } from "carbon-components-angular/button"; +import { BaseModalService } from "./base-modal.service"; /** * Component to create standard modals for presenting content or asking for user's input. @@ -76,7 +84,10 @@ import { BaseModal } from "./base-modal.class"; } - ` + `, + standalone: true, + providers: [BaseModalService], + imports: [Modal, ModalHeader, ModalHeaderLabel, ModalHeaderHeading, ModalContent, ModalFooter, Button] }) export class AlertModal extends BaseModal implements AfterViewInit { @ViewChild("modalContent", { static: true }) modalContent: { nativeElement: any; }; diff --git a/src/modal/base-modal.class.ts b/src/modal/base-modal.class.ts index 5595e97ba8..25e4d354cd 100644 --- a/src/modal/base-modal.class.ts +++ b/src/modal/base-modal.class.ts @@ -11,7 +11,8 @@ import { * `ModalService` depends on the `close` event to correctly clean up the component. */ @Directive({ - selector: "[cdsBaseModal], [ibmBaseModal]" + selector: "[cdsBaseModal], [ibmBaseModal]", + standalone: true }) export class BaseModal { /** diff --git a/src/modal/modal-content-text.directive.ts b/src/modal/modal-content-text.directive.ts index 35ff761f51..b4df0d1aa1 100644 --- a/src/modal/modal-content-text.directive.ts +++ b/src/modal/modal-content-text.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsModalContentText], [ibmModalContentText]" + selector: "[cdsModalContentText], [ibmModalContentText]", + standalone: true }) export class ModalContentText { @HostBinding("class.cds--modal-content__text") modalContentTextClass = true; diff --git a/src/modal/modal-content.directive.ts b/src/modal/modal-content.directive.ts index 5e963c86cf..c96467e03f 100644 --- a/src/modal/modal-content.directive.ts +++ b/src/modal/modal-content.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding, Input } from "@angular/core"; @Directive({ - selector: "[cdsModalContent], [ibmModalContent]" + selector: "[cdsModalContent], [ibmModalContent]", + standalone: true }) export class ModalContent { @HostBinding("class.cds--modal-content") modalContentClass = true; diff --git a/src/modal/modal-footer.component.ts b/src/modal/modal-footer.component.ts index 909508d4b9..e319b2f6bd 100644 --- a/src/modal/modal-footer.component.ts +++ b/src/modal/modal-footer.component.ts @@ -6,6 +6,7 @@ import { Component } from "@angular/core";
- ` + `, + standalone: true }) export class ModalFooter {} diff --git a/src/modal/modal-header-heading.directive.ts b/src/modal/modal-header-heading.directive.ts index 8c956f1242..74085b23ce 100644 --- a/src/modal/modal-header-heading.directive.ts +++ b/src/modal/modal-header-heading.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding, Input } from "@angular/core"; @Directive({ - selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" + selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]", + standalone: true }) export class ModalHeaderHeading { @HostBinding("class.cds--modal-header__heading") modalHeaderHeadingClass = true; diff --git a/src/modal/modal-header-label.directive.ts b/src/modal/modal-header-label.directive.ts index 766005114e..34bda37f7d 100644 --- a/src/modal/modal-header-label.directive.ts +++ b/src/modal/modal-header-label.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsModalHeaderLabel], [ibmModalHeaderLabel]" + selector: "[cdsModalHeaderLabel], [ibmModalHeaderLabel]", + standalone: true }) export class ModalHeaderLabel { @HostBinding("class.cds--modal-header__label") modalHeaderLabelClass = true; diff --git a/src/modal/modal-header.component.ts b/src/modal/modal-header.component.ts index 6944dadf55..c8ade06035 100644 --- a/src/modal/modal-header.component.ts +++ b/src/modal/modal-header.component.ts @@ -5,6 +5,8 @@ import { Input } from "@angular/core"; import { I18n } from "carbon-components-angular/i18n"; +import { IconButton } from "carbon-components-angular/button"; +import { IconDirective } from "carbon-components-angular/icon"; /** * ***Inputs*** @@ -37,7 +39,9 @@ import { I18n } from "carbon-components-angular/i18n"; - ` + `, + standalone: true, + imports: [IconButton, IconDirective] }) export class ModalHeader { /** diff --git a/src/modal/modal.component.spec.ts b/src/modal/modal.component.spec.ts index 730fdb1d71..c11b4c02f7 100644 --- a/src/modal/modal.component.spec.ts +++ b/src/modal/modal.component.spec.ts @@ -5,8 +5,7 @@ import { DebugElement } from "@angular/core"; import { Modal } from "./modal.component"; import { Overlay } from "./overlay.component"; import { ModalService } from "./modal.service"; -import { I18nModule } from "../i18n/index"; -import { PlaceholderModule } from "./../placeholder/index"; +import { Placeholder } from "./../placeholder/index"; import { BaseModalService } from "./base-modal.service"; // snippet to add transform to style so karma doesn't die with @@ -28,10 +27,9 @@ describe("Modal", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [Modal, Overlay], imports: [ - I18nModule, - PlaceholderModule + Placeholder, + Modal, Overlay ], providers: [ModalService, BaseModalService] }); diff --git a/src/modal/modal.component.ts b/src/modal/modal.component.ts index 05a5d46900..9f48e586b3 100644 --- a/src/modal/modal.component.ts +++ b/src/modal/modal.component.ts @@ -13,9 +13,11 @@ import { Inject, OnDestroy } from "@angular/core"; -import { DOCUMENT } from "@angular/common"; +import { DOCUMENT, NgClass } from "@angular/common"; import { cycleTabs, getFocusElementList } from "carbon-components-angular/common"; import { BaseModalService } from "./base-modal.service"; +import { Overlay } from "./overlay.component"; +import { PlaceholderService } from "carbon-components-angular/placeholder"; /** * Component to create modals for presenting content. @@ -103,7 +105,10 @@ export class ModalDemo { - ` + `, + standalone: true, + providers: [PlaceholderService, BaseModalService], + imports: [Overlay, NgClass] }) export class Modal implements AfterViewInit, OnChanges, OnDestroy { /** diff --git a/src/modal/modal.module.ts b/src/modal/modal.module.ts index f9935073c6..d59556aadf 100644 --- a/src/modal/modal.module.ts +++ b/src/modal/modal.module.ts @@ -22,37 +22,35 @@ import { BaseModal } from "./base-modal.class"; import { IconModule } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ + exports: [ AlertModal, Modal, ModalHeader, ModalFooter, - Overlay, ModalContent, ModalContentText, ModalHeaderHeading, ModalHeaderLabel, BaseModal ], - exports: [ + providers: [BaseModalService, ModalService], + imports: [ + CommonModule, + ButtonModule, + I18nModule, + PlaceholderModule, + ExperimentalModule, + IconModule, AlertModal, Modal, ModalHeader, ModalFooter, + Overlay, ModalContent, ModalContentText, ModalHeaderHeading, ModalHeaderLabel, BaseModal - ], - providers: [BaseModalService, ModalService], - imports: [ - CommonModule, - ButtonModule, - I18nModule, - PlaceholderModule, - ExperimentalModule, - IconModule ] }) export class ModalModule { } diff --git a/src/modal/modal.service.ts b/src/modal/modal.service.ts index 1eb445ea84..dba9a58fa6 100644 --- a/src/modal/modal.service.ts +++ b/src/modal/modal.service.ts @@ -56,4 +56,3 @@ export class ModalService extends BaseModalService { }); } } - diff --git a/src/modal/modal.stories.ts b/src/modal/modal.stories.ts index 0394788877..792b340c99 100644 --- a/src/modal/modal.stories.ts +++ b/src/modal/modal.stories.ts @@ -1,8 +1,6 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { PlaceholderModule } from "../placeholder"; -import { InputModule } from "../input"; -import { ButtonModule } from "../button"; -import { ModalModule, Modal } from "./"; +import { PLACEHOLDER_SERVICE_PROVIDER, Placeholder } from "../placeholder"; +import { Modal, ModalContent, ModalContentText, ModalFooter, ModalHeader, ModalHeaderHeading, ModalHeaderLabel } from "./"; import { ModalStory, @@ -12,12 +10,24 @@ import { AlertModalStory, SampleFormModal } from "./stories"; +import { Button } from "../button"; export default { title: "Components/Modal", decorators: [ moduleMetadata({ - declarations: [ + imports: [ + // imports for the modals + Modal, + ModalHeader, + ModalFooter, + ModalContent, + ModalContentText, + ModalHeaderHeading, + ModalHeaderLabel, + Placeholder, + Button, + // stories ModalStory, SampleModal, InputModal, @@ -25,14 +35,18 @@ export default { AlertModalStory, SampleFormModal ], - imports: [ - ModalModule, - InputModule, - ButtonModule, - PlaceholderModule - ] + providers: [PLACEHOLDER_SERVICE_PROVIDER] }) - ] + ], + parameters:{ + docs: { + story: { + inline: false, + height: "30rem" + } + }, + layout: "centered" + } } as Meta; const Template = (args) => ({ diff --git a/src/modal/overlay.component.ts b/src/modal/overlay.component.ts index b48ad8ed31..75b980ad67 100644 --- a/src/modal/overlay.component.ts +++ b/src/modal/overlay.component.ts @@ -6,6 +6,7 @@ import { ElementRef, Input } from "@angular/core"; +import { NgClass } from "@angular/common"; /** @@ -27,7 +28,9 @@ import { #overlay> - ` + `, + standalone: true, + imports: [NgClass] }) export class Overlay { /** diff --git a/src/modal/stories/alert-modal.component.ts b/src/modal/stories/alert-modal.component.ts index 50341d80c8..57927a3d02 100644 --- a/src/modal/stories/alert-modal.component.ts +++ b/src/modal/stories/alert-modal.component.ts @@ -5,12 +5,15 @@ import { ModalButton, AlertModalType } from "../"; +import { PLACEHOLDER_SERVICE_PROVIDER } from "../../placeholder"; @Component({ selector: "app-alert-modal-story", template: ` - ` + `, + providers: [ModalService, PLACEHOLDER_SERVICE_PROVIDER], + standalone: true }) export class AlertModalStory { @Input() modalType: AlertModalType; diff --git a/src/modal/stories/data-passing.component.ts b/src/modal/stories/data-passing.component.ts index a309cb32f2..e4e44498cc 100644 --- a/src/modal/stories/data-passing.component.ts +++ b/src/modal/stories/data-passing.component.ts @@ -7,13 +7,17 @@ import { Observable, Subject } from "rxjs"; import { ModalService } from "../"; import { InputModal } from "./input-modal.component"; +import { PLACEHOLDER_SERVICE_PROVIDER } from "../../placeholder"; @Component({ selector: "app-data-passing-modal", template: `

Data passed from input modal on input change:

{{ modalInputValue }} - ` + `, + standalone: true, + providers: [ModalService], + imports: [InputModal] }) export class DataPassingModal implements AfterContentInit { @Input() modalText = "Hello, World"; diff --git a/src/modal/stories/form-modal.component.ts b/src/modal/stories/form-modal.component.ts index cdefef6c5a..b8e6fed8f9 100644 --- a/src/modal/stories/form-modal.component.ts +++ b/src/modal/stories/form-modal.component.ts @@ -1,5 +1,6 @@ import { Component } from "@angular/core"; -import { BaseModal } from "../"; +import { BaseModal, Modal, ModalContent, ModalContentText, ModalFooter, ModalHeader, ModalHeaderHeading, ModalHeaderLabel } from "../"; +import { Label, TextInput } from "../../input"; @Component({ selector: "app-form-modal", @@ -37,6 +38,8 @@ import { BaseModal } from "../"; .modal-text { margin-bottom: 30px; } - `] + `], + imports: [Modal, ModalHeader, ModalHeaderLabel, ModalHeaderHeading, ModalFooter, Label, TextInput, ModalContent, ModalContentText], + standalone: true }) export class SampleFormModal extends BaseModal { } diff --git a/src/modal/stories/input-modal.component.ts b/src/modal/stories/input-modal.component.ts index 882f72821c..61bd8af416 100644 --- a/src/modal/stories/input-modal.component.ts +++ b/src/modal/stories/input-modal.component.ts @@ -1,5 +1,7 @@ import { Component, Inject } from "@angular/core"; -import { ModalService, BaseModal } from "../"; +import { ModalService, BaseModal, Modal, ModalHeader, ModalFooter } from "../"; +import { Label, TextInput } from "../../input"; +import { PLACEHOLDER_SERVICE_PROVIDER } from "../../placeholder"; @Component({ selector: "app-input-modal", @@ -23,7 +25,10 @@ import { ModalService, BaseModal } from "../"; - ` + `, + standalone: true, + imports: [Modal, ModalHeader, TextInput, Label, ModalFooter], + providers: [ModalService, PLACEHOLDER_SERVICE_PROVIDER] }) export class InputModal extends BaseModal { constructor( diff --git a/src/modal/stories/modal.component.ts b/src/modal/stories/modal.component.ts index c40920e560..0cb66fdae1 100644 --- a/src/modal/stories/modal.component.ts +++ b/src/modal/stories/modal.component.ts @@ -2,12 +2,16 @@ import { Component, Input } from "@angular/core"; import { ModalService } from "../"; import { SampleModal } from "./sample-modal.component"; +import { PLACEHOLDER_SERVICE_PROVIDER, Placeholder } from "../../placeholder"; @Component({ selector: "app-modal-story", template: ` - ` + `, + imports: [SampleModal, Placeholder], + providers: [ModalService, PLACEHOLDER_SERVICE_PROVIDER], + standalone: true }) export class ModalStory { @Input() modalText = "Hello, World"; diff --git a/src/modal/stories/sample-modal.component.ts b/src/modal/stories/sample-modal.component.ts index 6aa19a8db2..98feb7c2c4 100644 --- a/src/modal/stories/sample-modal.component.ts +++ b/src/modal/stories/sample-modal.component.ts @@ -2,8 +2,17 @@ import { Component, Inject } from "@angular/core"; import { ModalService, BaseModal, - ModalButtonType + ModalButtonType, + Modal, + ModalHeader, + ModalHeaderLabel, + ModalHeaderHeading, + ModalContent, + ModalContentText, + ModalFooter, + AlertModal } from "../"; +import { PLACEHOLDER_SERVICE_PROVIDER, Placeholder } from "../../placeholder"; @Component({ selector: "app-sample-modal", @@ -25,7 +34,13 @@ import { - ` + + + `, + imports: [Modal, ModalHeader, ModalHeaderLabel, ModalHeaderHeading, ModalContent, + ModalContentText, ModalFooter, AlertModal, Placeholder], + providers: [ModalService, PLACEHOLDER_SERVICE_PROVIDER], + standalone: true }) export class SampleModal extends BaseModal { constructor( diff --git a/src/notification/actionable-button.directive.ts b/src/notification/actionable-button.directive.ts index 854688f325..76b77cf5aa 100644 --- a/src/notification/actionable-button.directive.ts +++ b/src/notification/actionable-button.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsActionableButton], [ibmActionableButton]" + selector: "[cdsActionableButton], [ibmActionableButton]", + standalone: true }) export class ActionableButton { @HostBinding("class.cds--actionable-notification__action-button") actionableButton = true; diff --git a/src/notification/actionable-notification.component.ts b/src/notification/actionable-notification.component.ts index 194f1c1883..15f034cd47 100644 --- a/src/notification/actionable-notification.component.ts +++ b/src/notification/actionable-notification.component.ts @@ -6,9 +6,16 @@ import { import { isObservable, of } from "rxjs"; import { ActionableContent, NotificationVariants } from "./notification-content.interface"; -import { I18n } from "carbon-components-angular/i18n"; +import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n"; import { NotificationDisplayService } from "./notification-display.service"; import { BaseNotification } from "./base-notification.component"; +import { IconDirective } from "carbon-components-angular/icon"; +import { NgClass, NgTemplateOutlet, AsyncPipe } from "@angular/common"; +import { ActionableTitle } from "./actionable-title.directive"; +import { ActionableSubtitle } from "./actionable-subtitle.directive"; +import { Link } from "carbon-components-angular/link"; +import { ActionableButton } from "./actionable-button.directive"; +import { Button } from "carbon-components-angular/button"; /** * Actionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast. @@ -66,7 +73,10 @@ import { BaseNotification } from "./base-notification.component"; } - ` + `, + standalone: true, + providers: [NotificationDisplayService, I18N_SERVICE_PROVIDER], + imports: [IconDirective, NgClass, ActionableTitle, ActionableSubtitle, Link, NgTemplateOutlet, ActionableButton, Button, AsyncPipe] }) export class ActionableNotification extends BaseNotification { private static notificationCount = 0; diff --git a/src/notification/actionable-subtitle.directive.ts b/src/notification/actionable-subtitle.directive.ts index f5dbda3d2a..19020b8670 100644 --- a/src/notification/actionable-subtitle.directive.ts +++ b/src/notification/actionable-subtitle.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsActionableSubtitle], [ibmActionableSubtitle]" + selector: "[cdsActionableSubtitle], [ibmActionableSubtitle]", + standalone: true }) export class ActionableSubtitle { @HostBinding("class.cds--actionable-notification__subtitle") baseClass = true; diff --git a/src/notification/actionable-title.directive.ts b/src/notification/actionable-title.directive.ts index 584426842e..f535ccab70 100644 --- a/src/notification/actionable-title.directive.ts +++ b/src/notification/actionable-title.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsActionableTitle], [ibmActionableTitle]" + selector: "[cdsActionableTitle], [ibmActionableTitle]", + standalone: true }) export class ActionableTitle { @HostBinding("class.cds--actionable-notification__title") baseClass = true; diff --git a/src/notification/base-notification.component.ts b/src/notification/base-notification.component.ts index dd3c6437af..153b8a75b7 100644 --- a/src/notification/base-notification.component.ts +++ b/src/notification/base-notification.component.ts @@ -23,7 +23,8 @@ import { NotificationDisplayService } from "./notification-display.service"; * [See demo](../../?path=/story/components-notification--inline-notification) */ @Component({ - template: "" + template: "", + standalone: true }) export class BaseNotification { /** diff --git a/src/notification/notification-subtitle.directive.ts b/src/notification/notification-subtitle.directive.ts index 0d5530dcc7..48f50d831b 100644 --- a/src/notification/notification-subtitle.directive.ts +++ b/src/notification/notification-subtitle.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsNotificationSubtitle], [ibmNotificationSubtitle]" + selector: "[cdsNotificationSubtitle], [ibmNotificationSubtitle]", + standalone: true }) export class NotificationSubtitle { @HostBinding("class.cds--inline-notification__subtitle") baseClass = true; diff --git a/src/notification/notification-title.directive.ts b/src/notification/notification-title.directive.ts index 04089dcae1..6048eb3e99 100644 --- a/src/notification/notification-title.directive.ts +++ b/src/notification/notification-title.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsNotificationTitle], [ibmNotificationTitle]" + selector: "[cdsNotificationTitle], [ibmNotificationTitle]", + standalone: true }) export class NotificationTitle { @HostBinding("class.cds--inline-notification__title") baseClass = true; diff --git a/src/notification/notification.component.spec.ts b/src/notification/notification.component.spec.ts index 36f4c3fef4..f8a8d06667 100644 --- a/src/notification/notification.component.spec.ts +++ b/src/notification/notification.component.spec.ts @@ -1,17 +1,15 @@ import { TestBed } from "@angular/core/testing"; import { Notification, NotificationDisplayService } from "./index"; -import { I18nModule } from "../i18n/index"; -import { IconModule } from "../icon/index"; +import { IconDirective } from "../icon/index"; describe("Notification", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [Notification], providers: [NotificationDisplayService], imports: [ - I18nModule, - IconModule + IconDirective, + Notification ] }); }); diff --git a/src/notification/notification.component.ts b/src/notification/notification.component.ts index 80907246e6..d6b17768bd 100644 --- a/src/notification/notification.component.ts +++ b/src/notification/notification.component.ts @@ -5,10 +5,14 @@ import { } from "@angular/core"; import { NotificationContent } from "./notification-content.interface"; -import { I18n } from "carbon-components-angular/i18n"; +import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n"; import { NotificationDisplayService } from "./notification-display.service"; import { isObservable, of } from "rxjs"; import { BaseNotification } from "./base-notification.component"; +import { IconDirective } from "carbon-components-angular/icon"; +import { NotificationTitle } from "./notification-title.directive"; +import { NotificationSubtitle } from "./notification-subtitle.directive"; +import { NgTemplateOutlet, AsyncPipe } from "@angular/common"; /** * Notification messages are displayed toward the top of the UI and do not interrupt user’s work. @@ -45,7 +49,10 @@ import { BaseNotification } from "./base-notification.component"; } - ` + `, + standalone: true, + providers: [NotificationDisplayService, I18N_SERVICE_PROVIDER], + imports: [IconDirective, NotificationTitle, NotificationSubtitle, NgTemplateOutlet, AsyncPipe] }) export class Notification extends BaseNotification { private static notificationCount = 0; diff --git a/src/notification/notification.module.ts b/src/notification/notification.module.ts index 5cb21f01b3..662743185a 100644 --- a/src/notification/notification.module.ts +++ b/src/notification/notification.module.ts @@ -22,13 +22,12 @@ import { LinkModule } from "carbon-components-angular/link"; import { IconModule } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ + exports: [ + Notification, ActionableButton, ActionableNotification, ActionableTitle, ActionableSubtitle, - BaseNotification, - Notification, Toast, ToastTitle, ToastSubtitle, @@ -36,12 +35,19 @@ import { IconModule } from "carbon-components-angular/icon"; NotificationTitle, NotificationSubtitle ], - exports: [ - Notification, + imports: [ + ButtonModule, + CommonModule, + I18nModule, + ExperimentalModule, + LinkModule, + IconModule, ActionableButton, ActionableNotification, ActionableTitle, ActionableSubtitle, + BaseNotification, + Notification, Toast, ToastTitle, ToastSubtitle, @@ -49,14 +55,6 @@ import { IconModule } from "carbon-components-angular/icon"; NotificationTitle, NotificationSubtitle ], - imports: [ - ButtonModule, - CommonModule, - I18nModule, - ExperimentalModule, - LinkModule, - IconModule - ], providers: [NotificationService, NotificationDisplayService] }) export class NotificationModule {} diff --git a/src/notification/notification.stories.ts b/src/notification/notification.stories.ts index 92c62d93e7..bfdf8dc748 100644 --- a/src/notification/notification.stories.ts +++ b/src/notification/notification.stories.ts @@ -1,8 +1,8 @@ import { ViewEncapsulation } from "@angular/core"; import { Subject } from "rxjs"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { ButtonModule } from "../button"; -import { NotificationModule, BaseNotification } from "./"; +import { Button } from "../button"; +import { Notification, BaseNotification, Toast, ActionableNotification } from "./"; import { DyanmicActionableStory, @@ -20,8 +20,10 @@ export default { ToastStory ], imports: [ - NotificationModule, - ButtonModule + Notification, + ActionableNotification, + Toast, + Button ] }) ], @@ -73,11 +75,12 @@ const ToastTemplate = (args) => ({ }"> ` }); -export const Toast = ToastTemplate.bind({}); -Toast.args = { +export const BasicToastStory = ToastTemplate.bind({}); +BasicToastStory.storyName = "Toast"; +BasicToastStory.args = { ...InlineNotification.args }; -Toast.argTypes = { +BasicToastStory.argTypes = { ...InlineNotification.argTypes }; diff --git a/src/notification/toast-caption.directive.ts b/src/notification/toast-caption.directive.ts index a844d1ed64..64adac4a26 100644 --- a/src/notification/toast-caption.directive.ts +++ b/src/notification/toast-caption.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsToastCaption], [ibmToastCaption]" + selector: "[cdsToastCaption], [ibmToastCaption]", + standalone: true }) export class ToastCaption { @HostBinding("class.cds--toast-notification__caption") baseClass = true; diff --git a/src/notification/toast-subtitle.directive.ts b/src/notification/toast-subtitle.directive.ts index 9251c7e8ab..2710b0a3b8 100644 --- a/src/notification/toast-subtitle.directive.ts +++ b/src/notification/toast-subtitle.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsToastSubtitle], [ibmToastSubtitle]" + selector: "[cdsToastSubtitle], [ibmToastSubtitle]", + standalone: true }) export class ToastSubtitle { @HostBinding("class.cds--toast-notification__subtitle") baseClass = true; diff --git a/src/notification/toast-title.directive.ts b/src/notification/toast-title.directive.ts index 8b53b78ec2..8da41c802e 100644 --- a/src/notification/toast-title.directive.ts +++ b/src/notification/toast-title.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsToastTitle], [ibmToastTitle]" + selector: "[cdsToastTitle], [ibmToastTitle]", + standalone: true }) export class ToastTitle { @HostBinding("class.cds--toast-notification__title") baseClass = true; diff --git a/src/notification/toast.component.ts b/src/notification/toast.component.ts index fb1e7beacd..55d577487e 100644 --- a/src/notification/toast.component.ts +++ b/src/notification/toast.component.ts @@ -8,8 +8,14 @@ import { import { isObservable, of } from "rxjs"; import { ToastContent } from "./notification-content.interface"; import { NotificationDisplayService } from "./notification-display.service"; -import { I18n } from "carbon-components-angular/i18n"; +import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n"; import { BaseNotification } from "./base-notification.component"; +import { IconDirective } from "carbon-components-angular/icon"; +import { ToastTitle } from "./toast-title.directive"; +import { ToastSubtitle } from "./toast-subtitle.directive"; +import { ToastCaption } from "./toast-caption.directive"; +import { NgTemplateOutlet, AsyncPipe } from "@angular/common"; +import { NotificationService } from "./notification.service"; /** * Toast messages are displayed toward the top of the UI and do not interrupt user’s work. @@ -45,7 +51,10 @@ import { BaseNotification } from "./base-notification.component"; } - ` + `, + standalone: true, + providers: [NotificationDisplayService, I18N_SERVICE_PROVIDER], + imports: [IconDirective, ToastTitle, ToastSubtitle, ToastCaption, NgTemplateOutlet, AsyncPipe] }) export class Toast extends BaseNotification implements OnInit { private static toastCount = 0; diff --git a/src/number-input/number.component.spec.ts b/src/number-input/number.component.spec.ts index dd923747f7..c85b82ccc4 100644 --- a/src/number-input/number.component.spec.ts +++ b/src/number-input/number.component.spec.ts @@ -2,8 +2,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { FormsModule } from "@angular/forms"; -import { I18nModule } from "../i18n/index"; -import { IconModule } from "../icon/index"; +import { IconDirective } from "../icon/index"; import { Number } from "./number.component"; describe("Number", () => { @@ -18,11 +17,10 @@ describe("Number", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [Number], imports: [ - I18nModule, FormsModule, - IconModule + IconDirective, + Number ], providers: [] }); diff --git a/src/number-input/number.component.ts b/src/number-input/number.component.ts index 49adcedcc8..14bfe11385 100644 --- a/src/number-input/number.component.ts +++ b/src/number-input/number.component.ts @@ -12,6 +12,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; import { I18n, Overridable } from "carbon-components-angular/i18n"; import { Observable } from "rxjs"; +import { NgClass, NgTemplateOutlet, AsyncPipe } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; /** * Used to emit changes performed on number input components. @@ -169,7 +171,9 @@ export class NumberChange { multi: true } ], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass, NgTemplateOutlet, IconDirective, AsyncPipe] }) export class NumberComponent implements ControlValueAccessor { /** @@ -273,6 +277,7 @@ export class NumberComponent implements ControlValueAccessor { /** * Emits event notifying other classes when a change in state occurs in the input. */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() change = new EventEmitter(); @Input() diff --git a/src/number-input/number.module.ts b/src/number-input/number.module.ts index 56f1bd8e8c..b932738f77 100644 --- a/src/number-input/number.module.ts +++ b/src/number-input/number.module.ts @@ -6,12 +6,9 @@ import { CommonModule } from "@angular/common"; // imports import { Number } from "./number.component"; import { I18nModule } from "carbon-components-angular/i18n"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ - Number - ], exports: [ Number ], @@ -19,7 +16,8 @@ import { IconModule } from "carbon-components-angular/icon"; FormsModule, CommonModule, I18nModule, - IconModule + IconDirective, + Number ] }) export class NumberModule { } diff --git a/src/number-input/number.stories.ts b/src/number-input/number.stories.ts index cac1d71d8f..3f01967503 100644 --- a/src/number-input/number.stories.ts +++ b/src/number-input/number.stories.ts @@ -1,12 +1,12 @@ import { moduleMetadata, Meta } from "@storybook/angular"; import { FormsModule } from "@angular/forms"; -import { NumberModule, NumberComponent } from "./"; +import { NumberComponent } from "./"; export default { title: "Components/Number Input", decorators: [ moduleMetadata({ - imports: [NumberModule, FormsModule] + imports: [FormsModule] }) ], args: { diff --git a/src/pagination/pagination-nav.stories.ts b/src/pagination/pagination-nav.stories.ts index b1b8b020c0..5d58f43cab 100644 --- a/src/pagination/pagination-nav.stories.ts +++ b/src/pagination/pagination-nav.stories.ts @@ -1,15 +1,25 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { PaginationModule, PaginationNav } from "./"; +import { + Pagination, + PaginationNav, + PaginationNavItem, + PaginationOverflow } from "./"; import { PaginationNavStory } from "./pagination-nav/stories"; +import { I18N_SERVICE_PROVIDER } from "../i18n"; // Storybook starts here export default { title: "Components/Pagination Nav", decorators: [ moduleMetadata({ - imports: [PaginationModule], - declarations: [PaginationNavStory] + imports: [ + Pagination, + PaginationNav, + PaginationNavItem, + PaginationOverflow, + PaginationNavStory + ] }) ], component: PaginationNav @@ -27,7 +37,6 @@ const Template = (args) => ({ [disabled]="disabled" [totalDataLength]="totalDataLength" [numOfItemsToShow]="numOfItemsToShow" - [skeleton]="skeleton" [size]="size"> ` diff --git a/src/pagination/pagination-nav/pagination-item.component.ts b/src/pagination/pagination-nav/pagination-item.component.ts index 3144b5bc8d..97ef483f47 100644 --- a/src/pagination/pagination-nav/pagination-item.component.ts +++ b/src/pagination/pagination-nav/pagination-item.component.ts @@ -4,6 +4,7 @@ import { Output, EventEmitter } from "@angular/core"; +import { NgClass } from "@angular/common"; /** * Used to present a single navigation item in a pagination list @@ -27,7 +28,9 @@ import { {{page}} - ` + `, + standalone: true, + imports: [NgClass] }) export class PaginationNavItem { /** @@ -43,6 +46,7 @@ export class PaginationNavItem { /** * Emits click event */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() click = new EventEmitter(); constructor() {} diff --git a/src/pagination/pagination-nav/pagination-nav.component.spec.ts b/src/pagination/pagination-nav/pagination-nav.component.spec.ts index 9f8d446049..dda069a989 100644 --- a/src/pagination/pagination-nav/pagination-nav.component.spec.ts +++ b/src/pagination/pagination-nav/pagination-nav.component.spec.ts @@ -1,12 +1,8 @@ import { TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; -import { FormsModule } from "@angular/forms"; -import { Component, OnInit } from "@angular/core"; -import { CommonModule } from "@angular/common"; -import { I18nModule } from "../../i18n"; -import { ExperimentalModule } from "../../experimental"; +import { Component, type OnInit } from "@angular/core"; +import { I18N_SERVICE_PROVIDER } from "../../i18n"; import { PaginationNav } from "./index"; -import { PaginationModule } from "../index"; import { PaginationModel } from "../pagination-model.class"; @Component({ @@ -17,7 +13,12 @@ import { PaginationModel } from "../pagination-model.class"; [numOfItemsToShow]="4" (selectPage)="selectPage($event)"> - ` + `, + standalone: true, + imports: [ + PaginationNav + ], + providers: [I18N_SERVICE_PROVIDER] }) class PaginationNavTest implements OnInit { model = new PaginationModel(); @@ -37,24 +38,23 @@ describe("PaginationNav", () => { let fixture, wrapper, paginationComponent; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ PaginationNavTest ], imports: [ - CommonModule, - FormsModule, - PaginationModule, - I18nModule, - ExperimentalModule + PaginationNavTest ] }); }); beforeEach(() => { fixture = TestBed.createComponent(PaginationNavTest); - paginationComponent = fixture.debugElement.query(By.css("cds-pagination-nav")); + paginationComponent = fixture.debugElement.query( + By.css("cds-pagination-nav") + ); }); it("should work", () => { - expect(paginationComponent.componentInstance instanceof PaginationNav).toBe(true); + expect(paginationComponent.componentInstance instanceof PaginationNav).toBe( + true + ); }); it("should emit selectPage with the correct page when current page changes", () => { @@ -71,7 +71,9 @@ describe("PaginationNav", () => { wrapper = fixture.componentInstance; spyOn(wrapper, "selectPage").and.callThrough(); fixture.detectChanges(); - const navItems = paginationComponent.queryAll(By.css("cds-pagination-nav-item")); + const navItems = paginationComponent.queryAll( + By.css("cds-pagination-nav-item") + ); navItems[1].nativeElement.click(); expect(wrapper.selectPage).toHaveBeenCalled(); expect(wrapper.model.currentPage).toBe(2); diff --git a/src/pagination/pagination-nav/pagination-nav.component.ts b/src/pagination/pagination-nav/pagination-nav.component.ts index d1e68589e3..ca3abe37d2 100644 --- a/src/pagination/pagination-nav/pagination-nav.component.ts +++ b/src/pagination/pagination-nav/pagination-nav.component.ts @@ -1,4 +1,4 @@ -import { PaginationModel } from "../pagination-model.class"; +import type { PaginationModel } from "../pagination-model.class"; import { Component, Input, @@ -7,10 +7,15 @@ import { HostBinding } from "@angular/core"; -import { I18n } from "carbon-components-angular/i18n"; -import { ExperimentalService } from "carbon-components-angular/experimental"; +import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n"; +import { ExperimentalService, EXPERIMENTAL_SERVICE_PROVIDER } from "carbon-components-angular/experimental"; import { merge } from "carbon-components-angular/utils"; import { range } from "carbon-components-angular/common"; +import { IconButton } from "carbon-components-angular/button"; +import { IconDirective } from "carbon-components-angular/icon"; +import { PaginationNavItem } from "./pagination-item.component"; +import { PaginationOverflow } from "./pagination-overflow.component"; +import { AsyncPipe } from "@angular/common"; export interface PaginationNavTranslations { NEXT: string; @@ -115,7 +120,16 @@ export interface PaginationNavTranslations { - ` + `, + standalone: true, + imports: [ + IconButton, + IconDirective, + PaginationNavItem, + PaginationOverflow, + AsyncPipe + ], + providers: [I18N_SERVICE_PROVIDER, EXPERIMENTAL_SERVICE_PROVIDER] }) export class PaginationNav { static paginationCounter = 0; @@ -124,7 +138,7 @@ export class PaginationNav { */ @Input() model: PaginationModel; /** - * Set to `true` to disable the backward/forward buttons. + * Set to `true` to disable the backward/forward buttons. */ @Input() disabled = false; /** @@ -216,7 +230,10 @@ export class PaginationNav { nextItemText = this.i18n.getOverridable("PAGINATION.NEXT"); previousItemText = this.i18n.getOverridable("PAGINATION.PREVIOUS"); - constructor(protected i18n: I18n, protected experimental: ExperimentalService) { + constructor( + protected i18n: I18n, + protected experimental: ExperimentalService + ) { PaginationNav.paginationCounter++; } @@ -227,7 +244,10 @@ export class PaginationNav { } public jumpToNext() { - this.currentPage = this.currentPage < this.totalDataLength ? this.currentPage + 1 : this.totalDataLength; + this.currentPage = + this.currentPage < this.totalDataLength + ? this.currentPage + 1 + : this.totalDataLength; } public jumpToPrevious() { @@ -239,7 +259,10 @@ export class PaginationNav { return null; } const cuts = this.getCuts(); - return this.totalNumbersArray.slice(this.startOffset + cuts.front, (1 + cuts.back) * -1); + return this.totalNumbersArray.slice( + this.startOffset + cuts.front, + (1 + cuts.back) * -1 + ); } private getCuts(splitPoint = null) { diff --git a/src/pagination/pagination-nav/pagination-overflow.component.ts b/src/pagination/pagination-nav/pagination-overflow.component.ts index f4aa9aa0e8..b1cb4da3e3 100644 --- a/src/pagination/pagination-nav/pagination-overflow.component.ts +++ b/src/pagination/pagination-nav/pagination-overflow.component.ts @@ -6,6 +6,9 @@ import { } from "@angular/core"; import { range } from "carbon-components-angular/common"; import { I18n } from "carbon-components-angular/i18n"; +import { PaginationNavItem } from "./pagination-item.component"; +import { FormsModule } from "@angular/forms"; +import { IconDirective } from "carbon-components-angular/icon"; /** * Used to present a selection of pages when there is an overflow @@ -45,7 +48,9 @@ import { I18n } from "carbon-components-angular/i18n"; } - ` + `, + standalone: true, + imports: [PaginationNavItem, FormsModule, IconDirective] }) export class PaginationOverflow { /** @@ -60,6 +65,7 @@ export class PaginationOverflow { /** * Emits click event */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() change = new EventEmitter(); get countAsArray() { diff --git a/src/pagination/pagination-nav/stories/pagination-nav-story.component.ts b/src/pagination/pagination-nav/stories/pagination-nav-story.component.ts index caf8cad36c..4839466f5e 100644 --- a/src/pagination/pagination-nav/stories/pagination-nav-story.component.ts +++ b/src/pagination/pagination-nav/stories/pagination-nav-story.component.ts @@ -4,7 +4,7 @@ import { OnInit } from "@angular/core"; -import { PaginationModel } from "../.."; +import { Pagination, PaginationModel, PaginationNav, PaginationNavItem } from "../.."; @Component({ selector: "app-pagination", @@ -16,7 +16,9 @@ import { PaginationModel } from "../.."; [numOfItemsToShow]="numOfItemsToShow" [size]="size"> - ` + `, + standalone: true, + imports: [PaginationNav, PaginationNavItem] }) export class PaginationNavStory implements OnInit { @Input() model = new PaginationModel(); @@ -37,6 +39,7 @@ export class PaginationNavStory implements OnInit { } selectPage(page) { + // eslint-disable-next-line no-console console.log("Loading page", page, "from pagination model"); this.model.currentPage = page; } diff --git a/src/pagination/pagination.component.spec.ts b/src/pagination/pagination.component.spec.ts index 244a86ea27..b8ceda0b85 100644 --- a/src/pagination/pagination.component.spec.ts +++ b/src/pagination/pagination.component.spec.ts @@ -1,12 +1,7 @@ -import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; -import { FormsModule } from "@angular/forms"; -import { Component, OnInit } from "@angular/core"; - -import { CommonModule } from "@angular/common"; -import { I18nModule } from "carbon-components-angular/i18n"; -import { ExperimentalModule } from "carbon-components-angular/experimental"; -import { Pagination, PaginationModule } from "./index"; +import { Component, type OnInit } from "@angular/core"; +import { Pagination } from "./index"; import { PaginationModel } from "./pagination-model.class"; @Component({ @@ -18,7 +13,11 @@ import { PaginationModel } from "./pagination-model.class"; [pagesUnknown]="pagesUnknown" (selectPage)="selectPage($event)"> - ` + `, + standalone: true, + imports: [ + Pagination + ] }) class PaginationTest implements OnInit { model = new PaginationModel(); @@ -41,13 +40,8 @@ describe("Pagination", () => { let fixture, wrapper, element, component; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ PaginationTest ], imports: [ - CommonModule, - FormsModule, - PaginationModule, - I18nModule, - ExperimentalModule + PaginationTest ] }); }); @@ -107,12 +101,16 @@ describe("Pagination", () => { spyOn(wrapper, "selectPage").and.callThrough(); fixture.detectChanges(); element = fixture.debugElement.query(By.css("cds-pagination")); - element.nativeElement.querySelector(".cds--pagination__button--forward").click(); + element.nativeElement + .querySelector(".cds--pagination__button--forward") + .click(); fixture.detectChanges(); expect(element.componentInstance.currentPage).toBe(2); expect(wrapper.model.currentPage).toBe(2); expect(wrapper.selectPage).toHaveBeenCalled(); - element.nativeElement.querySelector(".cds--pagination__button--backward").click(); + element.nativeElement + .querySelector(".cds--pagination__button--backward") + .click(); fixture.detectChanges(); expect(element.componentInstance.currentPage).toBe(1); expect(wrapper.model.currentPage).toBe(1); @@ -123,7 +121,9 @@ describe("Pagination", () => { wrapper = fixture.componentInstance; fixture.detectChanges(); element = fixture.debugElement.query(By.css("cds-pagination")); - const buttonBackward = element.nativeElement.querySelector(".cds--pagination__button--backward"); + const buttonBackward = element.nativeElement.querySelector( + ".cds--pagination__button--backward" + ); buttonBackward.click(); fixture.detectChanges(); expect(buttonBackward.disabled).toBe(true); @@ -137,8 +137,12 @@ describe("Pagination", () => { fixture.detectChanges(); element = fixture.debugElement.query(By.css("cds-pagination")); element.componentInstance.currentPage = 5; - const buttonForward = element.nativeElement.querySelector(".cds--pagination__button--forward"); - const buttonBackward = element.nativeElement.querySelector(".cds--pagination__button--forward"); + const buttonForward = element.nativeElement.querySelector( + ".cds--pagination__button--forward" + ); + const buttonBackward = element.nativeElement.querySelector( + ".cds--pagination__button--forward" + ); buttonForward.click(); fixture.detectChanges(); @@ -183,13 +187,20 @@ describe("Pagination", () => { element.componentInstance.pageSelectThreshold = 500; fixture.detectChanges(); - expect(element.nativeElement.querySelector(".cds--select__page-number input")).toBe(null); - expect(element.nativeElement.querySelector(".cds--select__page-number select")).toBeDefined(); + expect( + element.nativeElement.querySelector(".cds--select__page-number input") + ).toBe(null); + expect( + element.nativeElement.querySelector(".cds--select__page-number select") + ).toBeDefined(); element.componentInstance.pageSelectThreshold = 2; fixture.detectChanges(); - expect(element.nativeElement.querySelector(".cds--select__page-number input")).toBeDefined(); - expect(element.nativeElement.querySelector(".cds--select__page-number select")).toBe(null); - + expect( + element.nativeElement.querySelector(".cds--select__page-number input") + ).toBeDefined(); + expect( + element.nativeElement.querySelector(".cds--select__page-number select") + ).toBe(null); }); }); diff --git a/src/pagination/pagination.component.ts b/src/pagination/pagination.component.ts index ac6f2b969d..fee03d8730 100644 --- a/src/pagination/pagination.component.ts +++ b/src/pagination/pagination.component.ts @@ -6,10 +6,14 @@ import { EventEmitter } from "@angular/core"; -import { I18n } from "carbon-components-angular/i18n"; -import { ExperimentalService } from "carbon-components-angular/experimental"; +import { I18N_SERVICE_PROVIDER, I18n, ReplacePipe } from "carbon-components-angular/i18n"; +import { ExperimentalService, EXPERIMENTAL_SERVICE_PROVIDER } from "carbon-components-angular/experimental"; import { merge } from "carbon-components-angular/utils"; import { range } from "carbon-components-angular/common"; +import { NgClass, NgStyle, AsyncPipe } from "@angular/common"; +import { FormsModule } from "@angular/forms"; +import { IconDirective } from "carbon-components-angular/icon"; +import { Button } from "carbon-components-angular/button"; export interface PaginationTranslations { ITEMS_PER_PAGE: string; @@ -211,7 +215,10 @@ export interface PaginationTranslations { } - ` + `, + standalone: true, + imports: [NgClass, FormsModule, IconDirective, NgStyle, Button, AsyncPipe, ReplacePipe], + providers: [I18N_SERVICE_PROVIDER, EXPERIMENTAL_SERVICE_PROVIDER] }) export class Pagination { static paginationCounter = 0; diff --git a/src/pagination/pagination.module.ts b/src/pagination/pagination.module.ts index 1357e54409..481299e7a2 100644 --- a/src/pagination/pagination.module.ts +++ b/src/pagination/pagination.module.ts @@ -8,16 +8,10 @@ import { ExperimentalModule } from "carbon-components-angular/experimental"; import { PaginationNav } from "./pagination-nav/pagination-nav.component"; import { PaginationNavItem } from "./pagination-nav/pagination-item.component"; import { PaginationOverflow } from "./pagination-nav/pagination-overflow.component"; -import { IconModule } from "carbon-components-angular/icon"; -import { ButtonModule } from "carbon-components-angular/forms"; +import { IconDirective } from "carbon-components-angular/icon"; + @NgModule({ - declarations: [ - Pagination, - PaginationNav, - PaginationNavItem, - PaginationOverflow - ], exports: [ Pagination, PaginationNav, @@ -29,8 +23,11 @@ import { ButtonModule } from "carbon-components-angular/forms"; FormsModule, I18nModule, ExperimentalModule, - IconModule, - ButtonModule + IconDirective, + Pagination, + PaginationNav, + PaginationNavItem, + PaginationOverflow ] }) export class PaginationModule {} diff --git a/src/pagination/pagination.stories.ts b/src/pagination/pagination.stories.ts index d9f9bb4285..8f7a822dbe 100644 --- a/src/pagination/pagination.stories.ts +++ b/src/pagination/pagination.stories.ts @@ -1,7 +1,7 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { PaginationModule, Pagination } from "./"; +import { Pagination, PaginationNav } from "./"; import { PaginationStory } from "./stories"; @@ -9,8 +9,7 @@ export default { title: "Components/Pagination", decorators: [ moduleMetadata({ - imports: [PaginationModule], - declarations: [PaginationStory] + imports: [PaginationNav, PaginationStory] }) ], component: Pagination diff --git a/src/pagination/stories/pagination.component.ts b/src/pagination/stories/pagination.component.ts index 7f73ec5397..9bdd7b3275 100644 --- a/src/pagination/stories/pagination.component.ts +++ b/src/pagination/stories/pagination.component.ts @@ -4,7 +4,7 @@ import { OnInit } from "@angular/core"; -import { PaginationModel } from ".."; +import { Pagination, PaginationModel } from ".."; @Component({ selector: "app-pagination", @@ -18,7 +18,9 @@ import { PaginationModel } from ".."; [skeleton]="skeleton" (selectPage)="selectPage($event)"> - ` + `, + standalone: true, + imports: [Pagination] }) export class PaginationStory implements OnInit { @Input() model = new PaginationModel(); @@ -41,6 +43,7 @@ export class PaginationStory implements OnInit { } selectPage(page) { + // eslint-disable-next-line no-console console.log("Loading page", page, "from pagination model"); this.model.currentPage = page; } diff --git a/src/patterns/dialogs/modal-with-table.stories.ts b/src/patterns/dialogs/modal-with-table.stories.ts index 54b89804c0..81cb184df3 100644 --- a/src/patterns/dialogs/modal-with-table.stories.ts +++ b/src/patterns/dialogs/modal-with-table.stories.ts @@ -4,16 +4,20 @@ import { ViewEncapsulation } from "@angular/core"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { BaseModal, ModalModule } from "../../modal"; +import { BaseModal, Modal, ModalContent, ModalFooter, ModalHeader } from "../../modal"; import { + Table, + TableContainer, TableHeaderItem, TableItem, TableModel, - TableModule + TableToolbar, + TableToolbarContent, + TableToolbarSearch } from "../../table/index"; -import { ButtonModule } from "../../button"; -import { ProgressIndicatorModule } from "../../progress-indicator"; -import { LinkModule } from "../../link"; +import { Button } from "../../button"; +import { ProgressIndicator } from "../../progress-indicator"; +import { Link } from "../../link"; @Component({ selector: "app-modal-with-table", @@ -96,7 +100,22 @@ import { LinkModule } from "../../link"; left: 1rem; } ` - ] + ], + imports: [ + Modal, + ModalHeader, + ModalContent, + ModalFooter, + Table, + TableContainer, + TableToolbar, + TableToolbarContent, + TableToolbarSearch, + Button, + ProgressIndicator, + Link + ], + standalone: true }) class ModalWithTableStory extends BaseModal implements OnInit { steps = [ @@ -192,16 +211,23 @@ export default { title: "Pattern/Dialogs", decorators: [ moduleMetadata({ - declarations: [ModalWithTableStory], + declarations: [], imports: [ - ModalModule, - TableModule, - ButtonModule, - ProgressIndicatorModule, - LinkModule + + // Story + ModalWithTableStory ] }) - ] + ], + parameters:{ + docs: { + story: { + inline: false, + height: "30rem" + } + }, + layout: "centered" + } } as Meta; const Template = (args) => ({ diff --git a/src/patterns/filtering/multi-selection.stories.ts b/src/patterns/filtering/multi-selection.stories.ts index d132e1fcaf..aa8b71f0d0 100644 --- a/src/patterns/filtering/multi-selection.stories.ts +++ b/src/patterns/filtering/multi-selection.stories.ts @@ -1,9 +1,10 @@ import { Component, OnInit, OnDestroy } from "@angular/core"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { TableModule, TableModel, TableHeaderItem, TableItem } from "../../table/index"; -import { DropdownModule } from "../../dropdown/index"; -import { GridModule } from "../../grid/index"; -import { UIShellModule } from "../../ui-shell/index"; +import { TableModel, TableHeaderItem, TableItem, Table, TableContainer } from "../../table/index"; +import { Hamburger, Header } from "../../ui-shell"; +import { Dropdown, DropdownList } from "../../dropdown"; +import { ColumnDirective, GridDirective, RowDirective } from "../../grid/index"; +import { TableRow } from "../../table/table-row.class"; @Component({ selector: "app-sample-multi-selection", @@ -63,6 +64,18 @@ import { UIShellModule } from "../../ui-shell/index"; flex-grow: 1; } ` + ], + standalone: true, + imports: [ + GridDirective, + RowDirective, + ColumnDirective, + Header, + Table, + TableContainer, + Dropdown, + DropdownList, + Hamburger ] }) class SampleMultiSelection implements OnInit, OnDestroy { @@ -119,12 +132,8 @@ export default { title: "Pattern/Filtering", decorators: [ moduleMetadata({ - declarations: [SampleMultiSelection], imports: [ - TableModule, - DropdownModule, - GridModule, - UIShellModule + SampleMultiSelection ] }) ] diff --git a/src/patterns/filtering/multiple-categories.stories.ts b/src/patterns/filtering/multiple-categories.stories.ts index 4eb55fd67b..cc0f1ccda6 100644 --- a/src/patterns/filtering/multiple-categories.stories.ts +++ b/src/patterns/filtering/multiple-categories.stories.ts @@ -1,14 +1,15 @@ import { Component, OnInit, OnDestroy } from "@angular/core"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { TableModule, TableModel, TableHeaderItem, TableItem } from "../../table"; -import { DropdownModule } from "../../dropdown"; -import { StructuredListModule } from "../../structured-list"; -import { GridModule } from "../../grid"; -import { RadioModule } from "../../radio"; -import { CheckboxModule } from "../../checkbox"; -import { ButtonModule } from "../../button"; -import { TagModule } from "../../tag/index"; -import { UIShellModule } from "../../ui-shell"; +import { TableModel, TableHeaderItem, TableItem, TableContainer, Table } from "../../table"; +import { Dropdown, DropdownList } from "../../dropdown"; +import { StructuredList } from "../../structured-list"; +import { ColumnDirective, GridDirective, GridService, RowDirective } from "../../grid"; +import { Radio, RadioGroup } from "../../radio"; +import { Button } from "../../button"; +import { Tag } from "../../tag/index"; +import { Checkbox } from "../../checkbox"; +import { Hamburger, Header } from "../../ui-shell"; +import { FormsModule } from "@angular/forms"; @Component({ selector: "app-sample-multi-categories", @@ -90,7 +91,10 @@ import { UIShellModule } from "../../ui-shell"; width: 100%; } ` - ] + ], + imports: [GridDirective, RowDirective, ColumnDirective, Checkbox, Tag, Radio, Header, + Hamburger, TableContainer, Table, RadioGroup, Radio, Button, FormsModule], + standalone: true }) class SampleMultiCategories implements OnInit, OnDestroy { model = new TableModel(); @@ -186,17 +190,8 @@ export default { title: "Pattern/Filtering", decorators: [ moduleMetadata({ - declarations: [SampleMultiCategories], imports: [ - TableModule, - DropdownModule, - GridModule, - StructuredListModule, - RadioModule, - CheckboxModule, - ButtonModule, - TagModule, - UIShellModule + SampleMultiCategories ] }) ] diff --git a/src/patterns/filtering/single-selection.stories.ts b/src/patterns/filtering/single-selection.stories.ts index b1cbca1ca6..430e623282 100644 --- a/src/patterns/filtering/single-selection.stories.ts +++ b/src/patterns/filtering/single-selection.stories.ts @@ -1,9 +1,10 @@ import { Component, OnInit, OnDestroy } from "@angular/core"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { TableModule, TableModel, TableHeaderItem, TableItem } from "../../table"; -import { DropdownModule } from "../../dropdown"; -import { GridModule } from "../../grid"; -import { UIShellModule } from "../../ui-shell"; +import { TableModel, TableHeaderItem, TableItem, Table, TableContainer } from "../../table"; +import { Dropdown, DropdownList } from "../../dropdown"; +import { ColumnDirective, GridDirective, GridService, RowDirective } from "../../grid"; +import { Checkbox } from "../../checkbox"; +import { Hamburger, Header } from "../../ui-shell"; @Component({ selector: "app-sample-single-selection", @@ -63,6 +64,19 @@ import { UIShellModule } from "../../ui-shell"; margin-left: 20px; } ` + ], + standalone: true, + imports: [ + GridDirective, + RowDirective, + ColumnDirective, + Checkbox, + Table, + TableContainer, + Dropdown, + DropdownList, + Header, + Hamburger ] }) class SampleSingleSelection implements OnInit, OnDestroy { @@ -120,12 +134,8 @@ export default { title: "Pattern/Filtering", decorators: [ moduleMetadata({ - declarations: [SampleSingleSelection], imports: [ - TableModule, - DropdownModule, - GridModule, - UIShellModule + SampleSingleSelection ] }) ] diff --git a/src/patterns/forms/multi-step-form.stories.ts b/src/patterns/forms/multi-step-form.stories.ts index e0c8b5521c..1c5c3497d3 100644 --- a/src/patterns/forms/multi-step-form.stories.ts +++ b/src/patterns/forms/multi-step-form.stories.ts @@ -1,18 +1,19 @@ import { Component, OnInit, OnDestroy } from "@angular/core"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { GridModule } from "../../grid"; -import { UIShellModule } from "../../ui-shell"; -import { DropdownModule } from "../../dropdown"; -import { ButtonModule } from "../../button"; -import { InputModule } from "../../input"; -import { ProgressIndicatorModule } from "../../progress-indicator"; -import { BreadcrumbModule } from "../../breadcrumb"; +import { ColumnDirective, GridDirective, GridService, RowDirective } from "../../grid"; +import { Dropdown, DropdownList } from "../../dropdown"; +import { Button } from "../../button"; +import { ProgressIndicator } from "../../progress-indicator"; +import { Breadcrumb, BreadcrumbItemComponent } from "../../breadcrumb"; import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms"; +import { Checkbox } from "../../checkbox"; +import { Hamburger, Header } from "../../ui-shell"; +import { Label, TextArea, TextInput } from "../../input"; @Component({ selector: "app-multi-step-form", @@ -143,7 +144,11 @@ import { .form-item { margin-top: 1.5rem; } - `] + `], + imports: [GridDirective, RowDirective, ColumnDirective, Checkbox, ProgressIndicator, Button, + Breadcrumb, BreadcrumbItemComponent, ReactiveFormsModule, Dropdown, DropdownList, Header, + Hamburger, Label, TextArea, TextInput], + standalone: true }) class MultiStepFormStory implements OnInit, OnDestroy { public step2FormGroup: FormGroup; @@ -206,16 +211,9 @@ export default { title: "Pattern/Forms", decorators: [ moduleMetadata({ - declarations: [ MultiStepFormStory ], + declarations: [ ], imports: [ - ButtonModule, - GridModule, - UIShellModule, - ProgressIndicatorModule, - BreadcrumbModule, - ReactiveFormsModule, - InputModule, - DropdownModule + MultiStepFormStory ] }) ] diff --git a/src/patterns/loading/large-loading.stories.ts b/src/patterns/loading/large-loading.stories.ts index 9489c33f8a..e64cc9eae0 100644 --- a/src/patterns/loading/large-loading.stories.ts +++ b/src/patterns/loading/large-loading.stories.ts @@ -1,13 +1,11 @@ import { Component } from "@angular/core"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { GridModule } from "../../grid"; -import { UIShellModule } from "../../ui-shell"; -import { ProgressIndicatorModule } from "../../progress-indicator"; -import { PlaceholderModule } from "../../placeholder"; -import { InputModule } from "../../input"; -import { DropdownModule } from "../../dropdown"; -import { LoadingModule } from "../../loading"; -import { ButtonModule } from "../../button"; +import { ColumnDirective, GridDirective, GridService, RowDirective } from "../../grid"; +import { ProgressIndicator} from "../../progress-indicator"; +import { Placeholder } from "../../placeholder"; +import { Dropdown, DropdownList } from "../../dropdown"; +import { Loading } from "../../loading"; +import { Button } from "../../button"; import { FormGroup, FormControl, @@ -15,6 +13,9 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { Checkbox } from "../../checkbox"; +import { Label, TextArea, TextInput } from "../../input"; +import { Hamburger, Header } from "../../ui-shell"; @Component({ selector: "app-sample-large-loading", @@ -99,6 +100,27 @@ import { width: 50%; } ` + ], + standalone: true, + imports: [ + GridDirective, + RowDirective, + ColumnDirective, + Checkbox, + Dropdown, + DropdownList, + Placeholder, + Loading, + ProgressIndicator, + Loading, + FormsModule, + ReactiveFormsModule, + Button, + TextInput, + TextArea, + Label, + Header, + Hamburger ] }) class SampleLargeLoading { @@ -179,18 +201,9 @@ export default { title: "Pattern/Loading", decorators: [ moduleMetadata({ - declarations: [SampleLargeLoading], + declarations: [], imports: [ - DropdownModule, - GridModule, - UIShellModule, - ProgressIndicatorModule, - PlaceholderModule, - InputModule, - LoadingModule, - FormsModule, - ReactiveFormsModule, - ButtonModule + SampleLargeLoading ] }) ] diff --git a/src/patterns/loading/progressive-loading.stories.ts b/src/patterns/loading/progressive-loading.stories.ts index 09d2e5e8c1..562d0be646 100644 --- a/src/patterns/loading/progressive-loading.stories.ts +++ b/src/patterns/loading/progressive-loading.stories.ts @@ -5,15 +5,17 @@ import { } from "@angular/core"; import { moduleMetadata, Meta } from "@storybook/angular"; import { - TableModule, TableModel, TableHeaderItem, - TableItem + TableItem, + Table, + TableContainer } from "../../table"; -import { DropdownModule } from "../../dropdown"; -import { GridModule } from "../../grid"; -import { ButtonModule } from "../../button"; -import { UIShellModule } from "../../ui-shell"; +import { Dropdown, DropdownList } from "../../dropdown"; +import { ColumnDirective, GridDirective, GridService, RowDirective } from "../../grid"; +import { Button } from "../../button"; +import { Checkbox } from "../../checkbox"; +import { Hamburger, Header } from "../../ui-shell"; @Component({ selector: "app-sample-progressive-loading", @@ -91,7 +93,10 @@ import { UIShellModule } from "../../ui-shell"; margin-bottom: 40px; } ` - ] + ], + standalone: true, + imports: [GridDirective, RowDirective, ColumnDirective, Checkbox, Dropdown, DropdownList, + Table, TableContainer, Button, Header, Hamburger] }) class SampleProgressiveLoading implements OnInit, OnDestroy { model = new TableModel(); @@ -161,13 +166,8 @@ export default { title: "Pattern/Loading", decorators: [ moduleMetadata({ - declarations: [SampleProgressiveLoading], imports: [ - TableModule, - DropdownModule, - GridModule, - ButtonModule, - UIShellModule + SampleProgressiveLoading ] }) ] diff --git a/src/placeholder/placeholder.component.ts b/src/placeholder/placeholder.component.ts index 3744bbdda1..31c42b84c8 100644 --- a/src/placeholder/placeholder.component.ts +++ b/src/placeholder/placeholder.component.ts @@ -5,7 +5,7 @@ import { ViewChild, Input } from "@angular/core"; -import { PlaceholderService } from "./placeholder.service"; +import { PlaceholderService, PLACEHOLDER_SERVICE_PROVIDER } from "./placeholder.service"; /** * Using a modal, dialog (Tooltip, OverflowMenu), or any other component that draws out of the normal page flow @@ -19,7 +19,9 @@ import { PlaceholderService } from "./placeholder.service"; */ @Component({ selector: "cds-placeholder, ibm-placeholder", - template: `
` + template: `
`, + providers: [PLACEHOLDER_SERVICE_PROVIDER], + standalone: true }) export class Placeholder implements OnInit { @Input() id: any; diff --git a/src/placeholder/placeholder.module.ts b/src/placeholder/placeholder.module.ts index 157f7dadcd..ce4a1887da 100644 --- a/src/placeholder/placeholder.module.ts +++ b/src/placeholder/placeholder.module.ts @@ -1,27 +1,14 @@ // modules -import { NgModule, SkipSelf, Optional } from "@angular/core"; +import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; // imports import { Placeholder } from "./placeholder.component"; -import { PlaceholderService } from "./placeholder.service"; - -// either provides a new instance of PlaceholderService, or returns the parent -export function PLACEHOLDER_SERVICE_PROVIDER_FACTORY(parentService: PlaceholderService) { - return parentService || new PlaceholderService(); -} - -// placeholder service *must* be a singleton to ensure the placeholder viewRef is accessible globally -export const PLACEHOLDER_SERVICE_PROVIDER = { - provide: PlaceholderService, - deps: [[new Optional(), new SkipSelf(), PlaceholderService]], - useFactory: PLACEHOLDER_SERVICE_PROVIDER_FACTORY -}; +import { PLACEHOLDER_SERVICE_PROVIDER } from "./placeholder.service"; @NgModule({ - declarations: [ Placeholder ], - exports: [ Placeholder ], - providers: [ PLACEHOLDER_SERVICE_PROVIDER ], - imports: [ CommonModule ] + exports: [Placeholder], + providers: [PLACEHOLDER_SERVICE_PROVIDER], + imports: [CommonModule, Placeholder] }) export class PlaceholderModule { } diff --git a/src/placeholder/placeholder.service.ts b/src/placeholder/placeholder.service.ts index c0012bf77d..1197c77380 100644 --- a/src/placeholder/placeholder.service.ts +++ b/src/placeholder/placeholder.service.ts @@ -1,7 +1,9 @@ import { ComponentRef, ViewContainerRef, - Injector + Injector, + Optional, + SkipSelf } from "@angular/core"; import { Injectable } from "@angular/core"; @@ -88,3 +90,15 @@ export class PlaceholderService { return this.viewContainerRef.element.nativeElement.contains(element); } } + +// either provides a new instance of PlaceholderService, or returns the parent +export function PLACEHOLDER_SERVICE_PROVIDER_FACTORY(parentService: PlaceholderService) { + return parentService || new PlaceholderService(); +} + +// placeholder service *must* be a singleton to ensure the placeholder viewRef is accessible globally +export const PLACEHOLDER_SERVICE_PROVIDER = { + provide: PlaceholderService, + deps: [[new Optional(), new SkipSelf(), PlaceholderService]], + useFactory: PLACEHOLDER_SERVICE_PROVIDER_FACTORY +}; diff --git a/src/popover/popover-content.component.ts b/src/popover/popover-content.component.ts index 8e2da3ee1f..325bbd8b28 100644 --- a/src/popover/popover-content.component.ts +++ b/src/popover/popover-content.component.ts @@ -24,7 +24,8 @@ import { @if (!autoAlign) { } - ` + `, + standalone: true }) export class PopoverContent implements AfterViewInit { @HostBinding("class.cds--popover") popoverClass = true; diff --git a/src/popover/popover.component.spec.ts b/src/popover/popover.component.spec.ts index 891c2db70b..8a78d99c4f 100644 --- a/src/popover/popover.component.spec.ts +++ b/src/popover/popover.component.spec.ts @@ -21,7 +21,9 @@ import { PopoverContainer, PopoverContent } from "./"; - ` + `, + imports: [PopoverContent, PopoverContainer], + standalone: true }) class TestPopoverComponent { @Input() isOpen = false; @@ -40,7 +42,7 @@ describe("Popover", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TestPopoverComponent, PopoverContainer, PopoverContent] + imports: [TestPopoverComponent] }); fixture = TestBed.createComponent(TestPopoverComponent); component = fixture.componentInstance; diff --git a/src/popover/popover.directive.ts b/src/popover/popover.directive.ts index 76ef28e290..5a7cd24fa9 100644 --- a/src/popover/popover.directive.ts +++ b/src/popover/popover.directive.ts @@ -33,7 +33,8 @@ type oldPlacement = "top-left" | "right-top"; @Directive({ - selector: "[cdsPopover], [ibmPopover]" + selector: "[cdsPopover], [ibmPopover]", + standalone: true }) export class PopoverContainer implements AfterViewInit, OnChanges, OnDestroy { /** @@ -87,10 +88,12 @@ export class PopoverContainer implements AfterViewInit, OnChanges, OnDestroy { /** * Emits an event when the dialog is closed */ + // eslint-disable-next-line @angular-eslint/no-output-on-prefix @Output() onClose: EventEmitter = new EventEmitter(); /** * Emits an event when the dialog is opened */ + // eslint-disable-next-line @angular-eslint/no-output-on-prefix @Output() onOpen: EventEmitter = new EventEmitter(); /** * Emits an event when the state of `isOpen` changes. Allows `isOpen` to be double bound diff --git a/src/popover/popover.module.ts b/src/popover/popover.module.ts index 2d4b0e715d..dd7360e313 100644 --- a/src/popover/popover.module.ts +++ b/src/popover/popover.module.ts @@ -5,14 +5,14 @@ import { PopoverContainer } from "./popover.directive"; import { PopoverContent } from "./popover-content.component"; @NgModule({ - declarations: [ + exports: [ PopoverContainer, PopoverContent ], - exports: [ + imports: [ + CommonModule, PopoverContainer, PopoverContent - ], - imports: [CommonModule] + ] }) export class PopoverModule {} diff --git a/src/popover/popover.stories.ts b/src/popover/popover.stories.ts index 838c09ac59..a218e7a299 100644 --- a/src/popover/popover.stories.ts +++ b/src/popover/popover.stories.ts @@ -1,6 +1,5 @@ import { moduleMetadata, Meta } from "@storybook/angular"; import { - PopoverModule, PopoverContainer, PopoverContent } from "./"; @@ -9,7 +8,10 @@ export default { title: "Components/Popover", decorators: [ moduleMetadata({ - imports: [PopoverModule] + imports: [ + PopoverContainer, + PopoverContent + ] }) ], args: { diff --git a/src/progress-bar/progress-bar.component.spec.ts b/src/progress-bar/progress-bar.component.spec.ts index 5e665514ef..0e22f82fc7 100644 --- a/src/progress-bar/progress-bar.component.spec.ts +++ b/src/progress-bar/progress-bar.component.spec.ts @@ -15,7 +15,9 @@ import { ProgressBar } from "./"; [type]="type" [value]="value"> - ` + `, + imports: [ProgressBar], + standalone: true }) class TestProgessBarComponent { @Input() label = "Label"; @@ -34,7 +36,7 @@ describe("Progress bar", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TestProgessBarComponent, ProgressBar] + imports: [TestProgessBarComponent] }); fixture = TestBed.createComponent(TestProgessBarComponent); component = fixture.componentInstance; diff --git a/src/progress-bar/progress-bar.component.ts b/src/progress-bar/progress-bar.component.ts index e9bc5835f1..0620c9f32b 100644 --- a/src/progress-bar/progress-bar.component.ts +++ b/src/progress-bar/progress-bar.component.ts @@ -4,6 +4,8 @@ import { Input, TemplateRef } from "@angular/core"; +import { NgTemplateOutlet, NgStyle } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; /** * Get started with importing the module: @@ -70,7 +72,9 @@ import { } } - ` + `, + standalone: true, + imports: [NgTemplateOutlet, IconDirective, NgStyle] }) export class ProgressBar { /** diff --git a/src/progress-bar/progress-bar.module.ts b/src/progress-bar/progress-bar.module.ts index 67591dbb2b..b448a50d37 100644 --- a/src/progress-bar/progress-bar.module.ts +++ b/src/progress-bar/progress-bar.module.ts @@ -2,18 +2,16 @@ import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { ProgressBar } from "./progress-bar.component"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ - ProgressBar - ], exports: [ ProgressBar ], imports: [ CommonModule, - IconModule + IconDirective, + ProgressBar ] }) export class ProgressBarModule { } diff --git a/src/progress-bar/progress-bar.stories.ts b/src/progress-bar/progress-bar.stories.ts index e8ba26db44..672d6edbbb 100644 --- a/src/progress-bar/progress-bar.stories.ts +++ b/src/progress-bar/progress-bar.stories.ts @@ -1,13 +1,8 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { ProgressBarModule, ProgressBar } from "./"; +import { ProgressBar } from "./"; export default { title: "Components/Progress Bar", - decorators: [ - moduleMetadata({ - imports: [ProgressBarModule] - }) - ], component: ProgressBar } as Meta; diff --git a/src/progress-indicator/progress-indicator.component.spec.ts b/src/progress-indicator/progress-indicator.component.spec.ts index 4c4a414c3f..a5616df0ee 100644 --- a/src/progress-indicator/progress-indicator.component.spec.ts +++ b/src/progress-indicator/progress-indicator.component.spec.ts @@ -4,9 +4,8 @@ import { By } from "@angular/platform-browser"; import { ProgressIndicator } from "./progress-indicator.component"; import { CommonModule } from "@angular/common"; -import { ExperimentalModule } from "../experimental"; -import { IconModule } from "../icon"; -import { I18nModule } from "../i18n"; +import { ExperimentalService } from "../experimental"; +import { IconDirective } from "../icon"; import { Step } from "./progress-indicator-step.interface"; @Component({ @@ -16,7 +15,12 @@ import { Step } from "./progress-indicator-step.interface"; [current]="current" (stepSelected)="stepSelected.emit($event)"> - ` + `, + standalone: true, + providers: [ExperimentalService], + imports: [ + ProgressIndicator + ] }) class ProgressIndicatorTest { steps = [ @@ -55,15 +59,8 @@ describe("Progress Indicator", () => { beforeEach(() => { TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [ - ProgressIndicator, - ProgressIndicatorTest - ], imports: [ - CommonModule, - ExperimentalModule, - IconModule, - I18nModule + ProgressIndicatorTest ] }); }); diff --git a/src/progress-indicator/progress-indicator.component.ts b/src/progress-indicator/progress-indicator.component.ts index af5d63011a..ea2b69ed82 100644 --- a/src/progress-indicator/progress-indicator.component.ts +++ b/src/progress-indicator/progress-indicator.component.ts @@ -7,6 +7,8 @@ import { } from "@angular/core"; import { I18n } from "carbon-components-angular/i18n"; import { Step } from "./progress-indicator-step.interface"; +import { NgClass } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; /** * Get started with importing the module: @@ -74,7 +76,9 @@ import { Step } from "./progress-indicator-step.interface"; } `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass, IconDirective] }) export class ProgressIndicator { @Input() get current() { diff --git a/src/progress-indicator/progress-indicator.module.ts b/src/progress-indicator/progress-indicator.module.ts index c543a1e534..ab5204cfc3 100644 --- a/src/progress-indicator/progress-indicator.module.ts +++ b/src/progress-indicator/progress-indicator.module.ts @@ -2,20 +2,18 @@ import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { ProgressIndicator } from "./progress-indicator.component"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; import { I18nModule } from "carbon-components-angular/i18n"; @NgModule({ - declarations: [ - ProgressIndicator - ], exports: [ ProgressIndicator ], imports: [ CommonModule, - IconModule, - I18nModule + IconDirective, + I18nModule, + ProgressIndicator ] }) export class ProgressIndicatorModule {} diff --git a/src/progress-indicator/progress-indicator.stories.ts b/src/progress-indicator/progress-indicator.stories.ts index 08bdcdad00..df31739adc 100644 --- a/src/progress-indicator/progress-indicator.stories.ts +++ b/src/progress-indicator/progress-indicator.stories.ts @@ -1,11 +1,11 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { ProgressIndicatorModule, ProgressIndicator } from "./"; +import { ProgressIndicator } from "./"; export default { title: "Components/Progress Indicator", decorators: [ moduleMetadata({ - imports: [ProgressIndicatorModule] + imports: [ProgressIndicator] }) ], component: ProgressIndicator diff --git a/src/radio/radio-group.component.ts b/src/radio/radio-group.component.ts index a1a943d466..0dc7f38a60 100644 --- a/src/radio/radio-group.component.ts +++ b/src/radio/radio-group.component.ts @@ -15,6 +15,8 @@ import { import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms"; import { Radio } from "./radio.component"; import { RadioChange } from "./radio-change.class"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; /** * Get started with importing the module: @@ -113,7 +115,9 @@ import { RadioChange } from "./radio-change.class"; useExisting: RadioGroup, multi: true } - ] + ], + standalone: true, + imports: [NgClass, NgTemplateOutlet, IconDirective] }) export class RadioGroup implements AfterContentInit, AfterViewInit, ControlValueAccessor { @@ -257,6 +261,7 @@ export class RadioGroup implements AfterContentInit, AfterViewInit, ControlValue /** * Emits event notifying other classes of a change using a `RadioChange` class. */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() change: EventEmitter = new EventEmitter(); /** diff --git a/src/radio/radio.component.spec.ts b/src/radio/radio.component.spec.ts index 9dc0a59b7a..aac092e12e 100644 --- a/src/radio/radio.component.spec.ts +++ b/src/radio/radio.component.spec.ts @@ -16,7 +16,9 @@ import { RadioGroup } from "./radio-group.component"; } - ` + `, + standalone: true, + imports: [Radio, RadioGroup, FormsModule] }) class RadioTest { manyRadios = ["one", "two", "three", "four", "five", "six"]; @@ -26,8 +28,7 @@ class RadioTest { describe("RadioGroup", () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [Radio, RadioGroup, RadioTest], - imports: [FormsModule] + imports: [RadioTest] }).compileComponents(); })); @@ -60,7 +61,7 @@ describe("RadioComponent", () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [Radio] + imports: [Radio] }).compileComponents(); })); diff --git a/src/radio/radio.component.ts b/src/radio/radio.component.ts index f33ffe199f..0cceb32232 100644 --- a/src/radio/radio.component.ts +++ b/src/radio/radio.component.ts @@ -7,6 +7,7 @@ import { } from "@angular/core"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { RadioChange } from "./radio-change.class"; +import { NgClass } from "@angular/common"; /** * class: Radio (extends Checkbox) @@ -58,7 +59,9 @@ import { RadioChange } from "./radio-change.class"; useExisting: Radio, multi: true } - ] + ], + standalone: true, + imports: [NgClass] }) export class Radio { /** @@ -109,6 +112,7 @@ export class Radio { /** * emits when the state of the radio changes */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() change = new EventEmitter(); @HostBinding("class.cds--radio-button-wrapper") hostClass = true; diff --git a/src/radio/radio.module.ts b/src/radio/radio.module.ts index 15070bfa4d..718cd7516a 100644 --- a/src/radio/radio.module.ts +++ b/src/radio/radio.module.ts @@ -6,13 +6,9 @@ import { CommonModule } from "@angular/common"; // imports import { Radio } from "./radio.component"; import { RadioGroup } from "./radio-group.component"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ - Radio, - RadioGroup - ], exports: [ Radio, RadioGroup @@ -20,7 +16,9 @@ import { IconModule } from "carbon-components-angular/icon"; imports: [ CommonModule, FormsModule, - IconModule + IconDirective, + Radio, + RadioGroup ] }) export class RadioModule { } diff --git a/src/radio/radio.stories.ts b/src/radio/radio.stories.ts index e91e0e14c3..d56315a1f5 100644 --- a/src/radio/radio.stories.ts +++ b/src/radio/radio.stories.ts @@ -1,6 +1,6 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { RadioModule, RadioGroup, Radio } from "./"; +import { RadioGroup, Radio } from "./"; import { ReactiveFormsStory } from "./stories"; @@ -12,7 +12,8 @@ export default { imports: [ FormsModule, ReactiveFormsModule, - RadioModule + Radio, + RadioGroup ] }) ], diff --git a/src/search/search.component.spec.ts b/src/search/search.component.spec.ts index f3c31a89b7..45b6e8635f 100644 --- a/src/search/search.component.spec.ts +++ b/src/search/search.component.spec.ts @@ -2,8 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { FormsModule } from "@angular/forms"; -import { I18nModule } from "../i18n/index"; -import { IconModule } from "../icon/index"; +import { IconDirective } from "../icon/index"; import { Search } from "./search.component"; describe("Search", () => { @@ -15,11 +14,10 @@ describe("Search", () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [Search], imports: [ FormsModule, - I18nModule, - IconModule + IconDirective, + Search ], providers: [] }).compileComponents(); diff --git a/src/search/search.component.ts b/src/search/search.component.ts index c7cad6f723..e00e41761b 100644 --- a/src/search/search.component.ts +++ b/src/search/search.component.ts @@ -11,13 +11,15 @@ import { ViewChild } from "@angular/core"; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; -import { I18n } from "carbon-components-angular/i18n"; +import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n"; +import { NgClass } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; /** * Get started with importing the module: * * ```typescript - * import { SearchModule } from 'carbon-components-angular'; + * import { Search } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-search--basic) @@ -30,9 +32,12 @@ import { I18n } from "carbon-components-angular/i18n"; provide: NG_VALUE_ACCESSOR, useExisting: Search, multi: true - } + }, + I18N_SERVICE_PROVIDER ], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass, IconDirective] }) export class Search implements ControlValueAccessor { /** diff --git a/src/search/search.module.ts b/src/search/search.module.ts index 663aa0b5c4..1167f967d9 100644 --- a/src/search/search.module.ts +++ b/src/search/search.module.ts @@ -6,12 +6,9 @@ import { CommonModule } from "@angular/common"; // imports import { I18nModule } from "carbon-components-angular/i18n"; import { Search } from "./search.component"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ - Search - ], exports: [ Search ], @@ -19,7 +16,8 @@ import { IconModule } from "carbon-components-angular/icon"; FormsModule, CommonModule, I18nModule, - IconModule + IconDirective, + Search ] }) export class SearchModule { } diff --git a/src/search/search.stories.ts b/src/search/search.stories.ts index 095a2366d7..a99d95be9d 100644 --- a/src/search/search.stories.ts +++ b/src/search/search.stories.ts @@ -1,11 +1,11 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { SearchModule, Search } from "./"; +import { Search } from "./"; export default { title: "Components/Search", decorators: [ moduleMetadata({ - imports: [SearchModule] + imports: [Search] }) ], args: { diff --git a/src/select/optgroup.directive.ts b/src/select/optgroup.directive.ts index 1a293b7607..3d9999c04e 100644 --- a/src/select/optgroup.directive.ts +++ b/src/select/optgroup.directive.ts @@ -2,7 +2,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector - selector: "optgroup" + selector: "optgroup", + standalone: true }) export class OptGroup { @HostBinding("class") inputClass = "cds--select-optgroup"; diff --git a/src/select/option.directive.ts b/src/select/option.directive.ts index c65dacf81f..57a6480a4f 100644 --- a/src/select/option.directive.ts +++ b/src/select/option.directive.ts @@ -2,7 +2,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector - selector: "option" + selector: "option", + standalone: true }) export class Option { @HostBinding("class") inputClass = "cds--select-option"; diff --git a/src/select/select.component.spec.ts b/src/select/select.component.spec.ts index fb23c6cec6..e3fcbd28a0 100644 --- a/src/select/select.component.spec.ts +++ b/src/select/select.component.spec.ts @@ -2,7 +2,6 @@ import { TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { FormsModule } from "@angular/forms"; import { Component } from "@angular/core"; -import { IconModule } from "../icon/index"; import { Select } from "./select.component"; @Component({ @@ -10,7 +9,12 @@ import { Select } from "./select.component"; - ` + `, + standalone: true, + imports: [ + FormsModule, + Select + ] }) class SelectTest { model = null; @@ -24,13 +28,8 @@ describe("Select", () => { let fixture, wrapper, element; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - Select, - SelectTest - ], imports: [ - FormsModule, - IconModule + SelectTest ] }); }); diff --git a/src/select/select.component.ts b/src/select/select.component.ts index d556791576..b643523ae2 100644 --- a/src/select/select.component.ts +++ b/src/select/select.component.ts @@ -10,6 +10,8 @@ import { ViewChild } from "@angular/core"; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; /** * `cds-select` provides a styled `select` component. Get started with importing the module: @@ -202,7 +204,9 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; useExisting: Select, multi: true } - ] + ], + standalone: true, + imports: [NgClass, NgTemplateOutlet, IconDirective] }) export class Select implements ControlValueAccessor, AfterViewInit { @Input() set value(v) { diff --git a/src/select/select.module.ts b/src/select/select.module.ts index ee4a3dfdb5..e0816962ef 100644 --- a/src/select/select.module.ts +++ b/src/select/select.module.ts @@ -7,14 +7,9 @@ import { CommonModule } from "@angular/common"; import { Select } from "./select.component"; import { Option } from "./option.directive"; import { OptGroup } from "./optgroup.directive"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ - Select, - Option, - OptGroup - ], exports: [ Select, Option, @@ -23,7 +18,10 @@ import { IconModule } from "carbon-components-angular/icon"; imports: [ CommonModule, FormsModule, - IconModule + IconDirective, + Select, + Option, + OptGroup ] }) export class SelectModule { } diff --git a/src/select/select.stories.ts b/src/select/select.stories.ts index 5b43979be2..ac5dbbb00e 100644 --- a/src/select/select.stories.ts +++ b/src/select/select.stories.ts @@ -1,7 +1,6 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { moduleMetadata, Meta } from "@storybook/angular"; import { - SelectModule, Select, Option, OptGroup @@ -14,7 +13,6 @@ export default { decorators: [ moduleMetadata({ imports: [ - SelectModule, FormsModule, ReactiveFormsModule ], diff --git a/src/skeleton/skeleton-placeholder.component.ts b/src/skeleton/skeleton-placeholder.component.ts index 126c0d2b77..bdbcf19b46 100644 --- a/src/skeleton/skeleton-placeholder.component.ts +++ b/src/skeleton/skeleton-placeholder.component.ts @@ -4,7 +4,7 @@ import { Component } from "@angular/core"; * Get started with importing the module: * * ```typescript - * import { SkeletonModule } from 'carbon-components-angular'; + * import { Skeleton } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-skeleton--basic) @@ -12,6 +12,7 @@ import { Component } from "@angular/core"; @Component({ selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder", template: ` -
` +
`, + standalone: true }) export class SkeletonPlaceholder { } diff --git a/src/skeleton/skeleton-text.component.ts b/src/skeleton/skeleton-text.component.ts index d5430ea719..9827128025 100644 --- a/src/skeleton/skeleton-text.component.ts +++ b/src/skeleton/skeleton-text.component.ts @@ -6,7 +6,8 @@ import { Component, Input, OnChanges } from "@angular/core"; @for (width of lineWidths; track width) {

} - ` + `, + standalone: true }) export class SkeletonText implements OnChanges { @Input() lines = 5; diff --git a/src/skeleton/skeleton.module.ts b/src/skeleton/skeleton.module.ts index acd778cb05..4c01122fb4 100644 --- a/src/skeleton/skeleton.module.ts +++ b/src/skeleton/skeleton.module.ts @@ -4,16 +4,14 @@ import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; @NgModule({ - declarations: [ - SkeletonPlaceholder, - SkeletonText - ], exports: [ SkeletonPlaceholder, SkeletonText ], imports: [ - CommonModule + CommonModule, + SkeletonPlaceholder, + SkeletonText ] }) export class SkeletonModule { } diff --git a/src/skeleton/skeleton.stories.ts b/src/skeleton/skeleton.stories.ts index 478cc323e1..d852d4960f 100644 --- a/src/skeleton/skeleton.stories.ts +++ b/src/skeleton/skeleton.stories.ts @@ -1,11 +1,11 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { SkeletonModule, SkeletonPlaceholder } from "./"; +import { SkeletonText, SkeletonPlaceholder } from "./"; export default { title: "Components/Skeleton", decorators: [ moduleMetadata({ - imports: [SkeletonModule] + imports: [SkeletonText, SkeletonPlaceholder] }) ], args: { diff --git a/src/slider/slider.component.spec.ts b/src/slider/slider.component.spec.ts index 1e2ffdccb1..33ac0c005e 100644 --- a/src/slider/slider.component.spec.ts +++ b/src/slider/slider.component.spec.ts @@ -14,7 +14,11 @@ import { UtilsModule } from "../utils/utils.module"; [disabled]="disabled" [max]="max" [min]="min"> - ` + `, + standalone: true, + imports: [ + Slider + ] }) class SliderTest { disabled = false; @@ -28,13 +32,8 @@ describe("Slider", () => { let fixture, element, wrapper; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - Slider, - SliderTest - ], imports: [ - CommonModule, - UtilsModule + SliderTest ] }); }); diff --git a/src/slider/slider.component.ts b/src/slider/slider.component.ts index ba186bb3ea..37c1494efe 100644 --- a/src/slider/slider.component.ts +++ b/src/slider/slider.component.ts @@ -13,7 +13,8 @@ import { ChangeDetectorRef } from "@angular/core"; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; -import { EventService } from "carbon-components-angular/utils"; +import { DOCUMENT_SERVICE_PROVIDER, EventService } from "carbon-components-angular/utils"; +import { NgClass, NgTemplateOutlet, NgStyle } from "@angular/common"; /** * Used to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information. @@ -156,8 +157,12 @@ import { EventService } from "carbon-components-angular/utils"; provide: NG_VALUE_ACCESSOR, useExisting: Slider, multi: true - } - ] + }, + DOCUMENT_SERVICE_PROVIDER, + EventService + ], + standalone: true, + imports: [NgClass, NgTemplateOutlet, NgStyle] }) export class Slider implements AfterViewInit, ControlValueAccessor { /** Used to generate unique IDs */ diff --git a/src/slider/slider.module.ts b/src/slider/slider.module.ts index 1e217d3f70..95ce7f98aa 100644 --- a/src/slider/slider.module.ts +++ b/src/slider/slider.module.ts @@ -5,11 +5,11 @@ import { Slider } from "./slider.component"; import { UtilsModule } from "carbon-components-angular/utils"; @NgModule({ - declarations: [Slider], exports: [Slider], imports: [ CommonModule, - UtilsModule + UtilsModule, + Slider ] }) export class SliderModule {} diff --git a/src/slider/slider.stories.ts b/src/slider/slider.stories.ts index 0110527477..a9115defd9 100644 --- a/src/slider/slider.stories.ts +++ b/src/slider/slider.stories.ts @@ -1,15 +1,8 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { SliderModule, Slider } from "./"; +import { Slider } from "./"; export default { title: "Components/Slider", - decorators: [ - moduleMetadata({ - imports: [ - SliderModule - ] - }) - ], component: Slider } as Meta; diff --git a/src/structured-list/list-column.component.ts b/src/structured-list/list-column.component.ts index affbd658bd..c17fc36a83 100644 --- a/src/structured-list/list-column.component.ts +++ b/src/structured-list/list-column.component.ts @@ -17,7 +17,8 @@ import { Component, HostBinding, Input } from "@angular/core"; } - ` + `, + standalone: true }) export class ListColumn { @Input() skeleton = false; diff --git a/src/structured-list/list-header.component.ts b/src/structured-list/list-header.component.ts index e80d33bfd3..9b58d578e6 100644 --- a/src/structured-list/list-header.component.ts +++ b/src/structured-list/list-header.component.ts @@ -29,7 +29,8 @@ import { ListColumn } from "./list-column.component";
} - ` + `, + standalone: true }) export class ListHeader implements AfterContentInit { @HostBinding("class.cds--structured-list-thead") wrapper = true; diff --git a/src/structured-list/list-row.component.ts b/src/structured-list/list-row.component.ts index 90626fa220..2a67b84890 100644 --- a/src/structured-list/list-row.component.ts +++ b/src/structured-list/list-row.component.ts @@ -12,6 +12,7 @@ import { Output } from "@angular/core"; import { ListColumn } from "./list-column.component"; +import { IconDirective } from "carbon-components-angular/icon"; /** * `ListRow` provides a container for the `ListColumn`s that make up the body of a structured list. @@ -51,7 +52,9 @@ import { ListColumn } from "./list-column.component"; } - ` + `, + standalone: true, + imports: [IconDirective] }) export class ListRow implements AfterContentInit { @HostBinding("class.cds--structured-list-row--focused-within") get focusClass() { @@ -69,6 +72,7 @@ export class ListRow implements AfterContentInit { /** * Internal event used to notify the containing `StructuredList` of changes. */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() change: EventEmitter = new EventEmitter(); /** diff --git a/src/structured-list/structured-list.component.spec.ts b/src/structured-list/structured-list.component.spec.ts index 0ac02af01c..223fed0b41 100644 --- a/src/structured-list/structured-list.component.spec.ts +++ b/src/structured-list/structured-list.component.spec.ts @@ -6,7 +6,6 @@ import { StructuredList } from "./structured-list.component"; import { ListRow } from "./list-row.component"; import { ListHeader } from "./list-header.component"; import { ListColumn } from "./list-column.component"; -import { IconModule } from "../icon/index"; @Component({ template: ` @@ -32,7 +31,15 @@ import { IconModule } from "../icon/index"; Test - ` + `, + standalone: true, + imports: [ + ListRow, + ListHeader, + ListColumn, + StructuredList, + FormsModule + ] }) class StructuredListTest { valueSelected = null; @@ -44,16 +51,8 @@ describe("StructuredList", () => { let fixture, wrapper, element; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - StructuredList, - StructuredListTest, - ListRow, - ListHeader, - ListColumn - ], imports: [ - FormsModule, - IconModule + StructuredListTest ] }); }); diff --git a/src/structured-list/structured-list.component.ts b/src/structured-list/structured-list.component.ts index 24150a2fa7..2c424f95cd 100644 --- a/src/structured-list/structured-list.component.ts +++ b/src/structured-list/structured-list.component.ts @@ -10,6 +10,7 @@ import { import { ListRow } from "./list-row.component"; import { ListHeader } from "./list-header.component"; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms"; +import { NgClass } from "@angular/common"; /** * Structured Lists represent related tabular data. For larger datasets consider a full `Table`. @@ -80,7 +81,9 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms"; useExisting: StructuredList, multi: true } - ] + ], + standalone: true, + imports: [NgClass] }) export class StructuredList implements AfterContentInit, ControlValueAccessor { /** diff --git a/src/structured-list/structured-list.module.ts b/src/structured-list/structured-list.module.ts index 699dccfcf4..a0269b500d 100644 --- a/src/structured-list/structured-list.module.ts +++ b/src/structured-list/structured-list.module.ts @@ -5,24 +5,22 @@ import { StructuredList } from "./structured-list.component"; import { ListRow } from "./list-row.component"; import { ListHeader } from "./list-header.component"; import { ListColumn } from "./list-column.component"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ + exports: [ StructuredList, ListRow, ListHeader, ListColumn ], - exports: [ + imports: [ + CommonModule, + IconDirective, StructuredList, ListRow, ListHeader, ListColumn - ], - imports: [ - CommonModule, - IconModule ] }) export class StructuredListModule { } diff --git a/src/structured-list/structured-list.stories.ts b/src/structured-list/structured-list.stories.ts index 771a802f84..e9de5c81ff 100644 --- a/src/structured-list/structured-list.stories.ts +++ b/src/structured-list/structured-list.stories.ts @@ -1,7 +1,6 @@ import { FormsModule } from "@angular/forms"; import { moduleMetadata, Meta } from "@storybook/angular"; import { - StructuredListModule, StructuredList, ListColumn, ListHeader, @@ -13,17 +12,15 @@ export default { decorators: [ moduleMetadata({ imports: [ - StructuredListModule, - FormsModule + FormsModule, + ListHeader, + ListRow, + ListColumn, + StructuredList ] }) ], - component: StructuredList, - subcomponents: { - ListHeader, - ListRow, - ListColumn - } + component: StructuredList } as Meta; const Template = (args) => ({ @@ -135,9 +132,7 @@ const SkeletonTemplate = (args) => ({ template: ` + [condensed]="condensed"> diff --git a/src/table/body/table-body.component.ts b/src/table/body/table-body.component.ts index 59b948e585..be06dde570 100644 --- a/src/table/body/table-body.component.ts +++ b/src/table/body/table-body.component.ts @@ -5,9 +5,13 @@ import { Output } from "@angular/core"; import { TableModel } from "../table-model.class"; -import { I18n, Overridable } from "carbon-components-angular/i18n"; +import { I18n } from "carbon-components-angular/i18n"; import { Observable } from "rxjs"; import { TableRowSize } from "../table.types"; +import { TableRowComponent } from "./table-row.component"; +import { NgClass } from "@angular/common"; +import { TableExpandedRow } from "./table-expanded-row.component"; +import { ExpandedRowHover } from "../expanded-row-hover.directive"; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -67,7 +71,9 @@ import { TableRowSize } from "../table.types"; } } - ` + `, + standalone: true, + imports: [TableRowComponent, NgClass, TableExpandedRow, ExpandedRowHover] }) export class TableBody { @Input() model: TableModel; diff --git a/src/table/body/table-expanded-row.component.ts b/src/table/body/table-expanded-row.component.ts index 3319a655a7..ab989d80b5 100644 --- a/src/table/body/table-expanded-row.component.ts +++ b/src/table/body/table-expanded-row.component.ts @@ -3,6 +3,7 @@ import { HostBinding, Input } from "@angular/core"; +import { NgTemplateOutlet } from "@angular/common"; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -14,7 +15,9 @@ import { } - ` + `, + standalone: true, + imports: [NgTemplateOutlet] }) export class TableExpandedRow { @Input() row: any[]; diff --git a/src/table/body/table-row.component.ts b/src/table/body/table-row.component.ts index f3d267111a..875b89e4ca 100644 --- a/src/table/body/table-row.component.ts +++ b/src/table/body/table-row.component.ts @@ -11,6 +11,11 @@ import { I18n, Overridable } from "carbon-components-angular/i18n"; import { TableItem } from "../table-item.class"; import { Observable } from "rxjs"; import { TableRowSize } from "../table.types"; +import { TableExpandButton } from "../cell/table-expand-button.component"; +import { TableCheckbox } from "../cell/table-checkbox.component"; +import { TableRadio } from "../cell/table-radio.component"; +import { TableData } from "../cell/table-data.component"; +import { NgStyle } from "@angular/common"; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -89,7 +94,9 @@ import { TableRowSize } from "../table.types"; } } - ` + `, + standalone: true, + imports: [TableExpandButton, TableCheckbox, TableRadio, TableData, NgStyle] }) export class TableRowComponent { /** diff --git a/src/table/cell/table-checkbox.component.ts b/src/table/cell/table-checkbox.component.ts index 8932295739..7e34ca6e71 100644 --- a/src/table/cell/table-checkbox.component.ts +++ b/src/table/cell/table-checkbox.component.ts @@ -4,11 +4,14 @@ import { Output, EventEmitter } from "@angular/core"; -import { I18n, Overridable } from "carbon-components-angular/i18n"; +import { I18n } from "carbon-components-angular/i18n"; import { TableItem } from "../table-item.class"; import { TableRow } from "../table-row.class"; import { Observable } from "rxjs"; import { TableRowSize } from "../table.types"; +import { Checkbox } from "carbon-components-angular/checkbox"; +import { AsyncPipe } from "@angular/common"; +import { ReplacePipe } from "carbon-components-angular/i18n"; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -25,7 +28,9 @@ import { TableRowSize } from "../table.types"; {{getLabel() | i18nReplace:getSelectionLabelValue(row) | async}} } - ` + `, + standalone: true, + imports: [Checkbox, AsyncPipe, ReplacePipe] }) export class TableCheckbox { @Input() row: TableItem[]; diff --git a/src/table/cell/table-data.component.ts b/src/table/cell/table-data.component.ts index 057c18d8e0..030c977230 100644 --- a/src/table/cell/table-data.component.ts +++ b/src/table/cell/table-data.component.ts @@ -3,6 +3,7 @@ import { Input } from "@angular/core"; import { TableItem } from "../table-item.class"; +import { NgTemplateOutlet } from "@angular/common"; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -14,7 +15,9 @@ import { TableItem } from "../table-item.class"; @if (!skeleton) { } - ` + `, + standalone: true, + imports: [NgTemplateOutlet] }) export class TableData { @Input() item: TableItem; diff --git a/src/table/cell/table-expand-button.component.ts b/src/table/cell/table-expand-button.component.ts index 04374c0030..2d99620002 100644 --- a/src/table/cell/table-expand-button.component.ts +++ b/src/table/cell/table-expand-button.component.ts @@ -5,8 +5,10 @@ import { EventEmitter, HostBinding } from "@angular/core"; -import { I18n, Overridable } from "carbon-components-angular/i18n"; +import { I18n } from "carbon-components-angular/i18n"; import { Observable } from "rxjs"; +import { IconDirective } from "carbon-components-angular/icon"; +import { AsyncPipe } from "@angular/common"; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -20,7 +22,9 @@ import { Observable } from "rxjs"; } - ` + `, + standalone: true, + imports: [IconDirective, AsyncPipe] }) export class TableExpandButton { /** diff --git a/src/table/cell/table-radio.component.ts b/src/table/cell/table-radio.component.ts index 0518d83b57..4b777c39cf 100644 --- a/src/table/cell/table-radio.component.ts +++ b/src/table/cell/table-radio.component.ts @@ -9,6 +9,9 @@ import { I18n } from "carbon-components-angular/i18n"; import { TableItem } from "../table-item.class"; import { TableRow } from "../table-row.class"; import { Observable } from "rxjs"; +import { Radio } from "carbon-components-angular/radio"; +import { AsyncPipe } from "@angular/common"; +import { ReplacePipe } from "carbon-components-angular/i18n"; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -23,7 +26,9 @@ import { Observable } from "rxjs"; (change)="change.emit()"> } - ` + `, + standalone: true, + imports: [Radio, AsyncPipe, ReplacePipe] }) export class TableRadio { @Input() row: any[]; @@ -63,6 +68,7 @@ export class TableRadio { /** * Emits if a single row is selected. */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() change = new EventEmitter(); protected _label = this.i18n.getOverridable("TABLE.CHECKBOX_ROW"); diff --git a/src/table/expanded-row-hover.directive.ts b/src/table/expanded-row-hover.directive.ts index eefce40fa7..2fd7e202a5 100644 --- a/src/table/expanded-row-hover.directive.ts +++ b/src/table/expanded-row-hover.directive.ts @@ -4,7 +4,8 @@ import { } from "@angular/core"; @Directive({ - selector: "[cdsExpandedRowHover], [ibmExpandedRowHover]" + selector: "[cdsExpandedRowHover], [ibmExpandedRowHover]", + standalone: true }) export class ExpandedRowHover { @HostListener("mouseenter", ["$event"]) diff --git a/src/table/head/table-head-cell-label.directive.ts b/src/table/head/table-head-cell-label.directive.ts index 7f4a2aa1f4..251c5dc0ad 100644 --- a/src/table/head/table-head-cell-label.directive.ts +++ b/src/table/head/table-head-cell-label.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]" + selector: "[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]", + standalone: true }) export class TableHeadCellLabel { @HostBinding("class.cds--table-header-label") baseClass = true; diff --git a/src/table/head/table-head-cell.component.ts b/src/table/head/table-head-cell.component.ts index 3ab0207d2c..4fe002e41f 100644 --- a/src/table/head/table-head-cell.component.ts +++ b/src/table/head/table-head-cell.component.ts @@ -7,9 +7,11 @@ import { OnChanges } from "@angular/core"; import { Observable, OperatorFunction } from "rxjs"; -import { I18n, Overridable } from "carbon-components-angular/i18n"; +import { I18n } from "carbon-components-angular/i18n"; import { map } from "rxjs/operators"; import { TableHeaderItem } from "../table-header-item.class"; +import { NgClass, NgTemplateOutlet, AsyncPipe } from "@angular/common"; +import { TableHeadCellLabel } from "./table-head-cell-label.directive"; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -79,7 +81,9 @@ import { TableHeaderItem } from "../table-header-item.class"; } - ` + `, + standalone: true, + imports: [NgClass, NgTemplateOutlet, TableHeadCellLabel, AsyncPipe] }) export class TableHeadCell implements OnChanges { @Input() column: TableHeaderItem; diff --git a/src/table/head/table-head-checkbox.component.ts b/src/table/head/table-head-checkbox.component.ts index eac7458395..99517e390c 100644 --- a/src/table/head/table-head-checkbox.component.ts +++ b/src/table/head/table-head-checkbox.component.ts @@ -7,6 +7,8 @@ import { } from "@angular/core"; import { I18n } from "carbon-components-angular/i18n"; import { Observable } from "rxjs"; +import { Checkbox } from "carbon-components-angular/checkbox"; +import { AsyncPipe } from "@angular/common"; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -25,7 +27,9 @@ import { Observable } from "rxjs"; `, styles: [` :host { width: 10px; } - `] + `], + standalone: true, + imports: [Checkbox, AsyncPipe] }) export class TableHeadCheckbox { private static tableSelectAllCount = 0; @@ -47,6 +51,7 @@ export class TableHeadCheckbox { return this._ariaLabel.value; } + // eslint-disable-next-line @angular-eslint/no-output-native @Output() change = new EventEmitter(); @HostBinding("class.cds--table-column-checkbox") hostClass = true; diff --git a/src/table/head/table-head-expand.component.ts b/src/table/head/table-head-expand.component.ts index 1f4216be89..7cbbc6e196 100644 --- a/src/table/head/table-head-expand.component.ts +++ b/src/table/head/table-head-expand.component.ts @@ -7,6 +7,8 @@ import { } from "@angular/core"; import { I18n } from "carbon-components-angular/i18n"; import { Observable } from "rxjs"; +import { IconDirective } from "carbon-components-angular/icon"; +import { AsyncPipe } from "@angular/common"; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -22,7 +24,9 @@ import { Observable } from "rxjs"; } @else { } - ` + `, + standalone: true, + imports: [IconDirective, AsyncPipe] }) export class TableHeadExpand { @HostBinding("class.cds--table-expand") hostClass = true; diff --git a/src/table/head/table-head.component.ts b/src/table/head/table-head.component.ts index db048bc411..c3e9679bb7 100644 --- a/src/table/head/table-head.component.ts +++ b/src/table/head/table-head.component.ts @@ -8,9 +8,12 @@ import { import { TableModel } from "../table-model.class"; import { getScrollbarWidth } from "carbon-components-angular/utils"; -import { I18n, Overridable } from "carbon-components-angular/i18n"; +import { I18n } from "carbon-components-angular/i18n"; import { Observable } from "rxjs"; -import { TableRowSize } from "../table.types"; +import { TableHeadExpand } from "./table-head-expand.component"; +import { NgClass, NgStyle } from "@angular/common"; +import { TableHeadCheckbox } from "./table-head-checkbox.component"; +import { TableHeadCell } from "./table-head-cell.component"; /** * A subcomponent that creates the thead of the table @@ -94,7 +97,9 @@ import { TableRowSize } from "../table.types"; .cds--table-expand-v2 { padding-left: 2.5rem; } - `] + `], + standalone: true, + imports: [TableHeadExpand, NgClass, TableHeadCheckbox, TableHeadCell, NgStyle] }) export class TableHead implements AfterViewInit { @Input() model: TableModel; diff --git a/src/table/header/table-header-description.directive.ts b/src/table/header/table-header-description.directive.ts index 0042460456..2218b389a8 100644 --- a/src/table/header/table-header-description.directive.ts +++ b/src/table/header/table-header-description.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding, Input } from "@angular/core"; @Directive({ - selector: "[cdsTableHeaderDescription], [ibmTableHeaderDescription]" + selector: "[cdsTableHeaderDescription], [ibmTableHeaderDescription]", + standalone: true }) export class TableHeaderDescription { static counter = 0; diff --git a/src/table/header/table-header-title.directive.ts b/src/table/header/table-header-title.directive.ts index b34ebf9216..7a7b172c08 100644 --- a/src/table/header/table-header-title.directive.ts +++ b/src/table/header/table-header-title.directive.ts @@ -5,7 +5,8 @@ import { } from "@angular/core"; @Directive({ - selector: "[cdsTableHeaderTitle], [ibmTableHeaderTitle]" + selector: "[cdsTableHeaderTitle], [ibmTableHeaderTitle]", + standalone: true }) export class TableHeaderTitle { static counter = 0; diff --git a/src/table/header/table-header.component.ts b/src/table/header/table-header.component.ts index e6160b1fef..d23ecca9ac 100644 --- a/src/table/header/table-header.component.ts +++ b/src/table/header/table-header.component.ts @@ -4,7 +4,8 @@ import { Component, HostBinding } from "@angular/core"; selector: "cds-table-header, ibm-table-header", template: ` - ` + `, + standalone: true }) export class TableHeader { @HostBinding("class.cds--data-table-header") headerClass = true; diff --git a/src/table/stories/app-custom-table.component.ts b/src/table/stories/app-custom-table.component.ts index 3ba6929f90..650385d039 100644 --- a/src/table/stories/app-custom-table.component.ts +++ b/src/table/stories/app-custom-table.component.ts @@ -8,7 +8,10 @@ import { import { TableModel } from "../table-model.class"; import { TableItem } from "../table-item.class"; import { TableHeaderItem } from "../table-header-item.class"; -import { clone } from "../../utils/index"; +import { clone } from "carbon-components-angular/utils"; +import { Table } from "../table.component"; +import { TableToolbar } from "../toolbar/table-toolbar.component"; +import { Button } from "carbon-components-angular/button"; export class CustomHeaderItem extends TableHeaderItem { // used for custom sorting @@ -53,7 +56,9 @@ export class CustomHeaderItem extends TableHeaderItem { (rowClick)="onRowClick($event)" (sort)="customSort($event)"> - ` + `, + standalone: true, + imports: [Table, TableToolbar, Button] }) export class DynamicTableStory implements AfterViewInit { @Input() model = new TableModel(); @@ -121,6 +126,7 @@ export class DynamicTableStory implements AfterViewInit { } onRowClick(index: number) { + // eslint-disable-next-line no-console console.log("Row item selected:", index); } } diff --git a/src/table/stories/app-expansion-table.component.ts b/src/table/stories/app-expansion-table.component.ts index 48d520135b..a142a9cf79 100644 --- a/src/table/stories/app-expansion-table.component.ts +++ b/src/table/stories/app-expansion-table.component.ts @@ -8,6 +8,8 @@ import { import { TableModel } from "../table-model.class"; import { TableItem } from "../table-item.class"; import { TableHeaderItem } from "../table-header-item.class"; +import { Table } from "../table.component"; +import { Button } from "carbon-components-angular/button"; class CustomHeaderItem extends TableHeaderItem { // used for custom sorting @@ -54,7 +56,9 @@ class CustomHeaderItem extends TableHeaderItem { - ` + `, + standalone: true, + imports: [Table, Button] }) export class ExpansionTableStory implements AfterViewInit { @Input() model = new TableModel(); @@ -126,6 +130,7 @@ export class ExpansionTableStory implements AfterViewInit { } onRowClick(index: number) { + // eslint-disable-next-line no-console console.log("Row item selected:", index); } diff --git a/src/table/stories/app-function-override-filter-table.component.ts b/src/table/stories/app-function-override-filter-table.component.ts index a8f7221bab..59d224b7ca 100644 --- a/src/table/stories/app-function-override-filter-table.component.ts +++ b/src/table/stories/app-function-override-filter-table.component.ts @@ -7,9 +7,19 @@ import { TableModel } from "../table-model.class"; import { TableHeaderItem } from "../table-header-item.class"; import { TableItem } from "../table-item.class"; -import { IconService } from "../../icon/icon.service"; +import { IconService } from "carbon-components-angular/icon"; import Add16 from "@carbon/icons/es/add/16"; import Filter16 from "@carbon/icons/es/filter/16"; +import { Table } from "../table.component"; +import { TableContainer } from "../table-container.component"; +import { TableHeader } from "../header/table-header.component"; +import { TableToolbar } from "../toolbar/table-toolbar.component"; +import { TableToolbarContent } from "../toolbar/table-toolbar-content.component"; +import { TableToolbarSearch } from "../toolbar/table-toolbar-search.component"; +import { ICON_SERVICE_PROVIDER, IconDirective } from "../../icon"; +import { Button } from "../../button"; +import { OverflowMenu, OverflowMenuDirective, OverflowMenuOption } from "../../dialog"; +import { Checkbox } from "../../checkbox"; @Component({ selector: "app-function-override-filter-table", @@ -82,7 +92,11 @@ import Filter16 from "@carbon/icons/es/filter/16"; - ` + `, + standalone: true, + providers: [ICON_SERVICE_PROVIDER], + imports: [Table, TableContainer, TableHeader, TableToolbar, TableToolbarContent, TableToolbarSearch, + IconDirective, Button, OverflowMenu, OverflowMenuOption, OverflowMenuDirective, Checkbox] }) export class FilterByFunctionOverrideStory implements OnInit { @Input() size = "md"; diff --git a/src/table/stories/app-model-filter-table.component.ts b/src/table/stories/app-model-filter-table.component.ts index 94e755bdf8..41a482a6dc 100644 --- a/src/table/stories/app-model-filter-table.component.ts +++ b/src/table/stories/app-model-filter-table.component.ts @@ -10,6 +10,16 @@ import { TableItem } from "../table-item.class"; import { IconService } from "../../icon/icon.service"; import Add16 from "@carbon/icons/es/add/16"; import Filter16 from "@carbon/icons/es/filter/16"; +import { Table } from "../table.component"; +import { Button } from "../../button"; +import { Checkbox } from "../../checkbox"; +import { OverflowMenu, OverflowMenuOption, OverflowMenuDirective } from "../../dialog"; +import { ICON_SERVICE_PROVIDER, IconDirective } from "../../icon"; +import { TableHeader } from "../header/table-header.component"; +import { TableContainer } from "../table-container.component"; +import { TableToolbarContent } from "../toolbar/table-toolbar-content.component"; +import { TableToolbarSearch } from "../toolbar/table-toolbar-search.component"; +import { TableToolbar } from "../toolbar/table-toolbar.component"; @Component({ selector: "app-model-filter-table", @@ -82,7 +92,11 @@ import Filter16 from "@carbon/icons/es/filter/16"; - ` + `, + standalone: true, + providers: [ICON_SERVICE_PROVIDER], + imports: [Table, TableContainer, TableHeader, TableToolbar, TableToolbarContent, TableToolbarSearch, + IconDirective, Button, OverflowMenu, OverflowMenuOption, OverflowMenuDirective, Checkbox] }) export class FilterWithModelStory implements OnInit { @Input() size = "md"; diff --git a/src/table/stories/app-no-data.component.ts b/src/table/stories/app-no-data.component.ts index 78daf362a3..15705d472a 100644 --- a/src/table/stories/app-no-data.component.ts +++ b/src/table/stories/app-no-data.component.ts @@ -7,6 +7,7 @@ import { } from "@angular/core"; import { TableModel } from "../table-model.class"; import { TableHeaderItem } from "../table-header-item.class"; +import { Table } from "../table.component"; @Component({ selector: "app-no-data-table", @@ -20,7 +21,9 @@ import { TableHeaderItem } from "../table-header-item.class"; [isDataGrid]="isDataGrid"> - ` + `, + standalone: true, + imports: [Table] }) export class TableNoDataStory implements OnInit, OnChanges { @Input() model = new TableModel(); diff --git a/src/table/stories/app-overflow-table.component.ts b/src/table/stories/app-overflow-table.component.ts index 2a3b262a32..a11c0fa718 100644 --- a/src/table/stories/app-overflow-table.component.ts +++ b/src/table/stories/app-overflow-table.component.ts @@ -8,6 +8,8 @@ import { import { TableModel } from "../table-model.class"; import { TableItem } from "../table-item.class"; import { TableHeaderItem } from "../table-header-item.class"; +import { Table } from "../table.component"; +import { OverflowMenu, OverflowMenuOption } from "../../dialog"; @Component({ selector: "app-overflow-table", @@ -37,7 +39,9 @@ import { TableHeaderItem } from "../table-header-item.class"; (rowClick)="onRowClick($event)" [striped]="striped"> - ` + `, + standalone: true, + imports: [Table, OverflowMenu, OverflowMenuOption] }) export class OverflowTableStory implements AfterViewInit { @Input() model = new TableModel(); @@ -71,6 +75,7 @@ export class OverflowTableStory implements AfterViewInit { } onRowClick(index: number) { + // eslint-disable-next-line no-console console.log("Row item selected:", index); } } diff --git a/src/table/stories/app-pagination-table.component.ts b/src/table/stories/app-pagination-table.component.ts index e3753326aa..440b53b00f 100644 --- a/src/table/stories/app-pagination-table.component.ts +++ b/src/table/stories/app-pagination-table.component.ts @@ -8,6 +8,9 @@ import { import { TableModel } from "../table-model.class"; import { TableHeaderItem } from "../table-header-item.class"; import { TableItem } from "../table-item.class"; +import { Table } from "../table.component"; +import { Label } from "../../input"; +import { Pagination } from "../../pagination"; @Component({ selector: "app-pagination-table", @@ -38,7 +41,9 @@ import { TableItem } from "../table-item.class"; [skeleton]="skeleton"> - ` + `, + standalone: true, + imports: [Table, Label, Pagination] }) export class PaginationTableStory implements OnInit { @Input() model = new TableModel(); @@ -112,6 +117,7 @@ export class PaginationTableStory implements OnInit { } onRowClick(index: number) { + // eslint-disable-next-line no-console console.log("Row item selected:", index); } diff --git a/src/table/stories/app-skeleton-table.component.ts b/src/table/stories/app-skeleton-table.component.ts index 4cba51405a..7376b2a6e1 100644 --- a/src/table/stories/app-skeleton-table.component.ts +++ b/src/table/stories/app-skeleton-table.component.ts @@ -17,7 +17,9 @@ import { Table } from "../index"; [striped]="striped"> - ` + `, + standalone: true, + imports: [Table] }) export class SkeletonTableStory implements OnInit { @Input() size = "md"; diff --git a/src/table/stories/app-table.component.ts b/src/table/stories/app-table.component.ts index 00101dc7bd..c33eb1d52d 100644 --- a/src/table/stories/app-table.component.ts +++ b/src/table/stories/app-table.component.ts @@ -8,6 +8,7 @@ import { import { TableModel } from "../table-model.class"; import { TableHeaderItem } from "../table-header-item.class"; import { TableItem } from "../table-item.class"; +import { Table } from "../table.component"; @Component({ selector: "app-table", @@ -27,7 +28,9 @@ import { TableItem } from "../table-item.class"; [ariaDescribedby]="ariaDescribedby"> - ` + `, + standalone: true, + imports: [Table] }) export class TableStory implements OnInit, OnChanges { @Input() model = new TableModel(); @@ -55,7 +58,9 @@ export class TableStory implements OnInit, OnChanges { }) ]; + // eslint-disable-next-line no-console this.model.rowsSelectedChange.subscribe(event => console.log(event)); + // eslint-disable-next-line no-console this.model.selectAllChange.subscribe(event => console.log(event ? "All rows selected!" : "All rows deselected!")); if (!this.noData && !this.skeleton) { @@ -80,6 +85,7 @@ export class TableStory implements OnInit, OnChanges { } onRowClick(index: number) { + // eslint-disable-next-line no-console console.log("Row item selected:", index); } } diff --git a/src/table/table-container.component.ts b/src/table/table-container.component.ts index ed2490cc8e..b764ff2925 100644 --- a/src/table/table-container.component.ts +++ b/src/table/table-container.component.ts @@ -13,7 +13,8 @@ import { Table } from "./table.component"; template: ``, styles: [` :host { display: block } - `] + `], + standalone: true }) export class TableContainer implements AfterContentInit { @HostBinding("class.cds--data-table-container") containerClass = true; diff --git a/src/table/table.component.spec.ts b/src/table/table.component.spec.ts index d53828d50f..4580b7de4a 100644 --- a/src/table/table.component.spec.ts +++ b/src/table/table.component.spec.ts @@ -4,7 +4,7 @@ import { TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { TableModel } from "./table-model.class"; -import { Table, TableModule } from "./index"; +import { Table } from "./index"; import { TableHeaderItem } from "./table-header-item.class"; import { TableItem } from "./table-item.class"; @@ -18,7 +18,9 @@ import { TableItem } from "./table-item.class"; size="md" title="title" [showSelectionColumn]="showSelectionColumn"> - ` + `, + imports: [Table], + standalone: true }) class TableTest implements OnInit { tableModel = new TableModel(); @@ -43,8 +45,7 @@ describe("Table", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ TableTest ], - imports: [ TableModule ] + imports: [TableTest] }); fixture = TestBed.createComponent(TableTest); diff --git a/src/table/table.component.ts b/src/table/table.component.ts index bffcc8cae8..c093a0532e 100644 --- a/src/table/table.component.ts +++ b/src/table/table.component.ts @@ -23,6 +23,10 @@ import { merge } from "carbon-components-angular/utils"; import { DataGridInteractionModel } from "./data-grid-interaction-model.class"; import { TableDomAdapter } from "./table-adapter.class"; import { TableRowSize } from "./table.types"; +import { TableDirective } from "./table.directive"; +import { NgClass, NgStyle, NgTemplateOutlet, AsyncPipe } from "@angular/common"; +import { TableHead } from "./head/table-head.component"; +import { TableBody } from "./body/table-body.component"; /** * Build your table with this component by extending things that differ from default. @@ -254,7 +258,9 @@ import { TableRowSize } from "./table.types"; :host { display: block; } - `] + `], + standalone: true, + imports: [TableDirective, NgClass, TableHead, TableBody, NgStyle, NgTemplateOutlet, AsyncPipe] }) export class Table implements OnInit, AfterViewInit, OnDestroy { /** diff --git a/src/table/table.directive.ts b/src/table/table.directive.ts index 43e1d73c40..9b48027872 100644 --- a/src/table/table.directive.ts +++ b/src/table/table.directive.ts @@ -2,7 +2,8 @@ import { Directive, HostBinding, Input } from "@angular/core"; import { TableRowSize } from "./table.types"; @Directive({ - selector: "[cdsTable], [ibmTable]" + selector: "[cdsTable], [ibmTable]", + standalone: true }) export class TableDirective { @Input() @HostBinding("class.cds--data-table--sort") sortable = true; diff --git a/src/table/table.module.ts b/src/table/table.module.ts index a860f4fdef..03353ea4d4 100644 --- a/src/table/table.module.ts +++ b/src/table/table.module.ts @@ -4,12 +4,10 @@ import { CommonModule } from "@angular/common"; import { FormsModule } from "@angular/forms"; // internal module imports -import { NFormsModule } from "carbon-components-angular/forms"; -import { DialogModule } from "carbon-components-angular/dialog"; -import { I18nModule } from "carbon-components-angular/i18n"; -import { ButtonModule } from "carbon-components-angular/button"; -import { SearchModule } from "carbon-components-angular/search"; -import { IconModule } from "carbon-components-angular/icon"; +import { Dialog } from "carbon-components-angular/dialog"; + +import { Search } from "carbon-components-angular/search"; +import { IconDirective } from "carbon-components-angular/icon"; // table utilities/toolbar imports import { TableToolbar } from "./toolbar/table-toolbar.component"; @@ -49,7 +47,7 @@ export * from "./table-adapter.class"; export * from "./data-grid-interaction-model.class"; @NgModule({ - declarations: [ + exports: [ // toolbar and utility components TableToolbar, TableContainer, @@ -76,7 +74,13 @@ export * from "./data-grid-interaction-model.class"; TableRadio, TableExpandButton ], - exports: [ + imports: [ + CommonModule, + FormsModule, + Dialog, + Search, + // I18nModule, + IconDirective, // toolbar and utility components TableToolbar, TableContainer, @@ -102,16 +106,6 @@ export * from "./data-grid-interaction-model.class"; TableCheckbox, TableRadio, TableExpandButton - ], - imports: [ - CommonModule, - NFormsModule, - FormsModule, - DialogModule, - ButtonModule, - SearchModule, - I18nModule, - IconModule ] }) export class TableModule {} diff --git a/src/table/table.stories.ts b/src/table/table.stories.ts index 9d18bfa575..cac9478938 100644 --- a/src/table/table.stories.ts +++ b/src/table/table.stories.ts @@ -1,11 +1,9 @@ import { moduleMetadata, Meta } from "@storybook/angular"; import { FormsModule } from "@angular/forms"; -import { NFormsModule } from "../forms"; -import { ButtonModule } from "../button"; -import { IconModule } from "../icon/icon.module"; -import { SearchModule } from "../search"; -import { PaginationModule } from "../pagination"; -import { DialogModule } from "../dialog"; +import { Button } from "../button"; +import { Search } from "../search"; +import { Dialog, OverflowMenu, OverflowMenuOption } from "../dialog"; +import { TableRow } from "./table-row.class"; import { TableStory, DynamicTableStory, @@ -18,11 +16,21 @@ import { TableNoDataStory } from "./stories"; import { - TableModule, TableModel, TableItem, TableHeaderItem, - TableRow + TableContainer, + TableHeader, + TableToolbar, + TableToolbarActions, + TableToolbarContent, + TableToolbarSearch, + TableData, + TableRowComponent, + TableDirective, + TableHeaderTitle, + TableHeadCell, + TableBody } from "./"; const simpleModel = new TableModel(); @@ -80,16 +88,26 @@ export default { decorators: [ moduleMetadata({ imports: [ - NFormsModule, FormsModule, - TableModule, - PaginationModule, - DialogModule, - SearchModule, - IconModule, - ButtonModule - ], - declarations: [ + Dialog, + Search, + Button, + TableContainer, + TableHeader, + TableToolbar, + TableToolbarActions, + TableToolbarContent, + TableToolbarSearch, + TableRowComponent, + OverflowMenu, + OverflowMenuOption, + TableDirective, + TableHeaderTitle, + TableHeadCell, + TableBody, + TableData, + + // stories TableStory, DynamicTableStory, ExpansionTableStory, @@ -281,6 +299,7 @@ WithToolbar.argTypes = { type: "function", control: false, defaultValue: () => { + // eslint-disable-next-line no-console console.log("Custom cancel method"); } } diff --git a/src/table/toolbar/table-toolbar-actions.component.ts b/src/table/toolbar/table-toolbar-actions.component.ts index 0708e8a9fa..8131bd40c8 100644 --- a/src/table/toolbar/table-toolbar-actions.component.ts +++ b/src/table/toolbar/table-toolbar-actions.component.ts @@ -2,6 +2,7 @@ import { Component, HostBinding } from "@angular/core"; @Component({ selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions", - template: `` + template: ``, + standalone: true }) export class TableToolbarActions {} diff --git a/src/table/toolbar/table-toolbar-content.component.ts b/src/table/toolbar/table-toolbar-content.component.ts index f2c1567298..6d75d45236 100644 --- a/src/table/toolbar/table-toolbar-content.component.ts +++ b/src/table/toolbar/table-toolbar-content.component.ts @@ -2,7 +2,8 @@ import { Component, HostBinding } from "@angular/core"; @Component({ selector: "cds-table-toolbar-content, ibm-table-toolbar-content", - template: `` + template: ``, + standalone: true }) export class TableToolbarContent { @HostBinding("class.cds--toolbar-content") class = true; diff --git a/src/table/toolbar/table-toolbar-search.component.ts b/src/table/toolbar/table-toolbar-search.component.ts index 880611adae..afd8e3d561 100644 --- a/src/table/toolbar/table-toolbar-search.component.ts +++ b/src/table/toolbar/table-toolbar-search.component.ts @@ -2,11 +2,11 @@ import { Search } from "carbon-components-angular/search"; import { Component, HostBinding, - Input, - OnInit, AfterViewInit } from "@angular/core"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; +import { NgClass } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; @Component({ selector: "cds-table-toolbar-search, ibm-table-toolbar-search", @@ -17,7 +17,9 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms"; useExisting: TableToolbarSearch, multi: true } - ] + ], + standalone: true, + imports: [NgClass, IconDirective] }) export class TableToolbarSearch extends Search implements AfterViewInit { tableSearch = true; diff --git a/src/table/toolbar/table-toolbar.component.ts b/src/table/toolbar/table-toolbar.component.ts index a64ad4ac2e..c7b75d093e 100644 --- a/src/table/toolbar/table-toolbar.component.ts +++ b/src/table/toolbar/table-toolbar.component.ts @@ -7,6 +7,9 @@ import { } from "@angular/core"; import { I18n, Overridable } from "carbon-components-angular/i18n"; import { TableRowSize } from "../table.types"; +import { NgClass, AsyncPipe } from "@angular/common"; +import { Button } from "carbon-components-angular/button"; +import { ReplacePipe } from "carbon-components-angular/i18n"; /** * The table toolbar is reserved for global table actions such as table settings, complex filter, export, or editing table data. @@ -85,7 +88,9 @@ import { TableRowSize } from "../table.types"; } - ` + `, + standalone: true, + imports: [NgClass, Button, AsyncPipe, ReplacePipe] }) export class TableToolbar { @Input() model: TableModel; @@ -111,6 +116,7 @@ export class TableToolbar { return { CANCEL: this._cancelText.value as string }; } + // eslint-disable-next-line @angular-eslint/no-output-native @Output() cancel = new EventEmitter(); actionBarLabel: Overridable = this.i18n.getOverridable("TABLE_TOOLBAR.ACTION_BAR"); diff --git a/src/tabs/base-tab-header.component.ts b/src/tabs/base-tab-header.component.ts index 92f718ae5d..ef34f2747b 100644 --- a/src/tabs/base-tab-header.component.ts +++ b/src/tabs/base-tab-header.component.ts @@ -8,14 +8,16 @@ import { HostBinding, Renderer2 } from "@angular/core"; -import { EventService } from "carbon-components-angular/utils"; +import { DOCUMENT_SERVICE_PROVIDER, EventService } from "carbon-components-angular/utils"; /** * There are two ways to create a tab, this class is a collection of features * & metadata required by both. */ @Component({ - template: "" + template: "", + standalone: true, + providers: [EventService, DOCUMENT_SERVICE_PROVIDER] }) export class BaseTabHeader { /** diff --git a/src/tabs/stories/tabs.component.ts b/src/tabs/stories/tabs.component.ts index d6f0cb12dd..e11397a058 100644 --- a/src/tabs/stories/tabs.component.ts +++ b/src/tabs/stories/tabs.component.ts @@ -1,4 +1,5 @@ import { Component, Input } from "@angular/core"; +import { Tabs } from "../tabs.component"; @Component({ selector: "app-header-group", @@ -40,7 +41,9 @@ import { Component, Input } from "@angular/core"; Tab Content 5 - ` + `, + imports: [Tabs], + standalone: true }) export class TabStory { @Input() skeleton = false; diff --git a/src/tabs/tab-header-group.component.ts b/src/tabs/tab-header-group.component.ts index 22702b164a..1500e07977 100644 --- a/src/tabs/tab-header-group.component.ts +++ b/src/tabs/tab-header-group.component.ts @@ -15,10 +15,11 @@ import { } from "@angular/core"; import { Subscription } from "rxjs"; -import { EventService } from "carbon-components-angular/utils"; +import { DOCUMENT_SERVICE_PROVIDER, EventService } from "carbon-components-angular/utils"; import { TabHeader } from "./tab-header.directive"; import { BaseTabHeader } from "./base-tab-header.component"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; @Component({ selector: "cds-tab-header-group, ibm-tab-header-group", @@ -81,7 +82,10 @@ import { BaseTabHeader } from "./base-tab-header.component"; - ` + `, + standalone: true, + providers: [DOCUMENT_SERVICE_PROVIDER, EventService], + imports: [NgClass, NgTemplateOutlet] }) export class TabHeaderGroup extends BaseTabHeader implements AfterContentInit, OnChanges, OnInit { @Input() isNavigation = false; diff --git a/src/tabs/tab-header.directive.ts b/src/tabs/tab-header.directive.ts index d513b2f87d..46b71886c9 100644 --- a/src/tabs/tab-header.directive.ts +++ b/src/tabs/tab-header.directive.ts @@ -12,7 +12,8 @@ import { import { Tab } from "./tab.component"; @Directive({ - selector: "[cdsTabHeader], [ibmTabHeader]" + selector: "[cdsTabHeader], [ibmTabHeader]", + standalone: true }) export class TabHeader implements AfterViewInit { @HostBinding("attr.tabIndex") get tabIndex() { diff --git a/src/tabs/tab-headers.component.ts b/src/tabs/tab-headers.component.ts index 5234ffd508..8572c29a77 100644 --- a/src/tabs/tab-headers.component.ts +++ b/src/tabs/tab-headers.component.ts @@ -13,13 +13,15 @@ import { OnDestroy, OnInit, ChangeDetectorRef, - Renderer2 + Renderer2, + EventEmitter } from "@angular/core"; -import { EventService } from "carbon-components-angular/utils"; -import { I18n } from "carbon-components-angular/i18n"; +import { DOCUMENT_SERVICE_PROVIDER, EventService } from "carbon-components-angular/utils"; +import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n"; import { BaseTabHeader } from "./base-tab-header.component"; import { Tab } from "./tab.component"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; /** * The `TabHeaders` component contains the `Tab` items and controls scroll functionality @@ -110,7 +112,10 @@ import { Tab } from "./tab.component"; - ` + `, + standalone: true, + providers: [EventService, DOCUMENT_SERVICE_PROVIDER, I18N_SERVICE_PROVIDER], + imports: [NgClass, NgTemplateOutlet] }) export class TabHeaders extends BaseTabHeader implements AfterContentInit, OnChanges, OnDestroy, OnInit { diff --git a/src/tabs/tab-skeleton.component.ts b/src/tabs/tab-skeleton.component.ts index 6d59663868..e2b5cc5938 100644 --- a/src/tabs/tab-skeleton.component.ts +++ b/src/tabs/tab-skeleton.component.ts @@ -19,7 +19,8 @@ import { } - ` + `, + standalone: true }) export class TabSkeleton { /** diff --git a/src/tabs/tab.component.ts b/src/tabs/tab.component.ts index 8f4b6fb935..3154c9472c 100644 --- a/src/tabs/tab.component.ts +++ b/src/tabs/tab.component.ts @@ -7,6 +7,7 @@ import { TemplateRef, HostBinding } from "@angular/core"; +import { NgStyle, NgTemplateOutlet } from "@angular/common"; /** * The `Tab` component is a child of the `Tabs` component. @@ -69,7 +70,9 @@ import { } - ` + `, + standalone: true, + imports: [NgStyle, NgTemplateOutlet] }) export class Tab implements OnInit { private static counter = 0; diff --git a/src/tabs/tabs.component.spec.ts b/src/tabs/tabs.component.spec.ts index 4dd09c423c..b27148c601 100644 --- a/src/tabs/tabs.component.spec.ts +++ b/src/tabs/tabs.component.spec.ts @@ -1,12 +1,8 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; import { TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; -import { I18nModule } from "../i18n"; -import { UtilsModule } from "../utils"; import { Tabs } from "./tabs.component"; -import { CommonModule } from "@angular/common"; import { Tab } from "./tab.component"; -import { TabHeaders } from "./tab-headers.component"; @Component({ template: ` @@ -15,7 +11,12 @@ import { TabHeaders } from "./tab-headers.component"; Tab Content 2 Tab Content 3 - ` + `, + standalone: true, + imports: [ + Tabs, + Tab + ] }) class TabsTest { isNavigation = true; @@ -35,16 +36,8 @@ describe("Tabs", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - Tabs, - Tab, - TabHeaders, - TabsTest - ], imports: [ - CommonModule, - UtilsModule, - I18nModule + TabsTest ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }); diff --git a/src/tabs/tabs.component.ts b/src/tabs/tabs.component.ts index 9ef8888a4a..de1fb2d0ce 100644 --- a/src/tabs/tabs.component.ts +++ b/src/tabs/tabs.component.ts @@ -10,6 +10,7 @@ import { } from "@angular/core"; import { Tab } from "./tab.component"; import { TabHeaders } from "./tab-headers.component"; +import { TabSkeleton } from "./tab-skeleton.component"; /** * Build out your application's tabs using this component. @@ -68,7 +69,9 @@ import { TabHeaders } from "./tab-headers.component"; } } - ` + `, + standalone: true, + imports: [TabSkeleton, TabHeaders] }) export class Tabs implements AfterContentInit, OnChanges { /** diff --git a/src/tabs/tabs.module.ts b/src/tabs/tabs.module.ts index de0b284219..650b8f087d 100644 --- a/src/tabs/tabs.module.ts +++ b/src/tabs/tabs.module.ts @@ -12,8 +12,7 @@ import { TabHeaders } from "./tab-headers.component"; import { TabHeaderGroup } from "./tab-header-group.component"; @NgModule({ - declarations: [ - BaseTabHeader, + exports: [ Tabs, Tab, TabHeader, @@ -21,18 +20,17 @@ import { TabHeaderGroup } from "./tab-header-group.component"; TabHeaderGroup, TabSkeleton ], - exports: [ + imports: [ + CommonModule, + UtilsModule, + I18nModule, + BaseTabHeader, Tabs, Tab, TabHeader, TabHeaders, TabHeaderGroup, TabSkeleton - ], - imports: [ - CommonModule, - UtilsModule, - I18nModule ] }) export class TabsModule {} diff --git a/src/tabs/tabs.stories.ts b/src/tabs/tabs.stories.ts index 86becb15d9..0265a016dc 100644 --- a/src/tabs/tabs.stories.ts +++ b/src/tabs/tabs.stories.ts @@ -1,7 +1,7 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { TabsModule } from "./"; +import { Tab, TabHeader, TabHeaderGroup, TabHeaders, TabSkeleton, Tabs } from "./"; import { TabStory } from "./stories"; @@ -10,9 +10,16 @@ export default { decorators: [ moduleMetadata({ imports: [ - TabsModule - ], - declarations: [TabStory] + Tabs, + Tab, + TabHeader, + TabHeaderGroup, + TabHeaders, + TabSkeleton, + + //stories + TabStory + ] }) ] } as Meta; diff --git a/src/tag/index.ts b/src/tag/index.ts index 372f77b929..bffdd1becc 100644 --- a/src/tag/index.ts +++ b/src/tag/index.ts @@ -3,4 +3,4 @@ export * from "./tag.component"; export * from "./tag-icon.directive"; export * from "./tag-selectable.component"; export * from "./tag-operational.component"; -export * from "./tag.module"; +// export * from "./tag.module"; diff --git a/src/tag/tag-filter.component.spec.ts b/src/tag/tag-filter.component.spec.ts index 979602083b..9a6d4d393f 100644 --- a/src/tag/tag-filter.component.spec.ts +++ b/src/tag/tag-filter.component.spec.ts @@ -2,12 +2,13 @@ import { TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { Component } from "@angular/core"; -import { IconModule } from "../icon"; import { TagFilter } from "./tag-filter.component"; @Component({ template: ` - TagFilter` + TagFilter`, + standalone: true, + imports: [TagFilter] }) class TagFilterTest { disabled = false; @@ -17,12 +18,8 @@ describe("TagFilter", () => { let fixture, debugElement; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - TagFilter, - TagFilterTest - ], imports: [ - IconModule + TagFilterTest ] }); }); diff --git a/src/tag/tag-filter.component.ts b/src/tag/tag-filter.component.ts index 33b5719a5f..3ebaeb0631 100644 --- a/src/tag/tag-filter.component.ts +++ b/src/tag/tag-filter.component.ts @@ -7,6 +7,7 @@ import { TemplateRef } from "@angular/core"; import { Tag } from "./tag.component"; +import { IconDirective } from "carbon-components-angular/icon"; @Component({ selector: "cds-tag-filter, ibm-tag-filter", @@ -28,7 +29,9 @@ import { Tag } from "./tag.component"; } - ` + `, + standalone: true, + imports: [IconDirective] }) export class TagFilter extends Tag { @Input() closeButtonLabel = "Clear Filter"; @@ -48,6 +51,7 @@ export class TagFilter extends Tag { * to on the immediate close button element. `action` distinguishes between clicks on * the tag vs. clicks on the close button. */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() click = new EventEmitter<{ action: "click" | "close" }>(); onClick(event: any) { diff --git a/src/tag/tag-icon.directive.ts b/src/tag/tag-icon.directive.ts index 99179ca7aa..89d034566e 100644 --- a/src/tag/tag-icon.directive.ts +++ b/src/tag/tag-icon.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsTagIcon], [ibmTagIcon]" + selector: "[cdsTagIcon], [ibmTagIcon]", + standalone: true }) export class TagIconDirective { @HostBinding("class.cds--tag__custom-icon") tagIcon = true; diff --git a/src/tag/tag-operational.component.ts b/src/tag/tag-operational.component.ts index e12475826f..4283fd04e7 100644 --- a/src/tag/tag-operational.component.ts +++ b/src/tag/tag-operational.component.ts @@ -16,7 +16,8 @@ import { Tag } from "./tag.component"; } `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true }) export class TagOperationalComponent extends Tag { @HostBinding("attr.role") role = "button"; diff --git a/src/tag/tag-selectable.component.ts b/src/tag/tag-selectable.component.ts index ce10c0d4de..e933d7b351 100644 --- a/src/tag/tag-selectable.component.ts +++ b/src/tag/tag-selectable.component.ts @@ -18,7 +18,8 @@ import { } `, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true }) export class TagSelectableComponent { @HostBinding("attr.role") role = "button"; diff --git a/src/tag/tag.component.ts b/src/tag/tag.component.ts index 9018e4d698..0c2f86c5b1 100644 --- a/src/tag/tag.component.ts +++ b/src/tag/tag.component.ts @@ -38,7 +38,8 @@ export type TagType = "red" | } - ` + `, + standalone: true }) export class Tag { /** diff --git a/src/tag/tag.module.ts b/src/tag/tag.module.ts index 4472bca8ee..8d9616d21a 100644 --- a/src/tag/tag.module.ts +++ b/src/tag/tag.module.ts @@ -3,26 +3,23 @@ import { CommonModule } from "@angular/common"; import { Tag } from "./tag.component"; import { TagFilter } from "./tag-filter.component"; -import { IconModule } from "carbon-components-angular/icon"; import { TagIconDirective } from "./tag-icon.directive"; import { TagSelectableComponent } from "./tag-selectable.component"; import { TagOperationalComponent } from "./tag-operational.component"; +import { IconDirective } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ + exports: [ Tag, TagFilter, TagIconDirective, TagSelectableComponent, TagOperationalComponent ], - exports: [ - Tag, + imports: [CommonModule, IconDirective, Tag, TagFilter, TagIconDirective, TagSelectableComponent, - TagOperationalComponent - ], - imports: [CommonModule, IconModule] + TagOperationalComponent] }) export class TagModule {} diff --git a/src/tag/tag.stories.ts b/src/tag/tag.stories.ts index 7bc6924bc2..61d9f57823 100644 --- a/src/tag/tag.stories.ts +++ b/src/tag/tag.stories.ts @@ -1,16 +1,20 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { TagModule, Tag } from "./"; -import { IconModule } from "../icon"; -import { PopoverModule } from "../popover"; +import { Tag, TagFilter, TagOperationalComponent, TagSelectableComponent } from "./"; +import { IconDirective } from "../icon"; +import { PopoverContainer, PopoverContent } from "../popover"; export default { title: "Components/Tag", decorators: [ moduleMetadata({ imports: [ - TagModule, - IconModule, - PopoverModule + Tag, + IconDirective, + PopoverContainer, + PopoverContent, + TagOperationalComponent, + TagFilter, + TagSelectableComponent ] }) ], diff --git a/src/theme/index.ts b/src/theme/index.ts index baee2a5d0e..92d45bce49 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,2 +1,2 @@ export * from "./theme.directive"; -export * from "./theme.module"; + diff --git a/src/theme/theme.directive.ts b/src/theme/theme.directive.ts index 1d3530183e..4f222fe404 100644 --- a/src/theme/theme.directive.ts +++ b/src/theme/theme.directive.ts @@ -21,7 +21,8 @@ export type ThemeType = "white" | "g10" | "g90" | "g100"; */ @Directive({ selector: "[cdsTheme], [ibmTheme]", - exportAs: "theme" + exportAs: "theme", + standalone: true }) export class ThemeDirective implements AfterContentChecked { /** diff --git a/src/theme/theme.module.ts b/src/theme/theme.module.ts index 44ef65a8a8..9df3ce4be3 100644 --- a/src/theme/theme.module.ts +++ b/src/theme/theme.module.ts @@ -5,8 +5,12 @@ import { ThemeDirective } from "./theme.directive"; import { LayerModule } from "carbon-components-angular/layer"; @NgModule({ - declarations: [ThemeDirective], + declarations: [], exports: [ThemeDirective], - imports: [CommonModule, LayerModule] + imports: [ + CommonModule, + LayerModule, + ThemeDirective + ] }) export class ThemeModule {} diff --git a/src/theme/theme.spec.ts b/src/theme/theme.spec.ts index 47bd5a6cbe..b74bd080cb 100644 --- a/src/theme/theme.spec.ts +++ b/src/theme/theme.spec.ts @@ -6,24 +6,24 @@ import { ThemeDirective } from "./theme.directive"; import { LayerDirective } from "../layer"; @Component({ - template: `
` + template: `
`, + imports: [ThemeDirective], + standalone: true }) class TestThemeComponent { } describe("Theme", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - TestThemeComponent, - ThemeDirective, - LayerDirective + imports: [ + TestThemeComponent ] }); }); it("should assign theme class to div", () => { TestBed.configureTestingModule({ - declarations: [TestThemeComponent, ThemeDirective] + imports: [TestThemeComponent, ThemeDirective] }); let fixture: ComponentFixture = TestBed.createComponent(TestThemeComponent); @@ -46,7 +46,8 @@ describe("Theme", () => {
- ` + `, + imports: [LayerDirective, ThemeDirective] } }); diff --git a/src/theme/theme.stories.ts b/src/theme/theme.stories.ts index d8c7e66018..ceb470f0dc 100644 --- a/src/theme/theme.stories.ts +++ b/src/theme/theme.stories.ts @@ -1,11 +1,11 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { ThemeModule, ThemeDirective } from "./"; +import { ThemeDirective } from "./"; export default { title: "Components/Theme", decorators: [ moduleMetadata({ - imports: [ThemeModule] + imports: [ThemeDirective] }) ], component: ThemeDirective diff --git a/src/tiles/clickable-tile-icon.directive.ts b/src/tiles/clickable-tile-icon.directive.ts index 39ba7b414d..55804925a0 100644 --- a/src/tiles/clickable-tile-icon.directive.ts +++ b/src/tiles/clickable-tile-icon.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsClickableTileIcon], [ibmClickableTileIcon]" + selector: "[cdsClickableTileIcon], [ibmClickableTileIcon]", + standalone: true }) export class ClickableTileIconDirective { @HostBinding("class.cds--tile--icon") icon = true; diff --git a/src/tiles/clickable-tile.component.spec.ts b/src/tiles/clickable-tile.component.spec.ts index 56275323e0..856aa0002b 100644 --- a/src/tiles/clickable-tile.component.spec.ts +++ b/src/tiles/clickable-tile.component.spec.ts @@ -9,7 +9,7 @@ import { ClickableTile } from "./clickable-tile.component"; describe("ClickableTile", () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ClickableTile, ClickableTileTest] + imports: [ClickableTileTest] }).compileComponents(); })); @@ -38,6 +38,8 @@ describe("ClickableTile", () => { template: ` Test Clickable Tile - ` + `, + imports: [ClickableTile], + standalone: true }) class ClickableTileTest {} diff --git a/src/tiles/clickable-tile.component.ts b/src/tiles/clickable-tile.component.ts index 2749bb3302..72a2add844 100644 --- a/src/tiles/clickable-tile.component.ts +++ b/src/tiles/clickable-tile.component.ts @@ -6,6 +6,8 @@ import { Optional } from "@angular/core"; import { Router } from "@angular/router"; +import { Link } from "carbon-components-angular/link"; +import { NgClass } from "@angular/common"; /** * Build application's clickable tiles using this component. Get started with importing the module: @@ -37,7 +39,9 @@ import { Router } from "@angular/router"; [attr.rel]="rel ? rel : null" [attr.aria-disabled]="disabled"> - ` + `, + standalone: true, + imports: [Link, NgClass] }) export class ClickableTile { /** diff --git a/src/tiles/clickable-tile.stories.ts b/src/tiles/clickable-tile.stories.ts index d6dbf46937..f3ff44deb4 100644 --- a/src/tiles/clickable-tile.stories.ts +++ b/src/tiles/clickable-tile.stories.ts @@ -1,16 +1,16 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { LayerModule } from "../layer"; -import { IconModule } from "../icon"; -import { TilesModule, ClickableTile } from "./"; +import { LayerDirective } from "../layer"; +import { IconDirective } from "../icon"; +import { ClickableTile } from "./"; export default { title: "Components/Tiles/Clickable", decorators: [ moduleMetadata({ imports: [ - TilesModule, - LayerModule, - IconModule + ClickableTile, + LayerDirective, + IconDirective ] }) ], diff --git a/src/tiles/expandable-tile-above.directive.ts b/src/tiles/expandable-tile-above.directive.ts index 4e8782859b..615f7699de 100644 --- a/src/tiles/expandable-tile-above.directive.ts +++ b/src/tiles/expandable-tile-above.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsAboveFold], [ibmAboveFold]" + selector: "[cdsAboveFold], [ibmAboveFold]", + standalone: true }) export class ExpandableTileAboveFoldDirective { @HostBinding("class.cds--tile-content__above-the-fold") aboveFold = true; diff --git a/src/tiles/expandable-tile-below.directive.ts b/src/tiles/expandable-tile-below.directive.ts index 60a917b3f0..da7bc1dd14 100644 --- a/src/tiles/expandable-tile-below.directive.ts +++ b/src/tiles/expandable-tile-below.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsBelowFold], [ibmBelowFold]" + selector: "[cdsBelowFold], [ibmBelowFold]", + standalone: true }) export class ExpandableTileBelowFoldDirective { @HostBinding("class.cds--tile-content__below-the-fold") belowFold = true; diff --git a/src/tiles/expandable-tile.component.ts b/src/tiles/expandable-tile.component.ts index 31bbac6aaf..bf4abb261e 100644 --- a/src/tiles/expandable-tile.component.ts +++ b/src/tiles/expandable-tile.component.ts @@ -7,6 +7,9 @@ import { } from "@angular/core"; import { I18n } from "carbon-components-angular/i18n"; import { merge } from "carbon-components-angular/utils"; +import { NgClass, NgStyle, NgTemplateOutlet, AsyncPipe } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; +import { Tile } from "./tile.component"; export interface ExpandableTileTranslations { EXPAND: string; @@ -80,7 +83,9 @@ export interface ExpandableTileTranslations { - ` + `, + standalone: true, + imports: [NgClass, NgStyle, NgTemplateOutlet, IconDirective, AsyncPipe] }) export class ExpandableTile implements AfterViewInit { /** diff --git a/src/tiles/expandable-tile.stories.ts b/src/tiles/expandable-tile.stories.ts index 3b730b3099..b2ce534ef9 100644 --- a/src/tiles/expandable-tile.stories.ts +++ b/src/tiles/expandable-tile.stories.ts @@ -1,16 +1,18 @@ import { moduleMetadata, Meta, Story } from "@storybook/angular"; -import { LayerModule } from "../layer"; -import { ButtonModule } from "../button"; -import { TilesModule, ExpandableTile } from "./"; +import { LayerDirective } from "../layer"; +import { Button } from "../button"; +import { ExpandableTile, ExpandableTileAboveFoldDirective, ExpandableTileBelowFoldDirective } from "./"; export default { title: "Components/Tiles/Expandable", decorators: [ moduleMetadata({ imports: [ - ButtonModule, - LayerModule, - TilesModule + Button, + LayerDirective, + ExpandableTile, + ExpandableTileAboveFoldDirective, + ExpandableTileBelowFoldDirective ] }) ], diff --git a/src/tiles/selection-tile.component.ts b/src/tiles/selection-tile.component.ts index 12137669e4..64f44a7566 100644 --- a/src/tiles/selection-tile.component.ts +++ b/src/tiles/selection-tile.component.ts @@ -8,6 +8,7 @@ import { AfterViewInit } from "@angular/core"; import { I18n } from "carbon-components-angular/i18n"; +import { NgClass, AsyncPipe } from "@angular/common"; @Component({ selector: "cds-selection-tile, ibm-selection-tile", @@ -40,7 +41,9 @@ import { I18n } from "carbon-components-angular/i18n";
- ` + `, + standalone: true, + imports: [NgClass, AsyncPipe] }) export class SelectionTile implements AfterViewInit { static tileCount = 0; @@ -79,6 +82,7 @@ export class SelectionTile implements AfterViewInit { /** * Internal event used to notify the containing `TileGroup` of changes. */ + // eslint-disable-next-line @angular-eslint/no-output-native @Output() change: EventEmitter = new EventEmitter(); /** @@ -129,5 +133,3 @@ export class SelectionTile implements AfterViewInit { this.change.emit(event); } } - - diff --git a/src/tiles/tile-group.component.ts b/src/tiles/tile-group.component.ts index 690b84429b..4c963cfaf3 100644 --- a/src/tiles/tile-group.component.ts +++ b/src/tiles/tile-group.component.ts @@ -15,6 +15,7 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { TileSelection } from "./tile-selection.interface"; import { Subject } from "rxjs"; import { takeUntil } from "rxjs/operators"; +import { NgTemplateOutlet } from "@angular/common"; /** * Get started with importing the module: @@ -46,7 +47,9 @@ import { takeUntil } from "rxjs/operators"; useExisting: TileGroup, multi: true } - ] + ], + standalone: true, + imports: [NgTemplateOutlet] }) export class TileGroup implements AfterContentInit, OnDestroy { static tileGroupCount = 0; diff --git a/src/tiles/tile-group.stories.ts b/src/tiles/tile-group.stories.ts index db56784089..1658c69ab3 100644 --- a/src/tiles/tile-group.stories.ts +++ b/src/tiles/tile-group.stories.ts @@ -1,16 +1,15 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { LayerModule } from "../layer"; +import { LayerDirective } from "../layer"; import { - TilesModule, - SelectionTile, - TileGroup + TileGroup, + SelectionTile } from "./"; export default { title: "Components/Tiles/Grouped", decorators: [ moduleMetadata({ - imports: [TilesModule, LayerModule] + imports: [TileGroup, SelectionTile, LayerDirective] }) ], argTypes: { diff --git a/src/tiles/tile.component.spec.ts b/src/tiles/tile.component.spec.ts index 617d37303f..d1613881a5 100644 --- a/src/tiles/tile.component.spec.ts +++ b/src/tiles/tile.component.spec.ts @@ -10,7 +10,7 @@ describe("Tile", () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [Tile] + imports: [Tile] }).compileComponents(); })); diff --git a/src/tiles/tile.component.ts b/src/tiles/tile.component.ts index d09abc5be3..7ffa5369c3 100644 --- a/src/tiles/tile.component.ts +++ b/src/tiles/tile.component.ts @@ -21,7 +21,8 @@ import { */ @Component({ selector: "cds-tile, ibm-tile", - template: `` + template: ``, + standalone: true }) export class Tile { @HostBinding("class.cds--tile") tileClass = true; diff --git a/src/tiles/tiles.module.ts b/src/tiles/tiles.module.ts index 99ced6e395..bd45a2685a 100644 --- a/src/tiles/tiles.module.ts +++ b/src/tiles/tiles.module.ts @@ -9,22 +9,22 @@ import { ExpandableTileAboveFoldDirective } from "./expandable-tile-above.direct import { ExpandableTileBelowFoldDirective } from "./expandable-tile-below.directive"; import { SelectionTile } from "./selection-tile.component"; import { TileGroup } from "./tile-group.component"; -import { I18nModule } from "carbon-components-angular/i18n"; -import { IconModule } from "carbon-components-angular/icon"; -import { LinkModule } from "carbon-components-angular/link"; +import { IconDirective } from "carbon-components-angular/icon"; + @NgModule({ - declarations: [ + exports: [ Tile, ClickableTile, ClickableTileIconDirective, - ExpandableTileAboveFoldDirective, - ExpandableTileBelowFoldDirective, ExpandableTile, SelectionTile, TileGroup ], - exports: [ + imports: [ + CommonModule, + // I18nModule, + IconDirective, Tile, ClickableTile, ClickableTileIconDirective, @@ -33,12 +33,6 @@ import { LinkModule } from "carbon-components-angular/link"; ExpandableTile, SelectionTile, TileGroup - ], - imports: [ - CommonModule, - I18nModule, - IconModule, - LinkModule ] }) export class TilesModule {} diff --git a/src/tiles/tiles.stories.ts b/src/tiles/tiles.stories.ts index 98dacd8b62..b8385b4060 100644 --- a/src/tiles/tiles.stories.ts +++ b/src/tiles/tiles.stories.ts @@ -1,16 +1,18 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { LayerModule } from "../layer"; -import { SkeletonModule } from "../skeleton"; -import { TilesModule, Tile } from "./"; +import { LayerDirective } from "../layer"; +import { SkeletonPlaceholder, SkeletonText } from "../skeleton"; +import { Tile, TileGroup } from "./"; export default { title: "Components/Tiles", decorators: [ moduleMetadata({ imports: [ - TilesModule, - LayerModule, - SkeletonModule + Tile, + TileGroup, + LayerDirective, + SkeletonPlaceholder, + SkeletonText ] }) ], diff --git a/src/timepicker-select/timepicker-select.component.spec.ts b/src/timepicker-select/timepicker-select.component.spec.ts index 3895d92ebb..4b8ddfd6cb 100644 --- a/src/timepicker-select/timepicker-select.component.spec.ts +++ b/src/timepicker-select/timepicker-select.component.spec.ts @@ -1,8 +1,6 @@ import { TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; -import { FormsModule } from "@angular/forms"; import { Component } from "@angular/core"; -import { IconModule } from "../icon/index"; import { TimePickerSelect } from "./timepicker-select.component"; @Component({ @@ -11,7 +9,11 @@ import { TimePickerSelect } from "./timepicker-select.component"; - ` + `, + standalone: true, + imports: [ + TimePickerSelect + ] }) class TimePickerSelectTest { onChange(event) {} @@ -21,13 +23,8 @@ describe("TimePickerSelect", () => { let fixture, wrapper, element, component; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - TimePickerSelect, - TimePickerSelectTest - ], imports: [ - FormsModule, - IconModule + TimePickerSelectTest ] }); }); diff --git a/src/timepicker-select/timepicker-select.component.ts b/src/timepicker-select/timepicker-select.component.ts index ce37adc419..bc645a7ecc 100644 --- a/src/timepicker-select/timepicker-select.component.ts +++ b/src/timepicker-select/timepicker-select.component.ts @@ -1,13 +1,12 @@ import { Component, Input, - Output, - EventEmitter, - HostBinding, - TemplateRef + HostBinding + } from "@angular/core"; import { Select } from "carbon-components-angular/select"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; +import { IconDirective } from "carbon-components-angular/icon"; /** * Get started with importing the module: @@ -45,7 +44,9 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms"; useExisting: TimePickerSelect, multi: true } - ] + ], + standalone: true, + imports: [IconDirective] }) export class TimePickerSelect extends Select { @HostBinding("class.cds--select") timeSelect = true; diff --git a/src/timepicker-select/timepicker-select.module.ts b/src/timepicker-select/timepicker-select.module.ts index ef28a2cd12..c587333e61 100644 --- a/src/timepicker-select/timepicker-select.module.ts +++ b/src/timepicker-select/timepicker-select.module.ts @@ -2,19 +2,17 @@ import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { TimePickerSelect } from "./timepicker-select.component"; import { SelectModule } from "carbon-components-angular/select"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; @NgModule({ - declarations: [ - TimePickerSelect - ], exports: [ TimePickerSelect ], imports: [ SelectModule, CommonModule, - IconModule + IconDirective, + TimePickerSelect ] }) export class TimePickerSelectModule { } diff --git a/src/timepicker-select/timepicker-select.stories.ts b/src/timepicker-select/timepicker-select.stories.ts index 834407ec49..80e1c3771d 100644 --- a/src/timepicker-select/timepicker-select.stories.ts +++ b/src/timepicker-select/timepicker-select.stories.ts @@ -1,13 +1,12 @@ import { FormsModule } from "@angular/forms"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { TimePickerSelectModule, TimePickerSelect } from "./"; +import { TimePickerSelect } from "./"; export default { title: "Components/Timepicker Select", decorators: [ moduleMetadata({ imports: [ - TimePickerSelectModule, FormsModule ] }) diff --git a/src/timepicker/timepicker.component.spec.ts b/src/timepicker/timepicker.component.spec.ts index 1de1f02547..d4efed05ec 100644 --- a/src/timepicker/timepicker.component.spec.ts +++ b/src/timepicker/timepicker.component.spec.ts @@ -1,5 +1,4 @@ import { TestBed } from "@angular/core/testing"; -import { FormsModule } from "@angular/forms"; import { By } from "@angular/platform-browser"; import { Component } from "@angular/core"; import { TimePicker } from "./timepicker.component"; @@ -13,7 +12,9 @@ import { TimePicker } from "./timepicker.component"; label="test" size="lg" disabled="false"> - ` + `, + standalone: true, + imports: [TimePicker] }) class TimePickerTest { value = "12:12"; @@ -24,12 +25,8 @@ describe("TimePicker", () => { let fixture, wrapper, element; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - TimePicker, - TimePickerTest - ], imports: [ - FormsModule + TimePickerTest ] }); }); diff --git a/src/timepicker/timepicker.component.ts b/src/timepicker/timepicker.component.ts index 236a910b87..412bed2410 100644 --- a/src/timepicker/timepicker.component.ts +++ b/src/timepicker/timepicker.component.ts @@ -8,6 +8,7 @@ import { HostListener } from "@angular/core"; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; /** * Get started with importing the module: @@ -80,7 +81,9 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms"; useExisting: TimePicker, multi: true } - ] + ], + standalone: true, + imports: [NgClass, NgTemplateOutlet] }) export class TimePicker implements ControlValueAccessor { /** diff --git a/src/timepicker/timepicker.module.ts b/src/timepicker/timepicker.module.ts index 749eb1874e..55d39ae82d 100644 --- a/src/timepicker/timepicker.module.ts +++ b/src/timepicker/timepicker.module.ts @@ -4,15 +4,13 @@ import { TimePicker } from "./timepicker.component"; import { TimePickerSelectModule } from "carbon-components-angular/timepicker-select"; @NgModule({ - declarations: [ - TimePicker - ], exports: [ TimePicker ], imports: [ TimePickerSelectModule, - CommonModule + CommonModule, + TimePicker ] }) export class TimePickerModule { } diff --git a/src/timepicker/timepicker.stories.ts b/src/timepicker/timepicker.stories.ts index b7aca81289..dd3f30c826 100644 --- a/src/timepicker/timepicker.stories.ts +++ b/src/timepicker/timepicker.stories.ts @@ -1,15 +1,15 @@ import { FormsModule } from "@angular/forms"; import { moduleMetadata, Meta } from "@storybook/angular"; -import { TimePickerModule, TimePicker } from "./"; -import { TimePickerSelectModule } from "../timepicker-select"; +import { TimePicker } from "./"; +import { TimePickerSelect } from "../timepicker-select"; export default { title: "Components/Timepicker", decorators: [ moduleMetadata({ imports: [ - TimePickerModule, - TimePickerSelectModule, + TimePicker, + TimePickerSelect, FormsModule ] }) diff --git a/src/toggle/toggle.component.spec.ts b/src/toggle/toggle.component.spec.ts index 01c40b6bb8..05da1dd153 100644 --- a/src/toggle/toggle.component.spec.ts +++ b/src/toggle/toggle.component.spec.ts @@ -1,7 +1,6 @@ import { ComponentFixture, TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; -import { I18nModule } from "../i18n/index"; import { Toggle } from "./toggle.component"; describe("Toggle", () => { @@ -12,8 +11,7 @@ describe("Toggle", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [Toggle], - imports: [I18nModule], + imports: [Toggle], providers: [] }); diff --git a/src/toggle/toggle.component.ts b/src/toggle/toggle.component.ts index 2069dbb164..8564413a56 100644 --- a/src/toggle/toggle.component.ts +++ b/src/toggle/toggle.component.ts @@ -10,6 +10,7 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { I18n } from "carbon-components-angular/i18n"; import { Observable } from "rxjs"; +import { NgClass, NgTemplateOutlet, AsyncPipe } from "@angular/common"; /** * @deprecated since v5 - Use boolean @@ -104,7 +105,9 @@ export enum ToggleState { useExisting: Toggle, multi: true } - ] + ], + standalone: true, + imports: [NgClass, NgTemplateOutlet, AsyncPipe] }) export class Toggle extends Checkbox { /** diff --git a/src/toggle/toggle.module.ts b/src/toggle/toggle.module.ts index e3b5531c7c..6848c60910 100644 --- a/src/toggle/toggle.module.ts +++ b/src/toggle/toggle.module.ts @@ -8,16 +8,14 @@ import { I18nModule } from "carbon-components-angular/i18n"; import { Toggle } from "./toggle.component"; @NgModule({ - declarations: [ - Toggle - ], exports: [ Toggle ], imports: [ CommonModule, FormsModule, - I18nModule + I18nModule, + Toggle ] }) export class ToggleModule { } diff --git a/src/toggle/toggle.stories.ts b/src/toggle/toggle.stories.ts index bbe6291158..fa1b65bc50 100644 --- a/src/toggle/toggle.stories.ts +++ b/src/toggle/toggle.stories.ts @@ -1,13 +1,13 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { ToggleModule, Toggle } from "./"; +import { Toggle } from "./"; export default { title: "Components/Toggle", decorators: [ moduleMetadata({ - imports: [ToggleModule] + imports: [Toggle] }) ], component: Toggle diff --git a/src/toggletip/toggletip-action.directive.ts b/src/toggletip/toggletip-action.directive.ts index 422226c0a8..47a3d06953 100644 --- a/src/toggletip/toggletip-action.directive.ts +++ b/src/toggletip/toggletip-action.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsToggletipAction], [ibmToggletipAction]" + selector: "[cdsToggletipAction], [ibmToggletipAction]", + standalone: true }) export class ToggletipAction { @HostBinding("class.cds--toggletip-actions") toggleTipActions = true; diff --git a/src/toggletip/toggletip-button.directive.ts b/src/toggletip/toggletip-button.directive.ts index 4618dc9701..fd87ee578a 100644 --- a/src/toggletip/toggletip-button.directive.ts +++ b/src/toggletip/toggletip-button.directive.ts @@ -5,7 +5,8 @@ import { } from "@angular/core"; @Directive({ - selector: "[cdsToggletipButton], [ibmToggletipButton]" + selector: "[cdsToggletipButton], [ibmToggletipButton]", + standalone: true }) export class ToggletipButton { @HostBinding("class.cds--toggletip-button") toggletipButton = true; diff --git a/src/toggletip/toggletip-content.directive.ts b/src/toggletip/toggletip-content.directive.ts index 4e5b898a5a..59822830c1 100644 --- a/src/toggletip/toggletip-content.directive.ts +++ b/src/toggletip/toggletip-content.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsToggletipContent], [ibmToggletipContent]" + selector: "[cdsToggletipContent], [ibmToggletipContent]", + standalone: true }) export class ToggletipContent { @HostBinding("class.cds--toggletip-content") toggletipContent = true; diff --git a/src/toggletip/toggletip-label.directive.ts b/src/toggletip/toggletip-label.directive.ts index 0ac5eff0b9..ccf3bd6bd2 100644 --- a/src/toggletip/toggletip-label.directive.ts +++ b/src/toggletip/toggletip-label.directive.ts @@ -1,7 +1,8 @@ import { Directive, HostBinding } from "@angular/core"; @Directive({ - selector: "[cdsToggletipLabel], [ibmToggletipLabel]" + selector: "[cdsToggletipLabel], [ibmToggletipLabel]", + standalone: true }) export class ToggletipLabel { @HostBinding("class.cds--toggletip-label") toggleTipLabel = true; diff --git a/src/toggletip/toggletip.component.spec.ts b/src/toggletip/toggletip.component.spec.ts index d3ff9fceb3..99f64465eb 100644 --- a/src/toggletip/toggletip.component.spec.ts +++ b/src/toggletip/toggletip.component.spec.ts @@ -19,7 +19,6 @@ import { ToggletipContent, ToggletipLabel } from "./"; -import { PopoverContent } from "../popover"; @Component({ template: ` @@ -36,7 +35,9 @@ import { PopoverContent } from "../popover"; - ` + `, + imports: [Toggletip, ToggletipContent, ToggletipButton, ToggletipAction, ToggletipLabel], + standalone: true }) class TestToggletipComponent { @Input() isOpen = false; @@ -54,17 +55,10 @@ describe("Toggletip", () => { beforeEach(() => { TestBed.configureTestingModule({ - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [ - TestToggletipComponent, - Toggletip, - ToggletipAction, - ToggletipButton, - ToggletipContent, - ToggletipLabel, - // Need to import popover content since we use the component in toggletip - PopoverContent - ] + imports: [ + TestToggletipComponent + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }); fixture = TestBed.createComponent(TestToggletipComponent); component = fixture.componentInstance; diff --git a/src/toggletip/toggletip.component.ts b/src/toggletip/toggletip.component.ts index d2547056fa..18160beaeb 100644 --- a/src/toggletip/toggletip.component.ts +++ b/src/toggletip/toggletip.component.ts @@ -13,14 +13,14 @@ import { Renderer2 } from "@angular/core"; import { fromEvent, Subscription } from "rxjs"; -import { PopoverContainer } from "carbon-components-angular/popover"; +import { PopoverContainer, PopoverContent } from "carbon-components-angular/popover"; import { ToggletipButton } from "./toggletip-button.directive"; /** * Get started with importing the module: * * ```typescript - * import { ToggletipModule } from 'carbon-components-angular'; + * import { Toggletip } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-toggletip--basic) @@ -33,7 +33,9 @@ import { ToggletipButton } from "./toggletip-button.directive"; - ` + `, + standalone: true, + imports: [PopoverContent] }) export class Toggletip extends PopoverContainer implements AfterViewInit, OnDestroy { static toggletipCounter = 0; diff --git a/src/toggletip/toggletip.module.ts b/src/toggletip/toggletip.module.ts index 8d5831699d..039104eccd 100644 --- a/src/toggletip/toggletip.module.ts +++ b/src/toggletip/toggletip.module.ts @@ -10,20 +10,21 @@ import { ToggletipButton } from "./toggletip-button.directive"; import { ToggletipContent } from "./toggletip-content.directive"; @NgModule({ - declarations: [ + exports: [ Toggletip, ToggletipLabel, ToggletipAction, ToggletipButton, ToggletipContent ], - exports: [ + imports: [ + CommonModule, + PopoverModule, Toggletip, ToggletipLabel, ToggletipAction, ToggletipButton, ToggletipContent - ], - imports: [CommonModule, PopoverModule] + ] }) export class ToggletipModule {} diff --git a/src/toggletip/toggletip.stories.ts b/src/toggletip/toggletip.stories.ts index ae025a3f53..96062b095e 100644 --- a/src/toggletip/toggletip.stories.ts +++ b/src/toggletip/toggletip.stories.ts @@ -1,8 +1,7 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { LinkModule } from "../link"; -import { ButtonModule } from "../button"; +import { Link } from "../link"; +import { Button } from "../button"; import { - ToggletipModule, Toggletip, ToggletipAction, ToggletipButton, @@ -15,9 +14,13 @@ export default { decorators: [ moduleMetadata({ imports: [ - ToggletipModule, - LinkModule, - ButtonModule + Toggletip, + ToggletipAction, + ToggletipButton, + ToggletipContent, + ToggletipLabel, + Link, + Button ] }) ], diff --git a/src/tooltip/definition-tooltip.component.spec.ts b/src/tooltip/definition-tooltip.component.spec.ts index 16794438a5..bcad66acc9 100644 --- a/src/tooltip/definition-tooltip.component.spec.ts +++ b/src/tooltip/definition-tooltip.component.spec.ts @@ -12,7 +12,9 @@ import { TooltipDefinition } from "."; [autoAlign]="autoAlign"> definition - ` + `, + imports: [TooltipDefinition], + standalone: true }) class TestTTDefinitionComponent { @Input() isOpen = false; @@ -28,7 +30,7 @@ describe("Definition tooltip", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TestTTDefinitionComponent, TooltipDefinition] + imports: [TestTTDefinitionComponent] }); fixture = TestBed.createComponent(TestTTDefinitionComponent); component = fixture.componentInstance; diff --git a/src/tooltip/definition-tooptip.component.ts b/src/tooltip/definition-tooptip.component.ts index 3dd5aa8fd4..42a10a6837 100644 --- a/src/tooltip/definition-tooptip.component.ts +++ b/src/tooltip/definition-tooptip.component.ts @@ -10,12 +10,13 @@ import { TemplateRef } from "@angular/core"; import { PopoverContainer } from "carbon-components-angular/popover"; +import { NgTemplateOutlet } from "@angular/common"; /** * Get started with importing the module: * * ```typescript - * import { TooltipModule } from 'carbon-components-angular'; + * import { Tooltip } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-tooltip-definition--basic) @@ -57,7 +58,9 @@ import { PopoverContainer } from "carbon-components-angular/popover"; } } - ` + `, + standalone: true, + imports: [NgTemplateOutlet] }) export class TooltipDefinition extends PopoverContainer { static tooltipCount = 0; diff --git a/src/tooltip/definition-tooptip.stories.ts b/src/tooltip/definition-tooptip.stories.ts index 5da4f58939..0b614f9caa 100644 --- a/src/tooltip/definition-tooptip.stories.ts +++ b/src/tooltip/definition-tooptip.stories.ts @@ -1,11 +1,11 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { TooltipModule, TooltipDefinition } from "./"; +import { Tooltip, TooltipDefinition } from "./"; export default { title: "Components/Definition Tooltip", decorators: [ moduleMetadata({ - imports: [TooltipModule] + imports: [Tooltip] }) ], parameters: { diff --git a/src/tooltip/tooltip.component.spec.ts b/src/tooltip/tooltip.component.spec.ts index 5e094c6d50..a6bae86570 100644 --- a/src/tooltip/tooltip.component.spec.ts +++ b/src/tooltip/tooltip.component.spec.ts @@ -14,7 +14,9 @@ import { Tooltip } from "./tooltip.component"; [autoAlign]="autoAlign"> - ` + `, + imports: [Tooltip], + standalone: true }) class TestTooltipComponent { @Input() isOpen = false; @@ -31,7 +33,7 @@ describe("Tooltip", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TestTooltipComponent, Tooltip] + imports: [TestTooltipComponent] }); fixture = TestBed.createComponent(TestTooltipComponent); component = fixture.componentInstance; diff --git a/src/tooltip/tooltip.component.ts b/src/tooltip/tooltip.component.ts index 8c4845db63..a50fe1f70c 100644 --- a/src/tooltip/tooltip.component.ts +++ b/src/tooltip/tooltip.component.ts @@ -15,12 +15,13 @@ import { ViewChild } from "@angular/core"; import { PopoverContainer } from "carbon-components-angular/popover"; +import { NgTemplateOutlet } from "@angular/common"; /** * Get started with importing the module: * * ```typescript - * import { TooltipModule } from 'carbon-components-angular'; + * import { Tooltip } from 'carbon-components-angular'; * ``` * * [See demo](../../?path=/story/components-tooltip--basic) @@ -55,7 +56,9 @@ import { PopoverContainer } from "carbon-components-angular/popover"; } } - ` + `, + standalone: true, + imports: [NgTemplateOutlet] }) export class Tooltip extends PopoverContainer implements OnChanges, AfterContentChecked { static tooltipCount = 0; diff --git a/src/tooltip/tooltip.module.ts b/src/tooltip/tooltip.module.ts index 04548322b7..9cdb5693cb 100644 --- a/src/tooltip/tooltip.module.ts +++ b/src/tooltip/tooltip.module.ts @@ -6,14 +6,15 @@ import { Tooltip } from "./tooltip.component"; import { TooltipDefinition } from "./definition-tooptip.component"; @NgModule({ - declarations: [ + exports: [ Tooltip, TooltipDefinition ], - exports: [ + imports: [ + CommonModule, + PopoverModule, Tooltip, TooltipDefinition - ], - imports: [CommonModule, PopoverModule] + ] }) export class TooltipModule {} diff --git a/src/tooltip/tooltip.stories.ts b/src/tooltip/tooltip.stories.ts index 8da67756f0..d55bf526b7 100644 --- a/src/tooltip/tooltip.stories.ts +++ b/src/tooltip/tooltip.stories.ts @@ -1,11 +1,11 @@ import { moduleMetadata, Meta } from "@storybook/angular"; -import { TooltipModule, Tooltip } from "./"; +import { Tooltip } from "./"; export default { title: "Components/Tooltip", decorators: [ moduleMetadata({ - imports: [TooltipModule] + imports: [Tooltip] }) ], args: { diff --git a/src/treeview/stories/app-treeview-icons.component.ts b/src/treeview/stories/app-treeview-icons.component.ts index 9ac2351fca..fd4e150227 100644 --- a/src/treeview/stories/app-treeview-icons.component.ts +++ b/src/treeview/stories/app-treeview-icons.component.ts @@ -1,5 +1,7 @@ import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { Node } from "../tree-node.types"; +import { IconDirective } from "../../icon"; +import { TreeViewComponent } from "../"; @Component({ selector: "app-treeview-icon-component", @@ -13,7 +15,9 @@ import { Node } from "../tree-node.types"; - ` + `, + imports: [IconDirective, TreeViewComponent], + standalone: true }) export class IconTreeviewDemoComponent implements AfterViewInit { tree: Node[] = []; diff --git a/src/treeview/tree-node.component.ts b/src/treeview/tree-node.component.ts index 009957e416..3efa5ce402 100644 --- a/src/treeview/tree-node.component.ts +++ b/src/treeview/tree-node.component.ts @@ -5,13 +5,14 @@ import { EventEmitter, OnInit, OnDestroy, - AfterContentInit, TemplateRef, AfterContentChecked } from "@angular/core"; import { Subscription } from "rxjs"; import { TreeViewService } from "./treeview.service"; import { EventOnNode, Node } from "./tree-node.types"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; @Component({ selector: "cds-tree-node", @@ -114,7 +115,9 @@ import { EventOnNode, Node } from "./tree-node.types"; } - ` + `, + standalone: true, + imports: [NgClass, IconDirective, NgTemplateOutlet] }) export class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy { static treeNodeCount = 0; diff --git a/src/treeview/treeview.component.spec.ts b/src/treeview/treeview.component.spec.ts index a80c864a65..f848ab832f 100644 --- a/src/treeview/treeview.component.spec.ts +++ b/src/treeview/treeview.component.spec.ts @@ -13,7 +13,9 @@ import { TreeNodeComponent } from "./tree-node.component"; [tree]="tree" (selected)="onSelect()"> - ` + `, + imports: [TreeViewComponent, TreeNodeComponent], + standalone: true }) class TreeviewTestComponent { tree = [ @@ -59,11 +61,7 @@ describe("Treeview", () => { beforeEach(async () => { TestBed.configureTestingModule({ - declarations: [ - TreeviewTestComponent, - TreeNodeComponent, - TreeViewComponent - ] + imports: [TreeviewTestComponent] }).compileComponents(); fixture = TestBed.createComponent(TreeviewTestComponent); @@ -117,4 +115,3 @@ describe("Treeview", () => { expect(selectSpy).toHaveBeenCalled(); })); }); - diff --git a/src/treeview/treeview.component.ts b/src/treeview/treeview.component.ts index 32e561ac8e..5f80963cc5 100644 --- a/src/treeview/treeview.component.ts +++ b/src/treeview/treeview.component.ts @@ -1,4 +1,4 @@ -import { DOCUMENT } from "@angular/common"; +import { DOCUMENT, NgTemplateOutlet, NgClass } from "@angular/common"; import { Component, Input, @@ -15,6 +15,7 @@ import { import { Subscription } from "rxjs"; import { EventOnNode, Node } from "./tree-node.types"; import { TreeViewService } from "./treeview.service"; +import { TreeNodeComponent } from "./tree-node.component"; /** * Get started with importing the module: @@ -63,7 +64,9 @@ import { TreeViewService } from "./treeview.service"; } `, - providers: [TreeViewService] + providers: [TreeViewService], + standalone: true, + imports: [NgTemplateOutlet, NgClass, TreeNodeComponent] }) export class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy { /** @@ -102,6 +105,8 @@ export class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy { } @Output() select = new EventEmitter(); + + // eslint-disable-next-line @angular-eslint/no-output-native @Output() toggle = new EventEmitter(); @ViewChild("treeWrapper") root: ElementRef; diff --git a/src/treeview/treeview.module.ts b/src/treeview/treeview.module.ts index c5f220c965..26ada42e8b 100644 --- a/src/treeview/treeview.module.ts +++ b/src/treeview/treeview.module.ts @@ -1,14 +1,13 @@ import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; -import { IconModule } from "carbon-components-angular/icon"; +import { IconDirective } from "carbon-components-angular/icon"; import { TreeViewComponent } from "./treeview.component"; import { TreeNodeComponent } from "./tree-node.component"; @NgModule({ - declarations: [TreeViewComponent, TreeNodeComponent], exports: [TreeViewComponent, TreeNodeComponent], - imports: [CommonModule, IconModule] + imports: [CommonModule, IconDirective, TreeViewComponent, TreeNodeComponent] }) export class TreeviewModule {} diff --git a/src/treeview/treeview.stories.ts b/src/treeview/treeview.stories.ts index 6a0524baa8..3d3a8e8504 100644 --- a/src/treeview/treeview.stories.ts +++ b/src/treeview/treeview.stories.ts @@ -1,14 +1,14 @@ import { CommonModule } from "@angular/common"; import { Meta, moduleMetadata } from "@storybook/angular"; -import { IconModule } from "../icon"; -import { TreeNodeComponent, TreeViewComponent, TreeviewModule } from "./"; +import { IconDirective } from "../icon"; +import { TreeNodeComponent, TreeViewComponent } from "./"; import { IconTreeviewDemoComponent } from "./stories/app-treeview-icons.component"; export default { title: "Components/Tree view", decorators: [ moduleMetadata({ - imports: [CommonModule, TreeviewModule, IconModule], + imports: [CommonModule, TreeViewComponent, IconDirective, TreeNodeComponent], declarations: [IconTreeviewDemoComponent] }) ], diff --git a/src/ui-shell/header/hamburger.component.ts b/src/ui-shell/header/hamburger.component.ts index da436c68e7..ad2584a001 100644 --- a/src/ui-shell/header/hamburger.component.ts +++ b/src/ui-shell/header/hamburger.component.ts @@ -5,6 +5,8 @@ import { Input } from "@angular/core"; import { I18n } from "carbon-components-angular/i18n"; +import { NgClass } from "@angular/common"; +import { IconDirective } from "carbon-components-angular/icon"; /** * A toggle for the side navigation @@ -25,7 +27,9 @@ import { I18n } from "carbon-components-angular/i18n"; } - ` + `, + standalone: true, + imports: [NgClass, IconDirective] }) export class Hamburger { /** diff --git a/src/ui-shell/header/header-action.component.ts b/src/ui-shell/header/header-action.component.ts index 25cd636afd..4bb1859a87 100644 --- a/src/ui-shell/header/header-action.component.ts +++ b/src/ui-shell/header/header-action.component.ts @@ -5,7 +5,7 @@ import { EventEmitter, TemplateRef } from "@angular/core"; -import { BaseIconButton } from "carbon-components-angular/button"; +import { BaseIconButton, IconButton } from "carbon-components-angular/button"; /** * Contained by `HeaderGlobal`. Generally used to trigger `Panel`s @@ -32,7 +32,9 @@ import { BaseIconButton } from "carbon-components-angular/button"; }"> - ` + `, + standalone: true, + imports: [IconButton] }) export class HeaderAction extends BaseIconButton { /** diff --git a/src/ui-shell/header/header-global.component.ts b/src/ui-shell/header/header-global.component.ts index ac286331d3..81ec2616ee 100644 --- a/src/ui-shell/header/header-global.component.ts +++ b/src/ui-shell/header/header-global.component.ts @@ -7,7 +7,8 @@ import { Component, HostBinding } from "@angular/core"; selector: "cds-header-global, ibm-header-global", template: ` - ` + `, + standalone: true }) export class HeaderGlobal { @HostBinding("class.cds--header__global") hostClass = true; diff --git a/src/ui-shell/header/header-item.component.ts b/src/ui-shell/header/header-item.component.ts index 107c85a54e..1c64ff9a2d 100644 --- a/src/ui-shell/header/header-item.component.ts +++ b/src/ui-shell/header/header-item.component.ts @@ -7,7 +7,8 @@ import { HostBinding } from "@angular/core"; import { DomSanitizer } from "@angular/platform-browser"; -import { Router } from "@angular/router"; +import { Router, RouterLinkActive, RouterLink } from "@angular/router"; +import { NgClass, NgTemplateOutlet } from "@angular/common"; /** * Individual item in the header. May be used a direct child of `HeaderNavigation` or `HeaderMenu` @@ -25,7 +26,7 @@ import { Router } from "@angular/router"; [ngClass]="{'cds--header__menu-item--current' : isCurrentPage}" [href]="href" (click)="navigate($event)"> - + } @else { - + } `, @@ -43,7 +44,10 @@ import { Router } from "@angular/router"; :host { display: list-item; } - `] + `], + standalone: true, + imports: [NgClass, NgTemplateOutlet, RouterLinkActive, RouterLink], + providers: [Router] }) export class HeaderItem { @HostBinding("attr.role") role = "listitem"; @@ -67,7 +71,7 @@ export class HeaderItem { /** * String or array of string class names to apply when active */ - @Input() activeLinkClass: string | string[]; + @Input() activeLinkClass: string | string[] = ""; /** * Applies selected styles to the item if a user sets this to true. diff --git a/src/ui-shell/header/header-menu.component.ts b/src/ui-shell/header/header-menu.component.ts index 7d2746007a..37160b2a81 100644 --- a/src/ui-shell/header/header-menu.component.ts +++ b/src/ui-shell/header/header-menu.component.ts @@ -8,6 +8,8 @@ import { } from "@angular/core"; import { DomSanitizer } from "@angular/platform-browser"; import { HeaderItemInterface } from "./header-navigation-items.interface"; +import { NgTemplateOutlet } from "@angular/common"; +import { HeaderItem } from "./header-item.component"; /** * Dropdown menu container for navigation items. @@ -47,7 +49,9 @@ import { HeaderItemInterface } from "./header-navigation-items.interface"; :host { display: list-item; } - `] + `], + standalone: true, + imports: [NgTemplateOutlet, HeaderItem] }) export class HeaderMenu { @HostBinding("class.cds--header__submenu") subMenu = true; diff --git a/src/ui-shell/header/header-navigation.component.ts b/src/ui-shell/header/header-navigation.component.ts index 58e4b6798c..d72661c510 100644 --- a/src/ui-shell/header/header-navigation.component.ts +++ b/src/ui-shell/header/header-navigation.component.ts @@ -4,6 +4,8 @@ import { Input } from "@angular/core"; import { NavigationItem } from "./header-navigation-items.interface"; +import { HeaderItem } from "./header-item.component"; +import { HeaderMenu } from "./header-menu.component"; /** * Container for header navigation items */ @@ -34,7 +36,9 @@ import { NavigationItem } from "./header-navigation-items.interface"; } - ` + `, + standalone: true, + imports: [HeaderItem, HeaderMenu] }) export class HeaderNavigation { @HostBinding("style.height.%") height = 100; diff --git a/src/ui-shell/header/header.component.spec.ts b/src/ui-shell/header/header.component.spec.ts index 059176ab69..4f71c71427 100644 --- a/src/ui-shell/header/header.component.spec.ts +++ b/src/ui-shell/header/header.component.spec.ts @@ -2,7 +2,6 @@ import { Component } from "@angular/core"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; -import { I18nModule } from "../../i18n/index"; import { Header } from "./header.component"; import { Hamburger } from "../index"; import { RouterModule } from "@angular/router"; @@ -17,7 +16,9 @@ import { RouterModule } from "@angular/router"; - ` + `, + standalone: true, + imports: [Header, Hamburger] }) class HamburgerTest { } @@ -28,8 +29,7 @@ describe("UI Shell Header", () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [Hamburger, HamburgerTest, Header], - imports: [I18nModule, RouterModule], + imports: [HamburgerTest], providers: [] }); diff --git a/src/ui-shell/header/header.component.ts b/src/ui-shell/header/header.component.ts index 2ba246351a..a80800fb9d 100644 --- a/src/ui-shell/header/header.component.ts +++ b/src/ui-shell/header/header.component.ts @@ -7,8 +7,9 @@ import { TemplateRef } from "@angular/core"; import { DomSanitizer } from "@angular/platform-browser"; -import { Router } from "@angular/router"; -import { I18n } from "carbon-components-angular/i18n"; +import { Router, RouterLink } from "@angular/router"; +import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n"; +import { NgTemplateOutlet, AsyncPipe } from "@angular/common"; /** * A fixed header and navigation. @@ -54,7 +55,10 @@ import { I18n } from "carbon-components-angular/i18n"; } - ` + `, + standalone: true, + imports: [NgTemplateOutlet, RouterLink, AsyncPipe], + providers: [I18N_SERVICE_PROVIDER, Router] }) export class Header { /** diff --git a/src/ui-shell/header/header.module.ts b/src/ui-shell/header/header.module.ts index 2e85545038..514959f9b1 100644 --- a/src/ui-shell/header/header.module.ts +++ b/src/ui-shell/header/header.module.ts @@ -28,7 +28,12 @@ export { }; @NgModule({ - declarations: [ + imports: [ + CommonModule, + ButtonModule, + I18nModule, + IconModule, + RouterModule, Header, HeaderItem, HeaderMenu, @@ -37,13 +42,6 @@ export { HeaderAction, Hamburger ], - imports: [ - CommonModule, - ButtonModule, - I18nModule, - IconModule, - RouterModule - ], exports: [ Header, HeaderItem, diff --git a/src/ui-shell/header/index.ts b/src/ui-shell/header/index.ts new file mode 100644 index 0000000000..7645ef4f97 --- /dev/null +++ b/src/ui-shell/header/index.ts @@ -0,0 +1,8 @@ +export * from "./hamburger.component"; +export * from "./header-action.component"; +export * from "./header-global.component"; +export * from "./header-item.component"; +export * from "./header-menu.component"; +export * from "./header-navigation-items.interface"; +export * from "./header-navigation.component"; +export * from "./header.component"; diff --git a/src/ui-shell/index.ts b/src/ui-shell/index.ts index 7533f0e13a..6601f43412 100644 --- a/src/ui-shell/index.ts +++ b/src/ui-shell/index.ts @@ -1,4 +1,3 @@ -export * from "./header/header.module"; -export * from "./sidenav/sidenav.module"; -export * from "./panel/panel.module"; -export * from "./ui-shell.module"; +export * from "./header"; +export * from "./sidenav"; +export * from "./panel"; diff --git a/src/ui-shell/panel/index.ts b/src/ui-shell/panel/index.ts new file mode 100644 index 0000000000..01550844aa --- /dev/null +++ b/src/ui-shell/panel/index.ts @@ -0,0 +1,3 @@ +export * from "./panel.component"; +export * from "./switcher-list.component"; +export * from "./switcher-list-item.component"; diff --git a/src/ui-shell/panel/panel.component.ts b/src/ui-shell/panel/panel.component.ts index abfcfdb4dd..b00cf56e42 100644 --- a/src/ui-shell/panel/panel.component.ts +++ b/src/ui-shell/panel/panel.component.ts @@ -1,4 +1,5 @@ import { Component, Input } from "@angular/core"; +import { NgClass } from "@angular/common"; /** * `Panel` is a component that can be used to display content on the right side of the screen. @@ -15,7 +16,9 @@ import { Component, Input } from "@angular/core"; }"> - ` + `, + standalone: true, + imports: [NgClass] }) export class Panel { /** diff --git a/src/ui-shell/panel/panel.module.ts b/src/ui-shell/panel/panel.module.ts index 4843b1c6c5..c61e1538a8 100644 --- a/src/ui-shell/panel/panel.module.ts +++ b/src/ui-shell/panel/panel.module.ts @@ -14,12 +14,13 @@ export { }; @NgModule({ - declarations: [ + imports: [ + CommonModule, + I18nModule, Panel, SwitcherList, SwitcherListItem ], - imports: [CommonModule, I18nModule], exports: [ Panel, SwitcherList, diff --git a/src/ui-shell/panel/switcher-list-item.component.ts b/src/ui-shell/panel/switcher-list-item.component.ts index 45f6ad230f..947229fd20 100644 --- a/src/ui-shell/panel/switcher-list-item.component.ts +++ b/src/ui-shell/panel/switcher-list-item.component.ts @@ -8,6 +8,7 @@ import { } from "@angular/core"; import { DomSanitizer, SafeUrl } from "@angular/platform-browser"; import { Router } from "@angular/router"; +import { NgClass } from "@angular/common"; /** * Represents an item in a switcher list. @@ -25,7 +26,9 @@ import { Router } from "@angular/router"; (click)="navigate($event)"> - ` + `, + standalone: true, + imports: [NgClass] }) export class SwitcherListItem { /** diff --git a/src/ui-shell/panel/switcher-list.component.ts b/src/ui-shell/panel/switcher-list.component.ts index 8a535b630d..a625907105 100644 --- a/src/ui-shell/panel/switcher-list.component.ts +++ b/src/ui-shell/panel/switcher-list.component.ts @@ -20,7 +20,8 @@ import { Component, HostBinding } from "@angular/core"; :host { display: block; } - `] + `], + standalone: true }) export class SwitcherList { @HostBinding("class.cds--switcher") switcher = true; diff --git a/src/ui-shell/sidenav/index.ts b/src/ui-shell/sidenav/index.ts new file mode 100644 index 0000000000..047122c408 --- /dev/null +++ b/src/ui-shell/sidenav/index.ts @@ -0,0 +1,5 @@ +export * from "./routerlink-extended.directive"; +export * from "./sidenav-item.component"; +export * from "./sidenav-item.interface"; +export * from "./sidenav-menu.component"; +export * from "./sidenav.component"; diff --git a/src/ui-shell/sidenav/routerlink-extended.directive.ts b/src/ui-shell/sidenav/routerlink-extended.directive.ts index a78e9dde12..9b55639222 100644 --- a/src/ui-shell/sidenav/routerlink-extended.directive.ts +++ b/src/ui-shell/sidenav/routerlink-extended.directive.ts @@ -4,7 +4,8 @@ import keys from "lodash-es/keys"; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector - selector: "[routerLink]" + selector: "[routerLink]", + standalone: true }) export class RouterLinkExtendedDirective extends RouterLink implements OnChanges { @Input() routeExtras: NavigationExtras; diff --git a/src/ui-shell/sidenav/side-nav.component.spec.ts b/src/ui-shell/sidenav/side-nav.component.spec.ts index 9e0ba91c23..dedf2ac082 100644 --- a/src/ui-shell/sidenav/side-nav.component.spec.ts +++ b/src/ui-shell/sidenav/side-nav.component.spec.ts @@ -3,7 +3,6 @@ import { TestBed, waitForAsync } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { CommonModule } from "@angular/common"; -import { I18nModule } from "./../../i18n/index"; import { SideNav } from "./sidenav.component"; import { SideNavItem } from "./sidenav-item.component"; import { SideNavMenu } from "./sidenav-menu.component"; @@ -12,7 +11,9 @@ import { RouterModule } from "@angular/router"; @Component({ selector: "app-foo", - template: "

foo

" + template: "

foo

", + standalone: true, + imports: [CommonModule] }) class FooComponent { } @@ -26,7 +27,9 @@ class FooComponent { } (navigation)="onNavigation($event)"> - ` + `, + standalone: true, + imports: [SideNav, SideNavItem, SideNavMenu, RouterModule] }) class SideNavTest { route = ["foo"]; @@ -43,29 +46,17 @@ describe("SideNav", () => { let fixture, wrapper, element; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ - SideNav, - SideNavItem, - SideNavMenu, - RouterLinkExtendedDirective, - SideNavTest, - FooComponent - ], imports: [ - CommonModule, - RouterModule.forRoot( - [ - { - path: "foo", - component: FooComponent - } - ], + RouterModule.forRoot([ { - initialNavigation: "disabled", - useHash: true + path: "foo", + component: FooComponent } - ), - I18nModule + ], { + initialNavigation: "disabled", + useHash: true + }), + SideNavTest ] }); }); diff --git a/src/ui-shell/sidenav/sidenav-item.component.ts b/src/ui-shell/sidenav/sidenav-item.component.ts index 380b228c27..5c050a6caa 100644 --- a/src/ui-shell/sidenav/sidenav-item.component.ts +++ b/src/ui-shell/sidenav/sidenav-item.component.ts @@ -9,7 +9,9 @@ import { SimpleChanges } from "@angular/core"; import { DomSanitizer } from "@angular/platform-browser"; -import { Router } from "@angular/router"; +import { Router, RouterLinkActive, RouterLink } from "@angular/router"; +import { RouterLinkExtendedDirective } from "./routerlink-extended.directive"; +import { NgTemplateOutlet, NgClass } from "@angular/common"; /** * `SideNavItem` can either be a child of `SideNav` or `SideNavMenu` @@ -56,7 +58,9 @@ import { Router } from "@angular/router"; :host { display: list-item; } - `] + `], + standalone: true, + imports: [RouterLinkActive, RouterLink, RouterLinkExtendedDirective, NgTemplateOutlet, NgClass] }) export class SideNavItem implements OnChanges { /** diff --git a/src/ui-shell/sidenav/sidenav-item.interface.ts b/src/ui-shell/sidenav/sidenav-item.interface.ts index 66f38d61b5..08f792e569 100644 --- a/src/ui-shell/sidenav/sidenav-item.interface.ts +++ b/src/ui-shell/sidenav/sidenav-item.interface.ts @@ -1,4 +1,4 @@ -import { HeaderItemInterface } from "../header/header.module"; +import { HeaderItemInterface } from "../header"; export interface SideNavItemInterface extends HeaderItemInterface { isSubMenu?: boolean; diff --git a/src/ui-shell/sidenav/sidenav-menu.component.ts b/src/ui-shell/sidenav/sidenav-menu.component.ts index d379120a80..a3226fc2f8 100644 --- a/src/ui-shell/sidenav/sidenav-menu.component.ts +++ b/src/ui-shell/sidenav/sidenav-menu.component.ts @@ -54,7 +54,9 @@ import { SideNavItemInterface } from "./sidenav-item.interface"; } - ` + `, + standalone: true, + imports: [SideNavItem] }) export class SideNavMenu implements AfterContentInit, OnDestroy { @HostBinding("class.cds--side-nav__item") navItem = true; diff --git a/src/ui-shell/sidenav/sidenav.component.ts b/src/ui-shell/sidenav/sidenav.component.ts index d4baef6616..97d71ec7d1 100644 --- a/src/ui-shell/sidenav/sidenav.component.ts +++ b/src/ui-shell/sidenav/sidenav.component.ts @@ -6,6 +6,9 @@ import { } from "@angular/core"; import { I18n } from "carbon-components-angular/i18n"; import { NavigationItem } from "../header/header-navigation-items.interface"; +import { SideNavItem } from "./sidenav-item.component"; +import { SideNavMenu } from "./sidenav-menu.component"; +import { AsyncPipe } from "@angular/common"; /** * `Sidenav` is a fixed left navigation that may contain `SideNavItem`s or `SideNavMenu`s @@ -82,7 +85,9 @@ import { NavigationItem } from "../header/header-navigation-items.interface"; `, - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + standalone: true, + imports: [SideNavItem, SideNavMenu, AsyncPipe] }) export class SideNav { @HostBinding("class.cds--side-nav") hostClass = true; diff --git a/src/ui-shell/sidenav/sidenav.module.ts b/src/ui-shell/sidenav/sidenav.module.ts index 320c325866..b7b82ab4f7 100644 --- a/src/ui-shell/sidenav/sidenav.module.ts +++ b/src/ui-shell/sidenav/sidenav.module.ts @@ -18,13 +18,15 @@ export { }; @NgModule({ - declarations: [ + imports: [ + CommonModule, + I18nModule, + RouterModule, SideNav, SideNavItem, SideNavMenu, RouterLinkExtendedDirective ], - imports: [CommonModule, I18nModule, RouterModule], exports: [ SideNav, SideNavItem, diff --git a/src/ui-shell/stories/header-fluid.component.ts b/src/ui-shell/stories/header-fluid.component.ts index 527da8a8fd..f78e272505 100644 --- a/src/ui-shell/stories/header-fluid.component.ts +++ b/src/ui-shell/stories/header-fluid.component.ts @@ -1,5 +1,5 @@ import { Component, Input } from "@angular/core"; -import { NavigationItem } from "../"; +import { Hamburger, HeaderNavigation, NavigationItem, SideNav } from "../"; @Component({ selector: "app-bar", @@ -25,7 +25,8 @@ export class FooComponent { } } - ` + `, + imports: [SideNav, HeaderNavigation, Hamburger] }) export class HeaderFluidComponent { @Input() headerItems: NavigationItem[]; diff --git a/src/ui-shell/ui-shell.stories.ts b/src/ui-shell/ui-shell.stories.ts index 2f7d444f9a..a7698c84ca 100644 --- a/src/ui-shell/ui-shell.stories.ts +++ b/src/ui-shell/ui-shell.stories.ts @@ -1,16 +1,19 @@ import { importProvidersFrom } from "@angular/core"; import { RouterModule } from "@angular/router"; import { moduleMetadata, Meta, applicationConfig } from "@storybook/angular"; -import { SearchModule } from "../search"; -import { IconModule } from "../icon"; -import { ThemeModule } from "../theme"; -import { UIShellModule } from "./"; +import { Search } from "../search"; +import { IconDirective } from "../icon"; +import { ThemeDirective } from "../theme"; import { BarComponent, FooComponent, HeaderFluidComponent } from "./stories"; +import { Header, Hamburger, HeaderAction, HeaderItem, HeaderNavigation, HeaderMenu, HeaderGlobal } from "./header"; +import { SideNav, SideNavItem, SideNavMenu } from "./sidenav"; +import { CommonModule } from "@angular/common"; +import { Panel, SwitcherList, SwitcherListItem } from "./panel"; export default { title: "Components/UI Shell", @@ -36,10 +39,22 @@ export default { HeaderFluidComponent ], imports: [ - ThemeModule, - UIShellModule, - IconModule, - SearchModule, + ThemeDirective, + IconDirective, + Search, + Hamburger, + Header, + HeaderAction, + HeaderGlobal, + HeaderItem, + HeaderMenu, + HeaderNavigation, + Panel, + SideNav, + SideNavMenu, + SideNavItem, + SwitcherList, + SwitcherListItem, RouterModule ] }) @@ -90,11 +105,12 @@ const HeaderTemplate = (args) => ({ ` }); -export const Header = HeaderTemplate.bind({}); -Header.args = { +export const HeaderStory = HeaderTemplate.bind({}); +HeaderStory.storyName = "Header"; +HeaderStory.args = { hasHamburger: true }; -Header.argTypes = { +HeaderStory.argTypes = { expanded: { action: "Menu clicked!" } @@ -186,7 +202,7 @@ const HeaderWithTemplate = (args) => ({ - + IBM [Platform]