gd-bs 5.7.6 → 5.7.9

package/index.html

@@ -64,6 +64,8 @@
                     name: "cb",
                     label: "My CB",
                     items,
+                    //renderRow: false,
+                    //colSize: 3,
                     type: 8
                 }]
             });
@@ -976,7 +978,8 @@
                 id: "offcanvas-demo",
                 title: "Offcanvas Demo",
                 body: "<h5>Hello Canvas</h5><input />",
-                type: 2,
+                size: 5,
+                type: 3,
                 options: {
                     backdrop: true
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "5.7.6",
+    "version": "5.7.9",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",
@@ -35,7 +35,7 @@
     "dependencies": {
         "@popperjs/core": "^2.11.5",
         "bootstrap": "^5.1.3",
-        "bootstrap-icons": "^1.8.2",
+        "bootstrap-icons": "^1.9.1",
         "core-js": "^3.22.6",
         "tippy.js": "^6.3.7"
     },

package/pnpm-lock.yaml

@@ -3307,7 +3307,7 @@ specifiers:
   autoprefixer: ^10.4.7
   babel-loader: ^8.2.5
   bootstrap: ^5.1.3
-  bootstrap-icons: ^1.8.2
+  bootstrap-icons: ^1.9.1
   core-js: ^3.22.6
   css-loader: ^6.7.1
   dts-bundle: ^0.7.3

package/src/bs.scss

@@ -339,6 +339,36 @@
         margin: 0rem 0rem 0rem auto;
         padding: 1rem;
     }
