danholibraryjs 2.0.0 → 2.0.1

package/dist/Extensions/String.d.ts

@@ -1,36 +0,0 @@
-import IReplacement from "../Interfaces/IReplacement";
-declare global {
-    interface String {
-        /**
-         * Uppercases first letter of string
-         */
-        toPascalCase(): string;
-        /**
-         * Replaces "replacer" (default: ' ') with "replacement" (default: '_')
-         * @param replaceOptions This is practically your stereotypical String.replace, if you really want it to be
-         */
-        toSnakeCase(replaceOptions?: IReplacement): string;
-        /**
-         * Replaces "replacer" (default: ' ') with "replacement" (default: '-')
-         * @param replaceOptions This is practically your stereotypical String.replace, if you really want it to be
-         */
-        toKebabCase(replaceOptions?: IReplacement): string;
-        /**
-         * String.substring but accepting negative numbers to cut from length
-         * @param start Start of string. 0 indexed, if negative number, subtracts number from length
-         * @param end End of string. 0 indexed, if negative number, substracts number from length
-         */
-        clip(start: number, end?: number): string;
-    }
-}
-declare function toPascalCase(this: string): string;
-declare function toSnakeCase(this: string, replaceOptions: IReplacement): string;
-declare function toKebabCase(this: string, replaceOptions: IReplacement): string;
-declare function clip(this: string, start: number, end?: number): string;
-export declare const StringExtensions: {
-    toPascalCase: typeof toPascalCase;
-    toSnakeCase: typeof toSnakeCase;
-    toKebabCase: typeof toKebabCase;
-    clip: typeof clip;
-};
-export {};

package/dist/Extensions/String.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StringExtensions = void 0;
-function toPascalCase() {
-    return this.substring(0, 1).toUpperCase() + this.substring(1);
-}
-String.prototype.toPascalCase = toPascalCase;
-function spaceReplacer(self, replacer, replacement) {
-    return self.replace(new RegExp(`${typeof replacer == 'string' ? replacer : replacer.source}+`), replacement);
-}
-function toSnakeCase(replaceOptions) {
-    return spaceReplacer(this, replaceOptions.replacer || ' ', replaceOptions.replacement || '_');
-}
-String.prototype.toSnakeCase = toSnakeCase;
-function toKebabCase(replaceOptions) {
-    return spaceReplacer(this, replaceOptions.replacer || ' ', replaceOptions.replacement || '-');
-}
-String.prototype.toKebabCase = toKebabCase;
-function clip(start, end) {
-    return this.substring(start < 0 ? this.length - start : start, end && end < 0 ? this.length + end : end);
-}
-String.prototype.clip = clip;
-exports.StringExtensions = {
-    toPascalCase, toSnakeCase, toKebabCase, clip
-};

package/dist/Functions/CopyToClipboard.d.ts

@@ -1,7 +0,0 @@
-/**
- * Copies value to clipboard and alerts a response, if response is defined
- * @param value Value to clipboard
- * @param response Alerts if response is given
- */
-export declare function CopyToClipboard(value: string, response?: string): Promise<void>;
-export default CopyToClipboard;

package/dist/Functions/CopyToClipboard.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CopyToClipboard = void 0;
-/**
- * Copies value to clipboard and alerts a response, if response is defined
- * @param value Value to clipboard
- * @param response Alerts if response is given
- */
-async function CopyToClipboard(value, response) {
-    await navigator.clipboard.writeText(value);
-    if (response)
-        alert(response);
-}
-exports.CopyToClipboard = CopyToClipboard;
-exports.default = CopyToClipboard;

package/dist/Functions/GetCSSProperty.d.ts

@@ -1,15 +0,0 @@
-type CSSReturnTypes = {
-    string: string;
-    number: number;
-};
-/**
- * Gets the value of "property" in type "type" from query "query"
- * Basically, you can get your --color-primary from :root
- *
- * @param property Name of the property to get
- * @param type Type of the property to parse
- * @param query Query to get the element that has the property
- * @returns Property value converted to type
-*/
-export declare function GetCSSProperty<Type extends keyof CSSReturnTypes>(property: string, type: Type, query?: string): CSSReturnTypes[Type];
-export {};

