gd-bs 6.1.4 → 6.1.6

package/index.html

@@ -15,6 +15,7 @@
     <h1>Library</h1>
     <form>
         <div id="dev"></div>
+        <div id="icon-link"></div>
         <div id="alert"></div>
         <div id="btn-loading"></div>
         <div id="spinner"></div>
@@ -86,6 +87,12 @@
             });
 
             // Components
+            GD.Components.IconLink({
+                el: document.getElementById("icon-link"),
+                content: "Icon Link",
+                iconType: GD.Icons(GD.IconTypes.Badge3d),
+                type: GD.Components.IconLinkTypes.AfterText
+            })
             GD.Components.ListBox({
                 el: document.getElementById("listbox"),
                 label: "List Box Example:",
@@ -1020,7 +1027,7 @@
                 type: 2,
                 options: {
                     autoClose: false,
-                    backdrop: false
+                    backdrop: true
                 }
             });
 
@@ -1124,8 +1131,8 @@
             });
             window["myNavTabs"] = GD.Components.Nav({
                 el: document.querySelector("#navTabs"),
-                fadeTabs: true,
-                isTabs: true,
+                //fadeTabs: true,
+                isUnderline: true,
                 items: [{
                     title: "NavTab 1",
                     tabContent: "This is the content for tab 1.",

package/package.json

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

package/src/components/form/control.ts

@@ -651,109 +651,113 @@ export class FormControl implements IFormControl {
 
     // Updates the control validation
     updateValidation(elControl: Element, validation: IFormControlValidationResult) {
-        // Get the form control
-        let elFormControl: HTMLElement = elControl.querySelector(".form-control") || elControl.querySelector(".form-select");
-        if (elFormControl) {
-            // Clear the invalid/valid classes
-            elFormControl.classList.remove("is-invalid");
-            elFormControl.classList.remove("is-valid");
-
-            // Set the class
-            elFormControl.classList.add(validation.isValid ? "is-valid" : "is-invalid");
-        } else {
-            let validateControls = (controls: Array<HTMLElement>) => {
-                // Parse the controls
-                for (let i = 0; i < controls.length; i++) {
-                    let control = controls[i];
-
-                    // Clear the invalid/valid classes
-                    control.classList.remove("is-invalid");
-                    control.classList.remove("is-valid");
-
-                    // Set the class
-                    control.classList.add(validation.isValid ? "is-valid" : "is-invalid");
+        // Get the form controls
+        let elFormControls = elControl.querySelectorAll(".form-control") || elControl.querySelectorAll(".form-select");
+        for (let i = 0; i < elFormControls.length; i++) {
+            // Ensure the control exists
+            let elFormControl = elFormControls[i] as HTMLElement;
+            if (elFormControl) {
+                // Clear the invalid/valid classes
+                elFormControl.classList.remove("is-invalid");
+                elFormControl.classList.remove("is-valid");
+
+                // Set the class
+                elFormControl.classList.add(validation.isValid ? "is-valid" : "is-invalid");
+            } else {
+                let validateControls = (controls: Array<HTMLElement>) => {
+                    // Parse the controls
+                    for (let i = 0; i < controls.length; i++) {
+                        let control = controls[i];
+
+                        // Clear the invalid/valid classes
+                        control.classList.remove("is-invalid");
+                        control.classList.remove("is-valid");
+
+                        // Set the class
+                        control.classList.add(validation.isValid ? "is-valid" : "is-invalid");
+                    }
                 }
-            }
 
-            // Get the checkboxes
-            let elCheckboxes = elControl.querySelectorAll(".form-check-input");
-            if (elCheckboxes.length > 0) {
-                // Validate the controls
-                validateControls(elCheckboxes as any);
+                // Get the checkboxes
+                let elCheckboxes = elControl.querySelectorAll(".form-check-input");
+                if (elCheckboxes.length > 0) {
+                    // Validate the controls
+                    validateControls(elCheckboxes as any);
 
-                // Set the form control
-                elFormControl = elCheckboxes.length > 0 ? elCheckboxes[elCheckboxes.length - 1] as any : elFormControl;
-            }
+                    // Set the form control
+                    elFormControl = elCheckboxes.length > 0 ? elCheckboxes[elCheckboxes.length - 1] as any : elFormControl;
+                }
 
-            // Get the custom controls
-            let elCustomControls = elControl.querySelectorAll(".custom-control-input");
-            if (elCustomControls.length > 0) {
-                // Validate the controls
-                validateControls(elCustomControls as any);
+                // Get the custom controls
+                let elCustomControls = elControl.querySelectorAll(".custom-control-input");
+                if (elCustomControls.length > 0) {
+                    // Validate the controls
+                    validateControls(elCustomControls as any);
 
-                // Set the form control
-                elFormControl = elCustomControls.length > 0 ? elCustomControls[elCustomControls.length - 1] as any : elFormControl;
+                    // Set the form control
+                    elFormControl = elCustomControls.length > 0 ? elCustomControls[elCustomControls.length - 1] as any : elFormControl;
+                }
             }
-        }
 
-        // Ensure the form control exists
-        if (elFormControl) {
-            let useTooltip = this._formProps.validationType == FormValidationTypes.Tooltip;
-
-            // Clear the old valid message if it exists
-            let validClassName = useTooltip ? "valid-tooltip" : "valid-feedback";
-            let elMessage = elFormControl.parentNode.querySelector("." + validClassName) as HTMLElement;
-            if (elMessage) {
-                // Clear the message
-                elMessage.innerHTML = "";
-                elMessage.style.display = "";
-            }
+            // Ensure the form control exists
+            if (elFormControl) {
+                let useTooltip = this._formProps.validationType == FormValidationTypes.Tooltip;
 
-            // Clear the old valid message if it exists
-            let invalidClassName = useTooltip ? "invalid-tooltip" : "invalid-feedback";
-            elMessage = elFormControl.parentNode.querySelector("." + invalidClassName) as HTMLElement;
-            if (elMessage) {
-                // Clear the message
-                elMessage.innerHTML = "";
-                elMessage.style.display = "";
-            }
+                // Clear the old valid message if it exists
+                let validClassName = useTooltip ? "valid-tooltip" : "valid-feedback";
+                let elMessage = elFormControl.parentNode.querySelector("." + validClassName) as HTMLElement;
+                if (elMessage) {
+                    // Clear the message
+                    elMessage.innerHTML = "";
+                    elMessage.style.display = "";
+                }
 
-            // See if there is invalid feedback
-            if (validation.invalidMessage || this._props.errorMessage) {
-                // Get the element
+                // Clear the old valid message if it exists
                 let invalidClassName = useTooltip ? "invalid-tooltip" : "invalid-feedback";
                 elMessage = elFormControl.parentNode.querySelector("." + invalidClassName) as HTMLElement;
-                if (elMessage == null) {
-                    // Create the element
-                    elMessage = document.createElement("div");
-                    elMessage.className = invalidClassName;
-                    elFormControl.parentNode.appendChild(elMessage);
+                if (elMessage) {
+                    // Clear the message
+                    elMessage.innerHTML = "";
+                    elMessage.style.display = "";
                 }
 
-                // Set the message
-                elMessage.innerHTML = validation.invalidMessage || this._props.errorMessage;
-
-                // Update the display
-                elMessage.style.display = validation.isValid ? "" : "block";
-            }
-
-            // See if there is valid feedback
-            if (validation.validMessage) {
-                // Get the element
-                let validClassName = useTooltip ? "valid-tooltip" : "valid-feedback";
-                elMessage = elFormControl.parentNode.querySelector("." + validClassName) as HTMLElement;
-                if (elMessage == null) {
-                    // Create the element
-                    elMessage = document.createElement("div");
-                    elMessage.className = validClassName;
-                    elFormControl.parentNode.appendChild(elMessage);
+                // See if there is invalid feedback
+                if (validation.invalidMessage || this._props.errorMessage) {
+                    // Get the element
+                    let invalidClassName = useTooltip ? "invalid-tooltip" : "invalid-feedback";
+                    elMessage = elFormControl.parentNode.querySelector("." + invalidClassName) as HTMLElement;
+                    if (elMessage == null) {
+                        // Create the element
+                        elMessage = document.createElement("div");
+                        elMessage.className = invalidClassName;
+                        elFormControl.parentNode.appendChild(elMessage);
+                    }
+
+                    // Set the message
+                    elMessage.innerHTML = validation.invalidMessage || this._props.errorMessage;
+
+                    // Update the display
+                    elMessage.style.display = validation.isValid ? "" : "block";
                 }
 
-                // Set the message
-                elMessage.innerHTML = validation.validMessage;
-
-                // Update the display
-                elMessage.style.display = validation.isValid ? "block" : "";
+                // See if there is valid feedback
+                if (validation.validMessage) {
+                    // Get the element
+                    let validClassName = useTooltip ? "valid-tooltip" : "valid-feedback";
+                    elMessage = elFormControl.parentNode.querySelector("." + validClassName) as HTMLElement;
+                    if (elMessage == null) {
+                        // Create the element
+                        elMessage = document.createElement("div");
+                        elMessage.className = validClassName;
+                        elFormControl.parentNode.appendChild(elMessage);
+                    }
+
+                    // Set the message
+                    elMessage.innerHTML = validation.validMessage;
+
+                    // Update the display
+                    elMessage.style.display = validation.isValid ? "block" : "";
+                }
             }
         }
     }

package/src/components/iconLink/index.ts

@@ -0,0 +1,71 @@
+import { IIconLink, IIconLinkProps } from "./types";
+import { Base } from "../base";
+import { appendContent } from "../common";
+import { HTML } from "./templates";
+
+/**
+ * Icon Link Types
+ */
+export enum IconLinkTypes {
+    AfterText = 1,
+    BeforeText = 2
+}
+/**
+ * Icon Link
+ * @property props - The list box properties.
+ */
+class _IconLink extends Base<IIconLinkProps> implements IIconLink {
+    private _elIcon: HTMLOrSVGElement = null;
+
+    // Constructor
+    constructor(props: IIconLinkProps, template: string = HTML) {
+        super(template, props);
+
+        // Configure the list box
+        this.configure();
+
+        // Configure the events
+        this.configureEvents();
+
+        // Configure the parent
+        this.configureParent();
+    }
+
+    // Configures the list box
+    private configure() {
+        // Render the content
+        appendContent(this.el, this.props.content);
+
+        // Set the icon if it exists
+        if (this.props.iconType) {
+            if (typeof (this.props.iconType) === "function") {
+                // Set the icon
+                this._elIcon = this.props.iconType(this.props.iconSize, this.props.iconSize, this.props.iconClassName);
+            }
+            // Else, it's an element
+            else if (typeof (this.props.iconType === "object")) {
+                // Set the icon
+                this._elIcon = this.props.iconType;
+            } else { return; }
+
+            // See if we are rendering the content first
+            if (this.props.type == IconLinkTypes.AfterText) {
+                // Append the icon
+                this.el.appendChild(this._elIcon);
+            } else {
+                // Prepend the icon
+                this.el.prepend(this._elIcon);
+            }
+        }
+    }
+
+    // Configures the events
+    private configureEvents() {
+    }
+
+    /**
+     * Public Interface
+     */
+
+}
+export const IconLink = (props: IIconLinkProps, template?: string): IIconLink => { return new _IconLink(props, template); }

package/src/components/iconLink/templates.ts

@@ -0,0 +1,2 @@
+// Form
+export const HTML = `<a class="icon-link" href="#"></a>`.trim();

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

@@ -0,0 +1,68 @@
+/**
+ * <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() {
+ *         // Create the icon link
+ *         $REST.Components.IconLink({
+ *             el: document.querySelector("#demo"),
+ *             content: "Icon Link",
+ *             type: $REST.Components.IconLinkTypes.BeforeIcon,
+ *             icon: $REST.Icons($REST.IconTypes.Badge3d)
+ *         });
+ *     });
+ * </script>
+ */
+
+/**
+ * Icon Link
+ * 
+ * ```ts
+ * import { Components } from "gd-sprest-bs";
+ * import { Badge3d } from "gd-sprest-bs/build/icons/svgs/badge3d";
+ * 
+ * // Create the icon link
+ * let el = document.querySelector("#icon-link");
+ * Components.IconLink({
+ *     el: el,
+ *     content: "Icon Link",
+ *     iconType: Badge3d,
+ *     type: Components.IconLinkTypes.AfterIcon,
+ * });
+ * ```
+ */
+export const IconLink: (props: IIconLinkProps, template?: string) => IIconLink;
+
+/**
+ * Icon Link Types
+ */
+export const IconLinkTypes: IIconLinkTypes;
+
+import { IBase, IBaseProps } from "../types";
+
+/**
+ * Icon Link
+ */
+export interface IIconLink extends IBase<IIconLinkProps> { }
+
+/**
+ * Icon Link Properties
+ */
+export interface IIconLinkProps<T = Element> extends IBaseProps<IIconLink> {
+    content?: string | T;
+    data?: any;
+    href?: string;
+    iconClassName?: string;
+    iconSize?: number;
+    iconType?: Function;
+    type?: number;
+}
+
+/**
+ * Icon Link Types
+ */
+export type IIconLinkTypes = {
+    AfterText: number;
+    BeforeText: number;
+}

package/src/components/index.ts

@@ -11,6 +11,7 @@ export * from "./checkboxGroup";
 export * from "./collapse";
 export * from "./dropdown";
 export * from "./form";
+export * from "./iconLink";
 export * from "./inputGroup";
 export * from "./jumbotron";
 export * from "./listBox";

package/src/components/nav/index.ts

@@ -27,13 +27,14 @@ class _Nav extends Base<INavProps> implements INav {
     // Configure the card group
     private configure(itemTemplate: string) {
         // Update the navigation
-        let nav = this.el.querySelector(".nav");
+        let nav = this.el.classList.contains("nav") ? this.el : this.el.querySelector(".nav");
         if (nav) {
             this.props.id ? nav.id = this.props.id : null;
             this.props.enableFill ? this.el.classList.add("nav-fill") : null;
             this.props.isJustified ? this.el.classList.add("nav-justified") : null;
             this.props.isPills ? this.el.classList.add("nav-pills") : null;
             this.props.isTabs ? this.el.classList.add("nav-tabs") : null;
+            this.props.isUnderline ? this.el.classList.add("nav-underline") : null;
             this.props.isVertical ? this.el.classList.add("flex-column") : null;
         }
 
@@ -48,11 +49,11 @@ class _Nav extends Base<INavProps> implements INav {
     }
 
     // Configures the tab link event
-    private configureTabEvents(tab: NavLink) {
+    private configureLinkEvents(link: NavLink) {
         // Add a click event
-        tab.el.addEventListener("click", () => {
+        link.el.addEventListener("click", () => {
             let prevTab: INavLink = null;
-            let newTab: INavLink = tab;
+            let newTab: INavLink = link;
 
             // Parse the links
             for (let i = 0; i < this._links.length; i++) {
@@ -69,7 +70,7 @@ class _Nav extends Base<INavProps> implements INav {
             }
 
             // Toggle the link
-            tab.toggle(this.props.fadeTabs);
+            link.toggle(this.props.fadeTabs);
 
             // Call the click event
             this.props.onClick ? this.props.onClick(newTab, prevTab) : null;
@@ -82,7 +83,7 @@ class _Nav extends Base<INavProps> implements INav {
         this._links = [];
 
         // Get the nav and tab elements
-        let nav = this.el.querySelector(".nav") || this.el;
+        let nav = this.el.classList.contains("nav") ? this.el : this.el.querySelector(".nav");
         if (nav) {
             let tabs = this.el.querySelector(".tab-content");
 
@@ -94,11 +95,11 @@ class _Nav extends Base<INavProps> implements INav {
                 nav.appendChild(link.el);
                 this._links.push(link);
 
+                // Configure the link event
+                this.configureLinkEvents(link);
+
                 // See if we are rendering tabs
                 if (tabs) {
-                    // Configure the events
-                    this.configureTabEvents(link);
-
                     // Add the tab content
                     tabs.appendChild(link.elTabContent);
 

package/src/components/nav/link.ts

@@ -112,13 +112,13 @@ export class NavLink extends Base<INavLinkProps> implements INavLink {
         if (this.isActive) {
             // Hide this link and tab
             this._elLink.classList.remove("active");
-            this._elTab.classList.remove("active");
-            this._elTab.classList.remove("show");
+            this._elTab ? this._elTab.classList.remove("active") : null;
+            this._elTab ? this._elTab.classList.remove("show") : null;
         } else {
             // Show this link and tab
             this._elLink.classList.add("active");
-            this._elTab.classList.add("active");
-            fadeTabs ? this._elTab.classList.add("show") : null;
+            this._elTab ? this._elTab.classList.add("active") : null;
+            this._elTab && fadeTabs ? this._elTab.classList.add("show") : null;
         }
     }
 }

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

@@ -90,6 +90,7 @@ export interface INavProps<T = Element> extends IBaseProps<INav> {
     isJustified?: boolean;
     isPills?: boolean;
     isTabs?: boolean;
+    isUnderline?: boolean;
     isVertical?: boolean;
     onClick?: (newTab?: INavLink, prevTab?: INavLink) => void;
     onLinkRendered?: (el?: HTMLElement, item?: INavLinkProps) => void;

package/src/styles/_custom.scss

@@ -451,38 +451,16 @@
 /** Modal background - Shouldn't be under the .bs class */
 
 .modal-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: $zindex-modal-backdrop;
-    width: 100vw;
-    height: 100vh;
-    background-color: $modal-backdrop-bg;
-    // Fade for backdrop
-    &.fade {
-        opacity: 0;
-    }
-    &.show {
-        opacity: $modal-backdrop-opacity;
-    }
+    --bs-backdrop-zindex: #{$zindex-modal-backdrop};
+    --bs-backdrop-bg: #{$modal-backdrop-bg};
+    --bs-backdrop-opacity: #{$modal-backdrop-opacity};
+
+    @include overlay-backdrop(var(--bs-backdrop-zindex), var(--bs-backdrop-bg), var(--bs-backdrop-opacity));
 }
 
 
 /** Offcanvas background - Shouldn't be under the .bs class */
 
 .offcanvas-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: $zindex-offcanvas-backdrop;
-    width: 100vw;
-    height: 100vh;
-    background-color: $offcanvas-backdrop-bg;
-    // Fade for backdrop
-    &.fade {
-        opacity: 0;
-    }
-    &.show {
-        opacity: $offcanvas-backdrop-opacity;
-    }
-}
+    @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+}