gd-bs 5.2.1 → 5.2.2

package/package.json

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

package/src/components/components.d.ts

@@ -28,4 +28,5 @@ export * from "./spinner/types";
 export * from "./table/types";
 export * from "./toast/types";
 export * from "./toolbar/types";
-export * from "./tooltip/types";
+export * from "./tooltip/types";
+export * from "./tooltipGroup/types";

package/src/components/index.ts

@@ -27,4 +27,5 @@ export * from "./spinner";
 export * from "./table";
 export * from "./toast";
 export * from "./toolbar";
-export * from "./tooltip";
+export * from "./tooltip";
+export * from "./tooltipGroup";

package/src/components/tooltipGroup/index.ts

@@ -0,0 +1,75 @@
+import { ITooltip } from "../tooltip/types";
+import { ITooltipGroup, ITooltipGroupProps } from "./types";
+import { Base } from "../base";
+import { Tooltip } from "../tooltip";
+import { HTML } from "./templates";
+
+/**
+ * Tooltip Group
+ * @property props - The tooltip group properties.
+ */
+class _TooltipGroup extends Base<ITooltipGroupProps> implements ITooltipGroup {
+    private _tooltips: Array<ITooltip> = null;
+
+    // Constructor
+    constructor(props: ITooltipGroupProps, template: string = HTML, btnTemplate?: string) {
+        super(template, props);
+
+        // Configure the tooltip group
+        this.configure(btnTemplate);
+
+        // Configure the parent
+        this.configureParent();
+    }
+
+    // Configure the tooltip group
+    private configure(btnTemplate: string) {
+        // Set the attributes
+        this.props.id ? this.el.id = this.props.id : null;
+        this.props.label ? this.el.setAttribute("aria-label", this.props.label) : null;
+
+        // Set the class names
+        this.el.classList.add(this.props.isVertical ? "btn-group-vertical" : "btn-group");
+        this.props.isLarge ? this.el.classList.add("btn-group-lg") : null;
+        this.props.isSmall ? this.el.classList.add("btn-group-sm") : null;
+
+        // Render the tooltips
+        this.renderTooltips(btnTemplate);
+    }
+
+    // Render the tooltips
+    private renderTooltips(tooltipTemplate: string) {
+        // Clear the tooltips
+        this._tooltips = [];
+
+        // Parse the tooltips
+        let tooltips = this.props.tooltips || [];
+        for (let i = 0; i < tooltips.length; i++) {
+            let tooltipProps = tooltips[i];
+
+            // Set the property
+            tooltipProps.type = tooltipProps.type || this.props.tooltipType;
+
+            // See if the button props exists
+            if (tooltipProps.btnProps) {
+                // Set the button type
+                tooltipProps.btnProps.type = tooltipProps.btnProps.type || this.props.buttonType;
+            }
+
+            // Create the tooltip
+            let tooltip = Tooltip(tooltipProps, tooltipTemplate);
+            this._tooltips.push(tooltip);
+
+            // Append the tooltip to the group
+            this.el.appendChild(tooltip.el);
+        }
+    }
+
+    /**
+     * Public Interface
+     */
+
+    // Reference to the tooltips
+    get tooltips(): Array<ITooltip> { return this._tooltips; }
+}
+export const TooltipGroup = (props: ITooltipGroupProps, template?: string, tooltipTemplate?: string): ITooltipGroup => { return new _TooltipGroup(props, template, tooltipTemplate); }

package/src/components/tooltipGroup/templates.ts

@@ -0,0 +1 @@
+export const HTML = `<div class="btn-group" role="group"></div>`;

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

@@ -0,0 +1,75 @@
+/**
+ * <div id="demo"></div>
+ * <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gd-sprest-bs/5.0.3/gd-sprest-bs.min.js"></script>
+ * <script type="text/javascript">
+ *     // Wait for the window to be loaded
+ *     window.addEventListener("load", function() {
+ *         // Render the tooltip group
+ *         $REST.Components.TooltipGroup({
+ *             el: document.querySelector("#demo"),
+ *             buttonType: $REST.Components.ButtonTypes.Primary,
+ *             tooltipType: $REST.Components.TooltipTypes.LeftStart,
+ *             tooltips: [
+ *                 { text: "Left", onClick: function() { alert("Left button was clicked."); } },
+ *                 { text: "Middle", onClick: function() { alert("Middle button was clicked."); } },
+ *                 { text: "Right", onClick: function() { alert("Right button was clicked."); } }
+ *             ]
+ *         });
+ *     });
+ * </script>
+ */
+
+/**
+ * ### Tooltip Group
+ * 
+ * ```ts
+ * import { Components } from "gd-sprest-bs";
+ * 
+ * // Create the group
+ * let el = document.querySelector("#buttonGroup");
+ * let tooltipGroup = Components.TooltipGroup({
+ *     el: el,
+ *     buttonType: $REST.Components.ButtonTypes.Primary,
+ *     buttons: [
+ *          { text: "Left", onClick: function() { alert("Left button was clicked."); } },
+ *          { text: "Middle", onClick: function() { alert("Middle button was clicked."); } },
+ *          { text: "Right", onClick: function() { alert("Right button was clicked."); } }
+ *     ]
+ * });
+ * ```
+ */
+export const TooltipGroup: (props: ITooltipGroupProps, template?: string, btnTemplate?: string) => ITooltipGroup;
+
+import { IBaseProps } from "../types";
+import { ITooltip, ITooltipProps } from "../tooltip/types";
+
+/**
+ * Tooltip Group
+ */
+export interface ITooltipGroup {
+    /** The element. */
+    el: Element;
+
+    /** The tooltips. */
+    tooltips: Array<ITooltip>;
+
+    /** Hides the button group. */
+    hide: () => void;
+
+    /** Shows the button group. */
+    show: () => void;
+}
+
+/**
+ * Tooltip Group Properties
+ */
+export interface ITooltipGroupProps extends IBaseProps<ITooltipGroup> {
+    tooltips?: Array<ITooltipProps>;
+    buttonType?: number;
+    id?: string;
+    isLarge?: boolean;
+    isSmall?: boolean;
+    isVertical?: boolean;
+    label?: string;
+    tooltipType?: number;
+}