package/dist/Functions/GetCSSProperty.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GetCSSProperty = void 0;
-/**
- * Gets the value of "property" in type "type" from query "query"
- * Basically, you can get your --color-primary from :root
- *
- * @param property Name of the property to get
- * @param type Type of the property to parse
- * @param query Query to get the element that has the property
- * @returns Property value converted to type
-*/
-function GetCSSProperty(property, type, query = ":root") {
-    const rootEl = document.querySelector(query);
-    if (!rootEl)
-        throw new Error(`${query} does not exist!`);
-    const rootStyles = getComputedStyle(rootEl);
-    const cssProp = rootStyles.getPropertyValue(property);
-    if (type === 'string')
-        return cssProp;
-    const numberValue = parseInt(cssProp);
-    if (isNaN(numberValue))
-        throw new Error(`${property} is not a number!: ${cssProp}`);
-    return numberValue;
-}
-exports.GetCSSProperty = GetCSSProperty;

package/dist/Functions/GetNestedProperty.d.ts

@@ -1,9 +0,0 @@
-export type GetNestedProperty<Parent, Key extends string> = Key extends keyof Parent ? Parent[Key] : Key extends `${infer K}.${infer Rest}` ? K extends keyof Parent ? GetNestedProperty<Parent[K], Rest> : never : never;
-/**
- * Gets a nested property from an object
- * @param parent Parent object to search
- * @param key Key to search for. Can be nested with dot notation
- * @returns Value of key or null if not found
- */
-export declare function GetNestedProperty<Parent extends object, Key extends string>(parent: Parent, key: Key): GetNestedProperty<Parent, Key> | null;
-export default GetNestedProperty;

package/dist/Functions/GetNestedProperty.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GetNestedProperty = void 0;
-/**
- * Gets a nested property from an object
- * @param parent Parent object to search
- * @param key Key to search for. Can be nested with dot notation
- * @returns Value of key or null if not found
- */
-function GetNestedProperty(parent, key) {
-    if (key in parent)
-        return parent[key];
-    for (const prop in parent) {
-        if (typeof parent[prop] === 'object') {
-            const result = GetNestedProperty(parent[prop], key);
-            if (result)
-                return result;
-        }
-    }
-    return null;
-}
-exports.GetNestedProperty = GetNestedProperty;
-exports.default = GetNestedProperty;

package/dist/Functions/HTMLEvent.d.ts

@@ -1,11 +0,0 @@
-/**
- * Create HTMLEvent object from function
- * @param name Name of the event
- * @param handler Handler for the event
- * @returns Parameters as object
- */
-export declare function HTMLEvent<Event extends keyof HTMLElementEventMap, ReturnType extends any>(name: Event, handler: (event: HTMLElementEventMap[Event]) => ReturnType): {
-    name: Event;
-    handler: (event: HTMLElementEventMap[Event]) => ReturnType;
-};
-export default HTMLEvent;

package/dist/Functions/HTMLEvent.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HTMLEvent = void 0;
-/**
- * Create HTMLEvent object from function
- * @param name Name of the event
- * @param handler Handler for the event
- * @returns Parameters as object
- */
-function HTMLEvent(name, handler) {
-    return { name, handler };
-}
-exports.HTMLEvent = HTMLEvent;
-exports.default = HTMLEvent;

package/dist/Functions/SetNavigationSelected.d.ts

@@ -1,9 +0,0 @@
-/**
- * Appends classes to header's "a" elements, when navigation to "a"'s page is selected
- * @param query The query selector for Document.querySelector
- * @param currentPageClasses Class(es) to append header's "a" elements
- *
- * @borrows Document.querySelector
- */
-export declare function SetNavigationSelected(query: string, ...currentPageClasses: string[]): void;
-export default SetNavigationSelected;