+    /* Off-canvas sizes (Small 1) */
+    .offcanvas-start.offcanvas-size-sm1, .offcanvas-end.offcanvas-size-sm1 { width: 20vw; }
+    .offcanvas-top.offcanvas-size-sm1, .offcanvas-bottom.offcanvas-size-sm1 { height: 20vh; }
+    /* Off-canvas sizes (Small 2) */
+    .offcanvas-start.offcanvas-size-sm2, .offcanvas-end.offcanvas-size-sm2 { width: 25vw; }
+    .offcanvas-top.offcanvas-size-sm2, .offcanvas-bottom.offcanvas-size-sm2 { height: 25vh; }
+    /* Off-canvas sizes (Small 3) */
+    .offcanvas-start.offcanvas-size-sm3, .offcanvas-end.offcanvas-size-sm3 { width: 30vw; }
+    .offcanvas-top.offcanvas-size-sm3, .offcanvas-bottom.offcanvas-size-sm3 { height: 30vh; }
+    /* Off-canvas sizes (Medium 1) */
+    .offcanvas-start.offcanvas-size-md1, .offcanvas-end.offcanvas-size-md1 { width: 40vw; }
+    .offcanvas-top.offcanvas-size-md1, .offcanvas-bottom.offcanvas-size-md1 { height: 40vh; }
+    /* Off-canvas sizes (Medium 2) */
+    .offcanvas-start.offcanvas-size-md2, .offcanvas-end.offcanvas-size-md2 { width: 50vw; }
+    .offcanvas-top.offcanvas-size-md2, .offcanvas-bottom.offcanvas-size-md2 { height: 50vh; }
+    /* Off-canvas sizes (Medium 3) */
+    .offcanvas-start.offcanvas-size-md3, .offcanvas-end.offcanvas-size-md3 { width: 60vw; }
+    .offcanvas-top.offcanvas-size-md3, .offcanvas-bottom.offcanvas-size-md3 { height: 60vh; }
+    /* Off-canvas sizes (Large 1) */
+    .offcanvas-start.offcanvas-size-lg1, .offcanvas-end.offcanvas-size-lg1 { width: 75vw; }
+    .offcanvas-top.offcanvas-size-lg1, .offcanvas-bottom.offcanvas-size-lg1 { height: 75vh; }
+    /* Off-canvas sizes (Large 2) */
+    .offcanvas-start.offcanvas-size-lg2, .offcanvas-end.offcanvas-size-lg2 { width: 80vw; }
+    .offcanvas-top.offcanvas-size-lg2, .offcanvas-bottom.offcanvas-size-lg2 { height: 80vh; }
+    /* Off-canvas sizes (Large 3) */
+    .offcanvas-start.offcanvas-size-lg3, .offcanvas-end.offcanvas-size-lg3 { width: 90vw; }
+    .offcanvas-top.offcanvas-size-lg3, .offcanvas-bottom.offcanvas-size-lg3 { height: 90vh; }
+    /* Off-canvas sizes (Full) */
+    .offcanvas-start.offcanvas-size-full, .offcanvas-end.offcanvas-size-full { width: 100vw; }
+    .offcanvas-top.offcanvas-size-full, .offcanvas-bottom.offcanvas-size-full { height: 100vh; }
     /* Color match the pagination link color to 'SharePoint Blue' */
     .page-link {
         border-color: #6c757d;

package/src/components/checkboxGroup/index.ts

@@ -35,21 +35,13 @@ class _CheckboxGroup extends Base<ICheckboxGroupProps> implements ICheckboxGroup
 
     // Configure the card group
     private configure(cbTemplate: string) {
-        let colSize = this.props.colSize > 0 && this.props.colSize < 13 ? this.props.colSize : (this.props.label ? 10 : 12);
         let renderRow = typeof (this.props.renderRow) === "boolean" ? this.props.renderRow : true;
 
-        // See if we are not rendering a row
-        if (!renderRow) {
-            // Remove the row class
-            this.el.classList.remove("row");
-        }
-
         // See if a label is defined
         let label = this.el.querySelector("legend");
         if (label) {
             if (this.props.label && this.props.hideLabel != true) {
                 // Add the label
-                renderRow ? label.classList.add("col-" + (12 - colSize)) : null;
                 label.innerHTML = this.props.label;
             } else {
                 // Remove the label
@@ -60,10 +52,7 @@ class _CheckboxGroup extends Base<ICheckboxGroupProps> implements ICheckboxGroup
         // Get the group and configure the size
         let group = this.el.querySelector("div");
         if (group) {
-            if (renderRow) {
-                // Set the class
-                group.classList.add("col-" + colSize);
-            } else {
+            if (!renderRow) {
                 // Remove the group element
                 this.el.removeChild(group);
             }

package/src/components/checkboxGroup/item.ts

@@ -42,6 +42,10 @@ export class CheckboxItem {
             this._elCheckbox.title = this.props.label || this._parent.title || "";
         }
 
+        // Set the column size
+        let colSize = this._parent.colSize > 0 && this._parent.colSize < 13 ? this._parent.colSize : 12;
+        this._el.classList.add("col-" + colSize);
+
         // See if the title property is defined
         if (this._parent.title) {
             // Set the title

package/src/components/checkboxGroup/templates.ts

@@ -1,8 +1,8 @@
 // Checkbox
 export const HTML = `
-<div class="row">
+<div>
     <legend class="col-form-label"></legend>
-    <div></div>
+    <div class="row"></div>
 </div>`.trim();
 
 // Checkbox

package/src/components/form/control.ts

@@ -117,6 +117,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     items: cbProps.items,
                     onChange: cbProps.onChange,
+                    renderRow: cbProps.renderRow,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Checkbox,
                     value: this._props.value
@@ -224,6 +225,7 @@ export class FormControl implements IFormControl {
                     items: cbMultiProps.items,
                     multi: true,
                     onChange: cbMultiProps.onChange,
+                    renderRow: cbMultiProps.renderRow,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Checkbox,
                     value: this._props.value
@@ -270,6 +272,7 @@ export class FormControl implements IFormControl {
                     items: (this._props as IFormControlPropsMultiCheckbox).items,
                     multi: true,
                     onChange: (this._props as IFormControlPropsMultiCheckbox).onChange,
+                    renderRow: (this._props as IFormControlPropsMultiCheckbox).renderRow,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Radio,
                     value: this._props.value
@@ -287,6 +290,7 @@ export class FormControl implements IFormControl {
                     items: (this._props as IFormControlPropsMultiCheckbox).items,
                     multi: true,
                     onChange: (this._props as IFormControlPropsMultiCheckbox).onChange,
+                    renderRow: (this._props as IFormControlPropsMultiCheckbox).renderRow,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Switch,
                     value: this._props.value
@@ -318,6 +322,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     items: (this._props as IFormControlPropsCheckbox).items,
                     onChange: (this._props as IFormControlPropsCheckbox).onChange,
+                    renderRow: (this._props as IFormControlPropsCheckbox).renderRow,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Radio,
                     value: this._props.value
@@ -366,6 +371,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     items: (this._props as IFormControlPropsCheckbox).items,
                     onChange: (this._props as IFormControlPropsCheckbox).onChange,
+                    renderRow: (this._props as IFormControlPropsCheckbox).renderRow,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Switch,
                     value: this._props.value

package/src/components/form/controlTypes.d.ts

@@ -103,6 +103,7 @@ export interface IFormControlPropsCheckbox extends IFormControlProps {
     onControlRendering?: (control: IFormControlPropsCheckbox) => void | PromiseLike<IFormControlPropsCheckbox>;
     onGetValue?: (control: IFormControlPropsCheckbox) => any;
     onValidate?: (control: IFormControlPropsCheckbox, value: IFormControlValidationResult) => boolean | IFormControlValidationResult;
+    renderRow?: boolean;
 }
 
 /**
@@ -142,6 +143,7 @@ export interface IFormControlPropsMultiCheckbox extends IFormControlProps {
     onControlRendering?: (control: IFormControlPropsCheckbox) => void | PromiseLike<IFormControlPropsCheckbox>;
     onGetValue?: (control: IFormControlPropsCheckbox) => any;
     onValidate?: (control: IFormControlPropsCheckbox, value: IFormControlValidationResult) => boolean | IFormControlValidationResult;
+    renderRow?: boolean;
 }
 
 /**

package/src/components/offcanvas/index.ts

@@ -4,22 +4,57 @@ import { Base } from "../base";
 import { appendContent } from "../common";
 import { HTML } from "./templates";
 
+
+/**
+ * Offcanvas Size
+ */
+export enum OffcanvasSize {
+    Small1 = 1,
+    Small2 = 2,
+    Small3 = 3,
+    Medium1 = 4,
+    Medium2 = 5,
+    Medium3 = 6,
+    Large1 = 7,
+    Large2 = 8,
+    Large3 = 9,
+    Full = 10
+}
+
+/**
+ * Offcanvas Size Classes
+ */
+export const OffcanvasSizeClassNames = new ClassNames([
+    "offcanvas-size-sm1",
+    "offcanvas-size-sm2",
+    "offcanvas-size-sm3",
+    "offcanvas-size-md1",
+    "offcanvas-size-md2",
+    "offcanvas-size-md3",
+    "offcanvas-size-lg1",
+    "offcanvas-size-lg2",
+    "offcanvas-size-lg3",
+    "offcanvas-size-full"
+]);
+
 /**
  * Offcanvas Types
  */
 export enum OffcanvasTypes {
     Bottom = 1,
     End = 2,
-    Start = 3
+    Start = 3,
+    Top = 4
 }
 
 /**
- * Offcanvas Classes
+ * Offcanvas Types Classes
  */
-export const OffcanvasClassNames = new ClassNames([
+export const OffcanvasTypesClassNames = new ClassNames([
     "offcanvas-bottom",
     "offcanvas-end",
-    "offcanvas-start"
+    "offcanvas-start",
+    "offcanvas-top"
 ]);
 
 /**
@@ -49,7 +84,8 @@ class _Offcanvas extends Base<IOffcanvasProps> implements IOffcanvas {
         // Set the attributes
         this.props.id ? this.el.id = this.props.id : null;
 
-        // Set the type
+        // Set the size & type
+        this.setSize(this.props.size);
         this.setType(this.props.type);
 
         // Get the options
@@ -174,16 +210,29 @@ class _Offcanvas extends Base<IOffcanvasProps> implements IOffcanvas {
         this._autoClose ? this.configureAutoCloseEvent() : null;
     }
 
+    // Sets the offcanvas size
+    setSize(offcanvasSize: number) {
+        // Parse the class names
+        OffcanvasSizeClassNames.parse(className => {
+            // Remove the class names
+            this.el.classList.remove(className);
+        });
+
+        // Set the class name
+        let className = OffcanvasSizeClassNames.getByType(offcanvasSize);
+        if (className) { this.el.classList.add(className); }
+    }
+
     // Sets the offcanvas type
     setType(offcanvasType: number) {
         // Parse the class names
-        OffcanvasClassNames.parse(className => {
+        OffcanvasTypesClassNames.parse(className => {
             // Remove the class names
             this.el.classList.remove(className);
         });
 
         // Set the class name
-        let className = OffcanvasClassNames.getByType(offcanvasType) || OffcanvasClassNames.getByType(OffcanvasTypes.End);
+        let className = OffcanvasTypesClassNames.getByType(offcanvasType) || OffcanvasTypesClassNames.getByType(OffcanvasTypes.End);
         this.el.classList.add(className);
     }
 

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

@@ -88,6 +88,9 @@ export interface IOffcanvas {
     /** Updates the auto close flag. */
     setAutoClose: (value: boolean) => void;
 
+    /** Updates the size. */
+    setSize: (canvasSize: number) => void;
+
     /** Updates the type. */
     setType: (canvasType: number) => void;
 
@@ -108,6 +111,7 @@ export interface IOffcanvasProps<T = Element> extends IBaseProps<IOffcanvas> {
     onRenderBody?: (el?: HTMLDivElement, props?: IOffcanvasProps) => void;
     onRenderHeader?: (el?: HTMLDivElement, props?: IOffcanvasProps) => void;
     options?: IOffcanvasOptions;
+    size?: number;
     title?: string | T;
     type?: number;
 }
@@ -135,6 +139,22 @@ export interface IOffcanvasOptions {
     visible?: boolean;
 }
 
+/**
+ * Offcanvas Size
+ */
+export type IOffcanvasSize = {
+    Small1: number;
+    Small2: number;
+    Small3: number;
+    Medium1: number;
+    Medium2: number;
+    Medium3: number;
+    Large1: number;
+    Large2: number;
+    Large3: number;
+    Full: number;
+}
+
 /**
  * Offcanvas Types
  */
@@ -142,4 +162,5 @@ export type IOffcanvasTypes = {
     Bottom: number;
     End: number;
     Start: number;
+    Top: number;
 }