gd-bs 6.6.14 → 6.6.16

package/index.html

@@ -61,13 +61,14 @@
                 items.push({
                     data: i,
                     text: "Item " + i,
+                    title: "This is " + i + " for the item.",
                     value: i
                 });
             }
             window["cb_ddl"] = GD.Components.Dropdown({
                 el: document.getElementById("dev"),
                 items: items,
-                isCheckbox: true,
+                isCheckbox: false,
                 multi: true,
                 label: "CB Dropdown"
             });
@@ -360,18 +361,23 @@
                             description: "This is a single dropdown option.",
                             items: [{
                                 text: "Test 1",
+                                title: "This is the first item.",
                                 value: 1
                             }, {
                                 text: "Test 2",
+                                title: "This is the second item.",
                                 value: 2
                             }, {
                                 text: "Test 3",
+                                title: "This is the third item.",
                                 value: 3
                             }, {
                                 text: "Test 4",
+                                title: "This is the fourth item.",
                                 value: 4
                             }, {
                                 text: "Test 5",
+                                title: "This is the fifth item.",
                                 value: 5,
                                 isDisabled: true
                             }],

package/package.json

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

package/src/components/dropdown/formItem.ts

@@ -41,6 +41,7 @@ export class DropdownFormItem {
             this._el.className = this._props.className || "";
             this._el.disabled = this._props.isDisabled ? true : false;
             this._el.innerText = this._props.text == null ? "" : this._props.text;
+            this._props.title ? this._el.title = this._props.title : null;
 
             // See if the item is selected
             if (this._props.isSelected) {

package/src/components/tooltip/index.ts

@@ -1,9 +1,11 @@
 import tippy, { animateFill, followCursor, inlinePositioning, sticky } from "tippy.js";
 import { ITippyProps } from "../types";
 import { ITooltip, ITooltipProps } from "./types";
-import { IButton } from "../button/types";
 import { Base } from "../base";
+import { IButton } from "../button/types";
 import { Button, ButtonTypes } from "../button";
+import { IDropdown } from "../dropdown/types";
+import { Dropdown, DropdownTypes } from "../dropdown";
 import { appendContent } from "../common";
 
 /**
@@ -49,6 +51,7 @@ export enum TooltipPlacements {
  */
 class _Tooltip extends Base<ITooltipProps> {
     private _btn: IButton = null;
+    private _ddl: IDropdown = null;
     private _elContent: HTMLElement = null;
     private _tippy = null;
 
@@ -67,21 +70,34 @@ class _Tooltip extends Base<ITooltipProps> {
     private configure() {
         // See if the target element was not defined
         if (this.props.target == null) {
-            // Default the toggle property for the button
-            let btnProps = this.props.btnProps || {};
-            btnProps.type = btnProps.type || ButtonTypes.OutlineSecondary
-
-            // See if the content is text
-            if (typeof (this.props.content) === "string") {
-                // Set the label
-                btnProps.description = this.props.content;
-            }
+            // See if the dropdown property exists
+            if (this.props.ddlProps) {
+                // Set the default properties
+                let ddlProps = this.props.ddlProps;
+                ddlProps.type = ddlProps.type || DropdownTypes.OutlinePrimary;
+
+                // Create the dropdown
+                this._ddl = Dropdown(ddlProps);
+
+                // Update the element
+                this.el = this._ddl.el;
+            } else {
+                // Default the toggle property for the button
+                let btnProps = this.props.btnProps || {};
+                btnProps.type = btnProps.type || ButtonTypes.OutlineSecondary
+
+                // See if the content is text
+                if (typeof (this.props.content) === "string") {
+                    // Set the label
+                    btnProps.description = this.props.content;
+                }
 
-            // Create the button
-            this._btn = Button(btnProps);
+                // Create the button
+                this._btn = Button(btnProps);
 
-            // Update the element
-            this.el = this._btn.el;
+                // Update the element
+                this.el = this._btn.el;
+            }
         }
 
         // Configure the options
@@ -310,16 +326,21 @@ class _Tooltip extends Base<ITooltipProps> {
     // Reference to the button
     get button(): IButton { return this._btn; }
 
+    // Reference to the dropdown
+    get ddl(): IDropdown { return this._ddl; }
+
     // Disbles the tooltip
     disable() {
-        // Disable the button
+        // Disable the button or dropdown
         this._btn ? this._btn.disable() : null;
+        this._ddl ? this._ddl.disable() : null;
     }
 
     // Enables the tooltip
     enable() {
-        // Enable the button
+        // Enable the button or dropdown
         this._btn ? this._btn.enable() : null;
+        this._ddl ? this._ddl.enable() : null;
     }
 
     // Hides the tooltip
@@ -339,10 +360,11 @@ class _Tooltip extends Base<ITooltipProps> {
         // Set the tippy content
         this.tippy.setContent(content);
 
-        // See if the button exists
-        if (this._btn && typeof (content) === "string") {
+        // See if the content is a string
+        if (typeof (content) === "string") {
             // Update the content
-            this._btn.el.setAttribute("aria-description", content);
+            this._btn ? this._btn.el.setAttribute("aria-description", content) : null;
+            this._ddl ? this._ddl.el.setAttribute("aria-description", content) : null;
         }
     }
 

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

@@ -53,13 +53,14 @@ export const TooltipTypes: ITooltipTypes;
 
 import { IBaseProps, ITippyProps } from "../types";
 import { IButtonProps, IButton } from "../button/types";
+import { IDropdownProps, IDropdown } from "../dropdown/types";
 
 /**
  * Tooltip
  */
 export interface ITooltip {
     /** Reference to the button. */
-    button: IButton;
+    button?: IButton;
 
     /** The element. */
     el: HTMLButtonElement;
@@ -70,6 +71,9 @@ export interface ITooltip {
     /** Hides an element’s tooltip. */
     hide: () => void;
 
+    /** Reference to the dropdown. */
+    ddl?: IDropdown;
+
     /** The tippy instance. */
     tippy: any;
 
@@ -88,6 +92,7 @@ export interface ITooltip {
  */
 export interface ITooltipProps extends IBaseProps<ITooltip> {
     btnProps?: IButtonProps;
+    ddlProps?: IDropdownProps;
     content?: string | Element;
     options?: ITippyProps;
     placement?: number;