package/dist/Functions/SetNavigationSelected.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SetNavigationSelected = void 0;
-/**
- * Appends classes to header's "a" elements, when navigation to "a"'s page is selected
- * @param query The query selector for Document.querySelector
- * @param currentPageClasses Class(es) to append header's "a" elements
- *
- * @borrows Document.querySelector
- */
-function SetNavigationSelected(query, ...currentPageClasses) {
-    const header = document.querySelector(query);
-    if (!header)
-        throw { message: `Couldn't find header from query, ${query}` };
-    const children = header.children.array().filter(c => c.tagName === 'a');
-    const currentPage = document.location.href;
-    children.forEach(gc => {
-        if (gc.href != currentPage)
-            gc.classList.remove(...currentPageClasses);
-        else
-            gc.classList.add(...currentPageClasses);
-    });
-}
-exports.SetNavigationSelected = SetNavigationSelected;
-exports.default = SetNavigationSelected;

package/dist/Functions/index.d.ts

@@ -1,5 +0,0 @@
-export * from './CopyToClipboard';
-export * from './GetCSSProperty';
-export * from './GetNestedProperty';
-export * from './SetNavigationSelected';
-export * from './HTMLEvent';

package/dist/Functions/index.js

@@ -1,21 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./CopyToClipboard"), exports);
-__exportStar(require("./GetCSSProperty"), exports);
-__exportStar(require("./GetNestedProperty"), exports);
-__exportStar(require("./SetNavigationSelected"), exports);
-__exportStar(require("./HTMLEvent"), exports);

package/dist/Utils/ApiUtil/ApiTypes.d.ts

@@ -1,15 +0,0 @@
-export type TParam = string | undefined;
-export type HttpMethods = 'GET' | 'POST' | 'PUT' | 'DELETE';
-export type RequestOptions<TBody = any> = Omit<RequestInit, 'method' | 'body'> & {
-    method?: HttpMethods;
-    body?: TBody;
-    noHeaders?: boolean;
-    controller?: AbortController;
-    query?: Record<string, string | undefined>;
-    baseEndpoint?: string;
-};
-export type ApiUtilOptions = {
-    baseEndpointDev: string;
-    baseEndpoint?: string;
-    log?: boolean;
-};

package/dist/Utils/ApiUtil/ApiTypes.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// All possible endpoints for the API. This will generate autocomplete when using the Request function
-// The commented code below is an example from my previous "CitizenTaxi" project to illustrate how this works
-// export type ApiEndpoints<Param extends TParam = undefined> =
-//   | `bookings` // [GET, POST]
-//   | `bookings?citizenId=${Param}` // [GET] Guid
-//   | `bookings/${Param}` // [GET, PUT, DELETE] Guid bookingId
-//   | `notes` // [GET, POST]
-//   | `notes?citizenId=${Param}` // [GET] Guid
-//   | `notes/${Param}` // [GET, PUT, DELETE] Guid noteId
-//   | `users` // [GET, POST]
-//   | `users?role=${Param}` // [GET] enum Role
-//   | `users/${Param}` // [GET, PUT, DELETE] Guid userId
-//   | `users/authenticate`; // [POST, DELETE]

package/dist/Utils/ApiUtil/RequestUtil.d.ts

@@ -1,19 +0,0 @@
-import { RequestOptions } from "./ApiTypes";
-/**
- * Makes a request to the API
- * @param path Api endpoint to request
- * @param options Additional options for the request
- * @returns The response from the API
- */
-export declare function Request<TData, ApiEndpoints extends string>(path: ApiEndpoints, { method, body, noHeaders, controller, query, baseEndpoint }?: RequestOptions | undefined, log?: boolean): Promise<{
-    success: boolean;
-    status: number;
-    data: TData;
-    text: string;
-}>;
-/**
- * Ensures that the path starts with a /
- * @param path Path string
- * @returns Path that starts with a /
- */
-export declare function ensureSlash(path: string): string;

