diff --git a/src/sql/azdata.d.ts b/src/sql/azdata.d.ts index 252f0fee77..14e94b659c 100644 --- a/src/sql/azdata.d.ts +++ b/src/sql/azdata.d.ts @@ -2692,7 +2692,7 @@ declare module 'azdata' { * Supports defining a model that can be instantiated as a view in the UI */ export interface ModelBuilder { - navContainer(): ContainerBuilder; + navContainer(): ContainerBuilder; divContainer(): DivBuilder; flexContainer(): FlexBuilder; splitViewContainer(): SplitViewBuilder; @@ -2763,16 +2763,16 @@ declare module 'azdata' { withProps(properties: TPropertyBag): ComponentBuilder; withValidation(validation: (component: TComponent) => boolean | Thenable): ComponentBuilder; } - export interface ContainerBuilder extends ComponentBuilder { + export interface ContainerBuilder extends ComponentBuilder { withLayout(layout: TLayout): ContainerBuilder; withItems(components: Array, itemLayout?: TItemLayout): ContainerBuilder; } - export interface FlexBuilder extends ContainerBuilder { + export interface FlexBuilder extends ContainerBuilder { } // Building on top of flex item - export interface SplitViewBuilder extends ContainerBuilder { + export interface SplitViewBuilder extends ContainerBuilder { } export interface DivBuilder extends ContainerBuilder { @@ -2781,8 +2781,8 @@ declare module 'azdata' { export interface GroupBuilder extends ContainerBuilder { } - export interface ToolbarBuilder extends ContainerBuilder { - withToolbarItems(components: ToolbarComponent[]): ContainerBuilder; + export interface ToolbarBuilder extends ContainerBuilder { + withToolbarItems(components: ToolbarComponent[]): ContainerBuilder; /** * Creates a collection of child components and adds them all to this container @@ -2807,7 +2807,7 @@ declare module 'azdata' { withItem(component: Component): LoadingComponentBuilder; } - export interface FormBuilder extends ContainerBuilder { + export interface FormBuilder extends ContainerBuilder { withFormItems(components: (FormComponent | FormComponentGroup)[], itemLayout?: FormItemLayout): FormBuilder; /** @@ -3324,6 +3324,13 @@ declare module 'azdata' { CSSStyles?: CssStyles | undefined; } + /** + * Common properties for container components such as {@link DivContainer} or {@link FlexContainer} + */ + export interface ContainerProperties extends ComponentProperties { + + } + export type ThemedIconPath = { light: string | vscode.Uri; dark: string | vscode.Uri }; export type IconPath = string | vscode.Uri | ThemedIconPath; @@ -3544,7 +3551,7 @@ declare module 'azdata' { export interface ImageComponentProperties extends ComponentWithIconProperties { } - export interface GroupContainerProperties extends ComponentProperties { + export interface GroupContainerProperties extends ContainerProperties { collapsed: boolean; } @@ -3817,7 +3824,7 @@ declare module 'azdata' { loadingCompletedText?: string | undefined; } - export interface DivContainerProperties extends ComponentProperties { + export interface DivContainerProperties extends ContainerProperties { /** * Matches the overflow-y CSS property and its available values. */ @@ -4357,12 +4364,12 @@ declare module 'azdata' { /** * Builder for TabbedPanelComponent */ - export interface TabbedPanelComponentBuilder extends ContainerBuilder { + export interface TabbedPanelComponentBuilder extends ContainerBuilder { /** * Add the tabs to the component * @param tabs tabs/tab groups to be added */ - withTabs(tabs: (Tab | TabGroup)[]): ContainerBuilder; + withTabs(tabs: (Tab | TabGroup)[]): ContainerBuilder; } export interface SliderComponentProperties extends ComponentProperties { diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index ded5c1561c..62d8c96a75 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/src/sql/azdata.proposed.d.ts @@ -1526,6 +1526,20 @@ declare module 'azdata' { link: LinkArea; } + export interface ContainerBuilder extends ComponentBuilder { + /** + * Sets the initial set of properties for the container being created + * @param properties The properties to apply to the container + */ + withProps(properties: TPropertyBag): ContainerBuilder; + } + + export interface ContainerProperties extends ComponentProperties { + /** + * Corresponds to the aria-live accessibility attribute for this component + */ + ariaLive?: string; + } export namespace queryeditor { export interface IQueryMessage { diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts index 2344fafc6a..a23ea61949 100644 --- a/src/sql/workbench/api/common/extHostModelView.ts +++ b/src/sql/workbench/api/common/extHostModelView.ts @@ -50,7 +50,7 @@ class ModelBuilderImpl implements azdata.ModelBuilder { flexContainer(): azdata.FlexBuilder { let id = this.getNextComponentId(); - let container: GenericContainerBuilder = new GenericContainerBuilder(this._proxy, this._handle, ModelComponentTypes.FlexContainer, id, this.logService); + let container: GenericContainerBuilder = new GenericContainerBuilder(this._proxy, this._handle, ModelComponentTypes.FlexContainer, id, this.logService); this._componentBuilders.set(id, container); return container; } @@ -342,11 +342,17 @@ class ComponentBuilderImpl extends ComponentBuilderImpl implements azdata.ContainerBuilder { +class ContainerBuilderImpl extends ComponentBuilderImpl implements azdata.ContainerBuilder { constructor(componentWrapper: ComponentWrapper) { super(componentWrapper); } + override withProps(properties: TPropertyBag): azdata.ContainerBuilder { + // We use the same basic logic to set the properties but return this so we can return the container object type + super.withProps(properties); + return this; + } + withLayout(layout: TLayout): azdata.ContainerBuilder { this._component.layout = layout; return this; @@ -361,7 +367,7 @@ class ContainerBuilderImpl extends ContainerBuilderImpl { +class GenericContainerBuilder extends ContainerBuilderImpl { constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string, logService: ILogService) { super(new ComponentWrapper(proxy, handle, type, id, logService)); } diff --git a/src/sql/workbench/browser/modelComponents/componentBase.ts b/src/sql/workbench/browser/modelComponents/componentBase.ts index 47850341ec..bd75ded819 100644 --- a/src/sql/workbench/browser/modelComponents/componentBase.ts +++ b/src/sql/workbench/browser/modelComponents/componentBase.ts @@ -279,7 +279,7 @@ export abstract class ComponentBase extends ComponentBase { +export abstract class ContainerBase extends ComponentBase { protected items: ItemDescriptor[]; @ViewChildren(ModelComponentWrapper) protected _componentWrappers: QueryList; @@ -395,4 +395,12 @@ export abstract class ContainerBase): void { } + + public get ariaLive(): string | undefined { + return this.getPropertyOrDefault((props) => props.ariaLive, undefined); + } + + public set ariaLive(newValue: string | undefined) { + this.setPropertyFromUI((props, value) => props.ariaLive = value, newValue); + } } diff --git a/src/sql/workbench/browser/modelComponents/divContainer.component.ts b/src/sql/workbench/browser/modelComponents/divContainer.component.ts index 55999c1399..ebbae14cf8 100644 --- a/src/sql/workbench/browser/modelComponents/divContainer.component.ts +++ b/src/sql/workbench/browser/modelComponents/divContainer.component.ts @@ -27,7 +27,7 @@ class DivItem { @Component({ template: ` -
+
diff --git a/src/sql/workbench/browser/modelComponents/flexContainer.component.ts b/src/sql/workbench/browser/modelComponents/flexContainer.component.ts index e3be0a9184..0245e2456f 100644 --- a/src/sql/workbench/browser/modelComponents/flexContainer.component.ts +++ b/src/sql/workbench/browser/modelComponents/flexContainer.component.ts @@ -23,7 +23,7 @@ export class FlexItem { @Component({ template: `
+ [style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width" [style.flex-wrap]="flexWrap" [attr.role]="ariaRole" [attr.aria-live] = "ariaLive">