gd-bs 6.6.86 → 6.6.88

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.6.86",
+    "version": "6.6.88",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",

package/src/components/form/control.ts

@@ -134,6 +134,7 @@ export class FormControl implements IFormControl {
             case FormControlTypes.ColorPicker:
                 // Add the input
                 this._tb = InputGroup({
+                    appendedDropdown: (this.props as IFormControlPropsTextField).appendedDropdown,
                     appendedLabel: (this.props as IFormControlPropsTextField).appendedLabel,
                     className,
                     id: this._props.id,
@@ -141,6 +142,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    prependedDropdown: (this.props as IFormControlPropsTextField).prependedDropdown,
                     prependedLabel: (this.props as IFormControlPropsTextField).prependedLabel,
                     required: this._props.required,
                     title: this._props.title,
@@ -221,6 +223,7 @@ export class FormControl implements IFormControl {
             case FormControlTypes.Email:
                 // Add the input
                 this._tb = InputGroup({
+                    appendedDropdown: (this.props as IFormControlPropsTextField).appendedDropdown,
                     appendedLabel: (this.props as IFormControlPropsTextField).appendedLabel,
                     className,
                     id: this._props.id,
@@ -228,6 +231,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    prependedDropdown: (this.props as IFormControlPropsTextField).prependedDropdown,
                     prependedLabel: (this.props as IFormControlPropsTextField).prependedLabel,
                     required: this._props.required,
                     title: this._props.title,
@@ -239,6 +243,7 @@ export class FormControl implements IFormControl {
             case FormControlTypes.File:
                 // Add the input
                 this._tb = InputGroup({
+                    appendedDropdown: (this.props as IFormControlPropsTextField).appendedDropdown,
                     appendedLabel: (this.props as IFormControlPropsTextField).appendedLabel,
                     className,
                     id: this._props.id,
@@ -246,6 +251,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    prependedDropdown: (this.props as IFormControlPropsTextField).prependedDropdown,
                     prependedLabel: (this.props as IFormControlPropsTextField).prependedLabel,
                     required: this._props.required,
                     title: this._props.title,
@@ -398,6 +404,7 @@ export class FormControl implements IFormControl {
             case FormControlTypes.Password:
                 // Add the input
                 this._tb = InputGroup({
+                    appendedDropdown: (this.props as IFormControlPropsTextField).appendedDropdown,
                     appendedLabel: (this.props as IFormControlPropsTextField).appendedLabel,
                     className,
                     id: this._props.id,
@@ -405,6 +412,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    prependedDropdown: (this.props as IFormControlPropsTextField).prependedDropdown,
                     prependedLabel: (this.props as IFormControlPropsTextField).prependedLabel,
                     required: this._props.required,
                     title: this._props.title,
@@ -453,6 +461,7 @@ export class FormControl implements IFormControl {
             case FormControlTypes.Readonly:
                 // Add the input
                 this._tb = InputGroup({
+                    appendedDropdown: (this.props as IFormControlPropsTextField).appendedDropdown,
                     appendedLabel: (this.props as IFormControlPropsTextField).appendedLabel,
                     className,
                     id: this._props.id,
@@ -460,6 +469,7 @@ export class FormControl implements IFormControl {
                     isReadonly: true,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    prependedDropdown: (this.props as IFormControlPropsTextField).prependedDropdown,
                     prependedLabel: (this.props as IFormControlPropsTextField).prependedLabel,
                     required: this._props.required,
                     title: this._props.title,
@@ -489,6 +499,7 @@ export class FormControl implements IFormControl {
             case FormControlTypes.TextArea:
                 // Add the input
                 this._tb = InputGroup({
+                    appendedDropdown: (this.props as IFormControlPropsTextField).appendedDropdown,
                     appendedLabel: (this.props as IFormControlPropsTextField).appendedLabel,
                     className,
                     id: this._props.id,
@@ -496,6 +507,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    prependedDropdown: (this.props as IFormControlPropsTextField).prependedDropdown,
                     prependedLabel: (this.props as IFormControlPropsTextField).prependedLabel,
                     required: this._props.required,
                     rows: (this._props as IFormControlPropsTextField).rows,
@@ -508,6 +520,7 @@ export class FormControl implements IFormControl {
             case FormControlTypes.TextField:
                 // Add the input
                 this._tb = InputGroup({
+                    appendedDropdown: (this.props as IFormControlPropsTextField).appendedDropdown,
                     appendedLabel: (this.props as IFormControlPropsTextField).appendedLabel,
                     className,
                     id: this._props.id,
@@ -515,6 +528,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    prependedDropdown: (this.props as IFormControlPropsTextField).prependedDropdown,
                     prependedLabel: (this.props as IFormControlPropsTextField).prependedLabel,
                     required: this._props.required,
                     title: this._props.title,

package/src/components/form/controlTypes.d.ts

@@ -22,7 +22,7 @@ export const FormControl: (props: IFormControlProps) => IFormControl;
 
 import { IBaseProps } from "../types";
 import { ICheckboxGroup, ICheckboxGroupItem } from "../checkboxGroup/types";
-import { IDropdown, IDropdownItem } from "../dropdown/types";
+import { IDropdown, IDropdownItem, IDropdownProps } from "../dropdown/types";
 import { IInputGroup } from "../inputGroup/types";
 import { IListBox } from "../listBox/types";
 import { IPopoverProps } from "../popover/types";
@@ -228,6 +228,7 @@ export interface IFormControlPropsSwitch extends IFormControlPropsCheckbox { }
  * Form Control Properties - TextField
  */
 export interface IFormControlPropsTextField extends IFormControlProps {
+    appendedDropdown?: IDropdownProps;
     appendedLabel?: string;
     el?: HTMLInputElement;
     onChange?: (value: string, ev?: Event) => void;
@@ -235,6 +236,7 @@ export interface IFormControlPropsTextField extends IFormControlProps {
     onGetValue?: (control: IFormControlPropsTextField) => any;
     onValidate?: (control: IFormControlPropsTextField, results: IFormControlValidationResult<string>) => boolean | IFormControlValidationResult<string>;
     placeholder?: string;
+    prependedDropdown?: IDropdownProps;
     prependedLabel?: string;
     rows?: number;
 }

package/src/components/inputGroup/index.ts

@@ -1,6 +1,8 @@
 import { IInputGroup, IInputGroupFileValue, IInputGroupProps } from "./types";
 import { Base } from "../base";
 import { Button } from "../button";
+import { Dropdown } from "../dropdown";
+import { IDropdown, IDropdownItem } from "../dropdown/types";
 import { HTML } from "./templates";
 
 /**
@@ -22,6 +24,8 @@ export enum InputGroupTypes {
  * @param props The input group properties.
  */
 class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
+    private _ddlAppended: IDropdown = null;
+    private _ddlPrepended: IDropdown = null;
     private _fileValue: IInputGroupFileValue = null;
     private _initFl: boolean = false;
 
@@ -80,6 +84,13 @@ class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
                 this.el.insertBefore(Button(buttons[i]).el, elInput);
             }
 
+            // See if there is a dropdown
+            if (this.props.prependedDropdown) {
+                // Add the dropdown
+                this._ddlPrepended = Dropdown(this.props.prependedDropdown);
+                this.el.insertBefore(this._ddlPrepended.el, elInput);
+            }
+
             // Default the appended buttons
             let appendedButtons = this.props.appendedButtons || [];
             if (this.props.type == InputGroupTypes.Range) {
@@ -104,6 +115,13 @@ class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
                 // Add the button
                 this.el.appendChild(Button(appendedButtons[i]).el);
             }
+
+            // See if there is a dropdown
+            if (this.props.appendedDropdown) {
+                // Add the dropdown
+                this._ddlAppended = Dropdown(this.props.appendedDropdown);
+                this.el.appendChild(this._ddlAppended.el);
+            }
         }
     }
 
@@ -289,9 +307,53 @@ class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
      * Public Interface
      */
 
+    get appendedDropdown() { return this._ddlAppended; }
+
     getFileInfo() { return this._fileValue; }
 
-    getValue() { return this.elTextbox.value; }
+    getValue() {
+        let value = "";
+
+        // See if a prepended dropdown exist
+        if (this._ddlPrepended) {
+            // See if this is a multi item
+            if (this.props.prependedDropdown.multi) {
+                // Set the value
+                let items = this._ddlPrepended.getValue() as IDropdownItem[];
+                for (let i = 0; i < items.length; i++) {
+                    // Add the value
+                    value += items[i].value;
+                }
+            } else {
+                // Set the value
+                value += (this._ddlPrepended.getValue() as IDropdownItem)?.value;
+            }
+        }
+
+        // Append the input value
+        value += this.elTextbox.value;
+
+        // See if a appended dropdown exist
+        if (this._ddlAppended) {
+            // See if this is a multi item
+            if (this.props.appendedDropdown.multi) {
+                // Set the value
+                let items = this._ddlAppended.getValue() as IDropdownItem[];
+                for (let i = 0; i < items.length; i++) {
+                    // Add the value
+                    value += items[i].value;
+                }
+            } else {
+                // Set the value
+                value += (this._ddlAppended.getValue() as IDropdownItem)?.value;
+            }
+        }
+
+        // Return the value
+        return value;
+    }
+
+    get prependedDropdown() { return this._ddlPrepended; }
 
     // Sets the textbox value
     setValue(value: string = "") {

package/src/components/inputGroup/types.d.ts

@@ -38,6 +38,7 @@ export const InputGroupTypes: IInputGroupTypes;
 
 import { IBaseProps } from "../types";
 import { IButtonProps } from "../button/types";
+import { IDropdown, IDropdownProps } from "../dropdown/types";
 
 /** Input Group File Value */
 export interface IInputGroupFileValue {
@@ -49,6 +50,9 @@ export interface IInputGroupFileValue {
  * Input Group
  */
 export interface IInputGroup {
+    /** Reference to the appended dropdown. */
+    appendedDropdown: IDropdown;
+
     /** The input group element. */
     el: HTMLElement;
 
@@ -64,6 +68,9 @@ export interface IInputGroup {
     /** Hides the input group. */
     hide: () => void;
 
+    /** Reference to the prepended dropdown. */
+    prependedDropdown: IDropdown;
+
     /** Method to set the value. */
     setValue: (value: string) => void;
 
@@ -76,6 +83,7 @@ export interface IInputGroup {
  */
 export interface IInputGroupProps extends IBaseProps<IInputGroup> {
     appendedButtons?: Array<IButtonProps>;
+    appendedDropdown?: IDropdownProps;
     appendedLabel?: string;
     formFl?: boolean;
     id?: string;
@@ -90,6 +98,7 @@ export interface IInputGroupProps extends IBaseProps<IInputGroup> {
     onChange?: (value?: string, ev?: Event) => void;
     placeholder?: string;
     prependedButtons?: Array<IButtonProps>;
+    prependedDropdown?: IDropdownProps;
     prependedLabel?: string;
     required?: boolean;
     rows?: number;