package/dist/Utils/ApiUtil/RequestUtil.js

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ensureSlash = exports.Request = void 0;
-/**
- * Makes a request to the API
- * @param path Api endpoint to request
- * @param options Additional options for the request
- * @returns The response from the API
- */
-async function Request(path, 
-// Destructor the options object, if it's undefined then set it to an empty object
-{ method = 'GET', body, noHeaders = false, controller = new AbortController(), query, baseEndpoint } = {}, log = false) {
-    // console.log(`Requesting ${path} with method ${method}`);
-    // Construct the endpoint for the request
-    const endpoint = (() => {
-        const result = baseEndpoint + ensureSlash(path);
-        if (path.includes('?') || !query)
-            return result;
-        // If the query object is defined, then construct a query string from it
-        const queryString = Object.entries(query)
-            .map(([key, value]) => value ? `${key}=${value}` : '')
-            .join('&');
-        return path.includes('?') ? `${result}&${queryString}` : `${result}?${queryString}`;
-    })();
-    // Construct the request init object to pass to the fetch function
-    const init = {
-        method,
-        body: body ? !noHeaders ? JSON.stringify(body) : body : undefined,
-        headers: !noHeaders ? { 'Content-Type': 'application/json' } : undefined,
-        signal: controller.signal,
-        credentials: 'include',
-        mode: 'cors'
-    };
-    // Make the request, log any errors, and throw them again
-    const res = await fetch(endpoint, init).catch(err => {
-        console.error(`Failed to [${method}] ${path}`, err);
-        throw err;
-    });
-    if (log)
-        console.log(`[${method}] ${path} responded with ${res.status}`, res);
-    // Clone the response so that it can be converted to JSON and text
-    const clone = res.clone();
-    // All successful responses are in the 200s, so check if the status code starts with 2
-    const isSuccessful = res.status.toString().startsWith('2');
-    // This try-catch block is used to catch any errors when converting the response to JSON
-    // If the response is not jsonable, then the catch will return null for the data
-    try {
-        return {
-            success: isSuccessful,
-            status: res.status,
-            data: await res.json(),
-            text: await clone.text(),
-        };
-    }
-    catch {
-        return {
-            success: isSuccessful,
-            status: res.status,
-            data: null,
-            text: await clone.text(),
-        };
-    }
-}
-exports.Request = Request;
-/**
- * Ensures that the path starts with a /
- * @param path Path string
- * @returns Path that starts with a /
- */
-function ensureSlash(path) {
-    return path.startsWith('/') ? path : '/' + path;
-}
-exports.ensureSlash = ensureSlash;

package/dist/Utils/ApiUtil/index.d.ts

@@ -1,20 +0,0 @@
-import { ApiUtilOptions, RequestOptions } from "./ApiTypes";
-export declare class ApiUtil<ApiEndpoints extends string> {
-    protected __baseEndpointDev: string;
-    protected __baseEndpoint?: string;
-    protected __log: boolean;
-    constructor({ baseEndpointDev, baseEndpoint, log }: ApiUtilOptions);
-    /**
-     * Make a request to the API
-     * @param path The path to the endpoint
-     * @param options The options for the request
-     * @returns The response from the API
-     */
-    request<TData>(path: ApiEndpoints, options?: RequestOptions): Promise<{
-        success: boolean;
-        status: number;
-        data: TData;
-        text: string;
-    }>;
-    get baseEndpoint(): string;
-}

package/dist/Utils/ApiUtil/index.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ApiUtil = void 0;
-const RequestUtil_1 = require("./RequestUtil");
-class ApiUtil {
-    __baseEndpointDev;
-    __baseEndpoint;
-    __log;
-    constructor({ baseEndpointDev, baseEndpoint, log }) {
-        this.__baseEndpointDev = baseEndpointDev;
-        this.__baseEndpoint = baseEndpoint;
-        this.__log = log ?? false;
-    }
-    /**
-     * Make a request to the API
-     * @param path The path to the endpoint
-     * @param options The options for the request
-     * @returns The response from the API
-     */
-    async request(path, options) {
-        return (0, RequestUtil_1.Request)(path, {
-            ...options,
-            baseEndpoint: this.baseEndpoint
-        }, this.__log);
-    }
-    get baseEndpoint() {
-        const processExists = 'process' in globalThis;
-        // @ts-ignore -- process is not defined in the browser
-        const isDev = processExists && process.env.NODE_ENV === 'development';
-        return isDev ? this.__baseEndpointDev : this.__baseEndpoint ?? this.__baseEndpointDev;
-    }
-}
-exports.ApiUtil = ApiUtil;

