diff --git a/apps/web/src/app/organizations/organization.module.ts b/apps/web/src/app/organizations/organization.module.ts index f32e4f5310..d894f53e09 100644 --- a/apps/web/src/app/organizations/organization.module.ts +++ b/apps/web/src/app/organizations/organization.module.ts @@ -1,11 +1,10 @@ import { NgModule } from "@angular/core"; -import { SharedModule } from "../shared"; - import { AccessSelectorModule } from "./components/access-selector"; import { OrganizationsRoutingModule } from "./organization-routing.module"; +import { SharedOrganizationModule } from "./shared"; @NgModule({ - imports: [SharedModule, AccessSelectorModule, OrganizationsRoutingModule], + imports: [SharedOrganizationModule, AccessSelectorModule, OrganizationsRoutingModule], }) export class OrganizationModule {} diff --git a/apps/web/src/app/organizations/shared/components/search-input/search-input.component.html b/apps/web/src/app/organizations/shared/components/search-input/search-input.component.html new file mode 100644 index 0000000000..2396dc3423 --- /dev/null +++ b/apps/web/src/app/organizations/shared/components/search-input/search-input.component.html @@ -0,0 +1,21 @@ + +
+ + +
diff --git a/apps/web/src/app/organizations/shared/components/search-input/search-input.component.ts b/apps/web/src/app/organizations/shared/components/search-input/search-input.component.ts new file mode 100644 index 0000000000..4bdcf665cd --- /dev/null +++ b/apps/web/src/app/organizations/shared/components/search-input/search-input.component.ts @@ -0,0 +1,54 @@ +import { Component, Input } from "@angular/core"; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; + +let nextId = 0; + +@Component({ + selector: "app-search-input", + templateUrl: "./search-input.component.html", + providers: [ + { + provide: NG_VALUE_ACCESSOR, + multi: true, + useExisting: SearchInputComponent, + }, + ], +}) +export class SearchInputComponent implements ControlValueAccessor { + private notifyOnChange: (v: string) => void; + private notifyOnTouch: () => void; + + protected id = `search-id-${nextId++}`; + protected searchText: string; + + @Input() disabled: boolean; + @Input() placeholder: string; + + onChange(searchText: string) { + if (this.notifyOnChange != undefined) { + this.notifyOnChange(searchText); + } + } + + onTouch() { + if (this.notifyOnTouch != undefined) { + this.notifyOnTouch(); + } + } + + registerOnChange(fn: (v: string) => void): void { + this.notifyOnChange = fn; + } + + registerOnTouched(fn: () => void): void { + this.notifyOnTouch = fn; + } + + writeValue(searchText: string): void { + this.searchText = searchText; + } + + setDisabledState(isDisabled: boolean) { + this.disabled = isDisabled; + } +} diff --git a/apps/web/src/app/organizations/shared/components/search-input/search-input.stories.ts b/apps/web/src/app/organizations/shared/components/search-input/search-input.stories.ts new file mode 100644 index 0000000000..ee72e91ad5 --- /dev/null +++ b/apps/web/src/app/organizations/shared/components/search-input/search-input.stories.ts @@ -0,0 +1,36 @@ +import { FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { Meta, moduleMetadata, Story } from "@storybook/angular"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { InputModule } from "@bitwarden/components/src/input/input.module"; + +import { PreloadedEnglishI18nModule } from "../../../../tests/preloaded-english-i18n.module"; + +import { SearchInputComponent } from "./search-input.component"; + +export default { + title: "Web/Organizations/Search Input", + component: SearchInputComponent, + decorators: [ + moduleMetadata({ + imports: [ + InputModule, + FormsModule, + ReactiveFormsModule, + PreloadedEnglishI18nModule, + JslibModule, + ], + providers: [], + }), + ], +} as Meta; + +const Template: Story = (args: SearchInputComponent) => ({ + props: args, + template: ` + + `, +}); + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/apps/web/src/app/organizations/shared/index.ts b/apps/web/src/app/organizations/shared/index.ts new file mode 100644 index 0000000000..941a5ddd63 --- /dev/null +++ b/apps/web/src/app/organizations/shared/index.ts @@ -0,0 +1 @@ +export * from "./shared-organization.module"; diff --git a/apps/web/src/app/organizations/shared/shared-organization.module.ts b/apps/web/src/app/organizations/shared/shared-organization.module.ts new file mode 100644 index 0000000000..ce5c45f0fc --- /dev/null +++ b/apps/web/src/app/organizations/shared/shared-organization.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from "@angular/core"; + +import { SharedModule } from "../../shared"; + +import { SearchInputComponent } from "./components/search-input/search-input.component"; + +@NgModule({ + imports: [SharedModule], + declarations: [SearchInputComponent], + exports: [SharedModule, SearchInputComponent], +}) +export class SharedOrganizationModule {}