gd-bs 6.1.5 → 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.5",
+    "version": "6.1.6",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",

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);
+}