package/dist/Utils/FormUtil.d.ts

@@ -1,6 +0,0 @@
-/**
- * Serialize a form into an object
- * @param form The form to serialize
- * @returns An object of type T from the form
- */
-export declare function serializeForm<T extends object>(form: HTMLFormElement, log?: boolean): T;

package/dist/Utils/FormUtil.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.serializeForm = void 0;
-/**
- * Serialize a form into an object
- * @param form The form to serialize
- * @returns An object of type T from the form
- */
-function serializeForm(form, log = false) {
-    const children = Array.from(form.children);
-    const formData = children.reduce((acc, child) => {
-        // Find inputs and selects
-        const elements = Array.from(child.querySelectorAll('input, select'));
-        if (['INPUT', 'SELECT'].includes(child.tagName))
-            elements.push(child);
-        for (const element of Array.from(elements)) {
-            if (element.type === 'submit')
-                continue; // Ignore submit buttons
-            const name = element.getAttribute('name');
-            if (!name) {
-                console.error('[DanhoLibraryRJS] [FormUtil]: name attribute is required', { element });
-                throw new Error('name attribute is required');
-            }
-            const value = element.value;
-            if (value === null)
-                console.warn(`${name}.value returned null`, { element });
-            if (log)
-                console.log(`[DanhoLibraryRJS] [FormUtil]`, { name, value });
-            acc[name] = /^\d$/.test(value) ? parseInt(value) : value;
-        }
-        return acc;
-    }, {});
-    return formData;
-}
-exports.serializeForm = serializeForm;

package/docs/Functions.md

@@ -1,61 +0,0 @@
-# [DanhoLibraryJS](../README.md)
-
-## Functions
-
-```ts
-/**
- * Copies value to clipboard and alerts a response, if response is defined
- * @param value Value to clipboard
- * @param response Alerts if response is given
- */
-async function CopyToClipboard(value: string, response?: string): Promise<void>;
-
-/**
- * Gets the value of "property" in type "type" from query "query"
- * Basically, you can get your --color-primary from :root
- * 
- * @param property Name of the property to get
- * @param type Type of the property to parse
- * @param query Query to get the element that has the property
- * @returns Property value converted to type
-*/
-function GetCSSProperty<Type extends keyof CSSReturnTypes>(property: string, type: Type, query = ":root"): CSSReturnTypes[Type];
-
-/**
- * Gets a nested property from an object
- * @param parent Parent object to search
- * @param key Key to search for. Can be nested with dot notation
- * @returns Value of key or null if not found
- */
-function GetNestedProperty<Parent, Key extends string>(parent: Parent, key: Key): GetNestedProperty<Parent, Key> | null;
-
-/**
- * Create HTMLEvent object from function
- * @param name Name of the event
- * @param handler Handler for the event
- * @returns Parameters as object
- */
-function HTMLEvent<
-    Event extends keyof HTMLElementEventMap, 
-    ReturnType extends any
->(name: Event, handler: (event: HTMLElementEventMap[Event]) => ReturnType): { 
-    name: Event, 
-    handler: (event: HTMLElementEventMap[Event]) => ReturnType 
-}
-
-/**
- * Appends classes to header's "a" elements, when navigation to "a"'s page is selected
- * @param query The query selector for Document.querySelector
- * @param currentPageClasses Class(es) to append header's "a" elements
- * 
- * @borrows Document.querySelector
- */
-function SetNavigationSelected(query: string, ...currentPageClasses: Array<string>): void;
-
-/**
- * Converts input into milliseconds
- * @param input Input to convert to ms. 1s | 2m | 3h | 1M | 60000
- * @returns Millisecond value of input
- */
-function ms(input: TimeDelay): number
-```

package/src/Extensions/Document.ts

