gd-bs 6.1.5 → 6.1.7

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.",
@@ -1159,7 +1166,7 @@
                     imageUrl: "https://via.placeholder.com/400x200",
                     imageAlt: "First Slide",
                     isActive: true
-                }, {
+                }/*, {
                     captions: "<h5>Second Slide</h5>",
                     imageUrl: "https://via.placeholder.com/400x200",
                     imageAlt: "Second Slide"
@@ -1169,7 +1176,7 @@
                     imageAlt: "Third Slide"
                 }, {
                     content: "<h1>Header</h1><h3>Title</h3><p>Content</p>"
-                }]
+                }*/]
             });
             window["collapse"] = GD.Components.Collapse({
                 el: document.querySelector("#collapse"),

package/package.json

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

package/src/components/carousel/index.ts

@@ -31,7 +31,7 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
     // Configure the card group
     private configure(slideTemplate: string) {
         // Set the attributes
-        this.el.id = "carousel" + (this.props.id == null ? "" : this.props.id);
+        this.el.id = this.props.id == null ? "carousel" : this.props.id;
         this.props.enableCrossfade ? this.el.classList.add("carousel-fade") : null;
 
         // Render the indicators
@@ -182,8 +182,9 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
                     let item = items[i];
 
                     // Create the item
-                    let elItem = document.createElement("li");
+                    let elItem = document.createElement("button");
                     elItem.setAttribute("data-bs-target", "#" + this.el.id);
+                    elItem.setAttribute("aria-label", "Slide " + (i + 1));
                     elItem.setAttribute("data-bs-slide-to", i.toString());
                     item.isActive ? elItem.classList.add("active") : null;
                     elItem.addEventListener("click", ev => {
@@ -194,7 +195,7 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
 
                         // Go to the slide
                         this.nextWhenVisible(elSlide.getAttribute("data-bs-slide-to"));
-                    })
+                    });
 
                     // Add the item
                     indicators.appendChild(elItem);
@@ -215,18 +216,30 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
         // Get the indicators
         let slides = this.el.querySelector(".carousel-inner");
         if (slides) {
+            let hasActiveItem = false;
+
             // Parse the items
             let items = this.props.items || [];
             for (let i = 0; i < items.length; i++) {
                 let slide = new CarouselItem(items[i], slideTemplate);
                 this._slides.push(slide);
 
+                // See if this is active
+                slide.isActive ? hasActiveItem = true : null;
+
                 // Create the item element
                 slides.appendChild(slide.el);
 
                 // Call the event
                 this.props.onSlideRendered ? this.props.onSlideRendered(slide.el, items[i]) : null;
             }
+
+            // See if it doesn't have an active item
+            if (!hasActiveItem) {
+                // Set the first as active
+                let firstSlide = this._slides[0];
+                firstSlide ? firstSlide.el.classList.add("active") : null;
+            }
         }
     }
 
@@ -265,6 +278,9 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
         let nextSlide: CarouselItem = null;
         let options = this.props.options || {};
 
+        // Ensure there are multiple slides
+        if (this._slides.length < 2) { return; }
+
         // Parse the slides
         for (let i = 0; i < this._slides.length; i++) {
             let slide = this._slides[i];
@@ -281,8 +297,10 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
                 nextSlide = this._slides[i + 1] || this._slides[0];
 
                 // Update the indicators
-                this._indicators[i].classList.remove("active");
-                (this._indicators[i + 1] || this._indicators[0]).classList.add("active");
+                let indicator = this._indicators[i];
+                indicator ? indicator.classList.remove("active") : null;
+                let nextIndicator = this._indicators[i + 1] || this._indicators[0];
+                nextIndicator ? nextIndicator.classList.add("active") : null;
                 break;
             }
         }
@@ -297,6 +315,9 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
         let nextSlide: CarouselItem = this._slides[idx];
         let slideRight = true;
 
+        // Ensure there are multiple slides
+        if (this._slides.length < 2) { return; }
+
         // Parse the slides
         for (let i = 0; i < this._slides.length; i++) {
             let slide = this._slides[i];
@@ -313,8 +334,10 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
                 currentSlide = slide;
 
                 // Update the indicators
-                this._indicators[i].classList.remove("active");
-                this._indicators[idx].classList.add("active");
+                let indicator = this._indicators[i];
+                indicator ? indicator.classList.remove("active") : null;
+                let nextIndicator = this._indicators[idx];
+                nextIndicator ? nextIndicator.classList.add("active") : null;
                 break;
             }
         }
@@ -335,6 +358,9 @@ class _Carousel extends Base<ICarouselProps> implements ICarousel {
         let options = this.props.options || {};
         let prevSlide: CarouselItem = null;
 
+        // Ensure there are multiple slides
+        if (this._slides.length < 2) { return; }
+
         // Parse the slides
         for (let i = 0; i < this._slides.length; i++) {
             let slide = this._slides[i];

package/src/components/carousel/item.ts

@@ -1,5 +1,5 @@
 import { ICarouselItem } from "./types";
-import { appendContent } from "../common";
+import { appendContent, setClassNames } from "../common";
 import { HTMLItem } from "./templates";
 
 /**
@@ -25,6 +25,9 @@ export class CarouselItem {
 
     // Configure the item
     private configure() {
+        // Set the class names
+        setClassNames(this._el, this._props.className);
+
         // Set the attributes
         this._props.isActive ? this._el.classList.add("active") : null;
 

package/src/components/carousel/templates.ts

@@ -1,7 +1,7 @@
 // Carousel
 export const HTML = `
 <div class="carousel slide" data-bs-ride="carousel">
-    <ol class="carousel-indicators"></ol>
+    <div class="carousel-indicators"></div>
     <div class="carousel-inner"></div>
     <a class="carousel-control-prev" href="#" role="button" data-bs-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>

package/src/components/form/templates.ts

@@ -5,7 +5,7 @@ export const HTML = `<form class="needs-validation"></form>`;
 export const HTMLGroup = `
 <div>
     <label class="form-label" tabindex="-1"></label>
-    <small class="form-text text-muted" tabindex="-1"></small>
+    <small class="form-text" tabindex="-1"></small>
 </div>`.trim();
 
 // Row

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/modal/templates.ts

@@ -4,10 +4,10 @@ export const HTML = `
         <div class="modal-content">
             <div class="modal-header">
                 <div class="modal-title fs-5"></div>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" area-label="Close"></button>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body"></div>
             <div class="modal-footer"></div>
         </div>
     </div>
-</div>`.trim();
+</div>`.trim();

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