gd-bs 5.7.7 → 5.8.0

package/index.html

@@ -978,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.7",
+    "version": "5.8.0",
     "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/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;
 }