@@ -1,58 +0,0 @@
-import { IElement } from "../Types";
-
-declare global {
-  interface Document {
-    /**
-     * Creates an element like Document#createElement, however with construction options to assign values in construction instead of after construction.
-     * @param tagName HTMLElement tag name
-     * @param options Construction options, instead of assigning values after construction
-     * @param children Child elements
-     */
-    createProperElement<Tag extends keyof HTMLElementTagNameMap>(tagName: Tag, options?: Partial<HTMLElementTagNameMap[Tag]>, ...children: Array<IElement>): HTMLElementTagNameMap[Tag];
-    createProperElement<Tag extends keyof HTMLElementTagNameMap>(tagName: Tag, ...children: Array<IElement>): HTMLElementTagNameMap[Tag];
-    createElementFromString<K extends keyof HTMLElementTagNameMap>(html: string, parentTag?: K): HTMLElementTagNameMap[K];
-  }
-  interface HTMLCollection {
-    /**
-     * Converts HTMLCollection to Element[]
-     */
-    array(): Element[];
-  }
-}
-
-function createElement<Tag extends keyof HTMLElementTagNameMap>(
-  this: Document, tagName: Tag,
-  options?: Partial<HTMLElementTagNameMap[Tag]> | string,
-  ...children: Array<IElement>
-): HTMLElementTagNameMap[Tag] {
-
-  const element = Object.assign(document.createElement(tagName), typeof options === 'string' ? {} : options);
-  children ??= typeof options === 'string' ? [options] as Array<IElement> : [];
-  typeof options === 'string' && children.unshift(options);
-
-  if (!children.length) return element;
-  else if (typeof children === 'string') element.innerHTML = children;
-  else if (children instanceof Array) children.forEach(child => (
-    typeof child === 'string' ?
-      element.innerHTML += child :
-      element.appendChild(child)
-  ));
-  else element.appendChild(children);
-  return element;
-
-}
-Document.prototype.createProperElement = createElement;
-
-function createElementFromString<Tag extends keyof HTMLElementTagNameMap>(this: Document, html: string, tag?: Tag): HTMLElementTagNameMap[Tag] {
-  if (!html.startsWith(`<${tag}`)) html = `<${tag}>${html}</${tag}>`;
-  return new DOMParser().parseFromString(html, 'text/html').body.firstElementChild as HTMLElementTagNameMap[Tag];
-}
-Document.prototype.createElementFromString = createElementFromString;
-
-HTMLCollection.prototype.array = function (this: HTMLCollection) {
-  return Array.from(this);
-};
-
-export const DocumentExtensions = {
-  createElement, createElementFromString
-};

package/src/Functions/CopyToClipboard.ts

@@ -1,10 +0,0 @@
-/**
- * Copies value to clipboard and alerts a response, if response is defined
- * @param value Value to clipboard
- * @param response Alerts if response is given
- */
- export async function CopyToClipboard(value: string, response?: string) {
-    await navigator.clipboard.writeText(value);
-    if (response) alert(response);
-}
-export default CopyToClipboard;

package/src/Functions/GetCSSProperty.ts

@@ -1,27 +0,0 @@
-type CSSReturnTypes = {
-    string: string,
-    number: number
-}
-
-/**
- * Gets the value of "property" in type "type" from query "query"
- * Basically, you can get your --color-primary from :root
- * 
- * @param property Name of the property to get
- * @param type Type of the property to parse
- * @param query Query to get the element that has the property
- * @returns Property value converted to type
-*/
-export function GetCSSProperty<Type extends keyof CSSReturnTypes>(property: string, type: Type, query = ":root"): CSSReturnTypes[Type] {
-    const rootEl = document.querySelector(query);
-    if (!rootEl) throw new Error(`${query} does not exist!`);
-
-    const rootStyles = getComputedStyle(rootEl);
-    const cssProp = rootStyles.getPropertyValue(property);
-    if (type === 'string') return cssProp as CSSReturnTypes[Type];
-
-    const numberValue = parseInt(cssProp);
-    if (isNaN(numberValue)) throw new Error(`${property} is not a number!: ${cssProp}`);
-    return numberValue as CSSReturnTypes[Type];
-}
-