diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index f82c629d8..485ad4be6 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -9,7 +9,7 @@ assignees: '' ## Subject of the issue Describe your issue here. -If unsure if lib bug, use slack channel instead: https://join.slack.com/t/gridstackjs/shared_invite/zt-2qa21lnxz-vw29RdTFet3N6~ABqT9kwA +If unsure if lib bug, use slack channel instead: https://join.slack.com/t/gridstackjs/shared_invite/zt-3978nsff6-HDNE_N45DydP36NBSV9JFQ ## Your environment * version of gridstack.js - DON'T SAY LATEST as that doesn't mean anything a month/year from now. @@ -17,7 +17,12 @@ If unsure if lib bug, use slack channel instead: https://join.slack.com/t/gridst ## Steps to reproduce You **MUST** provide a working demo - keep it simple and avoid frameworks as that could have issues - you can use -https://jsfiddle.net/adumesny/jqhkry7g + +plain html: https://stackblitz.com/edit/gridstack-demo +Angular: https://stackblitz.com/edit/gridstack-angular + +please don't use [jsfiddle.net](https://jsfiddle.net/adumesny/jqhkry7g) as my work now blocks that website. + ## Expected behavior Tell us what should happen. If hard to describe, attach a video as well. diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml new file mode 100644 index 000000000..a7063434f --- /dev/null +++ b/.github/workflows/deploy-docs.yml @@ -0,0 +1,96 @@ +name: Deploy Documentation + +on: + push: + branches: [ master ] + # Allow manual triggering + workflow_dispatch: + +jobs: + deploy-docs: + runs-on: ubuntu-latest + # Only run on pushes to master (not PRs) + if: github.ref == 'refs/heads/master' + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '18' + cache: 'yarn' + + - name: Install main dependencies + run: yarn install --frozen-lockfile + + - name: Install Angular dependencies + run: | + cd angular + yarn install --frozen-lockfile + + - name: Build Angular library + run: yarn build:ng + + - name: Build main library + run: | + grunt + webpack + tsc --stripInternal + + - name: Generate all documentation + run: yarn doc:all + + - name: Prepare deployment structure + run: | + mkdir -p deploy + + # Create proper directory structure for GitHub Pages + mkdir -p deploy/doc/html + mkdir -p deploy/angular/doc/html + + # Copy main library HTML documentation + if [ -d "doc/html" ]; then + cp -r doc/html/* deploy/doc/html/ + fi + + # Copy Angular library HTML documentation + if [ -d "angular/doc/html" ]; then + cp -r angular/doc/html/* deploy/angular/doc/html/ + fi + + # Copy redirect index.html to root + if [ -f "doc/index.html" ]; then + cp doc/index.html deploy/ + fi + + # Ensure .nojekyll exists to prevent Jekyll processing + touch deploy/.nojekyll + + # Optional: Add a simple index.html at root if none exists + if [ ! -f "deploy/index.html" ]; then + cat > deploy/index.html << 'EOF' + + + + GridStack.js Documentation + + + +

GridStack.js Documentation

+

Redirecting to API Documentation...

+ + + EOF + fi + + - name: Deploy to GitHub Pages + uses: peaceiris/actions-gh-pages@v4 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./deploy + keep_files: true + commit_message: 'Deploy documentation from ${{ github.sha }}' diff --git a/.github/workflows/sync-docs.yml b/.github/workflows/sync-docs.yml new file mode 100644 index 000000000..31fe83318 --- /dev/null +++ b/.github/workflows/sync-docs.yml @@ -0,0 +1,113 @@ +name: Sync Documentation to gh-pages + +on: + push: + branches: [master, develop] + paths: + - 'doc/html/**' + - 'angular/doc/**' + - '.github/workflows/sync-docs.yml' + workflow_dispatch: + +jobs: + sync-docs: + runs-on: ubuntu-latest + if: github.repository == 'gridstack/gridstack.js' + + steps: + - name: Checkout master branch + uses: actions/checkout@v4 + with: + ref: master + fetch-depth: 0 + token: ${{ secrets.GITHUB_TOKEN }} + + - name: Configure Git + run: | + git config --global user.name 'github-actions[bot]' + git config --global user.email 'github-actions[bot]@users.noreply.github.com' + + - name: Check if docs exist + id: check-docs + run: | + if [ -d "doc/html" ]; then + echo "main_docs=true" >> $GITHUB_OUTPUT + else + echo "main_docs=false" >> $GITHUB_OUTPUT + fi + + if [ -d "angular/doc/api" ]; then + echo "angular_docs=true" >> $GITHUB_OUTPUT + else + echo "angular_docs=false" >> $GITHUB_OUTPUT + fi + + - name: Checkout gh-pages branch + if: steps.check-docs.outputs.main_docs == 'true' || steps.check-docs.outputs.angular_docs == 'true' + run: | + git fetch origin gh-pages + git checkout gh-pages + + - name: Sync main library documentation + if: steps.check-docs.outputs.main_docs == 'true' + run: | + echo "Syncing main library documentation..." + + # Remove existing docs directory if it exists + if [ -d "docs/html" ]; then + rm -rf docs/html + fi + + # Extract docs from master branch using git archive + mkdir -p docs + git archive master doc/html | tar -xf - + mv doc/html docs/html + rm -rf doc + + # Add changes + git add docs/html + + - name: Sync Angular documentation + if: steps.check-docs.outputs.angular_docs == 'true' + run: | + echo "Syncing Angular library documentation..." + + # Remove existing Angular docs if they exist + if [ -d "angular/doc" ]; then + rm -rf angular/doc + fi + + # Extract Angular docs from master branch using git archive + git archive master angular/doc | tar -xf - + + # Add changes + git add angular/doc + + - name: Commit and push changes + if: steps.check-docs.outputs.main_docs == 'true' || steps.check-docs.outputs.angular_docs == 'true' + run: | + # Check if there are changes to commit + if git diff --staged --quiet; then + echo "No documentation changes to sync" + exit 0 + fi + + # Create commit message + COMMIT_MSG="📚 Auto-sync documentation from master" + if [ "${{ steps.check-docs.outputs.main_docs }}" == "true" ]; then + COMMIT_MSG="${COMMIT_MSG}%0A%0A- Updated main library HTML docs (docs/html/)" + fi + if [ "${{ steps.check-docs.outputs.angular_docs }}" == "true" ]; then + COMMIT_MSG="${COMMIT_MSG}%0A%0A- Updated Angular library docs (angular/doc/)" + fi + + COMMIT_MSG="${COMMIT_MSG}%0A%0ASource: ${{ github.sha }}" + + # Decode URL-encoded newlines for the commit message + COMMIT_MSG=$(echo -e "${COMMIT_MSG//%0A/\\n}") + + # Commit and push + git commit -m "$COMMIT_MSG" + git push origin gh-pages + + echo "✅ Documentation synced to gh-pages successfully!" diff --git a/.gitignore b/.gitignore index d58eb8745..1451f9e98 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,5 @@ dist_save node_modules .vscode .idea/ +.DS_Store +doc/html/ diff --git a/Gruntfile.js b/Gruntfile.js index f2e5049e6..d5364258b 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -44,6 +44,7 @@ module.exports = function(grunt) { 'dist/angular/src/gridstack-item.component.ts': ['angular/projects/lib/src/lib/gridstack-item.component.ts'], 'dist/angular/src/base-widget.ts': ['angular/projects/lib/src/lib/base-widget.ts'], 'dist/angular/src/gridstack.module.ts': ['angular/projects/lib/src/lib/gridstack.module.ts'], + 'dist/angular/src/types.ts': ['angular/projects/lib/src/lib/types.ts'], } } }, diff --git a/LICENSE b/LICENSE index 8a92097e9..1473e70e6 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2019-2023 Alain Dumesny. v0.4.0 and older (c) 2014-2018 Pavel Reznikov, Dylan Weiss +Copyright (c) 2019-2025 Alain Dumesny. v0.4.0 and older (c) 2014-2018 Pavel Reznikov, Dylan Weiss Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 5f6693dd7..c97d8f461 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ If you find this lib useful, please donate [PayPal](https://www.paypal.me/alaind [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/alaind831) [![Donate](https://img.shields.io/badge/Donate-Venmo-g.svg)](https://www.venmo.com/adumesny) -Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/gridstackjs/shared_invite/zt-2qa21lnxz-vw29RdTFet3N6~ABqT9kwA) +Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/gridstackjs/shared_invite/zt-3978nsff6-HDNE_N45DydP36NBSV9JFQ) @@ -59,7 +59,7 @@ Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/grids # Demo and API Documentation -Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/), and complete [API documentation](https://github.com/gridstack/gridstack.js/tree/master/doc) +Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/), and complete [API documentation](https://gridstack.github.io/gridstack.js/doc/html/) ([markdown](https://github.com/gridstack/gridstack.js/tree/master/doc/API.md)) # Usage @@ -142,7 +142,7 @@ GridStack.init(); ...or see list of all [API and options](https://github.com/gridstack/gridstack.js/tree/master/doc) available. -see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example too. +see [stackblitz sample](https://stackblitz.com/edit/gridstack-demo) as running example too. ## Requirements @@ -477,15 +477,18 @@ breaking change: **Breaking change:** +* V11 add new `GridStack.renderCB` that is called for you to create the widget content (entire GridStackWidget is passed so you can use id or some other field as logic) while GS creates the 2 needed parent divs + classes, unlike `GridStack.addRemoveCB` which doesn't create anything for you. Both can be handy for Angular/React/Vue frameworks. +* `addWidget(w: GridStackWidget)` is now the only supported format, no more string content passing. You will need to create content yourself as shown below, OR use `GridStack.createWidgetDivs()` to create parent divs, do the innerHtml, then call `makeWidget(el)` instead. * if your code relies on `GridStackWidget.content` with real HTML (like a few demos) it is up to you to do this: ```ts // NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736 GridStack.renderCB = function(el: HTMLElement, w: GridStackNode) { el.innerHTML = w.content; }; + +// now you can create widgets like this again +let gridWidget = grid.addWidget({x, y, w, h, content: '
My html content
'}); ``` -* V11 add new `GridStack.renderCB` that is called for you to create the widget content (entire GridStackWidget is passed so you can use id or some other field as logic) while GS creates the 2 needed parent divs + classes, unlike `GridStack.addRemoveCB` which doesn't create anything for you. Both can be handy for Angular/React/Vue frameworks. -* `addWidget(w: GridStackWidget)` is now the only supported format, no more string content passing. You will need to create content yourself (`GridStack.createWidgetDivs()` can be used to create parent divs) then call `makeWidget(el)` instead. **Potential breaking change:** @@ -501,8 +504,10 @@ GridStack.renderCB = function(el: HTMLElement, w: GridStackNode) { * column and cell height code has been re-writen to use browser CSS variables, and we no longer need a tons of custom CSS classes! this fixes a long standing issue where people forget to include the right CSS for non 12 columns layouts, and a big speedup in many cases (many columns, or small cellHeight values). -**Breaking change:** -* `gridstack-extra.min.css` no longer exist, nor is custom column CSS needed. API/options hasn't changed. +**Potential breaking change:** +* `gridstack-extra.min.css` no longer exist, nor is custom column CSS classes needed. API/options hasn't changed. +* (v12.1) `ES5` folder content has been removed - was for IE support, which has been dropped. +* (v12.1) nested grid events are now sent to the main grid. You might have to adjust your workaround of this missing feature. nested.html demo has been adjusted. # jQuery Application diff --git a/angular/.gitignore b/angular/.gitignore index 0711527ef..4d87fb81a 100644 --- a/angular/.gitignore +++ b/angular/.gitignore @@ -5,6 +5,7 @@ /tmp /out-tsc /bazel-out +/doc/html/ # Node /node_modules diff --git a/angular/README.md b/angular/README.md index 2af7cd84c..79abfc0ff 100644 --- a/angular/README.md +++ b/angular/README.md @@ -2,6 +2,8 @@ The Angular [wrapper component](projects/lib/src/lib/gridstack.component.ts) is a better way to use Gridstack, but alternative raw [ngFor](projects/demo/src/app/ngFor.ts) or [simple](projects/demo/src/app/simple.ts) demos are also given. +Running version can be seen here https://stackblitz.com/edit/gridstack-angular + # Dynamic grid items this is the recommended way if you are going to have multiple grids (alow drag&drop between) or drag from toolbar to create items, or drag to remove items, etc... diff --git a/angular/doc/api/base-widget.md b/angular/doc/api/base-widget.md new file mode 100644 index 000000000..8a81d03a5 --- /dev/null +++ b/angular/doc/api/base-widget.md @@ -0,0 +1,96 @@ +# base-widget + +## Classes + +### `abstract` BaseWidget + +Defined in: [angular/projects/lib/src/lib/base-widget.ts:39](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/base-widget.ts#L39) + +Base widget class for GridStack Angular integration. + +#### Constructors + +##### Constructor + +```ts +new BaseWidget(): BaseWidget; +``` + +###### Returns + +[`BaseWidget`](#basewidget) + +#### Methods + +##### serialize() + +```ts +serialize(): undefined | NgCompInputs; +``` + +Defined in: [angular/projects/lib/src/lib/base-widget.ts:66](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/base-widget.ts#L66) + +Override this method to return serializable data for this widget. + +Return an object with properties that map to your component's @Input() fields. +The selector is handled automatically, so only include component-specific data. + +###### Returns + +`undefined` \| [`NgCompInputs`](types.md#ngcompinputs) + +Object containing serializable component data + +###### Example + +```typescript +serialize() { + return { + title: this.title, + value: this.value, + settings: this.settings + }; +} +``` + +##### deserialize() + +```ts +deserialize(w): void; +``` + +Defined in: [angular/projects/lib/src/lib/base-widget.ts:88](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/base-widget.ts#L88) + +Override this method to handle widget restoration from saved data. + +Use this for complex initialization that goes beyond simple @Input() mapping. +The default implementation automatically assigns input data to component properties. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `w` | [`NgGridStackWidget`](types.md#nggridstackwidget) | The saved widget data including input properties | + +###### Returns + +`void` + +###### Example + +```typescript +deserialize(w: NgGridStackWidget) { + super.deserialize(w); // Call parent for basic setup + + // Custom initialization logic + if (w.input?.complexData) { + this.processComplexData(w.input.complexData); + } +} +``` + +#### Properties + +| Property | Modifier | Type | Description | Defined in | +| ------ | ------ | ------ | ------ | ------ | +| `widgetItem?` | `public` | [`NgGridStackWidget`](types.md#nggridstackwidget) | Complete widget definition including position, size, and Angular-specific data. Populated automatically when the widget is loaded or saved. | [angular/projects/lib/src/lib/base-widget.ts:45](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/base-widget.ts#L45) | diff --git a/angular/doc/api/gridstack-item.component.md b/angular/doc/api/gridstack-item.component.md new file mode 100644 index 000000000..58c6d3ece --- /dev/null +++ b/angular/doc/api/gridstack-item.component.md @@ -0,0 +1,2895 @@ +# gridstack-item.component + +## Classes + +### GridstackItemComponent + +Defined in: [angular/projects/lib/src/lib/gridstack-item.component.ts:56](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L56) + +Angular component wrapper for individual GridStack items. + +This component represents a single grid item and handles: +- Dynamic content creation and management +- Integration with parent GridStack component +- Component lifecycle and cleanup +- Widget options and configuration + +Use in combination with GridstackComponent for the parent grid. + +#### Example + +```html + + + + + +``` + +#### Implements + +- `OnDestroy` + +#### Accessors + +##### options + +###### Get Signature + +```ts +get options(): GridStackNode; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack-item.component.ts:100](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L100) + +return the latest grid options (from GS once built, otherwise initial values) + +###### Returns + +`GridStackNode` + +###### Set Signature + +```ts +set options(val): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack-item.component.ts:89](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L89) + +Grid item configuration options. +Defines position, size, and behavior of this grid item. + +###### Example + +```typescript +itemOptions: GridStackNode = { + x: 0, y: 0, w: 2, h: 1, + noResize: true, + content: 'Item content' +}; +``` + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `val` | `GridStackNode` | + +###### Returns + +`void` + +##### el + +###### Get Signature + +```ts +get el(): GridItemCompHTMLElement; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack-item.component.ts:107](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L107) + +return the native element that contains grid specific fields as well + +###### Returns + +[`GridItemCompHTMLElement`](#griditemcomphtmlelement) + +#### Constructors + +##### Constructor + +```ts +new GridstackItemComponent(elementRef): GridstackItemComponent; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack-item.component.ts:114](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L114) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `elementRef` | `ElementRef`\<[`GridItemCompHTMLElement`](#griditemcomphtmlelement)\> | + +###### Returns + +[`GridstackItemComponent`](#gridstackitemcomponent) + +#### Methods + +##### clearOptions() + +```ts +clearOptions(): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack-item.component.ts:110](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L110) + +clears the initial options now that we've built + +###### Returns + +`void` + +##### ngOnDestroy() + +```ts +ngOnDestroy(): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack-item.component.ts:118](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L118) + +A callback method that performs custom clean-up, invoked immediately +before a directive, pipe, or service instance is destroyed. + +###### Returns + +`void` + +###### Implementation of + +```ts +OnDestroy.ngOnDestroy +``` + +#### Properties + +| Property | Modifier | Type | Description | Defined in | +| ------ | ------ | ------ | ------ | ------ | +| `container?` | `public` | `ViewContainerRef` | Container for dynamic component creation within this grid item. Used to append child components programmatically. | [angular/projects/lib/src/lib/gridstack-item.component.ts:62](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L62) | +| `ref` | `public` | \| `undefined` \| `ComponentRef`\<[`GridstackItemComponent`](#gridstackitemcomponent)\> | Component reference for dynamic component removal. Used internally when this component is created dynamically. | [angular/projects/lib/src/lib/gridstack-item.component.ts:68](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L68) | +| `childWidget` | `public` | `undefined` \| [`BaseWidget`](base-widget.md#basewidget) | Reference to child widget component for serialization. Used to save/restore additional data along with grid position. | [angular/projects/lib/src/lib/gridstack-item.component.ts:74](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L74) | +| `_options?` | `protected` | `GridStackNode` | - | [angular/projects/lib/src/lib/gridstack-item.component.ts:104](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L104) | +| `elementRef` | `readonly` | `ElementRef`\<[`GridItemCompHTMLElement`](#griditemcomphtmlelement)\> | - | [angular/projects/lib/src/lib/gridstack-item.component.ts:114](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L114) | + +## Interfaces + +### GridItemCompHTMLElement + +Defined in: [angular/projects/lib/src/lib/gridstack-item.component.ts:14](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L14) + +Extended HTMLElement interface for grid items. +Stores a back-reference to the Angular component for integration. + +#### Extends + +- `GridItemHTMLElement` + +#### Methods + +##### animate() + +```ts +animate(keyframes, options?): Animation; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:2146 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `keyframes` | `null` \| `Keyframe`[] \| `PropertyIndexedKeyframes` | +| `options?` | `number` \| `KeyframeAnimationOptions` | + +###### Returns + +`Animation` + +###### Inherited from + +```ts +GridItemHTMLElement.animate +``` + +##### getAnimations() + +```ts +getAnimations(options?): Animation[]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:2147 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `GetAnimationsOptions` | + +###### Returns + +`Animation`[] + +###### Inherited from + +```ts +GridItemHTMLElement.getAnimations +``` + +##### after() + +```ts +after(...nodes): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:3747 + +Inserts nodes just after node, while replacing strings in nodes with equivalent Text nodes. + +Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| ...`nodes` | (`string` \| `Node`)[] | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.after +``` + +##### before() + +```ts +before(...nodes): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:3753 + +Inserts nodes just before node, while replacing strings in nodes with equivalent Text nodes. + +Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| ...`nodes` | (`string` \| `Node`)[] | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.before +``` + +##### remove() + +```ts +remove(): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:3755 + +Removes node. + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.remove +``` + +##### replaceWith() + +```ts +replaceWith(...nodes): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:3761 + +Replaces node with nodes, while replacing strings in nodes with equivalent Text nodes. + +Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| ...`nodes` | (`string` \| `Node`)[] | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.replaceWith +``` + +##### attachShadow() + +```ts +attachShadow(init): ShadowRoot; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5074 + +Creates a shadow root for element and returns it. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `init` | `ShadowRootInit` | + +###### Returns + +`ShadowRoot` + +###### Inherited from + +```ts +GridItemHTMLElement.attachShadow +``` + +##### checkVisibility() + +```ts +checkVisibility(options?): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5075 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `CheckVisibilityOptions` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.checkVisibility +``` + +##### closest() + +###### Call Signature + +```ts +closest(selector): null | HTMLElementTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5077 + +Returns the first (starting at element) inclusive ancestor that matches selectors, and null otherwise. + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selector` | `K` | + +###### Returns + +`null` \| `HTMLElementTagNameMap`\[`K`\] + +###### Inherited from + +```ts +GridItemHTMLElement.closest +``` + +###### Call Signature + +```ts +closest(selector): null | SVGElementTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5078 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `SVGElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selector` | `K` | + +###### Returns + +`null` \| `SVGElementTagNameMap`\[`K`\] + +###### Inherited from + +```ts +GridItemHTMLElement.closest +``` + +###### Call Signature + +```ts +closest(selector): null | MathMLElementTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5079 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `MathMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selector` | `K` | + +###### Returns + +`null` \| `MathMLElementTagNameMap`\[`K`\] + +###### Inherited from + +```ts +GridItemHTMLElement.closest +``` + +###### Call Signature + +```ts +closest(selectors): null | E; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5080 + +###### Type Parameters + +| Type Parameter | Default type | +| ------ | ------ | +| `E` *extends* `Element`\<`E`\> | `Element` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `string` | + +###### Returns + +`null` \| `E` + +###### Inherited from + +```ts +GridItemHTMLElement.closest +``` + +##### getAttribute() + +```ts +getAttribute(qualifiedName): null | string; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5082 + +Returns element's first attribute whose qualified name is qualifiedName, and null if there is no such attribute otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | + +###### Returns + +`null` \| `string` + +###### Inherited from + +```ts +GridItemHTMLElement.getAttribute +``` + +##### getAttributeNS() + +```ts +getAttributeNS(namespace, localName): null | string; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5084 + +Returns element's attribute whose namespace is namespace and local name is localName, and null if there is no such attribute otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | +| `localName` | `string` | + +###### Returns + +`null` \| `string` + +###### Inherited from + +```ts +GridItemHTMLElement.getAttributeNS +``` + +##### getAttributeNames() + +```ts +getAttributeNames(): string[]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5086 + +Returns the qualified names of all element's attributes. Can contain duplicates. + +###### Returns + +`string`[] + +###### Inherited from + +```ts +GridItemHTMLElement.getAttributeNames +``` + +##### getAttributeNode() + +```ts +getAttributeNode(qualifiedName): null | Attr; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5087 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | + +###### Returns + +`null` \| `Attr` + +###### Inherited from + +```ts +GridItemHTMLElement.getAttributeNode +``` + +##### getAttributeNodeNS() + +```ts +getAttributeNodeNS(namespace, localName): null | Attr; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5088 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | +| `localName` | `string` | + +###### Returns + +`null` \| `Attr` + +###### Inherited from + +```ts +GridItemHTMLElement.getAttributeNodeNS +``` + +##### getBoundingClientRect() + +```ts +getBoundingClientRect(): DOMRect; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5089 + +###### Returns + +`DOMRect` + +###### Inherited from + +```ts +GridItemHTMLElement.getBoundingClientRect +``` + +##### getClientRects() + +```ts +getClientRects(): DOMRectList; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5090 + +###### Returns + +`DOMRectList` + +###### Inherited from + +```ts +GridItemHTMLElement.getClientRects +``` + +##### getElementsByClassName() + +```ts +getElementsByClassName(classNames): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5092 + +Returns a HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classNames. The classNames argument is interpreted as a space-separated list of classes. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `classNames` | `string` | + +###### Returns + +`HTMLCollectionOf`\<`Element`\> + +###### Inherited from + +```ts +GridItemHTMLElement.getElementsByClassName +``` + +##### getElementsByTagName() + +###### Call Signature + +```ts +getElementsByTagName(qualifiedName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5093 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `K` | + +###### Returns + +`HTMLCollectionOf`\<`HTMLElementTagNameMap`\[`K`\]\> + +###### Inherited from + +```ts +GridItemHTMLElement.getElementsByTagName +``` + +###### Call Signature + +```ts +getElementsByTagName(qualifiedName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5094 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `SVGElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `K` | + +###### Returns + +`HTMLCollectionOf`\<`SVGElementTagNameMap`\[`K`\]\> + +###### Inherited from + +```ts +GridItemHTMLElement.getElementsByTagName +``` + +###### Call Signature + +```ts +getElementsByTagName(qualifiedName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5095 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `MathMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `K` | + +###### Returns + +`HTMLCollectionOf`\<`MathMLElementTagNameMap`\[`K`\]\> + +###### Inherited from + +```ts +GridItemHTMLElement.getElementsByTagName +``` + +###### Call Signature + +```ts +getElementsByTagName(qualifiedName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5097 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementDeprecatedTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `K` | + +###### Returns + +`HTMLCollectionOf`\<`HTMLElementDeprecatedTagNameMap`\[`K`\]\> + +###### Deprecated + +###### Inherited from + +```ts +GridItemHTMLElement.getElementsByTagName +``` + +###### Call Signature + +```ts +getElementsByTagName(qualifiedName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5098 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | + +###### Returns + +`HTMLCollectionOf`\<`Element`\> + +###### Inherited from + +```ts +GridItemHTMLElement.getElementsByTagName +``` + +##### getElementsByTagNameNS() + +###### Call Signature + +```ts +getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5099 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespaceURI` | `"http://www.w3.org/1999/xhtml"` | +| `localName` | `string` | + +###### Returns + +`HTMLCollectionOf`\<`HTMLElement`\> + +###### Inherited from + +```ts +GridItemHTMLElement.getElementsByTagNameNS +``` + +###### Call Signature + +```ts +getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5100 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespaceURI` | `"http://www.w3.org/2000/svg"` | +| `localName` | `string` | + +###### Returns + +`HTMLCollectionOf`\<`SVGElement`\> + +###### Inherited from + +```ts +GridItemHTMLElement.getElementsByTagNameNS +``` + +###### Call Signature + +```ts +getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5101 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespaceURI` | `"http://www.w3.org/1998/Math/MathML"` | +| `localName` | `string` | + +###### Returns + +`HTMLCollectionOf`\<`MathMLElement`\> + +###### Inherited from + +```ts +GridItemHTMLElement.getElementsByTagNameNS +``` + +###### Call Signature + +```ts +getElementsByTagNameNS(namespace, localName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5102 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | +| `localName` | `string` | + +###### Returns + +`HTMLCollectionOf`\<`Element`\> + +###### Inherited from + +```ts +GridItemHTMLElement.getElementsByTagNameNS +``` + +##### hasAttribute() + +```ts +hasAttribute(qualifiedName): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5104 + +Returns true if element has an attribute whose qualified name is qualifiedName, and false otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.hasAttribute +``` + +##### hasAttributeNS() + +```ts +hasAttributeNS(namespace, localName): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5106 + +Returns true if element has an attribute whose namespace is namespace and local name is localName. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | +| `localName` | `string` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.hasAttributeNS +``` + +##### hasAttributes() + +```ts +hasAttributes(): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5108 + +Returns true if element has attributes, and false otherwise. + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.hasAttributes +``` + +##### hasPointerCapture() + +```ts +hasPointerCapture(pointerId): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5109 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `pointerId` | `number` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.hasPointerCapture +``` + +##### insertAdjacentElement() + +```ts +insertAdjacentElement(where, element): null | Element; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5110 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `where` | `InsertPosition` | +| `element` | `Element` | + +###### Returns + +`null` \| `Element` + +###### Inherited from + +```ts +GridItemHTMLElement.insertAdjacentElement +``` + +##### insertAdjacentHTML() + +```ts +insertAdjacentHTML(position, text): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5111 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `position` | `InsertPosition` | +| `text` | `string` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.insertAdjacentHTML +``` + +##### insertAdjacentText() + +```ts +insertAdjacentText(where, data): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5112 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `where` | `InsertPosition` | +| `data` | `string` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.insertAdjacentText +``` + +##### matches() + +```ts +matches(selectors): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5114 + +Returns true if matching selectors against element's root yields element, and false otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `string` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.matches +``` + +##### releasePointerCapture() + +```ts +releasePointerCapture(pointerId): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5115 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `pointerId` | `number` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.releasePointerCapture +``` + +##### removeAttribute() + +```ts +removeAttribute(qualifiedName): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5117 + +Removes element's first attribute whose qualified name is qualifiedName. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.removeAttribute +``` + +##### removeAttributeNS() + +```ts +removeAttributeNS(namespace, localName): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5119 + +Removes element's attribute whose namespace is namespace and local name is localName. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | +| `localName` | `string` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.removeAttributeNS +``` + +##### removeAttributeNode() + +```ts +removeAttributeNode(attr): Attr; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5120 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `attr` | `Attr` | + +###### Returns + +`Attr` + +###### Inherited from + +```ts +GridItemHTMLElement.removeAttributeNode +``` + +##### requestFullscreen() + +```ts +requestFullscreen(options?): Promise; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5126 + +Displays element fullscreen and resolves promise when done. + +When supplied, options's navigationUI member indicates whether showing navigation UI while in fullscreen is preferred or not. If set to "show", navigation simplicity is preferred over screen space, and if set to "hide", more screen space is preferred. User agents are always free to honor user preference over the application's. The default value "auto" indicates no application preference. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `FullscreenOptions` | + +###### Returns + +`Promise`\<`void`\> + +###### Inherited from + +```ts +GridItemHTMLElement.requestFullscreen +``` + +##### requestPointerLock() + +```ts +requestPointerLock(): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5127 + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.requestPointerLock +``` + +##### scroll() + +###### Call Signature + +```ts +scroll(options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5128 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `ScrollToOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.scroll +``` + +###### Call Signature + +```ts +scroll(x, y): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5129 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `x` | `number` | +| `y` | `number` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.scroll +``` + +##### scrollBy() + +###### Call Signature + +```ts +scrollBy(options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5130 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `ScrollToOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.scrollBy +``` + +###### Call Signature + +```ts +scrollBy(x, y): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5131 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `x` | `number` | +| `y` | `number` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.scrollBy +``` + +##### scrollIntoView() + +```ts +scrollIntoView(arg?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5132 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `arg?` | `boolean` \| `ScrollIntoViewOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.scrollIntoView +``` + +##### scrollTo() + +###### Call Signature + +```ts +scrollTo(options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5133 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `ScrollToOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.scrollTo +``` + +###### Call Signature + +```ts +scrollTo(x, y): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5134 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `x` | `number` | +| `y` | `number` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.scrollTo +``` + +##### setAttribute() + +```ts +setAttribute(qualifiedName, value): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5136 + +Sets the value of element's first attribute whose qualified name is qualifiedName to value. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | +| `value` | `string` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.setAttribute +``` + +##### setAttributeNS() + +```ts +setAttributeNS( + namespace, + qualifiedName, + value): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5138 + +Sets the value of element's attribute whose namespace is namespace and local name is localName to value. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | +| `qualifiedName` | `string` | +| `value` | `string` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.setAttributeNS +``` + +##### setAttributeNode() + +```ts +setAttributeNode(attr): null | Attr; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5139 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `attr` | `Attr` | + +###### Returns + +`null` \| `Attr` + +###### Inherited from + +```ts +GridItemHTMLElement.setAttributeNode +``` + +##### setAttributeNodeNS() + +```ts +setAttributeNodeNS(attr): null | Attr; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5140 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `attr` | `Attr` | + +###### Returns + +`null` \| `Attr` + +###### Inherited from + +```ts +GridItemHTMLElement.setAttributeNodeNS +``` + +##### setPointerCapture() + +```ts +setPointerCapture(pointerId): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5141 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `pointerId` | `number` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.setPointerCapture +``` + +##### toggleAttribute() + +```ts +toggleAttribute(qualifiedName, force?): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5147 + +If force is not given, "toggles" qualifiedName, removing it if it is present and adding it if it is not present. If force is true, adds qualifiedName. If force is false, removes qualifiedName. + +Returns true if qualifiedName is now present, and false otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | +| `force?` | `boolean` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.toggleAttribute +``` + +##### ~~webkitMatchesSelector()~~ + +```ts +webkitMatchesSelector(selectors): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5149 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `string` | + +###### Returns + +`boolean` + +###### Deprecated + +This is a legacy alias of `matches`. + +###### Inherited from + +```ts +GridItemHTMLElement.webkitMatchesSelector +``` + +##### dispatchEvent() + +```ts +dispatchEvent(event): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5344 + +Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `event` | `Event` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.dispatchEvent +``` + +##### attachInternals() + +```ts +attachInternals(): ElementInternals; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:6573 + +###### Returns + +`ElementInternals` + +###### Inherited from + +```ts +GridItemHTMLElement.attachInternals +``` + +##### click() + +```ts +click(): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:6574 + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.click +``` + +##### addEventListener() + +###### Call Signature + +```ts +addEventListener( + type, + listener, + options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:6575 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementEventMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `type` | `K` | +| `listener` | (`this`, `ev`) => `any` | +| `options?` | `boolean` \| `AddEventListenerOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.addEventListener +``` + +###### Call Signature + +```ts +addEventListener( + type, + listener, + options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:6576 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `type` | `string` | +| `listener` | `EventListenerOrEventListenerObject` | +| `options?` | `boolean` \| `AddEventListenerOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.addEventListener +``` + +##### removeEventListener() + +###### Call Signature + +```ts +removeEventListener( + type, + listener, + options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:6577 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementEventMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `type` | `K` | +| `listener` | (`this`, `ev`) => `any` | +| `options?` | `boolean` \| `EventListenerOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.removeEventListener +``` + +###### Call Signature + +```ts +removeEventListener( + type, + listener, + options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:6578 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `type` | `string` | +| `listener` | `EventListenerOrEventListenerObject` | +| `options?` | `boolean` \| `EventListenerOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.removeEventListener +``` + +##### blur() + +```ts +blur(): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:7768 + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.blur +``` + +##### focus() + +```ts +focus(options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:7769 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `FocusOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.focus +``` + +##### appendChild() + +```ts +appendChild(node): T; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10274 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `T` *extends* `Node`\<`T`\> | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | `T` | + +###### Returns + +`T` + +###### Inherited from + +```ts +GridItemHTMLElement.appendChild +``` + +##### cloneNode() + +```ts +cloneNode(deep?): Node; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10276 + +Returns a copy of node. If deep is true, the copy also includes the node's descendants. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `deep?` | `boolean` | + +###### Returns + +`Node` + +###### Inherited from + +```ts +GridItemHTMLElement.cloneNode +``` + +##### compareDocumentPosition() + +```ts +compareDocumentPosition(other): number; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10278 + +Returns a bitmask indicating the position of other relative to node. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `other` | `Node` | + +###### Returns + +`number` + +###### Inherited from + +```ts +GridItemHTMLElement.compareDocumentPosition +``` + +##### contains() + +```ts +contains(other): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10280 + +Returns true if other is an inclusive descendant of node, and false otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `other` | `null` \| `Node` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.contains +``` + +##### getRootNode() + +```ts +getRootNode(options?): Node; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10282 + +Returns node's root. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `GetRootNodeOptions` | + +###### Returns + +`Node` + +###### Inherited from + +```ts +GridItemHTMLElement.getRootNode +``` + +##### hasChildNodes() + +```ts +hasChildNodes(): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10284 + +Returns whether node has children. + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.hasChildNodes +``` + +##### insertBefore() + +```ts +insertBefore(node, child): T; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10285 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `T` *extends* `Node`\<`T`\> | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | `T` | +| `child` | `null` \| `Node` | + +###### Returns + +`T` + +###### Inherited from + +```ts +GridItemHTMLElement.insertBefore +``` + +##### isDefaultNamespace() + +```ts +isDefaultNamespace(namespace): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10286 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.isDefaultNamespace +``` + +##### isEqualNode() + +```ts +isEqualNode(otherNode): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10288 + +Returns whether node and otherNode have the same properties. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `otherNode` | `null` \| `Node` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.isEqualNode +``` + +##### isSameNode() + +```ts +isSameNode(otherNode): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10289 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `otherNode` | `null` \| `Node` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridItemHTMLElement.isSameNode +``` + +##### lookupNamespaceURI() + +```ts +lookupNamespaceURI(prefix): null | string; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10290 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `prefix` | `null` \| `string` | + +###### Returns + +`null` \| `string` + +###### Inherited from + +```ts +GridItemHTMLElement.lookupNamespaceURI +``` + +##### lookupPrefix() + +```ts +lookupPrefix(namespace): null | string; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10291 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | + +###### Returns + +`null` \| `string` + +###### Inherited from + +```ts +GridItemHTMLElement.lookupPrefix +``` + +##### normalize() + +```ts +normalize(): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10293 + +Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes. + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.normalize +``` + +##### removeChild() + +```ts +removeChild(child): T; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10294 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `T` *extends* `Node`\<`T`\> | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `child` | `T` | + +###### Returns + +`T` + +###### Inherited from + +```ts +GridItemHTMLElement.removeChild +``` + +##### replaceChild() + +```ts +replaceChild(node, child): T; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10295 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `T` *extends* `Node`\<`T`\> | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | `Node` | +| `child` | `T` | + +###### Returns + +`T` + +###### Inherited from + +```ts +GridItemHTMLElement.replaceChild +``` + +##### append() + +```ts +append(...nodes): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10697 + +Inserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes. + +Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| ...`nodes` | (`string` \| `Node`)[] | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.append +``` + +##### prepend() + +```ts +prepend(...nodes): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10703 + +Inserts nodes before the first child of node, while replacing strings in nodes with equivalent Text nodes. + +Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| ...`nodes` | (`string` \| `Node`)[] | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.prepend +``` + +##### querySelector() + +###### Call Signature + +```ts +querySelector(selectors): null | HTMLElementTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10705 + +Returns the first element that is a descendant of node that matches selectors. + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`null` \| `HTMLElementTagNameMap`\[`K`\] + +###### Inherited from + +```ts +GridItemHTMLElement.querySelector +``` + +###### Call Signature + +```ts +querySelector(selectors): null | SVGElementTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10706 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `SVGElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`null` \| `SVGElementTagNameMap`\[`K`\] + +###### Inherited from + +```ts +GridItemHTMLElement.querySelector +``` + +###### Call Signature + +```ts +querySelector(selectors): null | MathMLElementTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10707 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `MathMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`null` \| `MathMLElementTagNameMap`\[`K`\] + +###### Inherited from + +```ts +GridItemHTMLElement.querySelector +``` + +###### Call Signature + +```ts +querySelector(selectors): null | HTMLElementDeprecatedTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10709 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementDeprecatedTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`null` \| `HTMLElementDeprecatedTagNameMap`\[`K`\] + +###### Deprecated + +###### Inherited from + +```ts +GridItemHTMLElement.querySelector +``` + +###### Call Signature + +```ts +querySelector(selectors): null | E; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10710 + +###### Type Parameters + +| Type Parameter | Default type | +| ------ | ------ | +| `E` *extends* `Element`\<`E`\> | `Element` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `string` | + +###### Returns + +`null` \| `E` + +###### Inherited from + +```ts +GridItemHTMLElement.querySelector +``` + +##### querySelectorAll() + +###### Call Signature + +```ts +querySelectorAll(selectors): NodeListOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10712 + +Returns all element descendants of node that match selectors. + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`NodeListOf`\<`HTMLElementTagNameMap`\[`K`\]\> + +###### Inherited from + +```ts +GridItemHTMLElement.querySelectorAll +``` + +###### Call Signature + +```ts +querySelectorAll(selectors): NodeListOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10713 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `SVGElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`NodeListOf`\<`SVGElementTagNameMap`\[`K`\]\> + +###### Inherited from + +```ts +GridItemHTMLElement.querySelectorAll +``` + +###### Call Signature + +```ts +querySelectorAll(selectors): NodeListOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10714 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `MathMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`NodeListOf`\<`MathMLElementTagNameMap`\[`K`\]\> + +###### Inherited from + +```ts +GridItemHTMLElement.querySelectorAll +``` + +###### Call Signature + +```ts +querySelectorAll(selectors): NodeListOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10716 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementDeprecatedTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`NodeListOf`\<`HTMLElementDeprecatedTagNameMap`\[`K`\]\> + +###### Deprecated + +###### Inherited from + +```ts +GridItemHTMLElement.querySelectorAll +``` + +###### Call Signature + +```ts +querySelectorAll(selectors): NodeListOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10717 + +###### Type Parameters + +| Type Parameter | Default type | +| ------ | ------ | +| `E` *extends* `Element`\<`E`\> | `Element` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `string` | + +###### Returns + +`NodeListOf`\<`E`\> + +###### Inherited from + +```ts +GridItemHTMLElement.querySelectorAll +``` + +##### replaceChildren() + +```ts +replaceChildren(...nodes): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10723 + +Replace all children of node with nodes, while replacing strings in nodes with equivalent Text nodes. + +Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| ...`nodes` | (`string` \| `Node`)[] | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridItemHTMLElement.replaceChildren +``` + +#### Properties + +| Property | Modifier | Type | Description | Inherited from | Defined in | +| ------ | ------ | ------ | ------ | ------ | ------ | +| `_gridItemComp?` | `public` | [`GridstackItemComponent`](#gridstackitemcomponent) | Back-reference to the Angular GridStackItem component | - | [angular/projects/lib/src/lib/gridstack-item.component.ts:16](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack-item.component.ts#L16) | +| `ariaAtomic` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaAtomic` | node\_modules/typescript/lib/lib.dom.d.ts:2020 | +| `ariaAutoComplete` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaAutoComplete` | node\_modules/typescript/lib/lib.dom.d.ts:2021 | +| `ariaBusy` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaBusy` | node\_modules/typescript/lib/lib.dom.d.ts:2022 | +| `ariaChecked` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaChecked` | node\_modules/typescript/lib/lib.dom.d.ts:2023 | +| `ariaColCount` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaColCount` | node\_modules/typescript/lib/lib.dom.d.ts:2024 | +| `ariaColIndex` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaColIndex` | node\_modules/typescript/lib/lib.dom.d.ts:2025 | +| `ariaColSpan` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaColSpan` | node\_modules/typescript/lib/lib.dom.d.ts:2026 | +| `ariaCurrent` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaCurrent` | node\_modules/typescript/lib/lib.dom.d.ts:2027 | +| `ariaDisabled` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaDisabled` | node\_modules/typescript/lib/lib.dom.d.ts:2028 | +| `ariaExpanded` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaExpanded` | node\_modules/typescript/lib/lib.dom.d.ts:2029 | +| `ariaHasPopup` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaHasPopup` | node\_modules/typescript/lib/lib.dom.d.ts:2030 | +| `ariaHidden` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaHidden` | node\_modules/typescript/lib/lib.dom.d.ts:2031 | +| `ariaInvalid` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaInvalid` | node\_modules/typescript/lib/lib.dom.d.ts:2032 | +| `ariaKeyShortcuts` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaKeyShortcuts` | node\_modules/typescript/lib/lib.dom.d.ts:2033 | +| `ariaLabel` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaLabel` | node\_modules/typescript/lib/lib.dom.d.ts:2034 | +| `ariaLevel` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaLevel` | node\_modules/typescript/lib/lib.dom.d.ts:2035 | +| `ariaLive` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaLive` | node\_modules/typescript/lib/lib.dom.d.ts:2036 | +| `ariaModal` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaModal` | node\_modules/typescript/lib/lib.dom.d.ts:2037 | +| `ariaMultiLine` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaMultiLine` | node\_modules/typescript/lib/lib.dom.d.ts:2038 | +| `ariaMultiSelectable` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaMultiSelectable` | node\_modules/typescript/lib/lib.dom.d.ts:2039 | +| `ariaOrientation` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaOrientation` | node\_modules/typescript/lib/lib.dom.d.ts:2040 | +| `ariaPlaceholder` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaPlaceholder` | node\_modules/typescript/lib/lib.dom.d.ts:2041 | +| `ariaPosInSet` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaPosInSet` | node\_modules/typescript/lib/lib.dom.d.ts:2042 | +| `ariaPressed` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaPressed` | node\_modules/typescript/lib/lib.dom.d.ts:2043 | +| `ariaReadOnly` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaReadOnly` | node\_modules/typescript/lib/lib.dom.d.ts:2044 | +| `ariaRequired` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaRequired` | node\_modules/typescript/lib/lib.dom.d.ts:2045 | +| `ariaRoleDescription` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaRoleDescription` | node\_modules/typescript/lib/lib.dom.d.ts:2046 | +| `ariaRowCount` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaRowCount` | node\_modules/typescript/lib/lib.dom.d.ts:2047 | +| `ariaRowIndex` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaRowIndex` | node\_modules/typescript/lib/lib.dom.d.ts:2048 | +| `ariaRowSpan` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaRowSpan` | node\_modules/typescript/lib/lib.dom.d.ts:2049 | +| `ariaSelected` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaSelected` | node\_modules/typescript/lib/lib.dom.d.ts:2050 | +| `ariaSetSize` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaSetSize` | node\_modules/typescript/lib/lib.dom.d.ts:2051 | +| `ariaSort` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaSort` | node\_modules/typescript/lib/lib.dom.d.ts:2052 | +| `ariaValueMax` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaValueMax` | node\_modules/typescript/lib/lib.dom.d.ts:2053 | +| `ariaValueMin` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaValueMin` | node\_modules/typescript/lib/lib.dom.d.ts:2054 | +| `ariaValueNow` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaValueNow` | node\_modules/typescript/lib/lib.dom.d.ts:2055 | +| `ariaValueText` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaValueText` | node\_modules/typescript/lib/lib.dom.d.ts:2056 | +| `role` | `public` | `null` \| `string` | - | `GridItemHTMLElement.role` | node\_modules/typescript/lib/lib.dom.d.ts:2057 | +| `attributes` | `readonly` | `NamedNodeMap` | - | `GridItemHTMLElement.attributes` | node\_modules/typescript/lib/lib.dom.d.ts:5041 | +| `classList` | `readonly` | `DOMTokenList` | Allows for manipulation of element's class content attribute as a set of whitespace-separated tokens through a DOMTokenList object. | `GridItemHTMLElement.classList` | node\_modules/typescript/lib/lib.dom.d.ts:5043 | +| `className` | `public` | `string` | Returns the value of element's class content attribute. Can be set to change it. | `GridItemHTMLElement.className` | node\_modules/typescript/lib/lib.dom.d.ts:5045 | +| `clientHeight` | `readonly` | `number` | - | `GridItemHTMLElement.clientHeight` | node\_modules/typescript/lib/lib.dom.d.ts:5046 | +| `clientLeft` | `readonly` | `number` | - | `GridItemHTMLElement.clientLeft` | node\_modules/typescript/lib/lib.dom.d.ts:5047 | +| `clientTop` | `readonly` | `number` | - | `GridItemHTMLElement.clientTop` | node\_modules/typescript/lib/lib.dom.d.ts:5048 | +| `clientWidth` | `readonly` | `number` | - | `GridItemHTMLElement.clientWidth` | node\_modules/typescript/lib/lib.dom.d.ts:5049 | +| `id` | `public` | `string` | Returns the value of element's id content attribute. Can be set to change it. | `GridItemHTMLElement.id` | node\_modules/typescript/lib/lib.dom.d.ts:5051 | +| `localName` | `readonly` | `string` | Returns the local name. | `GridItemHTMLElement.localName` | node\_modules/typescript/lib/lib.dom.d.ts:5053 | +| `namespaceURI` | `readonly` | `null` \| `string` | Returns the namespace. | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`namespaceURI`](gridstack.component.md#namespaceuri) | node\_modules/typescript/lib/lib.dom.d.ts:5055 | +| `onfullscreenchange` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onfullscreenchange` | node\_modules/typescript/lib/lib.dom.d.ts:5056 | +| `onfullscreenerror` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onfullscreenerror` | node\_modules/typescript/lib/lib.dom.d.ts:5057 | +| `outerHTML` | `public` | `string` | - | `GridItemHTMLElement.outerHTML` | node\_modules/typescript/lib/lib.dom.d.ts:5058 | +| `ownerDocument` | `readonly` | `Document` | Returns the node document. Returns null for documents. | `GridItemHTMLElement.ownerDocument` | node\_modules/typescript/lib/lib.dom.d.ts:5059 | +| `part` | `readonly` | `DOMTokenList` | - | `GridItemHTMLElement.part` | node\_modules/typescript/lib/lib.dom.d.ts:5060 | +| `prefix` | `readonly` | `null` \| `string` | Returns the namespace prefix. | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`prefix`](gridstack.component.md#prefix) | node\_modules/typescript/lib/lib.dom.d.ts:5062 | +| `scrollHeight` | `readonly` | `number` | - | `GridItemHTMLElement.scrollHeight` | node\_modules/typescript/lib/lib.dom.d.ts:5063 | +| `scrollLeft` | `public` | `number` | - | `GridItemHTMLElement.scrollLeft` | node\_modules/typescript/lib/lib.dom.d.ts:5064 | +| `scrollTop` | `public` | `number` | - | `GridItemHTMLElement.scrollTop` | node\_modules/typescript/lib/lib.dom.d.ts:5065 | +| `scrollWidth` | `readonly` | `number` | - | `GridItemHTMLElement.scrollWidth` | node\_modules/typescript/lib/lib.dom.d.ts:5066 | +| `shadowRoot` | `readonly` | `null` \| `ShadowRoot` | Returns element's shadow root, if any, and if shadow root's mode is "open", and null otherwise. | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`shadowRoot`](gridstack.component.md#shadowroot) | node\_modules/typescript/lib/lib.dom.d.ts:5068 | +| `slot` | `public` | `string` | Returns the value of element's slot content attribute. Can be set to change it. | `GridItemHTMLElement.slot` | node\_modules/typescript/lib/lib.dom.d.ts:5070 | +| `tagName` | `readonly` | `string` | Returns the HTML-uppercased qualified name. | `GridItemHTMLElement.tagName` | node\_modules/typescript/lib/lib.dom.d.ts:5072 | +| `style` | `readonly` | `CSSStyleDeclaration` | - | `GridItemHTMLElement.style` | node\_modules/typescript/lib/lib.dom.d.ts:5162 | +| `contentEditable` | `public` | `string` | - | `GridItemHTMLElement.contentEditable` | node\_modules/typescript/lib/lib.dom.d.ts:5166 | +| `enterKeyHint` | `public` | `string` | - | `GridItemHTMLElement.enterKeyHint` | node\_modules/typescript/lib/lib.dom.d.ts:5167 | +| `inputMode` | `public` | `string` | - | `GridItemHTMLElement.inputMode` | node\_modules/typescript/lib/lib.dom.d.ts:5168 | +| `isContentEditable` | `readonly` | `boolean` | - | `GridItemHTMLElement.isContentEditable` | node\_modules/typescript/lib/lib.dom.d.ts:5169 | +| `onabort` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user aborts the download. **Param** The event. | `GridItemHTMLElement.onabort` | node\_modules/typescript/lib/lib.dom.d.ts:5856 | +| `onanimationcancel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onanimationcancel` | node\_modules/typescript/lib/lib.dom.d.ts:5857 | +| `onanimationend` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onanimationend` | node\_modules/typescript/lib/lib.dom.d.ts:5858 | +| `onanimationiteration` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onanimationiteration` | node\_modules/typescript/lib/lib.dom.d.ts:5859 | +| `onanimationstart` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onanimationstart` | node\_modules/typescript/lib/lib.dom.d.ts:5860 | +| `onauxclick` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onauxclick` | node\_modules/typescript/lib/lib.dom.d.ts:5861 | +| `onbeforeinput` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onbeforeinput` | node\_modules/typescript/lib/lib.dom.d.ts:5862 | +| `onblur` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the object loses the input focus. **Param** The focus event. | `GridItemHTMLElement.onblur` | node\_modules/typescript/lib/lib.dom.d.ts:5867 | +| `oncancel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oncancel` | node\_modules/typescript/lib/lib.dom.d.ts:5868 | +| `oncanplay` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when playback is possible, but would require further buffering. **Param** The event. | `GridItemHTMLElement.oncanplay` | node\_modules/typescript/lib/lib.dom.d.ts:5873 | +| `oncanplaythrough` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oncanplaythrough` | node\_modules/typescript/lib/lib.dom.d.ts:5874 | +| `onchange` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the contents of the object or selection have changed. **Param** The event. | `GridItemHTMLElement.onchange` | node\_modules/typescript/lib/lib.dom.d.ts:5879 | +| `onclick` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user clicks the left mouse button on the object **Param** The mouse event. | `GridItemHTMLElement.onclick` | node\_modules/typescript/lib/lib.dom.d.ts:5884 | +| `onclose` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onclose` | node\_modules/typescript/lib/lib.dom.d.ts:5885 | +| `oncontextmenu` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user clicks the right mouse button in the client area, opening the context menu. **Param** The mouse event. | `GridItemHTMLElement.oncontextmenu` | node\_modules/typescript/lib/lib.dom.d.ts:5890 | +| `oncopy` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oncopy` | node\_modules/typescript/lib/lib.dom.d.ts:5891 | +| `oncuechange` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oncuechange` | node\_modules/typescript/lib/lib.dom.d.ts:5892 | +| `oncut` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oncut` | node\_modules/typescript/lib/lib.dom.d.ts:5893 | +| `ondblclick` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user double-clicks the object. **Param** The mouse event. | `GridItemHTMLElement.ondblclick` | node\_modules/typescript/lib/lib.dom.d.ts:5898 | +| `ondrag` | `public` | `null` \| (`this`, `ev`) => `any` | Fires on the source object continuously during a drag operation. **Param** The event. | `GridItemHTMLElement.ondrag` | node\_modules/typescript/lib/lib.dom.d.ts:5903 | +| `ondragend` | `public` | `null` \| (`this`, `ev`) => `any` | Fires on the source object when the user releases the mouse at the close of a drag operation. **Param** The event. | `GridItemHTMLElement.ondragend` | node\_modules/typescript/lib/lib.dom.d.ts:5908 | +| `ondragenter` | `public` | `null` \| (`this`, `ev`) => `any` | Fires on the target element when the user drags the object to a valid drop target. **Param** The drag event. | `GridItemHTMLElement.ondragenter` | node\_modules/typescript/lib/lib.dom.d.ts:5913 | +| `ondragleave` | `public` | `null` \| (`this`, `ev`) => `any` | Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation. **Param** The drag event. | `GridItemHTMLElement.ondragleave` | node\_modules/typescript/lib/lib.dom.d.ts:5918 | +| `ondragover` | `public` | `null` \| (`this`, `ev`) => `any` | Fires on the target element continuously while the user drags the object over a valid drop target. **Param** The event. | `GridItemHTMLElement.ondragover` | node\_modules/typescript/lib/lib.dom.d.ts:5923 | +| `ondragstart` | `public` | `null` \| (`this`, `ev`) => `any` | Fires on the source object when the user starts to drag a text selection or selected object. **Param** The event. | `GridItemHTMLElement.ondragstart` | node\_modules/typescript/lib/lib.dom.d.ts:5928 | +| `ondrop` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ondrop` | node\_modules/typescript/lib/lib.dom.d.ts:5929 | +| `ondurationchange` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the duration attribute is updated. **Param** The event. | `GridItemHTMLElement.ondurationchange` | node\_modules/typescript/lib/lib.dom.d.ts:5934 | +| `onemptied` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the media element is reset to its initial state. **Param** The event. | `GridItemHTMLElement.onemptied` | node\_modules/typescript/lib/lib.dom.d.ts:5939 | +| `onended` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the end of playback is reached. **Param** The event | `GridItemHTMLElement.onended` | node\_modules/typescript/lib/lib.dom.d.ts:5944 | +| `onerror` | `public` | `OnErrorEventHandler` | Fires when an error occurs during object loading. **Param** The event. | `GridItemHTMLElement.onerror` | node\_modules/typescript/lib/lib.dom.d.ts:5949 | +| `onfocus` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the object receives focus. **Param** The event. | `GridItemHTMLElement.onfocus` | node\_modules/typescript/lib/lib.dom.d.ts:5954 | +| `onformdata` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onformdata` | node\_modules/typescript/lib/lib.dom.d.ts:5955 | +| `ongotpointercapture` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ongotpointercapture` | node\_modules/typescript/lib/lib.dom.d.ts:5956 | +| `oninput` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oninput` | node\_modules/typescript/lib/lib.dom.d.ts:5957 | +| `oninvalid` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oninvalid` | node\_modules/typescript/lib/lib.dom.d.ts:5958 | +| `onkeydown` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user presses a key. **Param** The keyboard event | `GridItemHTMLElement.onkeydown` | node\_modules/typescript/lib/lib.dom.d.ts:5963 | +| ~~`onkeypress`~~ | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user presses an alphanumeric key. **Param** The event. **Deprecated** | `GridItemHTMLElement.onkeypress` | node\_modules/typescript/lib/lib.dom.d.ts:5969 | +| `onkeyup` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user releases a key. **Param** The keyboard event | `GridItemHTMLElement.onkeyup` | node\_modules/typescript/lib/lib.dom.d.ts:5974 | +| `onload` | `public` | `null` \| (`this`, `ev`) => `any` | Fires immediately after the browser loads the object. **Param** The event. | `GridItemHTMLElement.onload` | node\_modules/typescript/lib/lib.dom.d.ts:5979 | +| `onloadeddata` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when media data is loaded at the current playback position. **Param** The event. | `GridItemHTMLElement.onloadeddata` | node\_modules/typescript/lib/lib.dom.d.ts:5984 | +| `onloadedmetadata` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the duration and dimensions of the media have been determined. **Param** The event. | `GridItemHTMLElement.onloadedmetadata` | node\_modules/typescript/lib/lib.dom.d.ts:5989 | +| `onloadstart` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when Internet Explorer begins looking for media data. **Param** The event. | `GridItemHTMLElement.onloadstart` | node\_modules/typescript/lib/lib.dom.d.ts:5994 | +| `onlostpointercapture` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onlostpointercapture` | node\_modules/typescript/lib/lib.dom.d.ts:5995 | +| `onmousedown` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user clicks the object with either mouse button. **Param** The mouse event. | `GridItemHTMLElement.onmousedown` | node\_modules/typescript/lib/lib.dom.d.ts:6000 | +| `onmouseenter` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onmouseenter` | node\_modules/typescript/lib/lib.dom.d.ts:6001 | +| `onmouseleave` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onmouseleave` | node\_modules/typescript/lib/lib.dom.d.ts:6002 | +| `onmousemove` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user moves the mouse over the object. **Param** The mouse event. | `GridItemHTMLElement.onmousemove` | node\_modules/typescript/lib/lib.dom.d.ts:6007 | +| `onmouseout` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user moves the mouse pointer outside the boundaries of the object. **Param** The mouse event. | `GridItemHTMLElement.onmouseout` | node\_modules/typescript/lib/lib.dom.d.ts:6012 | +| `onmouseover` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user moves the mouse pointer into the object. **Param** The mouse event. | `GridItemHTMLElement.onmouseover` | node\_modules/typescript/lib/lib.dom.d.ts:6017 | +| `onmouseup` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user releases a mouse button while the mouse is over the object. **Param** The mouse event. | `GridItemHTMLElement.onmouseup` | node\_modules/typescript/lib/lib.dom.d.ts:6022 | +| `onpaste` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpaste` | node\_modules/typescript/lib/lib.dom.d.ts:6023 | +| `onpause` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when playback is paused. **Param** The event. | `GridItemHTMLElement.onpause` | node\_modules/typescript/lib/lib.dom.d.ts:6028 | +| `onplay` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the play method is requested. **Param** The event. | `GridItemHTMLElement.onplay` | node\_modules/typescript/lib/lib.dom.d.ts:6033 | +| `onplaying` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the audio or video has started playing. **Param** The event. | `GridItemHTMLElement.onplaying` | node\_modules/typescript/lib/lib.dom.d.ts:6038 | +| `onpointercancel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointercancel` | node\_modules/typescript/lib/lib.dom.d.ts:6039 | +| `onpointerdown` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointerdown` | node\_modules/typescript/lib/lib.dom.d.ts:6040 | +| `onpointerenter` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointerenter` | node\_modules/typescript/lib/lib.dom.d.ts:6041 | +| `onpointerleave` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointerleave` | node\_modules/typescript/lib/lib.dom.d.ts:6042 | +| `onpointermove` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointermove` | node\_modules/typescript/lib/lib.dom.d.ts:6043 | +| `onpointerout` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointerout` | node\_modules/typescript/lib/lib.dom.d.ts:6044 | +| `onpointerover` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointerover` | node\_modules/typescript/lib/lib.dom.d.ts:6045 | +| `onpointerup` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointerup` | node\_modules/typescript/lib/lib.dom.d.ts:6046 | +| `onprogress` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs to indicate progress while downloading media data. **Param** The event. | `GridItemHTMLElement.onprogress` | node\_modules/typescript/lib/lib.dom.d.ts:6051 | +| `onratechange` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the playback rate is increased or decreased. **Param** The event. | `GridItemHTMLElement.onratechange` | node\_modules/typescript/lib/lib.dom.d.ts:6056 | +| `onreset` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user resets a form. **Param** The event. | `GridItemHTMLElement.onreset` | node\_modules/typescript/lib/lib.dom.d.ts:6061 | +| `onresize` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onresize` | node\_modules/typescript/lib/lib.dom.d.ts:6062 | +| `onscroll` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user repositions the scroll box in the scroll bar on the object. **Param** The event. | `GridItemHTMLElement.onscroll` | node\_modules/typescript/lib/lib.dom.d.ts:6067 | +| `onsecuritypolicyviolation` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onsecuritypolicyviolation` | node\_modules/typescript/lib/lib.dom.d.ts:6068 | +| `onseeked` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the seek operation ends. **Param** The event. | `GridItemHTMLElement.onseeked` | node\_modules/typescript/lib/lib.dom.d.ts:6073 | +| `onseeking` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the current playback position is moved. **Param** The event. | `GridItemHTMLElement.onseeking` | node\_modules/typescript/lib/lib.dom.d.ts:6078 | +| `onselect` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the current selection changes. **Param** The event. | `GridItemHTMLElement.onselect` | node\_modules/typescript/lib/lib.dom.d.ts:6083 | +| `onselectionchange` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onselectionchange` | node\_modules/typescript/lib/lib.dom.d.ts:6084 | +| `onselectstart` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onselectstart` | node\_modules/typescript/lib/lib.dom.d.ts:6085 | +| `onslotchange` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onslotchange` | node\_modules/typescript/lib/lib.dom.d.ts:6086 | +| `onstalled` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the download has stopped. **Param** The event. | `GridItemHTMLElement.onstalled` | node\_modules/typescript/lib/lib.dom.d.ts:6091 | +| `onsubmit` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onsubmit` | node\_modules/typescript/lib/lib.dom.d.ts:6092 | +| `onsuspend` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs if the load operation has been intentionally halted. **Param** The event. | `GridItemHTMLElement.onsuspend` | node\_modules/typescript/lib/lib.dom.d.ts:6097 | +| `ontimeupdate` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs to indicate the current playback position. **Param** The event. | `GridItemHTMLElement.ontimeupdate` | node\_modules/typescript/lib/lib.dom.d.ts:6102 | +| `ontoggle` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontoggle` | node\_modules/typescript/lib/lib.dom.d.ts:6103 | +| `ontouchcancel?` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontouchcancel` | node\_modules/typescript/lib/lib.dom.d.ts:6104 | +| `ontouchend?` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontouchend` | node\_modules/typescript/lib/lib.dom.d.ts:6105 | +| `ontouchmove?` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontouchmove` | node\_modules/typescript/lib/lib.dom.d.ts:6106 | +| `ontouchstart?` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontouchstart` | node\_modules/typescript/lib/lib.dom.d.ts:6107 | +| `ontransitioncancel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontransitioncancel` | node\_modules/typescript/lib/lib.dom.d.ts:6108 | +| `ontransitionend` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontransitionend` | node\_modules/typescript/lib/lib.dom.d.ts:6109 | +| `ontransitionrun` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontransitionrun` | node\_modules/typescript/lib/lib.dom.d.ts:6110 | +| `ontransitionstart` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontransitionstart` | node\_modules/typescript/lib/lib.dom.d.ts:6111 | +| `onvolumechange` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the volume is changed, or playback is muted or unmuted. **Param** The event. | `GridItemHTMLElement.onvolumechange` | node\_modules/typescript/lib/lib.dom.d.ts:6116 | +| `onwaiting` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when playback stops because the next frame of a video resource is not available. **Param** The event. | `GridItemHTMLElement.onwaiting` | node\_modules/typescript/lib/lib.dom.d.ts:6121 | +| ~~`onwebkitanimationend`~~ | `public` | `null` \| (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `onanimationend`. | `GridItemHTMLElement.onwebkitanimationend` | node\_modules/typescript/lib/lib.dom.d.ts:6123 | +| ~~`onwebkitanimationiteration`~~ | `public` | `null` \| (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `onanimationiteration`. | `GridItemHTMLElement.onwebkitanimationiteration` | node\_modules/typescript/lib/lib.dom.d.ts:6125 | +| ~~`onwebkitanimationstart`~~ | `public` | `null` \| (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `onanimationstart`. | `GridItemHTMLElement.onwebkitanimationstart` | node\_modules/typescript/lib/lib.dom.d.ts:6127 | +| ~~`onwebkittransitionend`~~ | `public` | `null` \| (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `ontransitionend`. | `GridItemHTMLElement.onwebkittransitionend` | node\_modules/typescript/lib/lib.dom.d.ts:6129 | +| `onwheel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onwheel` | node\_modules/typescript/lib/lib.dom.d.ts:6130 | +| `accessKey` | `public` | `string` | - | `GridItemHTMLElement.accessKey` | node\_modules/typescript/lib/lib.dom.d.ts:6555 | +| `accessKeyLabel` | `readonly` | `string` | - | `GridItemHTMLElement.accessKeyLabel` | node\_modules/typescript/lib/lib.dom.d.ts:6556 | +| `autocapitalize` | `public` | `string` | - | `GridItemHTMLElement.autocapitalize` | node\_modules/typescript/lib/lib.dom.d.ts:6557 | +| `dir` | `public` | `string` | - | `GridItemHTMLElement.dir` | node\_modules/typescript/lib/lib.dom.d.ts:6558 | +| `draggable` | `public` | `boolean` | - | `GridItemHTMLElement.draggable` | node\_modules/typescript/lib/lib.dom.d.ts:6559 | +| `hidden` | `public` | `boolean` | - | `GridItemHTMLElement.hidden` | node\_modules/typescript/lib/lib.dom.d.ts:6560 | +| `inert` | `public` | `boolean` | - | `GridItemHTMLElement.inert` | node\_modules/typescript/lib/lib.dom.d.ts:6561 | +| `innerText` | `public` | `string` | - | `GridItemHTMLElement.innerText` | node\_modules/typescript/lib/lib.dom.d.ts:6562 | +| `lang` | `public` | `string` | - | `GridItemHTMLElement.lang` | node\_modules/typescript/lib/lib.dom.d.ts:6563 | +| `offsetHeight` | `readonly` | `number` | - | `GridItemHTMLElement.offsetHeight` | node\_modules/typescript/lib/lib.dom.d.ts:6564 | +| `offsetLeft` | `readonly` | `number` | - | `GridItemHTMLElement.offsetLeft` | node\_modules/typescript/lib/lib.dom.d.ts:6565 | +| `offsetParent` | `readonly` | `null` \| `Element` | - | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`offsetParent`](gridstack.component.md#offsetparent) | node\_modules/typescript/lib/lib.dom.d.ts:6566 | +| `offsetTop` | `readonly` | `number` | - | `GridItemHTMLElement.offsetTop` | node\_modules/typescript/lib/lib.dom.d.ts:6567 | +| `offsetWidth` | `readonly` | `number` | - | `GridItemHTMLElement.offsetWidth` | node\_modules/typescript/lib/lib.dom.d.ts:6568 | +| `outerText` | `public` | `string` | - | `GridItemHTMLElement.outerText` | node\_modules/typescript/lib/lib.dom.d.ts:6569 | +| `spellcheck` | `public` | `boolean` | - | `GridItemHTMLElement.spellcheck` | node\_modules/typescript/lib/lib.dom.d.ts:6570 | +| `title` | `public` | `string` | - | `GridItemHTMLElement.title` | node\_modules/typescript/lib/lib.dom.d.ts:6571 | +| `translate` | `public` | `boolean` | - | `GridItemHTMLElement.translate` | node\_modules/typescript/lib/lib.dom.d.ts:6572 | +| `autofocus` | `public` | `boolean` | - | `GridItemHTMLElement.autofocus` | node\_modules/typescript/lib/lib.dom.d.ts:7764 | +| `dataset` | `readonly` | `DOMStringMap` | - | `GridItemHTMLElement.dataset` | node\_modules/typescript/lib/lib.dom.d.ts:7765 | +| `nonce?` | `public` | `string` | - | `GridItemHTMLElement.nonce` | node\_modules/typescript/lib/lib.dom.d.ts:7766 | +| `tabIndex` | `public` | `number` | - | `GridItemHTMLElement.tabIndex` | node\_modules/typescript/lib/lib.dom.d.ts:7767 | +| `innerHTML` | `public` | `string` | - | `GridItemHTMLElement.innerHTML` | node\_modules/typescript/lib/lib.dom.d.ts:9130 | +| `baseURI` | `readonly` | `string` | Returns node's node document's document base URL. | `GridItemHTMLElement.baseURI` | node\_modules/typescript/lib/lib.dom.d.ts:10249 | +| `childNodes` | `readonly` | `NodeListOf`\<`ChildNode`\> | Returns the children. | `GridItemHTMLElement.childNodes` | node\_modules/typescript/lib/lib.dom.d.ts:10251 | +| `firstChild` | `readonly` | `null` \| `ChildNode` | Returns the first child. | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`firstChild`](gridstack.component.md#firstchild) | node\_modules/typescript/lib/lib.dom.d.ts:10253 | +| `isConnected` | `readonly` | `boolean` | Returns true if node is connected and false otherwise. | `GridItemHTMLElement.isConnected` | node\_modules/typescript/lib/lib.dom.d.ts:10255 | +| `lastChild` | `readonly` | `null` \| `ChildNode` | Returns the last child. | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`lastChild`](gridstack.component.md#lastchild) | node\_modules/typescript/lib/lib.dom.d.ts:10257 | +| `nextSibling` | `readonly` | `null` \| `ChildNode` | Returns the next sibling. | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`nextSibling`](gridstack.component.md#nextsibling) | node\_modules/typescript/lib/lib.dom.d.ts:10259 | +| `nodeName` | `readonly` | `string` | Returns a string appropriate for the type of node. | `GridItemHTMLElement.nodeName` | node\_modules/typescript/lib/lib.dom.d.ts:10261 | +| `nodeType` | `readonly` | `number` | Returns the type of node. | `GridItemHTMLElement.nodeType` | node\_modules/typescript/lib/lib.dom.d.ts:10263 | +| `nodeValue` | `public` | `null` \| `string` | - | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`nodeValue`](gridstack.component.md#nodevalue) | node\_modules/typescript/lib/lib.dom.d.ts:10264 | +| `parentElement` | `readonly` | `null` \| `HTMLElement` | Returns the parent element. | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`parentElement`](gridstack.component.md#parentelement) | node\_modules/typescript/lib/lib.dom.d.ts:10268 | +| `parentNode` | `readonly` | `null` \| `ParentNode` | Returns the parent. | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`parentNode`](gridstack.component.md#parentnode) | node\_modules/typescript/lib/lib.dom.d.ts:10270 | +| `previousSibling` | `readonly` | `null` \| `ChildNode` | Returns the previous sibling. | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`previousSibling`](gridstack.component.md#previoussibling) | node\_modules/typescript/lib/lib.dom.d.ts:10272 | +| `textContent` | `public` | `null` \| `string` | - | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`textContent`](gridstack.component.md#textcontent) | node\_modules/typescript/lib/lib.dom.d.ts:10273 | +| `ELEMENT_NODE` | `readonly` | `1` | node is an element. | `GridItemHTMLElement.ELEMENT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10297 | +| `ATTRIBUTE_NODE` | `readonly` | `2` | - | `GridItemHTMLElement.ATTRIBUTE_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10298 | +| `TEXT_NODE` | `readonly` | `3` | node is a Text node. | `GridItemHTMLElement.TEXT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10300 | +| `CDATA_SECTION_NODE` | `readonly` | `4` | node is a CDATASection node. | `GridItemHTMLElement.CDATA_SECTION_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10302 | +| `ENTITY_REFERENCE_NODE` | `readonly` | `5` | - | `GridItemHTMLElement.ENTITY_REFERENCE_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10303 | +| `ENTITY_NODE` | `readonly` | `6` | - | `GridItemHTMLElement.ENTITY_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10304 | +| `PROCESSING_INSTRUCTION_NODE` | `readonly` | `7` | node is a ProcessingInstruction node. | `GridItemHTMLElement.PROCESSING_INSTRUCTION_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10306 | +| `COMMENT_NODE` | `readonly` | `8` | node is a Comment node. | `GridItemHTMLElement.COMMENT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10308 | +| `DOCUMENT_NODE` | `readonly` | `9` | node is a document. | `GridItemHTMLElement.DOCUMENT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10310 | +| `DOCUMENT_TYPE_NODE` | `readonly` | `10` | node is a doctype. | `GridItemHTMLElement.DOCUMENT_TYPE_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10312 | +| `DOCUMENT_FRAGMENT_NODE` | `readonly` | `11` | node is a DocumentFragment node. | `GridItemHTMLElement.DOCUMENT_FRAGMENT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10314 | +| `NOTATION_NODE` | `readonly` | `12` | - | `GridItemHTMLElement.NOTATION_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10315 | +| `DOCUMENT_POSITION_DISCONNECTED` | `readonly` | `1` | Set when node and other are not in the same tree. | `GridItemHTMLElement.DOCUMENT_POSITION_DISCONNECTED` | node\_modules/typescript/lib/lib.dom.d.ts:10317 | +| `DOCUMENT_POSITION_PRECEDING` | `readonly` | `2` | Set when other is preceding node. | `GridItemHTMLElement.DOCUMENT_POSITION_PRECEDING` | node\_modules/typescript/lib/lib.dom.d.ts:10319 | +| `DOCUMENT_POSITION_FOLLOWING` | `readonly` | `4` | Set when other is following node. | `GridItemHTMLElement.DOCUMENT_POSITION_FOLLOWING` | node\_modules/typescript/lib/lib.dom.d.ts:10321 | +| `DOCUMENT_POSITION_CONTAINS` | `readonly` | `8` | Set when other is an ancestor of node. | `GridItemHTMLElement.DOCUMENT_POSITION_CONTAINS` | node\_modules/typescript/lib/lib.dom.d.ts:10323 | +| `DOCUMENT_POSITION_CONTAINED_BY` | `readonly` | `16` | Set when other is a descendant of node. | `GridItemHTMLElement.DOCUMENT_POSITION_CONTAINED_BY` | node\_modules/typescript/lib/lib.dom.d.ts:10325 | +| `DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | `readonly` | `32` | - | `GridItemHTMLElement.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | node\_modules/typescript/lib/lib.dom.d.ts:10326 | +| `nextElementSibling` | `readonly` | `null` \| `Element` | Returns the first following sibling that is an element, and null otherwise. | `GridItemHTMLElement.nextElementSibling` | node\_modules/typescript/lib/lib.dom.d.ts:10416 | +| `previousElementSibling` | `readonly` | `null` \| `Element` | Returns the first preceding sibling that is an element, and null otherwise. | `GridItemHTMLElement.previousElementSibling` | node\_modules/typescript/lib/lib.dom.d.ts:10418 | +| `childElementCount` | `readonly` | `number` | - | `GridItemHTMLElement.childElementCount` | node\_modules/typescript/lib/lib.dom.d.ts:10685 | +| `children` | `readonly` | `HTMLCollection` | Returns the child elements. | `GridItemHTMLElement.children` | node\_modules/typescript/lib/lib.dom.d.ts:10687 | +| `firstElementChild` | `readonly` | `null` \| `Element` | Returns the first child that is an element, and null otherwise. | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`firstElementChild`](gridstack.component.md#firstelementchild) | node\_modules/typescript/lib/lib.dom.d.ts:10689 | +| `lastElementChild` | `readonly` | `null` \| `Element` | Returns the last child that is an element, and null otherwise. | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`lastElementChild`](gridstack.component.md#lastelementchild) | node\_modules/typescript/lib/lib.dom.d.ts:10691 | +| `assignedSlot` | `readonly` | `null` \| `HTMLSlotElement` | - | `GridItemHTMLElement.assignedSlot` | node\_modules/typescript/lib/lib.dom.d.ts:13933 | diff --git a/angular/doc/api/gridstack.component.md b/angular/doc/api/gridstack.component.md new file mode 100644 index 000000000..c642e0257 --- /dev/null +++ b/angular/doc/api/gridstack.component.md @@ -0,0 +1,3300 @@ +# gridstack.component + +## Classes + +### GridstackComponent + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:85](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L85) + +Angular component wrapper for GridStack. + +This component provides Angular integration for GridStack grids, handling: +- Grid initialization and lifecycle +- Dynamic component creation and management +- Event binding and emission +- Integration with Angular change detection + +Use in combination with GridstackItemComponent for individual grid items. + +#### Example + +```html + +
Drag widgets here
+
+``` + +#### Implements + +- `OnInit` +- `AfterContentInit` +- `OnDestroy` + +#### Accessors + +##### options + +###### Get Signature + +```ts +get options(): GridStackOptions; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:120](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L120) + +Get the current running grid options + +###### Returns + +`GridStackOptions` + +###### Set Signature + +```ts +set options(o): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:112](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L112) + +Grid configuration options. +Can be set before grid initialization or updated after grid is created. + +###### Example + +```typescript +gridOptions: GridStackOptions = { + column: 12, + cellHeight: 'auto', + animate: true +}; +``` + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `o` | `GridStackOptions` | + +###### Returns + +`void` + +##### el + +###### Get Signature + +```ts +get el(): GridCompHTMLElement; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:190](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L190) + +Get the native DOM element that contains grid-specific fields. +This element has GridStack properties attached to it. + +###### Returns + +[`GridCompHTMLElement`](#gridcomphtmlelement) + +##### grid + +###### Get Signature + +```ts +get grid(): undefined | GridStack; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:201](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L201) + +Get the underlying GridStack instance. +Use this to access GridStack API methods directly. + +###### Example + +```typescript +this.gridComponent.grid.addWidget({x: 0, y: 0, w: 2, h: 1}); +``` + +###### Returns + +`undefined` \| `GridStack` + +#### Constructors + +##### Constructor + +```ts +new GridstackComponent(elementRef): GridstackComponent; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:252](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L252) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `elementRef` | `ElementRef`\<[`GridCompHTMLElement`](#gridcomphtmlelement)\> | + +###### Returns + +[`GridstackComponent`](#gridstackcomponent) + +#### Methods + +##### addComponentToSelectorType() + +```ts +static addComponentToSelectorType(typeList): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:234](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L234) + +Register a list of Angular components for dynamic creation. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `typeList` | `Type`\<`Object`\>[] | Array of component types to register | + +###### Returns + +`void` + +###### Example + +```typescript +GridstackComponent.addComponentToSelectorType([ + MyWidgetComponent, + AnotherWidgetComponent +]); +``` + +##### getSelector() + +```ts +static getSelector(type): string; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:243](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L243) + +Extract the selector string from an Angular component type. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `type` | `Type`\<`Object`\> | The component type to get selector from | + +###### Returns + +`string` + +The component's selector string + +##### ngOnInit() + +```ts +ngOnInit(): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:266](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L266) + +A callback method that is invoked immediately after the +default change detector has checked the directive's +data-bound properties for the first time, +and before any of the view or content children have been checked. +It is invoked only once when the directive is instantiated. + +###### Returns + +`void` + +###### Implementation of + +```ts +OnInit.ngOnInit +``` + +##### ngAfterContentInit() + +```ts +ngAfterContentInit(): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:276](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L276) + +wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) + +###### Returns + +`void` + +###### Implementation of + +```ts +AfterContentInit.ngAfterContentInit +``` + +##### ngOnDestroy() + +```ts +ngOnDestroy(): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:284](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L284) + +A callback method that performs custom clean-up, invoked immediately +before a directive, pipe, or service instance is destroyed. + +###### Returns + +`void` + +###### Implementation of + +```ts +OnDestroy.ngOnDestroy +``` + +##### updateAll() + +```ts +updateAll(): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:298](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L298) + +called when the TEMPLATE (not recommended) list of items changes - get a list of nodes and +update the layout accordingly (which will take care of adding/removing items changed by Angular) + +###### Returns + +`void` + +##### checkEmpty() + +```ts +checkEmpty(): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:309](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L309) + +check if the grid is empty, if so show alternative content + +###### Returns + +`void` + +##### hookEvents() + +```ts +protected hookEvents(grid?): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:315](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L315) + +get all known events as easy to use Outputs for convenience + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `grid?` | `GridStack` | + +###### Returns + +`void` + +##### unhookEvents() + +```ts +protected unhookEvents(grid?): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:342](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L342) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `grid?` | `GridStack` | + +###### Returns + +`void` + +#### Properties + +| Property | Modifier | Type | Default value | Description | Defined in | +| ------ | ------ | ------ | ------ | ------ | ------ | +| `gridstackItems?` | `public` | `QueryList`\<[`GridstackItemComponent`](gridstack-item.component.md#gridstackitemcomponent)\> | `undefined` | List of template-based grid items (not recommended approach). Used to sync between DOM and GridStack internals when items are defined in templates. Prefer dynamic component creation instead. | [angular/projects/lib/src/lib/gridstack.component.ts:92](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L92) | +| `container?` | `public` | `ViewContainerRef` | `undefined` | Container for dynamic component creation (recommended approach). Used to append grid items programmatically at runtime. | [angular/projects/lib/src/lib/gridstack.component.ts:97](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L97) | +| `isEmpty?` | `public` | `boolean` | `undefined` | Controls whether empty content should be displayed. Set to true to show ng-content with 'empty-content' selector when grid has no items. **Example** `
Drag widgets here to get started
` | [angular/projects/lib/src/lib/gridstack.component.ts:133](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L133) | +| `addedCB` | `public` | `EventEmitter`\<[`nodesCB`](#nodescb)\> | `undefined` | Emitted when widgets are added to the grid | [angular/projects/lib/src/lib/gridstack.component.ts:151](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L151) | +| `changeCB` | `public` | `EventEmitter`\<[`nodesCB`](#nodescb)\> | `undefined` | Emitted when grid layout changes | [angular/projects/lib/src/lib/gridstack.component.ts:154](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L154) | +| `disableCB` | `public` | `EventEmitter`\<[`eventCB`](#eventcb)\> | `undefined` | Emitted when grid is disabled | [angular/projects/lib/src/lib/gridstack.component.ts:157](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L157) | +| `dragCB` | `public` | `EventEmitter`\<[`elementCB`](#elementcb)\> | `undefined` | Emitted during widget drag operations | [angular/projects/lib/src/lib/gridstack.component.ts:160](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L160) | +| `dragStartCB` | `public` | `EventEmitter`\<[`elementCB`](#elementcb)\> | `undefined` | Emitted when widget drag starts | [angular/projects/lib/src/lib/gridstack.component.ts:163](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L163) | +| `dragStopCB` | `public` | `EventEmitter`\<[`elementCB`](#elementcb)\> | `undefined` | Emitted when widget drag stops | [angular/projects/lib/src/lib/gridstack.component.ts:166](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L166) | +| `droppedCB` | `public` | `EventEmitter`\<[`droppedCB`](#droppedcb)\> | `undefined` | Emitted when widget is dropped | [angular/projects/lib/src/lib/gridstack.component.ts:169](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L169) | +| `enableCB` | `public` | `EventEmitter`\<[`eventCB`](#eventcb)\> | `undefined` | Emitted when grid is enabled | [angular/projects/lib/src/lib/gridstack.component.ts:172](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L172) | +| `removedCB` | `public` | `EventEmitter`\<[`nodesCB`](#nodescb)\> | `undefined` | Emitted when widgets are removed from the grid | [angular/projects/lib/src/lib/gridstack.component.ts:175](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L175) | +| `resizeCB` | `public` | `EventEmitter`\<[`elementCB`](#elementcb)\> | `undefined` | Emitted during widget resize operations | [angular/projects/lib/src/lib/gridstack.component.ts:178](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L178) | +| `resizeStartCB` | `public` | `EventEmitter`\<[`elementCB`](#elementcb)\> | `undefined` | Emitted when widget resize starts | [angular/projects/lib/src/lib/gridstack.component.ts:181](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L181) | +| `resizeStopCB` | `public` | `EventEmitter`\<[`elementCB`](#elementcb)\> | `undefined` | Emitted when widget resize stops | [angular/projects/lib/src/lib/gridstack.component.ts:184](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L184) | +| `ref` | `public` | \| `undefined` \| `ComponentRef`\<[`GridstackComponent`](#gridstackcomponent)\> | `undefined` | Component reference for dynamic component removal. Used internally when this component is created dynamically. | [angular/projects/lib/src/lib/gridstack.component.ts:207](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L207) | +| `selectorToType` | `static` | [`SelectorToType`](#selectortotype) | `{}` | Mapping of component selectors to their types for dynamic creation. This enables dynamic component instantiation from string selectors. Angular doesn't provide public access to this mapping, so we maintain our own. **Example** `GridstackComponent.addComponentToSelectorType([MyWidgetComponent]);` | [angular/projects/lib/src/lib/gridstack.component.ts:220](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L220) | +| `_options?` | `protected` | `GridStackOptions` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:247](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L247) | +| `_grid?` | `protected` | `GridStack` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:248](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L248) | +| `_sub` | `protected` | `undefined` \| `Subscription` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:249](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L249) | +| `loaded?` | `protected` | `boolean` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:250](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L250) | +| `elementRef` | `readonly` | `ElementRef`\<[`GridCompHTMLElement`](#gridcomphtmlelement)\> | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:252](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L252) | + +## Interfaces + +### GridCompHTMLElement + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:39](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L39) + +Extended HTMLElement interface for the grid container. +Stores a back-reference to the Angular component for integration purposes. + +#### Extends + +- `GridHTMLElement` + +#### Methods + +##### animate() + +```ts +animate(keyframes, options?): Animation; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:2146 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `keyframes` | `null` \| `Keyframe`[] \| `PropertyIndexedKeyframes` | +| `options?` | `number` \| `KeyframeAnimationOptions` | + +###### Returns + +`Animation` + +###### Inherited from + +```ts +GridHTMLElement.animate +``` + +##### getAnimations() + +```ts +getAnimations(options?): Animation[]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:2147 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `GetAnimationsOptions` | + +###### Returns + +`Animation`[] + +###### Inherited from + +```ts +GridHTMLElement.getAnimations +``` + +##### after() + +```ts +after(...nodes): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:3747 + +Inserts nodes just after node, while replacing strings in nodes with equivalent Text nodes. + +Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| ...`nodes` | (`string` \| `Node`)[] | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.after +``` + +##### before() + +```ts +before(...nodes): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:3753 + +Inserts nodes just before node, while replacing strings in nodes with equivalent Text nodes. + +Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| ...`nodes` | (`string` \| `Node`)[] | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.before +``` + +##### remove() + +```ts +remove(): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:3755 + +Removes node. + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.remove +``` + +##### replaceWith() + +```ts +replaceWith(...nodes): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:3761 + +Replaces node with nodes, while replacing strings in nodes with equivalent Text nodes. + +Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| ...`nodes` | (`string` \| `Node`)[] | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.replaceWith +``` + +##### attachShadow() + +```ts +attachShadow(init): ShadowRoot; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5074 + +Creates a shadow root for element and returns it. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `init` | `ShadowRootInit` | + +###### Returns + +`ShadowRoot` + +###### Inherited from + +```ts +GridHTMLElement.attachShadow +``` + +##### checkVisibility() + +```ts +checkVisibility(options?): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5075 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `CheckVisibilityOptions` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.checkVisibility +``` + +##### closest() + +###### Call Signature + +```ts +closest(selector): null | HTMLElementTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5077 + +Returns the first (starting at element) inclusive ancestor that matches selectors, and null otherwise. + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selector` | `K` | + +###### Returns + +`null` \| `HTMLElementTagNameMap`\[`K`\] + +###### Inherited from + +```ts +GridHTMLElement.closest +``` + +###### Call Signature + +```ts +closest(selector): null | SVGElementTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5078 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `SVGElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selector` | `K` | + +###### Returns + +`null` \| `SVGElementTagNameMap`\[`K`\] + +###### Inherited from + +```ts +GridHTMLElement.closest +``` + +###### Call Signature + +```ts +closest(selector): null | MathMLElementTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5079 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `MathMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selector` | `K` | + +###### Returns + +`null` \| `MathMLElementTagNameMap`\[`K`\] + +###### Inherited from + +```ts +GridHTMLElement.closest +``` + +###### Call Signature + +```ts +closest(selectors): null | E; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5080 + +###### Type Parameters + +| Type Parameter | Default type | +| ------ | ------ | +| `E` *extends* `Element`\<`E`\> | `Element` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `string` | + +###### Returns + +`null` \| `E` + +###### Inherited from + +```ts +GridHTMLElement.closest +``` + +##### getAttribute() + +```ts +getAttribute(qualifiedName): null | string; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5082 + +Returns element's first attribute whose qualified name is qualifiedName, and null if there is no such attribute otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | + +###### Returns + +`null` \| `string` + +###### Inherited from + +```ts +GridHTMLElement.getAttribute +``` + +##### getAttributeNS() + +```ts +getAttributeNS(namespace, localName): null | string; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5084 + +Returns element's attribute whose namespace is namespace and local name is localName, and null if there is no such attribute otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | +| `localName` | `string` | + +###### Returns + +`null` \| `string` + +###### Inherited from + +```ts +GridHTMLElement.getAttributeNS +``` + +##### getAttributeNames() + +```ts +getAttributeNames(): string[]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5086 + +Returns the qualified names of all element's attributes. Can contain duplicates. + +###### Returns + +`string`[] + +###### Inherited from + +```ts +GridHTMLElement.getAttributeNames +``` + +##### getAttributeNode() + +```ts +getAttributeNode(qualifiedName): null | Attr; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5087 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | + +###### Returns + +`null` \| `Attr` + +###### Inherited from + +```ts +GridHTMLElement.getAttributeNode +``` + +##### getAttributeNodeNS() + +```ts +getAttributeNodeNS(namespace, localName): null | Attr; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5088 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | +| `localName` | `string` | + +###### Returns + +`null` \| `Attr` + +###### Inherited from + +```ts +GridHTMLElement.getAttributeNodeNS +``` + +##### getBoundingClientRect() + +```ts +getBoundingClientRect(): DOMRect; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5089 + +###### Returns + +`DOMRect` + +###### Inherited from + +```ts +GridHTMLElement.getBoundingClientRect +``` + +##### getClientRects() + +```ts +getClientRects(): DOMRectList; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5090 + +###### Returns + +`DOMRectList` + +###### Inherited from + +```ts +GridHTMLElement.getClientRects +``` + +##### getElementsByClassName() + +```ts +getElementsByClassName(classNames): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5092 + +Returns a HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classNames. The classNames argument is interpreted as a space-separated list of classes. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `classNames` | `string` | + +###### Returns + +`HTMLCollectionOf`\<`Element`\> + +###### Inherited from + +```ts +GridHTMLElement.getElementsByClassName +``` + +##### getElementsByTagName() + +###### Call Signature + +```ts +getElementsByTagName(qualifiedName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5093 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `K` | + +###### Returns + +`HTMLCollectionOf`\<`HTMLElementTagNameMap`\[`K`\]\> + +###### Inherited from + +```ts +GridHTMLElement.getElementsByTagName +``` + +###### Call Signature + +```ts +getElementsByTagName(qualifiedName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5094 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `SVGElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `K` | + +###### Returns + +`HTMLCollectionOf`\<`SVGElementTagNameMap`\[`K`\]\> + +###### Inherited from + +```ts +GridHTMLElement.getElementsByTagName +``` + +###### Call Signature + +```ts +getElementsByTagName(qualifiedName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5095 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `MathMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `K` | + +###### Returns + +`HTMLCollectionOf`\<`MathMLElementTagNameMap`\[`K`\]\> + +###### Inherited from + +```ts +GridHTMLElement.getElementsByTagName +``` + +###### Call Signature + +```ts +getElementsByTagName(qualifiedName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5097 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementDeprecatedTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `K` | + +###### Returns + +`HTMLCollectionOf`\<`HTMLElementDeprecatedTagNameMap`\[`K`\]\> + +###### Deprecated + +###### Inherited from + +```ts +GridHTMLElement.getElementsByTagName +``` + +###### Call Signature + +```ts +getElementsByTagName(qualifiedName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5098 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | + +###### Returns + +`HTMLCollectionOf`\<`Element`\> + +###### Inherited from + +```ts +GridHTMLElement.getElementsByTagName +``` + +##### getElementsByTagNameNS() + +###### Call Signature + +```ts +getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5099 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespaceURI` | `"http://www.w3.org/1999/xhtml"` | +| `localName` | `string` | + +###### Returns + +`HTMLCollectionOf`\<`HTMLElement`\> + +###### Inherited from + +```ts +GridHTMLElement.getElementsByTagNameNS +``` + +###### Call Signature + +```ts +getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5100 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespaceURI` | `"http://www.w3.org/2000/svg"` | +| `localName` | `string` | + +###### Returns + +`HTMLCollectionOf`\<`SVGElement`\> + +###### Inherited from + +```ts +GridHTMLElement.getElementsByTagNameNS +``` + +###### Call Signature + +```ts +getElementsByTagNameNS(namespaceURI, localName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5101 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespaceURI` | `"http://www.w3.org/1998/Math/MathML"` | +| `localName` | `string` | + +###### Returns + +`HTMLCollectionOf`\<`MathMLElement`\> + +###### Inherited from + +```ts +GridHTMLElement.getElementsByTagNameNS +``` + +###### Call Signature + +```ts +getElementsByTagNameNS(namespace, localName): HTMLCollectionOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5102 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | +| `localName` | `string` | + +###### Returns + +`HTMLCollectionOf`\<`Element`\> + +###### Inherited from + +```ts +GridHTMLElement.getElementsByTagNameNS +``` + +##### hasAttribute() + +```ts +hasAttribute(qualifiedName): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5104 + +Returns true if element has an attribute whose qualified name is qualifiedName, and false otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.hasAttribute +``` + +##### hasAttributeNS() + +```ts +hasAttributeNS(namespace, localName): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5106 + +Returns true if element has an attribute whose namespace is namespace and local name is localName. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | +| `localName` | `string` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.hasAttributeNS +``` + +##### hasAttributes() + +```ts +hasAttributes(): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5108 + +Returns true if element has attributes, and false otherwise. + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.hasAttributes +``` + +##### hasPointerCapture() + +```ts +hasPointerCapture(pointerId): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5109 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `pointerId` | `number` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.hasPointerCapture +``` + +##### insertAdjacentElement() + +```ts +insertAdjacentElement(where, element): null | Element; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5110 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `where` | `InsertPosition` | +| `element` | `Element` | + +###### Returns + +`null` \| `Element` + +###### Inherited from + +```ts +GridHTMLElement.insertAdjacentElement +``` + +##### insertAdjacentHTML() + +```ts +insertAdjacentHTML(position, text): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5111 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `position` | `InsertPosition` | +| `text` | `string` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.insertAdjacentHTML +``` + +##### insertAdjacentText() + +```ts +insertAdjacentText(where, data): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5112 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `where` | `InsertPosition` | +| `data` | `string` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.insertAdjacentText +``` + +##### matches() + +```ts +matches(selectors): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5114 + +Returns true if matching selectors against element's root yields element, and false otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `string` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.matches +``` + +##### releasePointerCapture() + +```ts +releasePointerCapture(pointerId): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5115 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `pointerId` | `number` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.releasePointerCapture +``` + +##### removeAttribute() + +```ts +removeAttribute(qualifiedName): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5117 + +Removes element's first attribute whose qualified name is qualifiedName. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.removeAttribute +``` + +##### removeAttributeNS() + +```ts +removeAttributeNS(namespace, localName): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5119 + +Removes element's attribute whose namespace is namespace and local name is localName. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | +| `localName` | `string` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.removeAttributeNS +``` + +##### removeAttributeNode() + +```ts +removeAttributeNode(attr): Attr; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5120 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `attr` | `Attr` | + +###### Returns + +`Attr` + +###### Inherited from + +```ts +GridHTMLElement.removeAttributeNode +``` + +##### requestFullscreen() + +```ts +requestFullscreen(options?): Promise; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5126 + +Displays element fullscreen and resolves promise when done. + +When supplied, options's navigationUI member indicates whether showing navigation UI while in fullscreen is preferred or not. If set to "show", navigation simplicity is preferred over screen space, and if set to "hide", more screen space is preferred. User agents are always free to honor user preference over the application's. The default value "auto" indicates no application preference. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `FullscreenOptions` | + +###### Returns + +`Promise`\<`void`\> + +###### Inherited from + +```ts +GridHTMLElement.requestFullscreen +``` + +##### requestPointerLock() + +```ts +requestPointerLock(): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5127 + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.requestPointerLock +``` + +##### scroll() + +###### Call Signature + +```ts +scroll(options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5128 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `ScrollToOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.scroll +``` + +###### Call Signature + +```ts +scroll(x, y): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5129 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `x` | `number` | +| `y` | `number` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.scroll +``` + +##### scrollBy() + +###### Call Signature + +```ts +scrollBy(options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5130 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `ScrollToOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.scrollBy +``` + +###### Call Signature + +```ts +scrollBy(x, y): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5131 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `x` | `number` | +| `y` | `number` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.scrollBy +``` + +##### scrollIntoView() + +```ts +scrollIntoView(arg?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5132 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `arg?` | `boolean` \| `ScrollIntoViewOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.scrollIntoView +``` + +##### scrollTo() + +###### Call Signature + +```ts +scrollTo(options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5133 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `ScrollToOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.scrollTo +``` + +###### Call Signature + +```ts +scrollTo(x, y): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5134 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `x` | `number` | +| `y` | `number` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.scrollTo +``` + +##### setAttribute() + +```ts +setAttribute(qualifiedName, value): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5136 + +Sets the value of element's first attribute whose qualified name is qualifiedName to value. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | +| `value` | `string` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.setAttribute +``` + +##### setAttributeNS() + +```ts +setAttributeNS( + namespace, + qualifiedName, + value): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5138 + +Sets the value of element's attribute whose namespace is namespace and local name is localName to value. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | +| `qualifiedName` | `string` | +| `value` | `string` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.setAttributeNS +``` + +##### setAttributeNode() + +```ts +setAttributeNode(attr): null | Attr; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5139 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `attr` | `Attr` | + +###### Returns + +`null` \| `Attr` + +###### Inherited from + +```ts +GridHTMLElement.setAttributeNode +``` + +##### setAttributeNodeNS() + +```ts +setAttributeNodeNS(attr): null | Attr; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5140 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `attr` | `Attr` | + +###### Returns + +`null` \| `Attr` + +###### Inherited from + +```ts +GridHTMLElement.setAttributeNodeNS +``` + +##### setPointerCapture() + +```ts +setPointerCapture(pointerId): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5141 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `pointerId` | `number` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.setPointerCapture +``` + +##### toggleAttribute() + +```ts +toggleAttribute(qualifiedName, force?): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5147 + +If force is not given, "toggles" qualifiedName, removing it if it is present and adding it if it is not present. If force is true, adds qualifiedName. If force is false, removes qualifiedName. + +Returns true if qualifiedName is now present, and false otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `qualifiedName` | `string` | +| `force?` | `boolean` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.toggleAttribute +``` + +##### ~~webkitMatchesSelector()~~ + +```ts +webkitMatchesSelector(selectors): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5149 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `string` | + +###### Returns + +`boolean` + +###### Deprecated + +This is a legacy alias of `matches`. + +###### Inherited from + +```ts +GridHTMLElement.webkitMatchesSelector +``` + +##### dispatchEvent() + +```ts +dispatchEvent(event): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:5344 + +Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `event` | `Event` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.dispatchEvent +``` + +##### attachInternals() + +```ts +attachInternals(): ElementInternals; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:6573 + +###### Returns + +`ElementInternals` + +###### Inherited from + +```ts +GridHTMLElement.attachInternals +``` + +##### click() + +```ts +click(): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:6574 + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.click +``` + +##### addEventListener() + +###### Call Signature + +```ts +addEventListener( + type, + listener, + options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:6575 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementEventMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `type` | `K` | +| `listener` | (`this`, `ev`) => `any` | +| `options?` | `boolean` \| `AddEventListenerOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.addEventListener +``` + +###### Call Signature + +```ts +addEventListener( + type, + listener, + options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:6576 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `type` | `string` | +| `listener` | `EventListenerOrEventListenerObject` | +| `options?` | `boolean` \| `AddEventListenerOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.addEventListener +``` + +##### removeEventListener() + +###### Call Signature + +```ts +removeEventListener( + type, + listener, + options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:6577 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementEventMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `type` | `K` | +| `listener` | (`this`, `ev`) => `any` | +| `options?` | `boolean` \| `EventListenerOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.removeEventListener +``` + +###### Call Signature + +```ts +removeEventListener( + type, + listener, + options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:6578 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `type` | `string` | +| `listener` | `EventListenerOrEventListenerObject` | +| `options?` | `boolean` \| `EventListenerOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.removeEventListener +``` + +##### blur() + +```ts +blur(): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:7768 + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.blur +``` + +##### focus() + +```ts +focus(options?): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:7769 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `FocusOptions` | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.focus +``` + +##### appendChild() + +```ts +appendChild(node): T; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10274 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `T` *extends* `Node`\<`T`\> | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | `T` | + +###### Returns + +`T` + +###### Inherited from + +```ts +GridHTMLElement.appendChild +``` + +##### cloneNode() + +```ts +cloneNode(deep?): Node; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10276 + +Returns a copy of node. If deep is true, the copy also includes the node's descendants. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `deep?` | `boolean` | + +###### Returns + +`Node` + +###### Inherited from + +```ts +GridHTMLElement.cloneNode +``` + +##### compareDocumentPosition() + +```ts +compareDocumentPosition(other): number; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10278 + +Returns a bitmask indicating the position of other relative to node. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `other` | `Node` | + +###### Returns + +`number` + +###### Inherited from + +```ts +GridHTMLElement.compareDocumentPosition +``` + +##### contains() + +```ts +contains(other): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10280 + +Returns true if other is an inclusive descendant of node, and false otherwise. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `other` | `null` \| `Node` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.contains +``` + +##### getRootNode() + +```ts +getRootNode(options?): Node; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10282 + +Returns node's root. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `options?` | `GetRootNodeOptions` | + +###### Returns + +`Node` + +###### Inherited from + +```ts +GridHTMLElement.getRootNode +``` + +##### hasChildNodes() + +```ts +hasChildNodes(): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10284 + +Returns whether node has children. + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.hasChildNodes +``` + +##### insertBefore() + +```ts +insertBefore(node, child): T; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10285 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `T` *extends* `Node`\<`T`\> | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | `T` | +| `child` | `null` \| `Node` | + +###### Returns + +`T` + +###### Inherited from + +```ts +GridHTMLElement.insertBefore +``` + +##### isDefaultNamespace() + +```ts +isDefaultNamespace(namespace): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10286 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.isDefaultNamespace +``` + +##### isEqualNode() + +```ts +isEqualNode(otherNode): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10288 + +Returns whether node and otherNode have the same properties. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `otherNode` | `null` \| `Node` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.isEqualNode +``` + +##### isSameNode() + +```ts +isSameNode(otherNode): boolean; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10289 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `otherNode` | `null` \| `Node` | + +###### Returns + +`boolean` + +###### Inherited from + +```ts +GridHTMLElement.isSameNode +``` + +##### lookupNamespaceURI() + +```ts +lookupNamespaceURI(prefix): null | string; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10290 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `prefix` | `null` \| `string` | + +###### Returns + +`null` \| `string` + +###### Inherited from + +```ts +GridHTMLElement.lookupNamespaceURI +``` + +##### lookupPrefix() + +```ts +lookupPrefix(namespace): null | string; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10291 + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `namespace` | `null` \| `string` | + +###### Returns + +`null` \| `string` + +###### Inherited from + +```ts +GridHTMLElement.lookupPrefix +``` + +##### normalize() + +```ts +normalize(): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10293 + +Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes. + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.normalize +``` + +##### removeChild() + +```ts +removeChild(child): T; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10294 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `T` *extends* `Node`\<`T`\> | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `child` | `T` | + +###### Returns + +`T` + +###### Inherited from + +```ts +GridHTMLElement.removeChild +``` + +##### replaceChild() + +```ts +replaceChild(node, child): T; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10295 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `T` *extends* `Node`\<`T`\> | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | `Node` | +| `child` | `T` | + +###### Returns + +`T` + +###### Inherited from + +```ts +GridHTMLElement.replaceChild +``` + +##### append() + +```ts +append(...nodes): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10697 + +Inserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes. + +Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| ...`nodes` | (`string` \| `Node`)[] | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.append +``` + +##### prepend() + +```ts +prepend(...nodes): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10703 + +Inserts nodes before the first child of node, while replacing strings in nodes with equivalent Text nodes. + +Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| ...`nodes` | (`string` \| `Node`)[] | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.prepend +``` + +##### querySelector() + +###### Call Signature + +```ts +querySelector(selectors): null | HTMLElementTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10705 + +Returns the first element that is a descendant of node that matches selectors. + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`null` \| `HTMLElementTagNameMap`\[`K`\] + +###### Inherited from + +```ts +GridHTMLElement.querySelector +``` + +###### Call Signature + +```ts +querySelector(selectors): null | SVGElementTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10706 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `SVGElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`null` \| `SVGElementTagNameMap`\[`K`\] + +###### Inherited from + +```ts +GridHTMLElement.querySelector +``` + +###### Call Signature + +```ts +querySelector(selectors): null | MathMLElementTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10707 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `MathMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`null` \| `MathMLElementTagNameMap`\[`K`\] + +###### Inherited from + +```ts +GridHTMLElement.querySelector +``` + +###### Call Signature + +```ts +querySelector(selectors): null | HTMLElementDeprecatedTagNameMap[K]; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10709 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementDeprecatedTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`null` \| `HTMLElementDeprecatedTagNameMap`\[`K`\] + +###### Deprecated + +###### Inherited from + +```ts +GridHTMLElement.querySelector +``` + +###### Call Signature + +```ts +querySelector(selectors): null | E; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10710 + +###### Type Parameters + +| Type Parameter | Default type | +| ------ | ------ | +| `E` *extends* `Element`\<`E`\> | `Element` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `string` | + +###### Returns + +`null` \| `E` + +###### Inherited from + +```ts +GridHTMLElement.querySelector +``` + +##### querySelectorAll() + +###### Call Signature + +```ts +querySelectorAll(selectors): NodeListOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10712 + +Returns all element descendants of node that match selectors. + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`NodeListOf`\<`HTMLElementTagNameMap`\[`K`\]\> + +###### Inherited from + +```ts +GridHTMLElement.querySelectorAll +``` + +###### Call Signature + +```ts +querySelectorAll(selectors): NodeListOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10713 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `SVGElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`NodeListOf`\<`SVGElementTagNameMap`\[`K`\]\> + +###### Inherited from + +```ts +GridHTMLElement.querySelectorAll +``` + +###### Call Signature + +```ts +querySelectorAll(selectors): NodeListOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10714 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `MathMLElementTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`NodeListOf`\<`MathMLElementTagNameMap`\[`K`\]\> + +###### Inherited from + +```ts +GridHTMLElement.querySelectorAll +``` + +###### Call Signature + +```ts +querySelectorAll(selectors): NodeListOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10716 + +###### Type Parameters + +| Type Parameter | +| ------ | +| `K` *extends* keyof `HTMLElementDeprecatedTagNameMap` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `K` | + +###### Returns + +`NodeListOf`\<`HTMLElementDeprecatedTagNameMap`\[`K`\]\> + +###### Deprecated + +###### Inherited from + +```ts +GridHTMLElement.querySelectorAll +``` + +###### Call Signature + +```ts +querySelectorAll(selectors): NodeListOf; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10717 + +###### Type Parameters + +| Type Parameter | Default type | +| ------ | ------ | +| `E` *extends* `Element`\<`E`\> | `Element` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `selectors` | `string` | + +###### Returns + +`NodeListOf`\<`E`\> + +###### Inherited from + +```ts +GridHTMLElement.querySelectorAll +``` + +##### replaceChildren() + +```ts +replaceChildren(...nodes): void; +``` + +Defined in: node\_modules/typescript/lib/lib.dom.d.ts:10723 + +Replace all children of node with nodes, while replacing strings in nodes with equivalent Text nodes. + +Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| ...`nodes` | (`string` \| `Node`)[] | + +###### Returns + +`void` + +###### Inherited from + +```ts +GridHTMLElement.replaceChildren +``` + +#### Properties + +| Property | Modifier | Type | Description | Inherited from | Defined in | +| ------ | ------ | ------ | ------ | ------ | ------ | +| `_gridComp?` | `public` | [`GridstackComponent`](#gridstackcomponent) | Back-reference to the Angular GridStack component | - | [angular/projects/lib/src/lib/gridstack.component.ts:41](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L41) | +| `ariaAtomic` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaAtomic` | node\_modules/typescript/lib/lib.dom.d.ts:2020 | +| `ariaAutoComplete` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaAutoComplete` | node\_modules/typescript/lib/lib.dom.d.ts:2021 | +| `ariaBusy` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaBusy` | node\_modules/typescript/lib/lib.dom.d.ts:2022 | +| `ariaChecked` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaChecked` | node\_modules/typescript/lib/lib.dom.d.ts:2023 | +| `ariaColCount` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaColCount` | node\_modules/typescript/lib/lib.dom.d.ts:2024 | +| `ariaColIndex` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaColIndex` | node\_modules/typescript/lib/lib.dom.d.ts:2025 | +| `ariaColSpan` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaColSpan` | node\_modules/typescript/lib/lib.dom.d.ts:2026 | +| `ariaCurrent` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaCurrent` | node\_modules/typescript/lib/lib.dom.d.ts:2027 | +| `ariaDisabled` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaDisabled` | node\_modules/typescript/lib/lib.dom.d.ts:2028 | +| `ariaExpanded` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaExpanded` | node\_modules/typescript/lib/lib.dom.d.ts:2029 | +| `ariaHasPopup` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaHasPopup` | node\_modules/typescript/lib/lib.dom.d.ts:2030 | +| `ariaHidden` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaHidden` | node\_modules/typescript/lib/lib.dom.d.ts:2031 | +| `ariaInvalid` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaInvalid` | node\_modules/typescript/lib/lib.dom.d.ts:2032 | +| `ariaKeyShortcuts` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaKeyShortcuts` | node\_modules/typescript/lib/lib.dom.d.ts:2033 | +| `ariaLabel` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaLabel` | node\_modules/typescript/lib/lib.dom.d.ts:2034 | +| `ariaLevel` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaLevel` | node\_modules/typescript/lib/lib.dom.d.ts:2035 | +| `ariaLive` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaLive` | node\_modules/typescript/lib/lib.dom.d.ts:2036 | +| `ariaModal` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaModal` | node\_modules/typescript/lib/lib.dom.d.ts:2037 | +| `ariaMultiLine` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaMultiLine` | node\_modules/typescript/lib/lib.dom.d.ts:2038 | +| `ariaMultiSelectable` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaMultiSelectable` | node\_modules/typescript/lib/lib.dom.d.ts:2039 | +| `ariaOrientation` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaOrientation` | node\_modules/typescript/lib/lib.dom.d.ts:2040 | +| `ariaPlaceholder` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaPlaceholder` | node\_modules/typescript/lib/lib.dom.d.ts:2041 | +| `ariaPosInSet` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaPosInSet` | node\_modules/typescript/lib/lib.dom.d.ts:2042 | +| `ariaPressed` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaPressed` | node\_modules/typescript/lib/lib.dom.d.ts:2043 | +| `ariaReadOnly` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaReadOnly` | node\_modules/typescript/lib/lib.dom.d.ts:2044 | +| `ariaRequired` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaRequired` | node\_modules/typescript/lib/lib.dom.d.ts:2045 | +| `ariaRoleDescription` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaRoleDescription` | node\_modules/typescript/lib/lib.dom.d.ts:2046 | +| `ariaRowCount` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaRowCount` | node\_modules/typescript/lib/lib.dom.d.ts:2047 | +| `ariaRowIndex` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaRowIndex` | node\_modules/typescript/lib/lib.dom.d.ts:2048 | +| `ariaRowSpan` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaRowSpan` | node\_modules/typescript/lib/lib.dom.d.ts:2049 | +| `ariaSelected` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaSelected` | node\_modules/typescript/lib/lib.dom.d.ts:2050 | +| `ariaSetSize` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaSetSize` | node\_modules/typescript/lib/lib.dom.d.ts:2051 | +| `ariaSort` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaSort` | node\_modules/typescript/lib/lib.dom.d.ts:2052 | +| `ariaValueMax` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaValueMax` | node\_modules/typescript/lib/lib.dom.d.ts:2053 | +| `ariaValueMin` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaValueMin` | node\_modules/typescript/lib/lib.dom.d.ts:2054 | +| `ariaValueNow` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaValueNow` | node\_modules/typescript/lib/lib.dom.d.ts:2055 | +| `ariaValueText` | `public` | `null` \| `string` | - | `GridHTMLElement.ariaValueText` | node\_modules/typescript/lib/lib.dom.d.ts:2056 | +| `role` | `public` | `null` \| `string` | - | `GridHTMLElement.role` | node\_modules/typescript/lib/lib.dom.d.ts:2057 | +| `attributes` | `readonly` | `NamedNodeMap` | - | `GridHTMLElement.attributes` | node\_modules/typescript/lib/lib.dom.d.ts:5041 | +| `classList` | `readonly` | `DOMTokenList` | Allows for manipulation of element's class content attribute as a set of whitespace-separated tokens through a DOMTokenList object. | `GridHTMLElement.classList` | node\_modules/typescript/lib/lib.dom.d.ts:5043 | +| `className` | `public` | `string` | Returns the value of element's class content attribute. Can be set to change it. | `GridHTMLElement.className` | node\_modules/typescript/lib/lib.dom.d.ts:5045 | +| `clientHeight` | `readonly` | `number` | - | `GridHTMLElement.clientHeight` | node\_modules/typescript/lib/lib.dom.d.ts:5046 | +| `clientLeft` | `readonly` | `number` | - | `GridHTMLElement.clientLeft` | node\_modules/typescript/lib/lib.dom.d.ts:5047 | +| `clientTop` | `readonly` | `number` | - | `GridHTMLElement.clientTop` | node\_modules/typescript/lib/lib.dom.d.ts:5048 | +| `clientWidth` | `readonly` | `number` | - | `GridHTMLElement.clientWidth` | node\_modules/typescript/lib/lib.dom.d.ts:5049 | +| `id` | `public` | `string` | Returns the value of element's id content attribute. Can be set to change it. | `GridHTMLElement.id` | node\_modules/typescript/lib/lib.dom.d.ts:5051 | +| `localName` | `readonly` | `string` | Returns the local name. | `GridHTMLElement.localName` | node\_modules/typescript/lib/lib.dom.d.ts:5053 | +| `namespaceURI` | `readonly` | `null` \| `string` | Returns the namespace. | `GridHTMLElement.namespaceURI` | node\_modules/typescript/lib/lib.dom.d.ts:5055 | +| `onfullscreenchange` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onfullscreenchange` | node\_modules/typescript/lib/lib.dom.d.ts:5056 | +| `onfullscreenerror` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onfullscreenerror` | node\_modules/typescript/lib/lib.dom.d.ts:5057 | +| `outerHTML` | `public` | `string` | - | `GridHTMLElement.outerHTML` | node\_modules/typescript/lib/lib.dom.d.ts:5058 | +| `ownerDocument` | `readonly` | `Document` | Returns the node document. Returns null for documents. | `GridHTMLElement.ownerDocument` | node\_modules/typescript/lib/lib.dom.d.ts:5059 | +| `part` | `readonly` | `DOMTokenList` | - | `GridHTMLElement.part` | node\_modules/typescript/lib/lib.dom.d.ts:5060 | +| `prefix` | `readonly` | `null` \| `string` | Returns the namespace prefix. | `GridHTMLElement.prefix` | node\_modules/typescript/lib/lib.dom.d.ts:5062 | +| `scrollHeight` | `readonly` | `number` | - | `GridHTMLElement.scrollHeight` | node\_modules/typescript/lib/lib.dom.d.ts:5063 | +| `scrollLeft` | `public` | `number` | - | `GridHTMLElement.scrollLeft` | node\_modules/typescript/lib/lib.dom.d.ts:5064 | +| `scrollTop` | `public` | `number` | - | `GridHTMLElement.scrollTop` | node\_modules/typescript/lib/lib.dom.d.ts:5065 | +| `scrollWidth` | `readonly` | `number` | - | `GridHTMLElement.scrollWidth` | node\_modules/typescript/lib/lib.dom.d.ts:5066 | +| `shadowRoot` | `readonly` | `null` \| `ShadowRoot` | Returns element's shadow root, if any, and if shadow root's mode is "open", and null otherwise. | `GridHTMLElement.shadowRoot` | node\_modules/typescript/lib/lib.dom.d.ts:5068 | +| `slot` | `public` | `string` | Returns the value of element's slot content attribute. Can be set to change it. | `GridHTMLElement.slot` | node\_modules/typescript/lib/lib.dom.d.ts:5070 | +| `tagName` | `readonly` | `string` | Returns the HTML-uppercased qualified name. | `GridHTMLElement.tagName` | node\_modules/typescript/lib/lib.dom.d.ts:5072 | +| `style` | `readonly` | `CSSStyleDeclaration` | - | `GridHTMLElement.style` | node\_modules/typescript/lib/lib.dom.d.ts:5162 | +| `contentEditable` | `public` | `string` | - | `GridHTMLElement.contentEditable` | node\_modules/typescript/lib/lib.dom.d.ts:5166 | +| `enterKeyHint` | `public` | `string` | - | `GridHTMLElement.enterKeyHint` | node\_modules/typescript/lib/lib.dom.d.ts:5167 | +| `inputMode` | `public` | `string` | - | `GridHTMLElement.inputMode` | node\_modules/typescript/lib/lib.dom.d.ts:5168 | +| `isContentEditable` | `readonly` | `boolean` | - | `GridHTMLElement.isContentEditable` | node\_modules/typescript/lib/lib.dom.d.ts:5169 | +| `onabort` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user aborts the download. **Param** The event. | `GridHTMLElement.onabort` | node\_modules/typescript/lib/lib.dom.d.ts:5856 | +| `onanimationcancel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onanimationcancel` | node\_modules/typescript/lib/lib.dom.d.ts:5857 | +| `onanimationend` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onanimationend` | node\_modules/typescript/lib/lib.dom.d.ts:5858 | +| `onanimationiteration` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onanimationiteration` | node\_modules/typescript/lib/lib.dom.d.ts:5859 | +| `onanimationstart` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onanimationstart` | node\_modules/typescript/lib/lib.dom.d.ts:5860 | +| `onauxclick` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onauxclick` | node\_modules/typescript/lib/lib.dom.d.ts:5861 | +| `onbeforeinput` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onbeforeinput` | node\_modules/typescript/lib/lib.dom.d.ts:5862 | +| `onblur` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the object loses the input focus. **Param** The focus event. | `GridHTMLElement.onblur` | node\_modules/typescript/lib/lib.dom.d.ts:5867 | +| `oncancel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.oncancel` | node\_modules/typescript/lib/lib.dom.d.ts:5868 | +| `oncanplay` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when playback is possible, but would require further buffering. **Param** The event. | `GridHTMLElement.oncanplay` | node\_modules/typescript/lib/lib.dom.d.ts:5873 | +| `oncanplaythrough` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.oncanplaythrough` | node\_modules/typescript/lib/lib.dom.d.ts:5874 | +| `onchange` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the contents of the object or selection have changed. **Param** The event. | `GridHTMLElement.onchange` | node\_modules/typescript/lib/lib.dom.d.ts:5879 | +| `onclick` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user clicks the left mouse button on the object **Param** The mouse event. | `GridHTMLElement.onclick` | node\_modules/typescript/lib/lib.dom.d.ts:5884 | +| `onclose` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onclose` | node\_modules/typescript/lib/lib.dom.d.ts:5885 | +| `oncontextmenu` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user clicks the right mouse button in the client area, opening the context menu. **Param** The mouse event. | `GridHTMLElement.oncontextmenu` | node\_modules/typescript/lib/lib.dom.d.ts:5890 | +| `oncopy` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.oncopy` | node\_modules/typescript/lib/lib.dom.d.ts:5891 | +| `oncuechange` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.oncuechange` | node\_modules/typescript/lib/lib.dom.d.ts:5892 | +| `oncut` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.oncut` | node\_modules/typescript/lib/lib.dom.d.ts:5893 | +| `ondblclick` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user double-clicks the object. **Param** The mouse event. | `GridHTMLElement.ondblclick` | node\_modules/typescript/lib/lib.dom.d.ts:5898 | +| `ondrag` | `public` | `null` \| (`this`, `ev`) => `any` | Fires on the source object continuously during a drag operation. **Param** The event. | `GridHTMLElement.ondrag` | node\_modules/typescript/lib/lib.dom.d.ts:5903 | +| `ondragend` | `public` | `null` \| (`this`, `ev`) => `any` | Fires on the source object when the user releases the mouse at the close of a drag operation. **Param** The event. | `GridHTMLElement.ondragend` | node\_modules/typescript/lib/lib.dom.d.ts:5908 | +| `ondragenter` | `public` | `null` \| (`this`, `ev`) => `any` | Fires on the target element when the user drags the object to a valid drop target. **Param** The drag event. | `GridHTMLElement.ondragenter` | node\_modules/typescript/lib/lib.dom.d.ts:5913 | +| `ondragleave` | `public` | `null` \| (`this`, `ev`) => `any` | Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation. **Param** The drag event. | `GridHTMLElement.ondragleave` | node\_modules/typescript/lib/lib.dom.d.ts:5918 | +| `ondragover` | `public` | `null` \| (`this`, `ev`) => `any` | Fires on the target element continuously while the user drags the object over a valid drop target. **Param** The event. | `GridHTMLElement.ondragover` | node\_modules/typescript/lib/lib.dom.d.ts:5923 | +| `ondragstart` | `public` | `null` \| (`this`, `ev`) => `any` | Fires on the source object when the user starts to drag a text selection or selected object. **Param** The event. | `GridHTMLElement.ondragstart` | node\_modules/typescript/lib/lib.dom.d.ts:5928 | +| `ondrop` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.ondrop` | node\_modules/typescript/lib/lib.dom.d.ts:5929 | +| `ondurationchange` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the duration attribute is updated. **Param** The event. | `GridHTMLElement.ondurationchange` | node\_modules/typescript/lib/lib.dom.d.ts:5934 | +| `onemptied` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the media element is reset to its initial state. **Param** The event. | `GridHTMLElement.onemptied` | node\_modules/typescript/lib/lib.dom.d.ts:5939 | +| `onended` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the end of playback is reached. **Param** The event | `GridHTMLElement.onended` | node\_modules/typescript/lib/lib.dom.d.ts:5944 | +| `onerror` | `public` | `OnErrorEventHandler` | Fires when an error occurs during object loading. **Param** The event. | `GridHTMLElement.onerror` | node\_modules/typescript/lib/lib.dom.d.ts:5949 | +| `onfocus` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the object receives focus. **Param** The event. | `GridHTMLElement.onfocus` | node\_modules/typescript/lib/lib.dom.d.ts:5954 | +| `onformdata` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onformdata` | node\_modules/typescript/lib/lib.dom.d.ts:5955 | +| `ongotpointercapture` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.ongotpointercapture` | node\_modules/typescript/lib/lib.dom.d.ts:5956 | +| `oninput` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.oninput` | node\_modules/typescript/lib/lib.dom.d.ts:5957 | +| `oninvalid` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.oninvalid` | node\_modules/typescript/lib/lib.dom.d.ts:5958 | +| `onkeydown` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user presses a key. **Param** The keyboard event | `GridHTMLElement.onkeydown` | node\_modules/typescript/lib/lib.dom.d.ts:5963 | +| ~~`onkeypress`~~ | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user presses an alphanumeric key. **Param** The event. **Deprecated** | `GridHTMLElement.onkeypress` | node\_modules/typescript/lib/lib.dom.d.ts:5969 | +| `onkeyup` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user releases a key. **Param** The keyboard event | `GridHTMLElement.onkeyup` | node\_modules/typescript/lib/lib.dom.d.ts:5974 | +| `onload` | `public` | `null` \| (`this`, `ev`) => `any` | Fires immediately after the browser loads the object. **Param** The event. | `GridHTMLElement.onload` | node\_modules/typescript/lib/lib.dom.d.ts:5979 | +| `onloadeddata` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when media data is loaded at the current playback position. **Param** The event. | `GridHTMLElement.onloadeddata` | node\_modules/typescript/lib/lib.dom.d.ts:5984 | +| `onloadedmetadata` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the duration and dimensions of the media have been determined. **Param** The event. | `GridHTMLElement.onloadedmetadata` | node\_modules/typescript/lib/lib.dom.d.ts:5989 | +| `onloadstart` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when Internet Explorer begins looking for media data. **Param** The event. | `GridHTMLElement.onloadstart` | node\_modules/typescript/lib/lib.dom.d.ts:5994 | +| `onlostpointercapture` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onlostpointercapture` | node\_modules/typescript/lib/lib.dom.d.ts:5995 | +| `onmousedown` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user clicks the object with either mouse button. **Param** The mouse event. | `GridHTMLElement.onmousedown` | node\_modules/typescript/lib/lib.dom.d.ts:6000 | +| `onmouseenter` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onmouseenter` | node\_modules/typescript/lib/lib.dom.d.ts:6001 | +| `onmouseleave` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onmouseleave` | node\_modules/typescript/lib/lib.dom.d.ts:6002 | +| `onmousemove` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user moves the mouse over the object. **Param** The mouse event. | `GridHTMLElement.onmousemove` | node\_modules/typescript/lib/lib.dom.d.ts:6007 | +| `onmouseout` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user moves the mouse pointer outside the boundaries of the object. **Param** The mouse event. | `GridHTMLElement.onmouseout` | node\_modules/typescript/lib/lib.dom.d.ts:6012 | +| `onmouseover` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user moves the mouse pointer into the object. **Param** The mouse event. | `GridHTMLElement.onmouseover` | node\_modules/typescript/lib/lib.dom.d.ts:6017 | +| `onmouseup` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user releases a mouse button while the mouse is over the object. **Param** The mouse event. | `GridHTMLElement.onmouseup` | node\_modules/typescript/lib/lib.dom.d.ts:6022 | +| `onpaste` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onpaste` | node\_modules/typescript/lib/lib.dom.d.ts:6023 | +| `onpause` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when playback is paused. **Param** The event. | `GridHTMLElement.onpause` | node\_modules/typescript/lib/lib.dom.d.ts:6028 | +| `onplay` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the play method is requested. **Param** The event. | `GridHTMLElement.onplay` | node\_modules/typescript/lib/lib.dom.d.ts:6033 | +| `onplaying` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the audio or video has started playing. **Param** The event. | `GridHTMLElement.onplaying` | node\_modules/typescript/lib/lib.dom.d.ts:6038 | +| `onpointercancel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onpointercancel` | node\_modules/typescript/lib/lib.dom.d.ts:6039 | +| `onpointerdown` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onpointerdown` | node\_modules/typescript/lib/lib.dom.d.ts:6040 | +| `onpointerenter` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onpointerenter` | node\_modules/typescript/lib/lib.dom.d.ts:6041 | +| `onpointerleave` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onpointerleave` | node\_modules/typescript/lib/lib.dom.d.ts:6042 | +| `onpointermove` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onpointermove` | node\_modules/typescript/lib/lib.dom.d.ts:6043 | +| `onpointerout` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onpointerout` | node\_modules/typescript/lib/lib.dom.d.ts:6044 | +| `onpointerover` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onpointerover` | node\_modules/typescript/lib/lib.dom.d.ts:6045 | +| `onpointerup` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onpointerup` | node\_modules/typescript/lib/lib.dom.d.ts:6046 | +| `onprogress` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs to indicate progress while downloading media data. **Param** The event. | `GridHTMLElement.onprogress` | node\_modules/typescript/lib/lib.dom.d.ts:6051 | +| `onratechange` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the playback rate is increased or decreased. **Param** The event. | `GridHTMLElement.onratechange` | node\_modules/typescript/lib/lib.dom.d.ts:6056 | +| `onreset` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user resets a form. **Param** The event. | `GridHTMLElement.onreset` | node\_modules/typescript/lib/lib.dom.d.ts:6061 | +| `onresize` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onresize` | node\_modules/typescript/lib/lib.dom.d.ts:6062 | +| `onscroll` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the user repositions the scroll box in the scroll bar on the object. **Param** The event. | `GridHTMLElement.onscroll` | node\_modules/typescript/lib/lib.dom.d.ts:6067 | +| `onsecuritypolicyviolation` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onsecuritypolicyviolation` | node\_modules/typescript/lib/lib.dom.d.ts:6068 | +| `onseeked` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the seek operation ends. **Param** The event. | `GridHTMLElement.onseeked` | node\_modules/typescript/lib/lib.dom.d.ts:6073 | +| `onseeking` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the current playback position is moved. **Param** The event. | `GridHTMLElement.onseeking` | node\_modules/typescript/lib/lib.dom.d.ts:6078 | +| `onselect` | `public` | `null` \| (`this`, `ev`) => `any` | Fires when the current selection changes. **Param** The event. | `GridHTMLElement.onselect` | node\_modules/typescript/lib/lib.dom.d.ts:6083 | +| `onselectionchange` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onselectionchange` | node\_modules/typescript/lib/lib.dom.d.ts:6084 | +| `onselectstart` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onselectstart` | node\_modules/typescript/lib/lib.dom.d.ts:6085 | +| `onslotchange` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onslotchange` | node\_modules/typescript/lib/lib.dom.d.ts:6086 | +| `onstalled` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the download has stopped. **Param** The event. | `GridHTMLElement.onstalled` | node\_modules/typescript/lib/lib.dom.d.ts:6091 | +| `onsubmit` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onsubmit` | node\_modules/typescript/lib/lib.dom.d.ts:6092 | +| `onsuspend` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs if the load operation has been intentionally halted. **Param** The event. | `GridHTMLElement.onsuspend` | node\_modules/typescript/lib/lib.dom.d.ts:6097 | +| `ontimeupdate` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs to indicate the current playback position. **Param** The event. | `GridHTMLElement.ontimeupdate` | node\_modules/typescript/lib/lib.dom.d.ts:6102 | +| `ontoggle` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.ontoggle` | node\_modules/typescript/lib/lib.dom.d.ts:6103 | +| `ontouchcancel?` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.ontouchcancel` | node\_modules/typescript/lib/lib.dom.d.ts:6104 | +| `ontouchend?` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.ontouchend` | node\_modules/typescript/lib/lib.dom.d.ts:6105 | +| `ontouchmove?` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.ontouchmove` | node\_modules/typescript/lib/lib.dom.d.ts:6106 | +| `ontouchstart?` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.ontouchstart` | node\_modules/typescript/lib/lib.dom.d.ts:6107 | +| `ontransitioncancel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.ontransitioncancel` | node\_modules/typescript/lib/lib.dom.d.ts:6108 | +| `ontransitionend` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.ontransitionend` | node\_modules/typescript/lib/lib.dom.d.ts:6109 | +| `ontransitionrun` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.ontransitionrun` | node\_modules/typescript/lib/lib.dom.d.ts:6110 | +| `ontransitionstart` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.ontransitionstart` | node\_modules/typescript/lib/lib.dom.d.ts:6111 | +| `onvolumechange` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when the volume is changed, or playback is muted or unmuted. **Param** The event. | `GridHTMLElement.onvolumechange` | node\_modules/typescript/lib/lib.dom.d.ts:6116 | +| `onwaiting` | `public` | `null` \| (`this`, `ev`) => `any` | Occurs when playback stops because the next frame of a video resource is not available. **Param** The event. | `GridHTMLElement.onwaiting` | node\_modules/typescript/lib/lib.dom.d.ts:6121 | +| ~~`onwebkitanimationend`~~ | `public` | `null` \| (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `onanimationend`. | `GridHTMLElement.onwebkitanimationend` | node\_modules/typescript/lib/lib.dom.d.ts:6123 | +| ~~`onwebkitanimationiteration`~~ | `public` | `null` \| (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `onanimationiteration`. | `GridHTMLElement.onwebkitanimationiteration` | node\_modules/typescript/lib/lib.dom.d.ts:6125 | +| ~~`onwebkitanimationstart`~~ | `public` | `null` \| (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `onanimationstart`. | `GridHTMLElement.onwebkitanimationstart` | node\_modules/typescript/lib/lib.dom.d.ts:6127 | +| ~~`onwebkittransitionend`~~ | `public` | `null` \| (`this`, `ev`) => `any` | **Deprecated** This is a legacy alias of `ontransitionend`. | `GridHTMLElement.onwebkittransitionend` | node\_modules/typescript/lib/lib.dom.d.ts:6129 | +| `onwheel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridHTMLElement.onwheel` | node\_modules/typescript/lib/lib.dom.d.ts:6130 | +| `accessKey` | `public` | `string` | - | `GridHTMLElement.accessKey` | node\_modules/typescript/lib/lib.dom.d.ts:6555 | +| `accessKeyLabel` | `readonly` | `string` | - | `GridHTMLElement.accessKeyLabel` | node\_modules/typescript/lib/lib.dom.d.ts:6556 | +| `autocapitalize` | `public` | `string` | - | `GridHTMLElement.autocapitalize` | node\_modules/typescript/lib/lib.dom.d.ts:6557 | +| `dir` | `public` | `string` | - | `GridHTMLElement.dir` | node\_modules/typescript/lib/lib.dom.d.ts:6558 | +| `draggable` | `public` | `boolean` | - | `GridHTMLElement.draggable` | node\_modules/typescript/lib/lib.dom.d.ts:6559 | +| `hidden` | `public` | `boolean` | - | `GridHTMLElement.hidden` | node\_modules/typescript/lib/lib.dom.d.ts:6560 | +| `inert` | `public` | `boolean` | - | `GridHTMLElement.inert` | node\_modules/typescript/lib/lib.dom.d.ts:6561 | +| `innerText` | `public` | `string` | - | `GridHTMLElement.innerText` | node\_modules/typescript/lib/lib.dom.d.ts:6562 | +| `lang` | `public` | `string` | - | `GridHTMLElement.lang` | node\_modules/typescript/lib/lib.dom.d.ts:6563 | +| `offsetHeight` | `readonly` | `number` | - | `GridHTMLElement.offsetHeight` | node\_modules/typescript/lib/lib.dom.d.ts:6564 | +| `offsetLeft` | `readonly` | `number` | - | `GridHTMLElement.offsetLeft` | node\_modules/typescript/lib/lib.dom.d.ts:6565 | +| `offsetParent` | `readonly` | `null` \| `Element` | - | `GridHTMLElement.offsetParent` | node\_modules/typescript/lib/lib.dom.d.ts:6566 | +| `offsetTop` | `readonly` | `number` | - | `GridHTMLElement.offsetTop` | node\_modules/typescript/lib/lib.dom.d.ts:6567 | +| `offsetWidth` | `readonly` | `number` | - | `GridHTMLElement.offsetWidth` | node\_modules/typescript/lib/lib.dom.d.ts:6568 | +| `outerText` | `public` | `string` | - | `GridHTMLElement.outerText` | node\_modules/typescript/lib/lib.dom.d.ts:6569 | +| `spellcheck` | `public` | `boolean` | - | `GridHTMLElement.spellcheck` | node\_modules/typescript/lib/lib.dom.d.ts:6570 | +| `title` | `public` | `string` | - | `GridHTMLElement.title` | node\_modules/typescript/lib/lib.dom.d.ts:6571 | +| `translate` | `public` | `boolean` | - | `GridHTMLElement.translate` | node\_modules/typescript/lib/lib.dom.d.ts:6572 | +| `autofocus` | `public` | `boolean` | - | `GridHTMLElement.autofocus` | node\_modules/typescript/lib/lib.dom.d.ts:7764 | +| `dataset` | `readonly` | `DOMStringMap` | - | `GridHTMLElement.dataset` | node\_modules/typescript/lib/lib.dom.d.ts:7765 | +| `nonce?` | `public` | `string` | - | `GridHTMLElement.nonce` | node\_modules/typescript/lib/lib.dom.d.ts:7766 | +| `tabIndex` | `public` | `number` | - | `GridHTMLElement.tabIndex` | node\_modules/typescript/lib/lib.dom.d.ts:7767 | +| `innerHTML` | `public` | `string` | - | `GridHTMLElement.innerHTML` | node\_modules/typescript/lib/lib.dom.d.ts:9130 | +| `baseURI` | `readonly` | `string` | Returns node's node document's document base URL. | `GridHTMLElement.baseURI` | node\_modules/typescript/lib/lib.dom.d.ts:10249 | +| `childNodes` | `readonly` | `NodeListOf`\<`ChildNode`\> | Returns the children. | `GridHTMLElement.childNodes` | node\_modules/typescript/lib/lib.dom.d.ts:10251 | +| `firstChild` | `readonly` | `null` \| `ChildNode` | Returns the first child. | `GridHTMLElement.firstChild` | node\_modules/typescript/lib/lib.dom.d.ts:10253 | +| `isConnected` | `readonly` | `boolean` | Returns true if node is connected and false otherwise. | `GridHTMLElement.isConnected` | node\_modules/typescript/lib/lib.dom.d.ts:10255 | +| `lastChild` | `readonly` | `null` \| `ChildNode` | Returns the last child. | `GridHTMLElement.lastChild` | node\_modules/typescript/lib/lib.dom.d.ts:10257 | +| `nextSibling` | `readonly` | `null` \| `ChildNode` | Returns the next sibling. | `GridHTMLElement.nextSibling` | node\_modules/typescript/lib/lib.dom.d.ts:10259 | +| `nodeName` | `readonly` | `string` | Returns a string appropriate for the type of node. | `GridHTMLElement.nodeName` | node\_modules/typescript/lib/lib.dom.d.ts:10261 | +| `nodeType` | `readonly` | `number` | Returns the type of node. | `GridHTMLElement.nodeType` | node\_modules/typescript/lib/lib.dom.d.ts:10263 | +| `nodeValue` | `public` | `null` \| `string` | - | `GridHTMLElement.nodeValue` | node\_modules/typescript/lib/lib.dom.d.ts:10264 | +| `parentElement` | `readonly` | `null` \| `HTMLElement` | Returns the parent element. | `GridHTMLElement.parentElement` | node\_modules/typescript/lib/lib.dom.d.ts:10268 | +| `parentNode` | `readonly` | `null` \| `ParentNode` | Returns the parent. | `GridHTMLElement.parentNode` | node\_modules/typescript/lib/lib.dom.d.ts:10270 | +| `previousSibling` | `readonly` | `null` \| `ChildNode` | Returns the previous sibling. | `GridHTMLElement.previousSibling` | node\_modules/typescript/lib/lib.dom.d.ts:10272 | +| `textContent` | `public` | `null` \| `string` | - | `GridHTMLElement.textContent` | node\_modules/typescript/lib/lib.dom.d.ts:10273 | +| `ELEMENT_NODE` | `readonly` | `1` | node is an element. | `GridHTMLElement.ELEMENT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10297 | +| `ATTRIBUTE_NODE` | `readonly` | `2` | - | `GridHTMLElement.ATTRIBUTE_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10298 | +| `TEXT_NODE` | `readonly` | `3` | node is a Text node. | `GridHTMLElement.TEXT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10300 | +| `CDATA_SECTION_NODE` | `readonly` | `4` | node is a CDATASection node. | `GridHTMLElement.CDATA_SECTION_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10302 | +| `ENTITY_REFERENCE_NODE` | `readonly` | `5` | - | `GridHTMLElement.ENTITY_REFERENCE_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10303 | +| `ENTITY_NODE` | `readonly` | `6` | - | `GridHTMLElement.ENTITY_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10304 | +| `PROCESSING_INSTRUCTION_NODE` | `readonly` | `7` | node is a ProcessingInstruction node. | `GridHTMLElement.PROCESSING_INSTRUCTION_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10306 | +| `COMMENT_NODE` | `readonly` | `8` | node is a Comment node. | `GridHTMLElement.COMMENT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10308 | +| `DOCUMENT_NODE` | `readonly` | `9` | node is a document. | `GridHTMLElement.DOCUMENT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10310 | +| `DOCUMENT_TYPE_NODE` | `readonly` | `10` | node is a doctype. | `GridHTMLElement.DOCUMENT_TYPE_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10312 | +| `DOCUMENT_FRAGMENT_NODE` | `readonly` | `11` | node is a DocumentFragment node. | `GridHTMLElement.DOCUMENT_FRAGMENT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10314 | +| `NOTATION_NODE` | `readonly` | `12` | - | `GridHTMLElement.NOTATION_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10315 | +| `DOCUMENT_POSITION_DISCONNECTED` | `readonly` | `1` | Set when node and other are not in the same tree. | `GridHTMLElement.DOCUMENT_POSITION_DISCONNECTED` | node\_modules/typescript/lib/lib.dom.d.ts:10317 | +| `DOCUMENT_POSITION_PRECEDING` | `readonly` | `2` | Set when other is preceding node. | `GridHTMLElement.DOCUMENT_POSITION_PRECEDING` | node\_modules/typescript/lib/lib.dom.d.ts:10319 | +| `DOCUMENT_POSITION_FOLLOWING` | `readonly` | `4` | Set when other is following node. | `GridHTMLElement.DOCUMENT_POSITION_FOLLOWING` | node\_modules/typescript/lib/lib.dom.d.ts:10321 | +| `DOCUMENT_POSITION_CONTAINS` | `readonly` | `8` | Set when other is an ancestor of node. | `GridHTMLElement.DOCUMENT_POSITION_CONTAINS` | node\_modules/typescript/lib/lib.dom.d.ts:10323 | +| `DOCUMENT_POSITION_CONTAINED_BY` | `readonly` | `16` | Set when other is a descendant of node. | `GridHTMLElement.DOCUMENT_POSITION_CONTAINED_BY` | node\_modules/typescript/lib/lib.dom.d.ts:10325 | +| `DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | `readonly` | `32` | - | `GridHTMLElement.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | node\_modules/typescript/lib/lib.dom.d.ts:10326 | +| `nextElementSibling` | `readonly` | `null` \| `Element` | Returns the first following sibling that is an element, and null otherwise. | `GridHTMLElement.nextElementSibling` | node\_modules/typescript/lib/lib.dom.d.ts:10416 | +| `previousElementSibling` | `readonly` | `null` \| `Element` | Returns the first preceding sibling that is an element, and null otherwise. | `GridHTMLElement.previousElementSibling` | node\_modules/typescript/lib/lib.dom.d.ts:10418 | +| `childElementCount` | `readonly` | `number` | - | `GridHTMLElement.childElementCount` | node\_modules/typescript/lib/lib.dom.d.ts:10685 | +| `children` | `readonly` | `HTMLCollection` | Returns the child elements. | `GridHTMLElement.children` | node\_modules/typescript/lib/lib.dom.d.ts:10687 | +| `firstElementChild` | `readonly` | `null` \| `Element` | Returns the first child that is an element, and null otherwise. | `GridHTMLElement.firstElementChild` | node\_modules/typescript/lib/lib.dom.d.ts:10689 | +| `lastElementChild` | `readonly` | `null` \| `Element` | Returns the last child that is an element, and null otherwise. | `GridHTMLElement.lastElementChild` | node\_modules/typescript/lib/lib.dom.d.ts:10691 | +| `assignedSlot` | `readonly` | `null` \| `HTMLSlotElement` | - | `GridHTMLElement.assignedSlot` | node\_modules/typescript/lib/lib.dom.d.ts:13933 | + +## Functions + +### gsCreateNgComponents() + +```ts +function gsCreateNgComponents( + host, + n, + add, + isGrid): undefined | HTMLElement; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:353](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L353) + +can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip) + +#### Parameters + +| Parameter | Type | +| ------ | ------ | +| `host` | `HTMLElement` \| [`GridCompHTMLElement`](#gridcomphtmlelement) | +| `n` | [`NgGridStackNode`](types.md#nggridstacknode) | +| `add` | `boolean` | +| `isGrid` | `boolean` | + +#### Returns + +`undefined` \| `HTMLElement` + +*** + +### gsSaveAdditionalNgInfo() + +```ts +function gsSaveAdditionalNgInfo(n, w): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:437](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L437) + +called for each item in the grid - check if additional information needs to be saved. +Note: since this is options minus gridstack protected members using Utils.removeInternalForSave(), +this typically doesn't need to do anything. However your custom Component @Input() are now supported +using BaseWidget.serialize() + +#### Parameters + +| Parameter | Type | +| ------ | ------ | +| `n` | [`NgGridStackNode`](types.md#nggridstacknode) | +| `w` | [`NgGridStackWidget`](types.md#nggridstackwidget) | + +#### Returns + +`void` + +*** + +### gsUpdateNgComponents() + +```ts +function gsUpdateNgComponents(n): void; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:456](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L456) + +track when widgeta re updated (rather than created) to make sure we de-serialize them as well + +#### Parameters + +| Parameter | Type | +| ------ | ------ | +| `n` | [`NgGridStackNode`](types.md#nggridstacknode) | + +#### Returns + +`void` + +## Type Aliases + +### eventCB + +```ts +type eventCB = object; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:24](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L24) + +Callback for general events (enable, disable, etc.) + +#### Properties + +##### event + +```ts +event: Event; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:24](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L24) + +*** + +### elementCB + +```ts +type elementCB = object; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:27](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L27) + +Callback for element-specific events (resize, drag, etc.) + +#### Properties + +##### event + +```ts +event: Event; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:27](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L27) + +##### el + +```ts +el: GridItemHTMLElement; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:27](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L27) + +*** + +### nodesCB + +```ts +type nodesCB = object; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:30](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L30) + +Callback for events affecting multiple nodes (change, etc.) + +#### Properties + +##### event + +```ts +event: Event; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:30](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L30) + +##### nodes + +```ts +nodes: GridStackNode[]; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:30](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L30) + +*** + +### droppedCB + +```ts +type droppedCB = object; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:33](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L33) + +Callback for drop events with before/after node state + +#### Properties + +##### event + +```ts +event: Event; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:33](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L33) + +##### previousNode + +```ts +previousNode: GridStackNode; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:33](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L33) + +##### newNode + +```ts +newNode: GridStackNode; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:33](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L33) + +*** + +### SelectorToType + +```ts +type SelectorToType = object; +``` + +Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:48](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L48) + +Mapping of selector strings to Angular component types. +Used for dynamic component creation based on widget selectors. + +#### Index Signature + +```ts +[key: string]: Type +``` diff --git a/angular/doc/api/gridstack.module.md b/angular/doc/api/gridstack.module.md new file mode 100644 index 000000000..6e3aedcdc --- /dev/null +++ b/angular/doc/api/gridstack.module.md @@ -0,0 +1,44 @@ +# gridstack.module + +## Classes + +### ~~GridstackModule~~ + +Defined in: [angular/projects/lib/src/lib/gridstack.module.ts:44](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.module.ts#L44) + +#### Deprecated + +Use GridstackComponent and GridstackItemComponent as standalone components instead. + +This NgModule is provided for backward compatibility but is no longer the recommended approach. +Import components directly in your standalone components or use the new Angular module structure. + +#### Example + +```typescript +// Preferred approach - standalone components +@Component({ + selector: 'my-app', + imports: [GridstackComponent, GridstackItemComponent], + template: '' +}) +export class AppComponent {} + +// Legacy approach (deprecated) +@NgModule({ + imports: [GridstackModule] +}) +export class AppModule {} +``` + +#### Constructors + +##### Constructor + +```ts +new GridstackModule(): GridstackModule; +``` + +###### Returns + +[`GridstackModule`](#gridstackmodule) diff --git a/angular/doc/api/index.md b/angular/doc/api/index.md new file mode 100644 index 000000000..719abb3a1 --- /dev/null +++ b/angular/doc/api/index.md @@ -0,0 +1,11 @@ +# GridStack Angular Library v12.3.2 + +## Modules + +| Module | Description | +| ------ | ------ | +| [gridstack.component](gridstack.component.md) | - | +| [gridstack-item.component](gridstack-item.component.md) | - | +| [gridstack.module](gridstack.module.md) | - | +| [base-widget](base-widget.md) | - | +| [types](types.md) | - | diff --git a/angular/doc/api/types.md b/angular/doc/api/types.md new file mode 100644 index 000000000..0615a08dd --- /dev/null +++ b/angular/doc/api/types.md @@ -0,0 +1,90 @@ +# types + +## Interfaces + +### NgGridStackWidget + +Defined in: [angular/projects/lib/src/lib/types.ts:12](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L12) + +Extended GridStackWidget interface for Angular integration. +Adds Angular-specific properties for dynamic component creation. + +#### Extends + +- `GridStackWidget` + +#### Properties + +| Property | Type | Description | Overrides | Defined in | +| ------ | ------ | ------ | ------ | ------ | +| `selector?` | `string` | Angular component selector for dynamic creation (e.g., 'my-widget') | - | [angular/projects/lib/src/lib/types.ts:14](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L14) | +| `input?` | [`NgCompInputs`](#ngcompinputs) | Serialized data for component @Input() properties | - | [angular/projects/lib/src/lib/types.ts:16](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L16) | +| `subGridOpts?` | [`NgGridStackOptions`](#nggridstackoptions) | Configuration for nested sub-grids | `GridStackWidget.subGridOpts` | [angular/projects/lib/src/lib/types.ts:18](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L18) | + +*** + +### NgGridStackNode + +Defined in: [angular/projects/lib/src/lib/types.ts:25](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L25) + +Extended GridStackNode interface for Angular integration. +Adds component selector for dynamic content creation. + +#### Extends + +- `GridStackNode` + +#### Properties + +| Property | Type | Description | Defined in | +| ------ | ------ | ------ | ------ | +| `selector?` | `string` | Angular component selector for this node's content | [angular/projects/lib/src/lib/types.ts:27](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L27) | + +*** + +### NgGridStackOptions + +Defined in: [angular/projects/lib/src/lib/types.ts:34](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L34) + +Extended GridStackOptions interface for Angular integration. +Supports Angular-specific widget definitions and nested grids. + +#### Extends + +- `GridStackOptions` + +#### Properties + +| Property | Type | Description | Overrides | Defined in | +| ------ | ------ | ------ | ------ | ------ | +| `children?` | [`NgGridStackWidget`](#nggridstackwidget)[] | Array of Angular widget definitions for initial grid setup | `GridStackOptions.children` | [angular/projects/lib/src/lib/types.ts:36](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L36) | +| `subGridOpts?` | [`NgGridStackOptions`](#nggridstackoptions) | Configuration for nested sub-grids (Angular-aware) | `GridStackOptions.subGridOpts` | [angular/projects/lib/src/lib/types.ts:38](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L38) | + +## Type Aliases + +### NgCompInputs + +```ts +type NgCompInputs = object; +``` + +Defined in: [angular/projects/lib/src/lib/types.ts:54](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/types.ts#L54) + +Type for component input data serialization. +Maps @Input() property names to their values for widget persistence. + +#### Index Signature + +```ts +[key: string]: any +``` + +#### Example + +```typescript +const inputs: NgCompInputs = { + title: 'My Widget', + value: 42, + config: { enabled: true } +}; +``` diff --git a/angular/package.json b/angular/package.json index 5047ec6a4..1e1e472b2 100644 --- a/angular/package.json +++ b/angular/package.json @@ -6,7 +6,10 @@ "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", - "test": "ng test" + "test": "ng test", + "doc": "npx typedoc --options typedoc.json && npx typedoc --options typedoc.html.json", + "doc:api": "npx typedoc --options typedoc.json", + "doc:html": "npx typedoc --options typedoc.html.json" }, "private": true, "dependencies": { @@ -18,7 +21,7 @@ "@angular/platform-browser": "^14", "@angular/platform-browser-dynamic": "^14", "@angular/router": "^14", - "gridstack": "^12.1.0", + "gridstack": "^12.3.2", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/angular/projects/lib/package.json b/angular/projects/lib/package.json index bef129c20..f48550891 100644 --- a/angular/projects/lib/package.json +++ b/angular/projects/lib/package.json @@ -1,6 +1,6 @@ { "name": "gridstack-angular", - "version": "11.1.0", + "version": "12.3.2", "peerDependencies": { "@angular/common": ">=14", "@angular/core": ">=14" diff --git a/angular/projects/lib/src/lib/base-widget.ts b/angular/projects/lib/src/lib/base-widget.ts index acf2a0713..f2caf2a8d 100644 --- a/angular/projects/lib/src/lib/base-widget.ts +++ b/angular/projects/lib/src/lib/base-widget.ts @@ -1,30 +1,89 @@ /** - * gridstack-item.component.ts 12.1.0 + * gridstack-item.component.ts 12.3.2 * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license */ /** - * Base interface that all widgets need to implement in order for GridstackItemComponent to correctly save/load/delete/.. + * Abstract base class that all custom widgets should extend. + * + * This class provides the interface needed for GridstackItemComponent to: + * - Serialize/deserialize widget data + * - Save/restore widget state + * - Integrate with Angular lifecycle + * + * Extend this class when creating custom widgets for dynamic grids. + * + * @example + * ```typescript + * @Component({ + * selector: 'my-custom-widget', + * template: '
{{data}}
' + * }) + * export class MyCustomWidget extends BaseWidget { + * @Input() data: string = ''; + * + * serialize() { + * return { data: this.data }; + * } + * } + * ``` */ import { Injectable } from '@angular/core'; import { NgCompInputs, NgGridStackWidget } from './types'; - @Injectable() - export abstract class BaseWidget { +/** + * Base widget class for GridStack Angular integration. + */ +@Injectable() +export abstract class BaseWidget { - /** variable that holds the complete definition of this widgets (with selector,x,y,w,h) */ + /** + * Complete widget definition including position, size, and Angular-specific data. + * Populated automatically when the widget is loaded or saved. + */ public widgetItem?: NgGridStackWidget; /** - * REDEFINE to return an object representing the data needed to re-create yourself, other than `selector` already handled. - * This should map directly to the @Input() fields of this objects on create, so a simple apply can be used on read + * Override this method to return serializable data for this widget. + * + * Return an object with properties that map to your component's @Input() fields. + * The selector is handled automatically, so only include component-specific data. + * + * @returns Object containing serializable component data + * + * @example + * ```typescript + * serialize() { + * return { + * title: this.title, + * value: this.value, + * settings: this.settings + * }; + * } + * ``` */ public serialize(): NgCompInputs | undefined { return; } /** - * REDEFINE this if your widget needs to read from saved data and transform it to create itself - you do this for - * things that are not mapped directly into @Input() fields for example. + * Override this method to handle widget restoration from saved data. + * + * Use this for complex initialization that goes beyond simple @Input() mapping. + * The default implementation automatically assigns input data to component properties. + * + * @param w The saved widget data including input properties + * + * @example + * ```typescript + * deserialize(w: NgGridStackWidget) { + * super.deserialize(w); // Call parent for basic setup + * + * // Custom initialization logic + * if (w.input?.complexData) { + * this.processComplexData(w.input.complexData); + * } + * } + * ``` */ public deserialize(w: NgGridStackWidget) { // save full description for meta data diff --git a/angular/projects/lib/src/lib/gridstack-item.component.ts b/angular/projects/lib/src/lib/gridstack-item.component.ts index 85ee0b785..b6f7cbab2 100644 --- a/angular/projects/lib/src/lib/gridstack-item.component.ts +++ b/angular/projects/lib/src/lib/gridstack-item.component.ts @@ -1,5 +1,5 @@ /** - * gridstack-item.component.ts 12.1.0 + * gridstack-item.component.ts 12.3.2 * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license */ @@ -7,13 +7,34 @@ import { Component, ElementRef, Input, ViewChild, ViewContainerRef, OnDestroy, C import { GridItemHTMLElement, GridStackNode } from 'gridstack'; import { BaseWidget } from './base-widget'; -/** store element to Ng Class pointer back */ +/** + * Extended HTMLElement interface for grid items. + * Stores a back-reference to the Angular component for integration. + */ export interface GridItemCompHTMLElement extends GridItemHTMLElement { + /** Back-reference to the Angular GridStackItem component */ _gridItemComp?: GridstackItemComponent; } /** - * HTML Component Wrapper for gridstack items, in combination with GridstackComponent for parent grid + * Angular component wrapper for individual GridStack items. + * + * This component represents a single grid item and handles: + * - Dynamic content creation and management + * - Integration with parent GridStack component + * - Component lifecycle and cleanup + * - Widget options and configuration + * + * Use in combination with GridstackComponent for the parent grid. + * + * @example + * ```html + * + * + * + * + * + * ``` */ @Component({ selector: 'gridstack-item', @@ -34,16 +55,37 @@ export interface GridItemCompHTMLElement extends GridItemHTMLElement { }) export class GridstackItemComponent implements OnDestroy { - /** container to append items dynamically */ + /** + * Container for dynamic component creation within this grid item. + * Used to append child components programmatically. + */ @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef; - /** ComponentRef of ourself - used by dynamic object to correctly get removed */ + /** + * Component reference for dynamic component removal. + * Used internally when this component is created dynamically. + */ public ref: ComponentRef | undefined; - /** child component so we can save/restore additional data to be saved along */ + /** + * Reference to child widget component for serialization. + * Used to save/restore additional data along with grid position. + */ public childWidget: BaseWidget | undefined; - /** list of options for creating/updating this item */ + /** + * Grid item configuration options. + * Defines position, size, and behavior of this grid item. + * + * @example + * ```typescript + * itemOptions: GridStackNode = { + * x: 0, y: 0, w: 2, h: 1, + * noResize: true, + * content: 'Item content' + * }; + * ``` + */ @Input() public set options(val: GridStackNode) { const grid = this.el.gridstackNode?.grid; if (grid) { diff --git a/angular/projects/lib/src/lib/gridstack.component.ts b/angular/projects/lib/src/lib/gridstack.component.ts index 1a5512272..82bdeeb28 100644 --- a/angular/projects/lib/src/lib/gridstack.component.ts +++ b/angular/projects/lib/src/lib/gridstack.component.ts @@ -1,10 +1,12 @@ /** - * gridstack.component.ts 12.1.0 + * gridstack.component.ts 12.3.2 * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license */ -import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input, - OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef } from '@angular/core'; +import { + AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input, + OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef +} from '@angular/core'; import { NgIf } from '@angular/common'; import { Subscription } from 'rxjs'; import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack'; @@ -13,22 +15,55 @@ import { NgGridStackNode, NgGridStackWidget } from './types'; import { BaseWidget } from './base-widget'; import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component'; -/** events handlers emitters signature for different events */ +/** + * Event handler callback signatures for different GridStack events. + * These types define the structure of data passed to Angular event emitters. + */ + +/** Callback for general events (enable, disable, etc.) */ export type eventCB = {event: Event}; + +/** Callback for element-specific events (resize, drag, etc.) */ export type elementCB = {event: Event, el: GridItemHTMLElement}; + +/** Callback for events affecting multiple nodes (change, etc.) */ export type nodesCB = {event: Event, nodes: GridStackNode[]}; + +/** Callback for drop events with before/after node state */ export type droppedCB = {event: Event, previousNode: GridStackNode, newNode: GridStackNode}; -/** store element to Ng Class pointer back */ +/** + * Extended HTMLElement interface for the grid container. + * Stores a back-reference to the Angular component for integration purposes. + */ export interface GridCompHTMLElement extends GridHTMLElement { + /** Back-reference to the Angular GridStack component */ _gridComp?: GridstackComponent; } -/** selector string to runtime Type mapping */ +/** + * Mapping of selector strings to Angular component types. + * Used for dynamic component creation based on widget selectors. + */ export type SelectorToType = {[key: string]: Type}; /** - * HTML Component Wrapper for gridstack, in combination with GridstackItemComponent for the items + * Angular component wrapper for GridStack. + * + * This component provides Angular integration for GridStack grids, handling: + * - Grid initialization and lifecycle + * - Dynamic component creation and management + * - Event binding and emission + * - Integration with Angular change detection + * + * Use in combination with GridstackItemComponent for individual grid items. + * + * @example + * ```html + * + *
Drag widgets here
+ *
+ * ``` */ @Component({ selector: 'gridstack', @@ -49,12 +84,31 @@ export type SelectorToType = {[key: string]: Type}; }) export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy { - /** track list of TEMPLATE (not recommended) grid items so we can sync between DOM and GS internals */ + /** + * List of template-based grid items (not recommended approach). + * Used to sync between DOM and GridStack internals when items are defined in templates. + * Prefer dynamic component creation instead. + */ @ContentChildren(GridstackItemComponent) public gridstackItems?: QueryList; - /** container to append items dynamically (recommended way) */ + /** + * Container for dynamic component creation (recommended approach). + * Used to append grid items programmatically at runtime. + */ @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef; - /** initial options for creation of the grid */ + /** + * Grid configuration options. + * Can be set before grid initialization or updated after grid is created. + * + * @example + * ```typescript + * gridOptions: GridStackOptions = { + * column: 12, + * cellHeight: 'auto', + * animate: true + * }; + * ``` + */ @Input() public set options(o: GridStackOptions) { if (this._grid) { this._grid.updateOptions(o); @@ -62,51 +116,130 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy { this._options = o; } } - /** return the current running options */ + /** Get the current running grid options */ public get options(): GridStackOptions { return this._grid?.opts || this._options || {}; } - /** true while ng-content with 'no-item-content' should be shown when last item is removed from a grid */ + /** + * Controls whether empty content should be displayed. + * Set to true to show ng-content with 'empty-content' selector when grid has no items. + * + * @example + * ```html + * + *
Drag widgets here to get started
+ *
+ * ``` + */ @Input() public isEmpty?: boolean; - /** individual list of GridStackEvent callbacks handlers as output - * otherwise use this.grid.on('name1 name2 name3', callback) to handle multiple at once - * see https://github.com/gridstack/gridstack.js/blob/master/demo/events.js#L4 - * - * Note: camel casing and 'CB' added at the end to prevent @angular-eslint/no-output-native - * eg: 'change' would trigger the raw CustomEvent so use different name. + /** + * GridStack event emitters for Angular integration. + * + * These provide Angular-style event handling for GridStack events. + * Alternatively, use `this.grid.on('event1 event2', callback)` for multiple events. + * + * Note: 'CB' suffix prevents conflicts with native DOM events. + * + * @example + * ```html + * + * + * ``` */ + + /** Emitted when widgets are added to the grid */ @Output() public addedCB = new EventEmitter(); + + /** Emitted when grid layout changes */ @Output() public changeCB = new EventEmitter(); + + /** Emitted when grid is disabled */ @Output() public disableCB = new EventEmitter(); + + /** Emitted during widget drag operations */ @Output() public dragCB = new EventEmitter(); + + /** Emitted when widget drag starts */ @Output() public dragStartCB = new EventEmitter(); + + /** Emitted when widget drag stops */ @Output() public dragStopCB = new EventEmitter(); + + /** Emitted when widget is dropped */ @Output() public droppedCB = new EventEmitter(); + + /** Emitted when grid is enabled */ @Output() public enableCB = new EventEmitter(); + + /** Emitted when widgets are removed from the grid */ @Output() public removedCB = new EventEmitter(); + + /** Emitted during widget resize operations */ @Output() public resizeCB = new EventEmitter(); + + /** Emitted when widget resize starts */ @Output() public resizeStartCB = new EventEmitter(); + + /** Emitted when widget resize stops */ @Output() public resizeStopCB = new EventEmitter(); - /** return the native element that contains grid specific fields as well */ + /** + * Get the native DOM element that contains grid-specific fields. + * This element has GridStack properties attached to it. + */ public get el(): GridCompHTMLElement { return this.elementRef.nativeElement; } - /** return the GridStack class */ + /** + * Get the underlying GridStack instance. + * Use this to access GridStack API methods directly. + * + * @example + * ```typescript + * this.gridComponent.grid.addWidget({x: 0, y: 0, w: 2, h: 1}); + * ``` + */ public get grid(): GridStack | undefined { return this._grid; } - /** ComponentRef of ourself - used by dynamic object to correctly get removed */ + /** + * Component reference for dynamic component removal. + * Used internally when this component is created dynamically. + */ public ref: ComponentRef | undefined; /** - * stores the selector -> Type mapping, so we can create items dynamically from a string. - * Unfortunately Ng doesn't provide public access to that mapping. + * Mapping of component selectors to their types for dynamic creation. + * + * This enables dynamic component instantiation from string selectors. + * Angular doesn't provide public access to this mapping, so we maintain our own. + * + * @example + * ```typescript + * GridstackComponent.addComponentToSelectorType([MyWidgetComponent]); + * ``` */ public static selectorToType: SelectorToType = {}; - /** add a list of ng Component to be mapped to selector */ + /** + * Register a list of Angular components for dynamic creation. + * + * @param typeList Array of component types to register + * + * @example + * ```typescript + * GridstackComponent.addComponentToSelectorType([ + * MyWidgetComponent, + * AnotherWidgetComponent + * ]); + * ``` + */ public static addComponentToSelectorType(typeList: Array>) { typeList.forEach(type => GridstackComponent.selectorToType[ GridstackComponent.getSelector(type) ] = type); } - /** return the ng Component selector */ + /** + * Extract the selector string from an Angular component type. + * + * @param type The component type to get selector from + * @returns The component's selector string + */ public static getSelector(type: Type): string { return reflectComponentType(type)!.selector; } @@ -124,6 +257,9 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy { if (!GridStack.saveCB) { GridStack.saveCB = gsSaveAdditionalNgInfo; } + if (!GridStack.updateCB) { + GridStack.updateCB = gsUpdateNgComponents; + } this.el._gridComp = this; } @@ -178,8 +314,14 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy { /** get all known events as easy to use Outputs for convenience */ protected hookEvents(grid?: GridStack) { if (!grid) return; + // nested grids don't have events in v12.1+ so skip + if (grid.parentGridNode) return; grid - .on('added', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.addedCB.emit({event, nodes}); }) + .on('added', (event: Event, nodes: GridStackNode[]) => { + const gridComp = (nodes[0].grid?.el as GridCompHTMLElement)._gridComp || this; + gridComp.checkEmpty(); + this.addedCB.emit({event, nodes}); + }) .on('change', (event: Event, nodes: GridStackNode[]) => this.changeCB.emit({event, nodes})) .on('disable', (event: Event) => this.disableCB.emit({event})) .on('drag', (event: Event, el: GridItemHTMLElement) => this.dragCB.emit({event, el})) @@ -187,7 +329,11 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy { .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.dragStopCB.emit({event, el})) .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.droppedCB.emit({event, previousNode, newNode})) .on('enable', (event: Event) => this.enableCB.emit({event})) - .on('removed', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.removedCB.emit({event, nodes}); }) + .on('removed', (event: Event, nodes: GridStackNode[]) => { + const gridComp = (nodes[0].grid?.el as GridCompHTMLElement)._gridComp || this; + gridComp.checkEmpty(); + this.removedCB.emit({event, nodes}); + }) .on('resize', (event: Event, el: GridItemHTMLElement) => this.resizeCB.emit({event, el})) .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.resizeStartCB.emit({event, el})) .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.resizeStopCB.emit({event, el})) @@ -195,6 +341,8 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy { protected unhookEvents(grid?: GridStack) { if (!grid) return; + // nested grids don't have events in v12.1+ so skip + if (grid.parentGridNode) return; grid.off('added change disable drag dragstart dragstop dropped enable removed resize resizestart resizestop'); } } @@ -301,3 +449,12 @@ export function gsSaveAdditionalNgInfo(n: NgGridStackNode, w: NgGridStackWidget) //.... save any custom data } } + +/** + * track when widgeta re updated (rather than created) to make sure we de-serialize them as well + */ +export function gsUpdateNgComponents(n: NgGridStackNode) { + const w: NgGridStackWidget = n; + const gridItem = (n.el as GridItemCompHTMLElement)?._gridItemComp; + if (gridItem?.childWidget && w.input) gridItem.childWidget.deserialize(w); +} \ No newline at end of file diff --git a/angular/projects/lib/src/lib/gridstack.module.ts b/angular/projects/lib/src/lib/gridstack.module.ts index b454489b2..3d3eb1051 100644 --- a/angular/projects/lib/src/lib/gridstack.module.ts +++ b/angular/projects/lib/src/lib/gridstack.module.ts @@ -1,5 +1,5 @@ /** - * gridstack.component.ts 12.1.0 + * gridstack.component.ts 12.3.2 * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license */ @@ -8,7 +8,29 @@ import { NgModule } from "@angular/core"; import { GridstackItemComponent } from "./gridstack-item.component"; import { GridstackComponent } from "./gridstack.component"; -// @deprecated use GridstackComponent and GridstackItemComponent as standalone components +/** + * @deprecated Use GridstackComponent and GridstackItemComponent as standalone components instead. + * + * This NgModule is provided for backward compatibility but is no longer the recommended approach. + * Import components directly in your standalone components or use the new Angular module structure. + * + * @example + * ```typescript + * // Preferred approach - standalone components + * @Component({ + * selector: 'my-app', + * imports: [GridstackComponent, GridstackItemComponent], + * template: '' + * }) + * export class AppComponent {} + * + * // Legacy approach (deprecated) + * @NgModule({ + * imports: [GridstackModule] + * }) + * export class AppModule {} + * ``` + */ @NgModule({ imports: [ GridstackItemComponent, diff --git a/angular/projects/lib/src/lib/types.ts b/angular/projects/lib/src/lib/types.ts index 3d6df57ac..5c4901c43 100644 --- a/angular/projects/lib/src/lib/types.ts +++ b/angular/projects/lib/src/lib/types.ts @@ -1,27 +1,54 @@ /** - * gridstack-item.component.ts 12.1.0 + * gridstack-item.component.ts 12.3.2 * Copyright (c) 2025 Alain Dumesny - see GridStack root license */ import { GridStackNode, GridStackOptions, GridStackWidget } from "gridstack"; -/** extends to store Ng Component selector, instead/inAddition to content */ +/** + * Extended GridStackWidget interface for Angular integration. + * Adds Angular-specific properties for dynamic component creation. + */ export interface NgGridStackWidget extends GridStackWidget { - /** Angular tag selector for this component to create at runtime */ + /** Angular component selector for dynamic creation (e.g., 'my-widget') */ selector?: string; - /** serialized data for the component input fields */ + /** Serialized data for component @Input() properties */ input?: NgCompInputs; - /** nested grid options */ + /** Configuration for nested sub-grids */ subGridOpts?: NgGridStackOptions; } +/** + * Extended GridStackNode interface for Angular integration. + * Adds component selector for dynamic content creation. + */ export interface NgGridStackNode extends GridStackNode { - selector?: string; // component type to create as content + /** Angular component selector for this node's content */ + selector?: string; } +/** + * Extended GridStackOptions interface for Angular integration. + * Supports Angular-specific widget definitions and nested grids. + */ export interface NgGridStackOptions extends GridStackOptions { + /** Array of Angular widget definitions for initial grid setup */ children?: NgGridStackWidget[]; + /** Configuration for nested sub-grids (Angular-aware) */ subGridOpts?: NgGridStackOptions; } +/** + * Type for component input data serialization. + * Maps @Input() property names to their values for widget persistence. + * + * @example + * ```typescript + * const inputs: NgCompInputs = { + * title: 'My Widget', + * value: 42, + * config: { enabled: true } + * }; + * ``` + */ export type NgCompInputs = {[key: string]: any}; diff --git a/angular/tsconfig.doc.json b/angular/tsconfig.doc.json new file mode 100644 index 000000000..1d9998d06 --- /dev/null +++ b/angular/tsconfig.doc.json @@ -0,0 +1,17 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "declaration": true, + "emitDeclarationOnly": true, + "skipLibCheck": true + }, + "include": [ + "projects/lib/src/lib/**/*.ts" + ], + "exclude": [ + "projects/demo/**/*", + "**/*.spec.ts", + "**/*.test.ts", + "node_modules/**" + ] +} diff --git a/angular/typedoc.html.json b/angular/typedoc.html.json new file mode 100644 index 000000000..e79186daa --- /dev/null +++ b/angular/typedoc.html.json @@ -0,0 +1,80 @@ +{ + "$schema": "https://typedoc.org/schema.json", + "entryPoints": [ + "projects/lib/src/lib/gridstack.component.ts", + "projects/lib/src/lib/gridstack-item.component.ts", + "projects/lib/src/lib/gridstack.module.ts", + "projects/lib/src/lib/base-widget.ts", + "projects/lib/src/lib/types.ts" + ], + "tsconfig": "tsconfig.doc.json", + "excludeExternals": false, + "out": "doc/html", + "exclude": [ + "**/*.spec.ts", + "**/*.test.ts", + "**/spec/**", + "**/test/**", + "**/demo/**", + "projects/demo/**", + "**/app.component.ts", + "**/simple.ts", + "**/ngFor.ts", + "**/ngFor_cmd.ts", + "**/dummy.component.ts", + "node_modules/**" + ], + "excludePrivate": true, + "excludeProtected": false, + "excludeInternal": true, + "includeVersion": true, + "sort": ["source-order"], + "sortEntryPoints": false, + "kindSortOrder": [ + "Class", + "Interface", + "TypeAlias", + "Variable", + "Function" + ], + "groupOrder": [ + "Modules", + "Components", + "Classes", + "Interfaces", + "Type aliases", + "Variables", + "Functions" + ], + "categorizeByGroup": true, + "defaultCategory": "Other", + "categoryOrder": [ + "Main", + "Components", + "Angular Integration", + "Types", + "Utilities", + "*" + ], + "readme": "README.md", + "theme": "default", + "hideGenerator": false, + "searchInComments": true, + "searchInDocuments": true, + "cleanOutputDir": true, + "titleLink": "https://gridstackjs.com/", + "navigationLinks": { + "GitHub": "https://github.com/gridstack/gridstack.js", + "Demo": "https://gridstackjs.com/demo/", + "Main Library": "../../../doc/html/index.html" + }, + "sidebarLinks": { + "Documentation": "https://github.com/gridstack/gridstack.js/blob/master/README.md", + "Angular Guide": "index.html" + }, + "hostedBaseUrl": "https://gridstack.github.io/gridstack.js/angular/", + "githubPages": true, + "gitRevision": "master", + "gitRemote": "origin", + "name": "GridStack Angular Library" +} diff --git a/angular/typedoc.json b/angular/typedoc.json new file mode 100644 index 000000000..de8f4b026 --- /dev/null +++ b/angular/typedoc.json @@ -0,0 +1,89 @@ +{ + "$schema": "https://typedoc.org/schema.json", + "entryPoints": [ + "projects/lib/src/lib/gridstack.component.ts", + "projects/lib/src/lib/gridstack-item.component.ts", + "projects/lib/src/lib/gridstack.module.ts", + "projects/lib/src/lib/base-widget.ts", + "projects/lib/src/lib/types.ts" + ], + "tsconfig": "tsconfig.doc.json", + "excludeExternals": false, + "out": "doc/api", + "plugin": ["typedoc-plugin-markdown"], + "theme": "markdown", + "exclude": [ + "**/*.spec.ts", + "**/*.test.ts", + "**/spec/**", + "**/test/**", + "**/demo/**", + "projects/demo/**", + "**/app.component.ts", + "**/simple.ts", + "**/ngFor.ts", + "**/ngFor_cmd.ts", + "**/dummy.component.ts", + "node_modules/**" + ], + "excludePrivate": true, + "excludeProtected": false, + "excludeInternal": true, + "includeVersion": true, + "sort": ["source-order"], + "sortEntryPoints": false, + "kindSortOrder": [ + "Class", + "Interface", + "TypeAlias", + "Variable", + "Function" + ], + "groupOrder": [ + "Modules", + "Components", + "Classes", + "Interfaces", + "Type aliases", + "Variables", + "Functions" + ], + "categorizeByGroup": true, + "defaultCategory": "Other", + "categoryOrder": [ + "Main", + "Components", + "Angular Integration", + "Types", + "Utilities", + "*" + ], + "readme": "none", + "hidePageHeader": true, + "hideBreadcrumbs": true, + "hidePageTitle": false, + "disableSources": false, + "useCodeBlocks": true, + "indexFormat": "table", + "parametersFormat": "table", + "interfacePropertiesFormat": "table", + "classPropertiesFormat": "table", + "enumMembersFormat": "table", + "typeDeclarationFormat": "table", + "propertyMembersFormat": "table", + "expandObjects": false, + "expandParameters": false, + "blockTagsPreserveOrder": [ + "@param", + "@returns", + "@throws" + ], + "outputFileStrategy": "modules", + "mergeReadme": false, + "entryFileName": "index", + "cleanOutputDir": true, + "excludeReferences": true, + "gitRevision": "master", + "gitRemote": "origin", + "name": "GridStack Angular Library" +} diff --git a/angular/yarn.lock b/angular/yarn.lock index c8a30f91c..de2889954 100644 --- a/angular/yarn.lock +++ b/angular/yarn.lock @@ -3752,10 +3752,10 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3" integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ== -gridstack@^12.1.0: - version "12.1.0" - resolved "https://registry.yarnpkg.com/gridstack/-/gridstack-12.1.0.tgz#e6eb42bae61285bfc698b67f773af3fb4bff42f3" - integrity sha512-Xs1xWLSniquld8+zdvBWUSuEoCC4Fx+jOhR82EKdTM0eQmRmL3fR8mmrhCb3k3ISFoEwwiaCpA6oIKD4bBJTJQ== +gridstack@^12.3.2: + version "12.3.2" + resolved "https://registry.yarnpkg.com/gridstack/-/gridstack-12.3.2.tgz#c07ed3720d7e6d58234f9a7286d3b5e49cf2d49d" + integrity sha512-NWVpKO27vkivcP4pzVAyrrip4njrTEB2hNQGLxfgGM/kGBA/GnBWwqo3etnRtODMAxQj7iN3yX3ildmsciLC8Q== handle-thing@^2.0.0: version "2.0.1" diff --git a/demo/demo.css b/demo/demo.css index 27f7aa2de..d1ed5d944 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -56,13 +56,16 @@ h1 { .card-header { margin: 0; - cursor: move; + cursor: grab; min-height: 25px; background-color: #16af91; } .card-header:hover { background-color: #149b80; } +.grid-stack-dragging { + cursor: grabbing; +} .ui-draggable-disabled.ui-resizable-disabled > .grid-stack-item-content { background-color: #777; diff --git a/demo/two_vertical.html b/demo/two_vertical.html index 73951a996..0745f3a6f 100644 --- a/demo/two_vertical.html +++ b/demo/two_vertical.html @@ -26,7 +26,7 @@

Two vertical grids demo - with maxRow

acceptWidgets: true } GridStack.init(opts, document.getElementById('grid1')) - .load([{x:0, y:0, content: '0'}, {x:1, y:0, content: '1'}]); + .load([{x:1, y:0, content: '0'}, {x:2, y:0, content: '1'}]); GridStack.init(opts, document.getElementById('grid2')) .load([{x:0, y:0, content: '2'}, {x:1, y:0, content: '3'}]); diff --git a/doc/API.md b/doc/API.md new file mode 100644 index 000000000..813a07703 --- /dev/null +++ b/doc/API.md @@ -0,0 +1,6198 @@ +# gridstack v12.3.2 + +## Classes + + +## Table of Contents + +- [GridStack](#gridstack) +- [GridStackEngine](#gridstackengine) +- [Utils](#utils) +- [GridStackOptions](#gridstackoptions) +- [`abstract` DDBaseImplement](#abstract-ddbaseimplement) +- [DDDraggable](#dddraggable) +- [DDDroppable](#dddroppable) +- [DDElement](#ddelement) +- [DDGridStack](#ddgridstack) +- [DDManager](#ddmanager) +- [DDResizable](#ddresizable-1) +- [DDResizableHandle](#ddresizablehandle) +- [Breakpoint](#breakpoint) +- [CellPosition](#cellposition) +- [DDDragOpt](#dddragopt) +- [DDDroppableOpt](#dddroppableopt) +- [DDElementHost](#ddelementhost) +- [DDRemoveOpt](#ddremoveopt) +- [DDResizableHandleOpt](#ddresizablehandleopt) +- [DDResizableOpt](#ddresizableopt) +- [DDResizeOpt](#ddresizeopt) +- [DDUIData](#dduidata) +- [DragTransform](#dragtransform) +- [GridHTMLElement](#gridhtmlelement) +- [GridItemHTMLElement](#griditemhtmlelement) +- [GridStackEngineOptions](#gridstackengineoptions) +- [GridStackMoveOpts](#gridstackmoveopts) +- [GridStackNode](#gridstacknode-2) +- [GridStackPosition](#gridstackposition) +- [GridStackWidget](#gridstackwidget) +- [HeightData](#heightdata) +- [HTMLElementExtendOpt\](#htmlelementextendoptt) +- [MousePosition](#mouseposition) +- [Position](#position-1) +- [Rect](#rect-1) +- [Responsive](#responsive) +- [Size](#size-1) +- [gridDefaults](#griddefaults) +- [AddRemoveFcn()](#addremovefcn) +- [ColumnOptions](#columnoptions) +- [CompactOptions](#compactoptions) +- [DDCallback()](#ddcallback) +- [DDDropOpt](#dddropopt) +- [DDKey](#ddkey) +- [DDOpts](#ddopts) +- [DDValue](#ddvalue) +- [EventCallback()](#eventcallback) +- [GridStackDroppedHandler()](#gridstackdroppedhandler) +- [GridStackElement](#gridstackelement) +- [GridStackElementHandler()](#gridstackelementhandler) +- [GridStackEvent](#gridstackevent) +- [GridStackEventHandler()](#gridstackeventhandler) +- [GridStackEventHandlerCallback](#gridstackeventhandlercallback) +- [GridStackNodesHandler()](#gridstacknodeshandler) +- [numberOrString](#numberorstring) +- [RenderFcn()](#renderfcn) +- [ResizeToContentFcn()](#resizetocontentfcn) +- [SaveFcn()](#savefcn) + + +### GridStack + +Defined in: [gridstack.ts:76](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L76) + +Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid. +Note: your grid elements MUST have the following classes for the CSS layout to work: + +#### Example + +```ts +
+
+
Item 1
+
+
+``` + +#### Constructors + +##### Constructor + +```ts +new GridStack(el, opts): GridStack; +``` + +Defined in: [gridstack.ts:266](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L266) + +Construct a grid item from the given element and options + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `el` | [`GridHTMLElement`](#gridhtmlelement) | the HTML element tied to this grid after it's been initialized | +| `opts` | [`GridStackOptions`](#gridstackoptions) | grid options - public for classes to access, but use methods to modify! | + +###### Returns + +[`GridStack`](#gridstack-1) + +#### Methods + +##### \_updateResizeEvent() + +```ts +protected _updateResizeEvent(forceRemove): GridStack; +``` + +Defined in: [gridstack.ts:2091](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2091) + +add or remove the grid element size event handler + +###### Parameters + +| Parameter | Type | Default value | +| ------ | ------ | ------ | +| `forceRemove` | `boolean` | `false` | + +###### Returns + +[`GridStack`](#gridstack-1) + +##### \_widthOrContainer() + +```ts +protected _widthOrContainer(forBreakpoint): number; +``` + +Defined in: [gridstack.ts:954](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L954) + +return our expected width (or parent) , and optionally of window for dynamic column check + +###### Parameters + +| Parameter | Type | Default value | +| ------ | ------ | ------ | +| `forBreakpoint` | `boolean` | `false` | + +###### Returns + +`number` + +##### addGrid() + +```ts +static addGrid(parent, opt): GridStack; +``` + +Defined in: [gridstack.ts:141](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L141) + +call to create a grid with the given options, including loading any children from JSON structure. This will call GridStack.init(), then +grid.load() on any passed children (recursively). Great alternative to calling init() if you want entire grid to come from +JSON serialized data, including options. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `parent` | `HTMLElement` | HTML element parent to the grid | +| `opt` | [`GridStackOptions`](#gridstackoptions) | grids options used to initialize the grid, and list of children | + +###### Returns + +[`GridStack`](#gridstack-1) + +##### addWidget() + +```ts +addWidget(w): GridItemHTMLElement; +``` + +Defined in: [gridstack.ts:432](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L432) + +add a new widget and returns it. + +Widget will be always placed even if result height is more than actual grid height. +You need to use `willItFit()` before calling addWidget for additional check. +See also `makeWidget(el)` for DOM element. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `w` | [`GridStackWidget`](#gridstackwidget) | GridStackWidget definition. used MakeWidget(el) if you have dom element instead. | + +###### Returns + +[`GridItemHTMLElement`](#griditemhtmlelement) + +###### Example + +```ts +const grid = GridStack.init(); +grid.addWidget({w: 3, content: 'hello'}); +``` + +##### batchUpdate() + +```ts +batchUpdate(flag): GridStack; +``` + +Defined in: [gridstack.ts:833](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L833) + +use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient) +and get a single event callback. You will see no changes until `batchUpdate(false)` is called. + +###### Parameters + +| Parameter | Type | Default value | +| ------ | ------ | ------ | +| `flag` | `boolean` | `true` | + +###### Returns + +[`GridStack`](#gridstack-1) + +##### cellHeight() + +```ts +cellHeight(val?): GridStack; +``` + +Defined in: [gridstack.ts:904](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L904) + +Update current cell height - see `GridStackOptions.cellHeight` for format by updating eh Browser CSS variable. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `val?` | [`numberOrString`](#numberorstring) | the cell height. Options: - `undefined`: cells content will be made square (match width minus margin) - `0`: the CSS will be generated by the application instead - number: height in pixels - string: height with units (e.g., '70px', '5rem', '2em') | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +grid.cellHeight(100); // 100px height +grid.cellHeight('70px'); // explicit pixel height +grid.cellHeight('5rem'); // relative to root font size +grid.cellHeight(grid.cellWidth() * 1.2); // aspect ratio +grid.cellHeight('auto'); // auto-size based on content +``` + +##### cellWidth() + +```ts +cellWidth(): number; +``` + +Defined in: [gridstack.ts:950](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L950) + +Gets the current cell width in pixels. This is calculated based on the grid container width divided by the number of columns. + +###### Returns + +`number` + +the cell width in pixels + +###### Example + +```ts +const width = grid.cellWidth(); +console.log('Cell width:', width, 'px'); + +// Use cell width to calculate widget dimensions +const widgetWidth = width * 3; // For a 3-column wide widget +``` + +##### checkDynamicColumn() + +```ts +protected checkDynamicColumn(): boolean; +``` + +Defined in: [gridstack.ts:960](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L960) + +checks for dynamic column count for our current size, returning true if changed + +###### Returns + +`boolean` + +##### column() + +```ts +column(column, layout): GridStack; +``` + +Defined in: [gridstack.ts:1039](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1039) + +Set the number of columns in the grid. Will update existing widgets to conform to new number of columns, +as well as cache the original layout so you can revert back to previous positions without loss. + +Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11] columns, +else you will need to generate correct CSS. +See: https://github.com/gridstack/gridstack.js#change-grid-columns + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `column` | `number` | `undefined` | Integer > 0 (default 12) | +| `layout` | [`ColumnOptions`](#columnoptions) | `'moveScale'` | specify the type of re-layout that will happen. Options: - 'moveScale' (default): scale widget positions and sizes - 'move': keep widget sizes, only move positions - 'scale': keep widget positions, only scale sizes - 'none': don't change widget positions or sizes Note: items will never be outside of the current column boundaries. Ignored for `column=1` as we always want to vertically stack. | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Change to 6 columns with default scaling +grid.column(6); + +// Change to 4 columns, only move positions +grid.column(4, 'move'); + +// Single column layout (vertical stack) +grid.column(1); +``` + +##### commit() + +```ts +commit(): GridStack; +``` + +Defined in: [gridstack.ts:3020](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L3020) + +###### Returns + +[`GridStack`](#gridstack-1) + +##### compact() + +```ts +compact(layout, doSort): GridStack; +``` + +Defined in: [gridstack.ts:1005](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1005) + +Re-layout grid items to reclaim any empty space. This is useful after removing widgets +or when you want to optimize the layout. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `layout` | [`CompactOptions`](#compactoptions) | `'compact'` | layout type. Options: - 'compact' (default): might re-order items to fill any empty space - 'list': keep the widget left->right order the same, even if that means leaving an empty slot if things don't fit | +| `doSort` | `boolean` | `true` | re-sort items first based on x,y position. Set to false to do your own sorting ahead (default: true) | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Compact layout after removing widgets +grid.removeWidget('.widget-to-remove'); +grid.compact(); + +// Use list layout (preserve order) +grid.compact('list'); + +// Compact without sorting first +grid.compact('compact', false); +``` + +##### createWidgetDivs() + +```ts +createWidgetDivs(n): HTMLElement; +``` + +Defined in: [gridstack.ts:478](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L478) + +Create the default grid item divs and content (possibly lazy loaded) by using GridStack.renderCB(). + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `n` | [`GridStackNode`](#gridstacknode-2) | GridStackNode definition containing widget configuration | + +###### Returns + +`HTMLElement` + +the created HTML element with proper grid item structure + +###### Example + +```ts +const element = grid.createWidgetDivs({ w: 2, h: 1, content: 'Hello World' }); +``` + +##### destroy() + +```ts +destroy(removeDOM): GridStack; +``` + +Defined in: [gridstack.ts:1113](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1113) + +Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `removeDOM` | `boolean` | `true` | if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`). | + +###### Returns + +[`GridStack`](#gridstack-1) + +##### disable() + +```ts +disable(recurse): GridStack; +``` + +Defined in: [gridstack.ts:2292](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2292) + +Temporarily disables widgets moving/resizing. +If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead. + +Note: This is a no-op for static grids. + +This is a shortcut for: +```typescript +grid.enableMove(false); +grid.enableResize(false); +``` + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `recurse` | `boolean` | `true` | if true (default), sub-grids also get updated | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Disable all interactions +grid.disable(); + +// Disable only this grid, not sub-grids +grid.disable(false); +``` + +##### enable() + +```ts +enable(recurse): GridStack; +``` + +Defined in: [gridstack.ts:2319](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2319) + +Re-enables widgets moving/resizing - see disable(). +Note: This is a no-op for static grids. + +This is a shortcut for: +```typescript +grid.enableMove(true); +grid.enableResize(true); +``` + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `recurse` | `boolean` | `true` | if true (default), sub-grids also get updated | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Re-enable all interactions +grid.enable(); + +// Enable only this grid, not sub-grids +grid.enable(false); +``` + +##### enableMove() + +```ts +enableMove(doEnable, recurse): GridStack; +``` + +Defined in: [gridstack.ts:2345](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2345) + +Enables/disables widget moving for all widgets. No-op for static grids. +Note: locally defined items (with noMove property) still override this setting. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `doEnable` | `boolean` | `undefined` | if true widgets will be movable, if false moving is disabled | +| `recurse` | `boolean` | `true` | if true (default), sub-grids also get updated | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Enable moving for all widgets +grid.enableMove(true); + +// Disable moving for all widgets +grid.enableMove(false); + +// Enable only this grid, not sub-grids +grid.enableMove(true, false); +``` + +##### enableResize() + +```ts +enableResize(doEnable, recurse): GridStack; +``` + +Defined in: [gridstack.ts:2373](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2373) + +Enables/disables widget resizing for all widgets. No-op for static grids. +Note: locally defined items (with noResize property) still override this setting. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `doEnable` | `boolean` | `undefined` | if true widgets will be resizable, if false resizing is disabled | +| `recurse` | `boolean` | `true` | if true (default), sub-grids also get updated | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Enable resizing for all widgets +grid.enableResize(true); + +// Disable resizing for all widgets +grid.enableResize(false); + +// Enable only this grid, not sub-grids +grid.enableResize(true, false); +``` + +##### float() + +```ts +float(val): GridStack; +``` + +Defined in: [gridstack.ts:1147](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1147) + +Enable/disable floating widgets (default: `false`). When enabled, widgets can float up to fill empty spaces. +See [example](http://gridstackjs.com/demo/float.html) + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `val` | `boolean` | true to enable floating, false to disable | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +grid.float(true); // Enable floating +grid.float(false); // Disable floating (default) +``` + +##### getCellFromPixel() + +```ts +getCellFromPixel(position, useDocRelative): CellPosition; +``` + +Defined in: [gridstack.ts:1177](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1177) + +Get the position of the cell under a pixel on screen. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `position` | [`MousePosition`](#mouseposition) | `undefined` | the position of the pixel to resolve in absolute coordinates, as an object with top and left properties | +| `useDocRelative` | `boolean` | `false` | if true, value will be based on document position vs parent position (Optional. Default false). Useful when grid is within `position: relative` element Returns an object with properties `x` and `y` i.e. the column and row in the grid. | + +###### Returns + +[`CellPosition`](#cellposition) + +##### getCellHeight() + +```ts +getCellHeight(forcePixel): number; +``` + +Defined in: [gridstack.ts:857](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L857) + +Gets the current cell height in pixels. This takes into account the unit type and converts to pixels if necessary. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `forcePixel` | `boolean` | `false` | if true, forces conversion to pixels even when cellHeight is specified in other units | + +###### Returns + +`number` + +the cell height in pixels + +###### Example + +```ts +const height = grid.getCellHeight(); +console.log('Cell height:', height, 'px'); + +// Force pixel conversion +const pixelHeight = grid.getCellHeight(true); +``` + +##### getColumn() + +```ts +getColumn(): number; +``` + +Defined in: [gridstack.ts:1076](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1076) + +Get the number of columns in the grid (default 12). + +###### Returns + +`number` + +the current number of columns in the grid + +###### Example + +```ts +const columnCount = grid.getColumn(); // returns 12 by default +``` + +##### getDD() + +```ts +static getDD(): DDGridStack; +``` + +Defined in: [gridstack.ts:2189](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2189) + +Get the global drag & drop implementation instance. +This provides access to the underlying drag & drop functionality. + +###### Returns + +[`DDGridStack`](#ddgridstack) + +the DDGridStack instance used for drag & drop operations + +###### Example + +```ts +const dd = GridStack.getDD(); +// Access drag & drop functionality +``` + +##### getFloat() + +```ts +getFloat(): boolean; +``` + +Defined in: [gridstack.ts:1164](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1164) + +Get the current float mode setting. + +###### Returns + +`boolean` + +true if floating is enabled, false otherwise + +###### Example + +```ts +const isFloating = grid.getFloat(); +console.log('Floating enabled:', isFloating); +``` + +##### getGridItems() + +```ts +getGridItems(): GridItemHTMLElement[]; +``` + +Defined in: [gridstack.ts:1090](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1090) + +Returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order. +This method excludes placeholder elements and returns only actual grid items. + +###### Returns + +[`GridItemHTMLElement`](#griditemhtmlelement)[] + +array of GridItemHTMLElement instances representing all grid items + +###### Example + +```ts +const items = grid.getGridItems(); +items.forEach(item => { + console.log('Item ID:', item.gridstackNode.id); +}); +``` + +##### getMargin() + +```ts +getMargin(): number; +``` + +Defined in: [gridstack.ts:1788](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1788) + +Returns the current margin value as a number (undefined if the 4 sides don't match). +This only returns a number if all sides have the same margin value. + +###### Returns + +`number` + +the margin value in pixels, or undefined if sides have different values + +###### Example + +```ts +const margin = grid.getMargin(); +if (margin !== undefined) { + console.log('Uniform margin:', margin, 'px'); +} else { + console.log('Margins are different on different sides'); +} +``` + +##### getRow() + +```ts +getRow(): number; +``` + +Defined in: [gridstack.ts:1207](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1207) + +Returns the current number of rows, which will be at least `minRow` if set. +The row count is based on the highest positioned widget in the grid. + +###### Returns + +`number` + +the current number of rows in the grid + +###### Example + +```ts +const rowCount = grid.getRow(); +console.log('Grid has', rowCount, 'rows'); +``` + +##### init() + +```ts +static init(options, elOrString): GridStack; +``` + +Defined in: [gridstack.ts:91](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L91) + +initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will +simply return the existing instance (ignore any passed options). There is also an initAll() version that support +multiple grids initialization at once. Or you can use addGrid() to create the entire grid from JSON. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `options` | [`GridStackOptions`](#gridstackoptions) | `{}` | grid options (optional) | +| `elOrString` | [`GridStackElement`](#gridstackelement) | `'.grid-stack'` | element or CSS selector (first one used) to convert to a grid (default to '.grid-stack' class selector) | + +###### Returns + +[`GridStack`](#gridstack-1) + +###### Example + +```ts +const grid = GridStack.init(); + +Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later +const grid = document.querySelector('.grid-stack').gridstack; +``` + +##### initAll() + +```ts +static initAll(options, selector): GridStack[]; +``` + +Defined in: [gridstack.ts:118](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L118) + +Will initialize a list of elements (given a selector) and return an array of grids. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `options` | [`GridStackOptions`](#gridstackoptions) | `{}` | grid options (optional) | +| `selector` | `string` | `'.grid-stack'` | elements selector to convert to grids (default to '.grid-stack' class selector) | + +###### Returns + +[`GridStack`](#gridstack-1)[] + +###### Example + +```ts +const grids = GridStack.initAll(); +grids.forEach(...) +``` + +##### isAreaEmpty() + +```ts +isAreaEmpty( + x, + y, + w, + h): boolean; +``` + +Defined in: [gridstack.ts:1226](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1226) + +Checks if the specified rectangular area is empty (no widgets occupy any part of it). + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `x` | `number` | the x coordinate (column) of the area to check | +| `y` | `number` | the y coordinate (row) of the area to check | +| `w` | `number` | the width in columns of the area to check | +| `h` | `number` | the height in rows of the area to check | + +###### Returns + +`boolean` + +true if the area is completely empty, false if any widget overlaps + +###### Example + +```ts +// Check if a 2x2 area at position (1,1) is empty +if (grid.isAreaEmpty(1, 1, 2, 2)) { + console.log('Area is available for placement'); +} +``` + +##### isIgnoreChangeCB() + +```ts +isIgnoreChangeCB(): boolean; +``` + +Defined in: [gridstack.ts:1107](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1107) + +Returns true if change callbacks should be ignored due to column change, sizeToContent, loading, etc. +This is useful for callers who want to implement dirty flag functionality. + +###### Returns + +`boolean` + +true if change callbacks are currently being ignored + +###### Example + +```ts +if (!grid.isIgnoreChangeCB()) { + // Process the change event + console.log('Grid layout changed'); +} +``` + +##### load() + +```ts +load(items, addRemove): GridStack; +``` + +Defined in: [gridstack.ts:722](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L722) + +Load widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there. +Used to restore a grid layout for a saved layout list (see `save()`). + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `items` | [`GridStackWidget`](#gridstackwidget)[] | list of widgets definition to update/create | +| `addRemove` | `boolean` \| [`AddRemoveFcn`](#addremovefcn) | boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving the user control of insertion. | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Basic usage with saved layout +const savedLayout = grid.save(); // Save current layout +// ... later restore it +grid.load(savedLayout); + +// Load with custom add/remove callback +grid.load(layout, (items, grid, add) => { + if (add) { + // Custom logic for adding new widgets + items.forEach(item => { + const el = document.createElement('div'); + el.innerHTML = item.content || ''; + grid.addWidget(el, item); + }); + } else { + // Custom logic for removing widgets + items.forEach(item => grid.removeWidget(item.el)); + } +}); + +// Load without adding/removing missing widgets +grid.load(layout, false); +``` + +###### See + +[http://gridstackjs.com/demo/serialization.html](http://gridstackjs.com/demo/serialization.html) for complete example + +##### makeSubGrid() + +```ts +makeSubGrid( + el, + ops?, + nodeToAdd?, + saveContent?): GridStack; +``` + +Defined in: [gridstack.ts:506](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L506) + +Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them +from the parent's subGrid options. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `el` | [`GridItemHTMLElement`](#griditemhtmlelement) | `undefined` | gridItem element to convert | +| `ops?` | [`GridStackOptions`](#gridstackoptions) | `undefined` | (optional) sub-grid options, else default to node, then parent settings, else defaults | +| `nodeToAdd?` | [`GridStackNode`](#gridstacknode-2) | `undefined` | (optional) node to add to the newly created sub grid (used when dragging over existing regular item) | +| `saveContent?` | `boolean` | `true` | if true (default) the html inside .grid-stack-content will be saved to child widget | + +###### Returns + +[`GridStack`](#gridstack-1) + +newly created grid + +##### makeWidget() + +```ts +makeWidget(els, options?): GridItemHTMLElement; +``` + +Defined in: [gridstack.ts:1254](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1254) + +If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets. +If you want gridstack to add the elements for you, use `addWidget()` instead. +Makes the given element a widget and returns it. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `els` | [`GridStackElement`](#gridstackelement) | widget or single selector to convert. | +| `options?` | [`GridStackWidget`](#gridstackwidget) | widget definition to use instead of reading attributes or using default sizing values | + +###### Returns + +[`GridItemHTMLElement`](#griditemhtmlelement) + +the converted GridItemHTMLElement + +###### Example + +```ts +const grid = GridStack.init(); + +// Create HTML content manually, possibly looking like: +//
+grid.el.innerHTML = '
'; + +// Convert existing elements to widgets +grid.makeWidget('#item-1'); // Uses gs-* attributes from DOM +grid.makeWidget('#item-2', {w: 2, h: 1, content: 'Hello World'}); + +// Or pass DOM element directly +const element = document.getElementById('item-3'); +grid.makeWidget(element, {x: 0, y: 1, w: 4, h: 2}); +``` + +##### margin() + +```ts +margin(value): GridStack; +``` + +Defined in: [gridstack.ts:1759](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1759) + +Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options. +Supports CSS string format of 1, 2, or 4 values or a single number. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `value` | [`numberOrString`](#numberorstring) | margin value - can be: - Single number: `10` (applies to all sides) - Two values: `'10px 20px'` (top/bottom, left/right) - Four values: `'10px 20px 5px 15px'` (top, right, bottom, left) | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +grid.margin(10); // 10px all sides +grid.margin('10px 20px'); // 10px top/bottom, 20px left/right +grid.margin('5px 10px 15px 20px'); // Different for each side +``` + +##### movable() + +```ts +movable(els, val): GridStack; +``` + +Defined in: [gridstack.ts:2233](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2233) + +Enables/Disables dragging by the user for specific grid elements. +For all items and future items, use enableMove() instead. No-op for static grids. + +Note: If you want to prevent an item from moving due to being pushed around by another +during collision, use the 'locked' property instead. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `els` | [`GridStackElement`](#gridstackelement) | widget element(s) or selector to modify | +| `val` | `boolean` | if true widget will be draggable, assuming the parent grid isn't noMove or static | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Make specific widgets draggable +grid.movable('.my-widget', true); + +// Disable dragging for specific widgets +grid.movable('#fixed-widget', false); +``` + +##### off() + +```ts +off(name): GridStack; +``` + +Defined in: [gridstack.ts:1350](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1350) + +unsubscribe from the 'on' event GridStackEvent + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `name` | `string` | of the event (see possible values) or list of names space separated | + +###### Returns + +[`GridStack`](#gridstack-1) + +##### offAll() + +```ts +offAll(): GridStack; +``` + +Defined in: [gridstack.ts:1377](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1377) + +Remove all event handlers from the grid. This is useful for cleanup when destroying a grid. + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +grid.offAll(); // Remove all event listeners +``` + +##### on() + +###### Call Signature + +```ts +on(name, callback): GridStack; +``` + +Defined in: [gridstack.ts:1313](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1313) + +Register event handler for grid events. You can call this on a single event name, or space separated list. + +Supported events: +- `added`: Called when widgets are being added to a grid +- `change`: Occurs when widgets change their position/size due to constraints or direct changes +- `disable`: Called when grid becomes disabled +- `dragstart`: Called when grid item starts being dragged +- `drag`: Called while grid item is being dragged (for each new row/column value) +- `dragstop`: Called after user is done moving the item, with updated DOM attributes +- `dropped`: Called when an item has been dropped and accepted over a grid +- `enable`: Called when grid becomes enabled +- `removed`: Called when items are being removed from the grid +- `resizestart`: Called before user starts resizing an item +- `resize`: Called while grid item is being resized (for each new row/column value) +- `resizestop`: Called after user is done resizing the item, with updated DOM attributes + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `name` | `"dropped"` | event name(s) to listen for (space separated for multiple) | +| `callback` | [`GridStackDroppedHandler`](#gridstackdroppedhandler) | function to call when event occurs | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Listen to multiple events at once +grid.on('added removed change', (event, items) => { + items.forEach(item => console.log('Item changed:', item)); +}); + +// Listen to individual events +grid.on('added', (event, items) => { + items.forEach(item => console.log('Added item:', item)); +}); +``` + +###### Call Signature + +```ts +on(name, callback): GridStack; +``` + +Defined in: [gridstack.ts:1314](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1314) + +Register event handler for grid events. You can call this on a single event name, or space separated list. + +Supported events: +- `added`: Called when widgets are being added to a grid +- `change`: Occurs when widgets change their position/size due to constraints or direct changes +- `disable`: Called when grid becomes disabled +- `dragstart`: Called when grid item starts being dragged +- `drag`: Called while grid item is being dragged (for each new row/column value) +- `dragstop`: Called after user is done moving the item, with updated DOM attributes +- `dropped`: Called when an item has been dropped and accepted over a grid +- `enable`: Called when grid becomes enabled +- `removed`: Called when items are being removed from the grid +- `resizestart`: Called before user starts resizing an item +- `resize`: Called while grid item is being resized (for each new row/column value) +- `resizestop`: Called after user is done resizing the item, with updated DOM attributes + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `name` | `"enable"` \| `"disable"` | event name(s) to listen for (space separated for multiple) | +| `callback` | [`GridStackEventHandler`](#gridstackeventhandler) | function to call when event occurs | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Listen to multiple events at once +grid.on('added removed change', (event, items) => { + items.forEach(item => console.log('Item changed:', item)); +}); + +// Listen to individual events +grid.on('added', (event, items) => { + items.forEach(item => console.log('Added item:', item)); +}); +``` + +###### Call Signature + +```ts +on(name, callback): GridStack; +``` + +Defined in: [gridstack.ts:1315](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1315) + +Register event handler for grid events. You can call this on a single event name, or space separated list. + +Supported events: +- `added`: Called when widgets are being added to a grid +- `change`: Occurs when widgets change their position/size due to constraints or direct changes +- `disable`: Called when grid becomes disabled +- `dragstart`: Called when grid item starts being dragged +- `drag`: Called while grid item is being dragged (for each new row/column value) +- `dragstop`: Called after user is done moving the item, with updated DOM attributes +- `dropped`: Called when an item has been dropped and accepted over a grid +- `enable`: Called when grid becomes enabled +- `removed`: Called when items are being removed from the grid +- `resizestart`: Called before user starts resizing an item +- `resize`: Called while grid item is being resized (for each new row/column value) +- `resizestop`: Called after user is done resizing the item, with updated DOM attributes + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `name` | `"removed"` \| `"change"` \| `"added"` \| `"resizecontent"` | event name(s) to listen for (space separated for multiple) | +| `callback` | [`GridStackNodesHandler`](#gridstacknodeshandler) | function to call when event occurs | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Listen to multiple events at once +grid.on('added removed change', (event, items) => { + items.forEach(item => console.log('Item changed:', item)); +}); + +// Listen to individual events +grid.on('added', (event, items) => { + items.forEach(item => console.log('Added item:', item)); +}); +``` + +###### Call Signature + +```ts +on(name, callback): GridStack; +``` + +Defined in: [gridstack.ts:1316](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1316) + +Register event handler for grid events. You can call this on a single event name, or space separated list. + +Supported events: +- `added`: Called when widgets are being added to a grid +- `change`: Occurs when widgets change their position/size due to constraints or direct changes +- `disable`: Called when grid becomes disabled +- `dragstart`: Called when grid item starts being dragged +- `drag`: Called while grid item is being dragged (for each new row/column value) +- `dragstop`: Called after user is done moving the item, with updated DOM attributes +- `dropped`: Called when an item has been dropped and accepted over a grid +- `enable`: Called when grid becomes enabled +- `removed`: Called when items are being removed from the grid +- `resizestart`: Called before user starts resizing an item +- `resize`: Called while grid item is being resized (for each new row/column value) +- `resizestop`: Called after user is done resizing the item, with updated DOM attributes + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `name` | \| `"resize"` \| `"drag"` \| `"dragstart"` \| `"resizestart"` \| `"resizestop"` \| `"dragstop"` | event name(s) to listen for (space separated for multiple) | +| `callback` | [`GridStackElementHandler`](#gridstackelementhandler) | function to call when event occurs | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Listen to multiple events at once +grid.on('added removed change', (event, items) => { + items.forEach(item => console.log('Item changed:', item)); +}); + +// Listen to individual events +grid.on('added', (event, items) => { + items.forEach(item => console.log('Added item:', item)); +}); +``` + +###### Call Signature + +```ts +on(name, callback): GridStack; +``` + +Defined in: [gridstack.ts:1317](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1317) + +Register event handler for grid events. You can call this on a single event name, or space separated list. + +Supported events: +- `added`: Called when widgets are being added to a grid +- `change`: Occurs when widgets change their position/size due to constraints or direct changes +- `disable`: Called when grid becomes disabled +- `dragstart`: Called when grid item starts being dragged +- `drag`: Called while grid item is being dragged (for each new row/column value) +- `dragstop`: Called after user is done moving the item, with updated DOM attributes +- `dropped`: Called when an item has been dropped and accepted over a grid +- `enable`: Called when grid becomes enabled +- `removed`: Called when items are being removed from the grid +- `resizestart`: Called before user starts resizing an item +- `resize`: Called while grid item is being resized (for each new row/column value) +- `resizestop`: Called after user is done resizing the item, with updated DOM attributes + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `name` | `string` | event name(s) to listen for (space separated for multiple) | +| `callback` | [`GridStackEventHandlerCallback`](#gridstackeventhandlercallback) | function to call when event occurs | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Listen to multiple events at once +grid.on('added removed change', (event, items) => { + items.forEach(item => console.log('Item changed:', item)); +}); + +// Listen to individual events +grid.on('added', (event, items) => { + items.forEach(item => console.log('Added item:', item)); +}); +``` + +##### onResize() + +```ts +onResize(clientWidth): GridStack; +``` + +Defined in: [gridstack.ts:2030](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2030) + +called when we are being resized - check if the one Column Mode needs to be turned on/off +and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square) +or `sizeToContent` gridItem options. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `clientWidth` | `number` | + +###### Returns + +[`GridStack`](#gridstack-1) + +##### prepareDragDrop() + +```ts +prepareDragDrop(el, force?): GridStack; +``` + +Defined in: [gridstack.ts:2716](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2716) + +prepares the element for drag&drop - this is normally called by makeWidget() unless are are delay loading + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `el` | [`GridItemHTMLElement`](#griditemhtmlelement) | `undefined` | GridItemHTMLElement of the widget | +| `force?` | `boolean` | `false` | | + +###### Returns + +[`GridStack`](#gridstack-1) + +##### registerEngine() + +```ts +static registerEngine(engineClass): void; +``` + +Defined in: [gridstack.ts:172](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L172) + +call this method to register your engine instead of the default one. +See instead `GridStackOptions.engineClass` if you only need to +replace just one instance. + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `engineClass` | *typeof* [`GridStackEngine`](#gridstackengine-2) | + +###### Returns + +`void` + +##### removeAll() + +```ts +removeAll(removeDOM, triggerEvent): GridStack; +``` + +Defined in: [gridstack.ts:1426](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1426) + +Removes all widgets from the grid. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `removeDOM` | `boolean` | `true` | if `false` DOM elements won't be removed from the tree (Default? `true`). | +| `triggerEvent` | `boolean` | `true` | if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true). | + +###### Returns + +[`GridStack`](#gridstack-1) + +##### removeAsSubGrid() + +```ts +removeAsSubGrid(nodeThatRemoved?): void; +``` + +Defined in: [gridstack.ts:599](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L599) + +called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back +to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `nodeThatRemoved?` | [`GridStackNode`](#gridstacknode-2) | + +###### Returns + +`void` + +##### removeWidget() + +```ts +removeWidget( + els, + removeDOM, + triggerEvent): GridStack; +``` + +Defined in: [gridstack.ts:1388](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1388) + +Removes widget from the grid. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `els` | [`GridStackElement`](#gridstackelement) | `undefined` | - | +| `removeDOM` | `boolean` | `true` | if `false` DOM element won't be removed from the tree (Default? true). | +| `triggerEvent` | `boolean` | `true` | if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true). | + +###### Returns + +[`GridStack`](#gridstack-1) + +##### resizable() + +```ts +resizable(els, val): GridStack; +``` + +Defined in: [gridstack.ts:2259](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2259) + +Enables/Disables user resizing for specific grid elements. +For all items and future items, use enableResize() instead. No-op for static grids. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `els` | [`GridStackElement`](#gridstackelement) | widget element(s) or selector to modify | +| `val` | `boolean` | if true widget will be resizable, assuming the parent grid isn't noResize or static | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Make specific widgets resizable +grid.resizable('.my-widget', true); + +// Disable resizing for specific widgets +grid.resizable('#fixed-size-widget', false); +``` + +##### resizeToContent() + +```ts +resizeToContent(el): void; +``` + +Defined in: [gridstack.ts:1649](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1649) + +Updates widget height to match the content height to avoid vertical scrollbars or dead space. +This automatically adjusts the widget height based on its content size. + +Note: This assumes only 1 child under resizeToContentParent='.grid-stack-item-content' +(sized to gridItem minus padding) that represents the entire content size. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `el` | [`GridItemHTMLElement`](#griditemhtmlelement) | the grid item element to resize | + +###### Returns + +`void` + +###### Example + +```ts +// Resize a widget to fit its content +const widget = document.querySelector('.grid-stack-item'); +grid.resizeToContent(widget); + +// This is commonly used with dynamic content: +widget.querySelector('.content').innerHTML = 'New longer content...'; +grid.resizeToContent(widget); +``` + +##### rotate() + +```ts +rotate(els, relative?): GridStack; +``` + +Defined in: [gridstack.ts:1724](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1724) + +Rotate widgets by swapping their width and height. This is typically called when the user presses 'r' during dragging. +The rotation swaps the w/h dimensions and adjusts min/max constraints accordingly. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `els` | [`GridStackElement`](#gridstackelement) | widget element(s) or selector to rotate | +| `relative?` | [`Position`](#position-1) | optional pixel coordinate relative to upper/left corner to rotate around (keeps that cell under cursor) | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Rotate a specific widget +grid.rotate('.my-widget'); + +// Rotate with relative positioning during drag +grid.rotate(widget, { left: 50, top: 30 }); +``` + +##### save() + +```ts +save( + saveContent, + saveGridOpt, + saveCB, + column?): + | GridStackOptions + | GridStackWidget[]; +``` + +Defined in: [gridstack.ts:634](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L634) + +saves the current layout returning a list of widgets for serialization which might include any nested grids. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `saveContent` | `boolean` | `true` | if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will be removed. | +| `saveGridOpt` | `boolean` | `false` | if true (default false), save the grid options itself, so you can call the new GridStack.addGrid() to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead. | +| `saveCB` | [`SaveFcn`](#savefcn) | `GridStack.saveCB` | callback for each node -> widget, so application can insert additional data to be saved into the widget data structure. | +| `column?` | `number` | `undefined` | if provided, the grid will be saved for the given column size (IFF we have matching internal saved layout, or current layout). Otherwise it will use the largest possible layout (say 12 even if rendering at 1 column) so we can restore to all layouts. NOTE: if you want to save to currently display layout, pass this.getColumn() as column. NOTE2: nested grids will ALWAYS save to the container size to be in sync with parent. | + +###### Returns + + \| [`GridStackOptions`](#gridstackoptions) + \| [`GridStackWidget`](#gridstackwidget)[] + +list of widgets or full grid option, including .children list of widgets + +##### setAnimation() + +```ts +setAnimation(doAnimate, delay?): GridStack; +``` + +Defined in: [gridstack.ts:1445](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1445) + +Toggle the grid animation state. Toggles the `grid-stack-animate` class. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `doAnimate` | `boolean` | if true the grid will animate. | +| `delay?` | `boolean` | if true setting will be set on next event loop. | + +###### Returns + +[`GridStack`](#gridstack-1) + +##### setStatic() + +```ts +setStatic( + val, + updateClass, + recurse): GridStack; +``` + +Defined in: [gridstack.ts:1468](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1468) + +Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on. +Also toggle the grid-stack-static class. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `val` | `boolean` | `undefined` | if true the grid become static. | +| `updateClass` | `boolean` | `true` | true (default) if css class gets updated | +| `recurse` | `boolean` | `true` | true (default) if sub-grids also get updated | + +###### Returns + +[`GridStack`](#gridstack-1) + +##### setupDragIn() + +```ts +static setupDragIn( + dragIn?, + dragInOptions?, + widgets?, + root?): void; +``` + +Defined in: [gridstack.ts:2202](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2202) + +call to setup dragging in from the outside (say toolbar), by specifying the class selection and options. +Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar +is dynamically create and needs to be set later. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `dragIn?` | `string` \| `HTMLElement`[] | `undefined` | string selector (ex: '.sidebar-item') or list of dom elements | +| `dragInOptions?` | [`DDDragOpt`](#dddragopt) | `undefined` | options - see DDDragOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'} | +| `widgets?` | [`GridStackWidget`](#gridstackwidget)[] | `undefined` | GridStackWidget def to assign to each element which defines what to create on drop | +| `root?` | `Document` \| `HTMLElement` | `document` | optional root which defaults to document (for shadow dom pass the parent HTMLDocument) | + +###### Returns + +`void` + +##### triggerEvent() + +```ts +protected triggerEvent(event, target): void; +``` + +Defined in: [gridstack.ts:2970](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2970) + +call given event callback on our main top-most grid (if we're nested) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `event` | `Event` | +| `target` | [`GridItemHTMLElement`](#griditemhtmlelement) | + +###### Returns + +`void` + +##### update() + +```ts +update(els, opt): GridStack; +``` + +Defined in: [gridstack.ts:1545](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1545) + +Updates widget position/size and other info. This is used to change widget properties after creation. +Can update position, size, content, and other widget properties. + +Note: If you need to call this on all nodes, use load() instead which will update what changed. +Setting the same x,y for multiple items will be indeterministic and likely unwanted. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `els` | [`GridStackElement`](#gridstackelement) | widget element(s) or selector to modify | +| `opt` | [`GridStackWidget`](#gridstackwidget) | new widget options (x,y,w,h, etc.). Only those set will be updated. | + +###### Returns + +[`GridStack`](#gridstack-1) + +the grid instance for chaining + +###### Example + +```ts +// Update widget size and position +grid.update('.my-widget', { x: 2, y: 1, w: 3, h: 2 }); + +// Update widget content +grid.update(widget, { content: '

New content

' }); + +// Update multiple properties +grid.update('#my-widget', { + w: 4, + h: 3, + noResize: true, + locked: true +}); +``` + +##### updateOptions() + +```ts +updateOptions(o): GridStack; +``` + +Defined in: [gridstack.ts:1486](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1486) + +Updates the passed in options on the grid (similar to update(widget) for for the grid options). + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `o` | [`GridStackOptions`](#gridstackoptions) | + +###### Returns + +[`GridStack`](#gridstack-1) + +##### willItFit() + +```ts +willItFit(node): boolean; +``` + +Defined in: [gridstack.ts:1802](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1802) + +Returns true if the height of the grid will be less than the vertical +constraint. Always returns true if grid doesn't have height constraint. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `node` | [`GridStackWidget`](#gridstackwidget) | contains x,y,w,h,auto-position options | + +###### Returns + +`boolean` + +###### Example + +```ts +if (grid.willItFit(newWidget)) { + grid.addWidget(newWidget); +} else { + alert('Not enough free space to place the widget'); +} +``` + +#### Properties + +| Property | Modifier | Type | Default value | Description | Defined in | +| ------ | ------ | ------ | ------ | ------ | ------ | +| `addRemoveCB?` | `static` | [`AddRemoveFcn`](#addremovefcn) | `undefined` | callback method use when new items|grids needs to be created or deleted, instead of the default item:
w.content
grid:
grid content...
add = true: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget()|GridStack:init(). add = false: the item will be removed from DOM (if not already done) grid = true|false for grid vs grid-items | [gridstack.ts:184](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L184) | +| `animationDelay` | `public` | `number` | `undefined` | time to wait for animation (if enabled) to be done so content sizing can happen | [gridstack.ts:218](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L218) | +| `el` | `public` | [`GridHTMLElement`](#gridhtmlelement) | `undefined` | the HTML element tied to this grid after it's been initialized | [gridstack.ts:266](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L266) | +| `engine` | `public` | [`GridStackEngine`](#gridstackengine-2) | `undefined` | engine used to implement non DOM grid functionality | [gridstack.ts:212](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L212) | +| `Engine` | `static` | *typeof* [`GridStackEngine`](#gridstackengine-2) | `GridStackEngine` | scoping so users can call new GridStack.Engine(12) for example | [gridstack.ts:209](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L209) | +| `engineClass` | `static` | *typeof* [`GridStackEngine`](#gridstackengine-2) | `undefined` | - | [gridstack.ts:220](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L220) | +| `opts` | `public` | [`GridStackOptions`](#gridstackoptions) | `{}` | grid options - public for classes to access, but use methods to modify! | [gridstack.ts:266](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L266) | +| `parentGridNode?` | `public` | [`GridStackNode`](#gridstacknode-2) | `undefined` | point to a parent grid item if we're nested (inside a grid-item in between 2 Grids) | [gridstack.ts:215](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L215) | +| `renderCB?` | `static` | [`RenderFcn`](#renderfcn) | `undefined` | callback to create the content of widgets so the app can control how to store and restore it By default this lib will do 'el.textContent = w.content' forcing text only support for avoiding potential XSS issues. | [gridstack.ts:195](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L195) | +| `resizeObserver` | `protected` | `ResizeObserver` | `undefined` | - | [gridstack.ts:221](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L221) | +| `resizeToContentCB?` | `static` | [`ResizeToContentFcn`](#resizetocontentfcn) | `undefined` | callback to use for resizeToContent instead of the built in one | [gridstack.ts:201](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L201) | +| `resizeToContentParent` | `static` | `string` | `'.grid-stack-item-content'` | parent class for sizing content. defaults to '.grid-stack-item-content' | [gridstack.ts:203](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L203) | +| `responseLayout` | `protected` | [`ColumnOptions`](#columnoptions) | `undefined` | - | [gridstack.ts:258](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L258) | +| `saveCB?` | `static` | [`SaveFcn`](#savefcn) | `undefined` | callback during saving to application can inject extra data for each widget, on top of the grid layout properties | [gridstack.ts:189](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L189) | +| `updateCB?` | `static` | (`w`) => `void` | `undefined` | called after a widget has been updated (eg: load() into an existing list of children) so application can do extra work | [gridstack.ts:198](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L198) | +| `Utils` | `static` | *typeof* [`Utils`](#utils-1) | `Utils` | scoping so users can call GridStack.Utils.sort() for example | [gridstack.ts:206](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L206) | + +*** + + +### GridStackEngine + +Defined in: [gridstack-engine.ts:34](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L34) + +Defines the GridStack engine that handles all grid layout calculations and node positioning. +This is the core engine that performs grid manipulation without any DOM operations. + +The engine manages: +- Node positioning and collision detection +- Layout algorithms (compact, float, etc.) +- Grid resizing and column changes +- Widget movement and resizing logic + +NOTE: Values should not be modified directly - use the main GridStack API instead +to ensure proper DOM updates and event triggers. + +#### Accessors + +##### float + +###### Get Signature + +```ts +get float(): boolean; +``` + +Defined in: [gridstack-engine.ts:438](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L438) + +Get the current floating mode setting. + +###### Example + +```ts +const isFloating = engine.float; +console.log('Floating enabled:', isFloating); +``` + +###### Returns + +`boolean` + +true if floating is enabled, false otherwise + +###### Set Signature + +```ts +set float(val): void; +``` + +Defined in: [gridstack-engine.ts:421](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L421) + +Enable/disable floating widgets (default: `false`). +When floating is enabled, widgets can move up to fill empty spaces. +See [example](http://gridstackjs.com/demo/float.html) + +###### Example + +```ts +engine.float = true; // Enable floating +engine.float = false; // Disable floating (default) +``` + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `val` | `boolean` | true to enable floating, false to disable | + +###### Returns + +`void` + +#### Constructors + +##### Constructor + +```ts +new GridStackEngine(opts): GridStackEngine; +``` + +Defined in: [gridstack-engine.ts:61](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L61) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `opts` | [`GridStackEngineOptions`](#gridstackengineoptions) | + +###### Returns + +[`GridStackEngine`](#gridstackengine-2) + +#### Methods + +##### \_useEntireRowArea() + +```ts +protected _useEntireRowArea(node, nn): boolean; +``` + +Defined in: [gridstack-engine.ts:103](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L103) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | +| `nn` | [`GridStackPosition`](#gridstackposition) | + +###### Returns + +`boolean` + +##### addNode() + +```ts +addNode( + node, + triggerAddEvent, + after?): GridStackNode; +``` + +Defined in: [gridstack-engine.ts:756](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L756) + +Add the given node to the grid, handling collision detection and re-packing. +This is the main method for adding new widgets to the engine. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | `undefined` | the node to add to the grid | +| `triggerAddEvent` | `boolean` | `false` | if true, adds node to addedNodes list for event triggering | +| `after?` | [`GridStackNode`](#gridstacknode-2) | `undefined` | optional node to place this node after (for ordering) | + +###### Returns + +[`GridStackNode`](#gridstacknode-2) + +the added node (or existing node if duplicate) + +###### Example + +```ts +const node = { x: 0, y: 0, w: 2, h: 1, content: 'Hello' }; +const added = engine.addNode(node, true); +``` + +##### batchUpdate() + +```ts +batchUpdate(flag, doPack): GridStackEngine; +``` + +Defined in: [gridstack-engine.ts:85](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L85) + +Enable/disable batch mode for multiple operations to optimize performance. +When enabled, layout updates are deferred until batch mode is disabled. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `flag` | `boolean` | `true` | true to enable batch mode, false to disable and apply changes | +| `doPack` | `boolean` | `true` | if true (default), pack/compact nodes when disabling batch mode | + +###### Returns + +[`GridStackEngine`](#gridstackengine-2) + +the engine instance for chaining + +###### Example + +```ts +// Start batch mode for multiple operations +engine.batchUpdate(true); +engine.addNode(node1); +engine.addNode(node2); +engine.batchUpdate(false); // Apply all changes at once +``` + +##### beginUpdate() + +```ts +beginUpdate(node): GridStackEngine; +``` + +Defined in: [gridstack-engine.ts:993](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L993) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | + +###### Returns + +[`GridStackEngine`](#gridstackengine-2) + +##### cacheLayout() + +```ts +cacheLayout( + nodes, + column, + clear): GridStackEngine; +``` + +Defined in: [gridstack-engine.ts:1196](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1196) + +call to cache the given layout internally to the given location so we can restore back when column changes size + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `nodes` | [`GridStackNode`](#gridstacknode-2)[] | `undefined` | list of nodes | +| `column` | `number` | `undefined` | corresponding column index to save it under | +| `clear` | `boolean` | `false` | if true, will force other caches to be removed (default false) | + +###### Returns + +[`GridStackEngine`](#gridstackengine-2) + +##### cacheOneLayout() + +```ts +cacheOneLayout(n, column): GridStackEngine; +``` + +Defined in: [gridstack-engine.ts:1216](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1216) + +call to cache the given node layout internally to the given location so we can restore back when column changes size + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `n` | [`GridStackNode`](#gridstacknode-2) | - | +| `column` | `number` | corresponding column index to save it under | + +###### Returns + +[`GridStackEngine`](#gridstackengine-2) + +##### changedPosConstrain() + +```ts +changedPosConstrain(node, p): boolean; +``` + +Defined in: [gridstack-engine.ts:915](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L915) + +true if x,y or w,h are different after clamping to min/max + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | +| `p` | [`GridStackPosition`](#gridstackposition) | + +###### Returns + +`boolean` + +##### cleanupNode() + +```ts +cleanupNode(node): GridStackEngine; +``` + +Defined in: [gridstack-engine.ts:1247](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1247) + +called to remove all internal values but the _id + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | + +###### Returns + +[`GridStackEngine`](#gridstackengine-2) + +##### collide() + +```ts +collide( + skip, + area, + skip2?): GridStackNode; +``` + +Defined in: [gridstack-engine.ts:182](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L182) + +Return the first node that intercepts/collides with the given node or area. +Used for collision detection during drag and drop operations. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `skip` | [`GridStackNode`](#gridstacknode-2) | `undefined` | the node to skip in collision detection (usually the node being moved) | +| `area` | [`GridStackNode`](#gridstacknode-2) | `skip` | the area to check for collisions (defaults to skip node's area) | +| `skip2?` | [`GridStackNode`](#gridstacknode-2) | `undefined` | optional second node to skip in collision detection | + +###### Returns + +[`GridStackNode`](#gridstacknode-2) + +the first colliding node, or undefined if no collision + +###### Example + +```ts +const colliding = engine.collide(draggedNode, {x: 2, y: 1, w: 2, h: 1}); +if (colliding) { + console.log('Would collide with:', colliding.id); +} +``` + +##### collideAll() + +```ts +collideAll( + skip, + area, + skip2?): GridStackNode[]; +``` + +Defined in: [gridstack-engine.ts:200](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L200) + +Return all nodes that intercept/collide with the given node or area. +Similar to collide() but returns all colliding nodes instead of just the first. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `skip` | [`GridStackNode`](#gridstacknode-2) | `undefined` | the node to skip in collision detection | +| `area` | [`GridStackNode`](#gridstacknode-2) | `skip` | the area to check for collisions (defaults to skip node's area) | +| `skip2?` | [`GridStackNode`](#gridstacknode-2) | `undefined` | optional second node to skip in collision detection | + +###### Returns + +[`GridStackNode`](#gridstacknode-2)[] + +array of all colliding nodes + +###### Example + +```ts +const allCollisions = engine.collideAll(draggedNode); +console.log('Colliding with', allCollisions.length, 'nodes'); +``` + +##### compact() + +```ts +compact(layout, doSort): GridStackEngine; +``` + +Defined in: [gridstack-engine.ts:388](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L388) + +Re-layout grid items to reclaim any empty space. +This optimizes the grid layout by moving items to fill gaps. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `layout` | [`CompactOptions`](#compactoptions) | `'compact'` | layout algorithm to use: - 'compact' (default): find truly empty spaces, may reorder items - 'list': keep the sort order exactly the same, move items up sequentially | +| `doSort` | `boolean` | `true` | if true (default), sort nodes by position before compacting | + +###### Returns + +[`GridStackEngine`](#gridstackengine-2) + +the engine instance for chaining + +###### Example + +```ts +// Compact to fill empty spaces +engine.compact(); + +// Compact preserving item order +engine.compact('list'); +``` + +##### directionCollideCoverage() + +```ts +protected directionCollideCoverage( + node, + o, + collides): GridStackNode; +``` + +Defined in: [gridstack-engine.ts:207](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L207) + +does a pixel coverage collision based on where we started, returning the node that has the most coverage that is >50% mid line + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | +| `o` | [`GridStackMoveOpts`](#gridstackmoveopts) | +| `collides` | [`GridStackNode`](#gridstacknode-2)[] | + +###### Returns + +[`GridStackNode`](#gridstacknode-2) + +##### endUpdate() + +```ts +endUpdate(): GridStackEngine; +``` + +Defined in: [gridstack-engine.ts:1002](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1002) + +###### Returns + +[`GridStackEngine`](#gridstackengine-2) + +##### findCacheLayout() + +```ts +protected findCacheLayout(n, column): number; +``` + +Defined in: [gridstack-engine.ts:1230](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1230) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `n` | [`GridStackNode`](#gridstacknode-2) | +| `column` | `number` | + +###### Returns + +`number` + +##### findEmptyPosition() + +```ts +findEmptyPosition( + node, + nodeList, + column, + after?): boolean; +``` + +Defined in: [gridstack-engine.ts:722](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L722) + +Find the first available empty spot for the given node dimensions. +Updates the node's x,y attributes with the found position. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | the node to find a position for (w,h must be set) | +| `nodeList` | [`GridStackNode`](#gridstacknode-2)[] | optional list of nodes to check against (defaults to engine nodes) | +| `column` | `number` | optional column count (defaults to engine column count) | +| `after?` | [`GridStackNode`](#gridstacknode-2) | optional node to start search after (maintains order) | + +###### Returns + +`boolean` + +true if an empty position was found and node was updated + +###### Example + +```ts +const node = { w: 2, h: 1 }; +if (engine.findEmptyPosition(node)) { + console.log('Found position at:', node.x, node.y); +} +``` + +##### getDirtyNodes() + +```ts +getDirtyNodes(verify?): GridStackNode[]; +``` + +Defined in: [gridstack-engine.ts:636](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L636) + +Returns a list of nodes that have been modified from their original values. +This is used to track which nodes need DOM updates. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `verify?` | `boolean` | if true, performs additional verification by comparing current vs original positions | + +###### Returns + +[`GridStackNode`](#gridstacknode-2)[] + +array of nodes that have been modified + +###### Example + +```ts +const changed = engine.getDirtyNodes(); +console.log('Modified nodes:', changed.length); + +// Get verified dirty nodes +const verified = engine.getDirtyNodes(true); +``` + +##### getRow() + +```ts +getRow(): number; +``` + +Defined in: [gridstack-engine.ts:989](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L989) + +###### Returns + +`number` + +##### isAreaEmpty() + +```ts +isAreaEmpty( + x, + y, + w, + h): boolean; +``` + +Defined in: [gridstack-engine.ts:366](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L366) + +Check if the specified rectangular area is empty (no nodes occupy any part of it). + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `x` | `number` | the x coordinate (column) of the area to check | +| `y` | `number` | the y coordinate (row) of the area to check | +| `w` | `number` | the width in columns of the area to check | +| `h` | `number` | the height in rows of the area to check | + +###### Returns + +`boolean` + +true if the area is completely empty, false if any node overlaps + +###### Example + +```ts +if (engine.isAreaEmpty(2, 1, 3, 2)) { + console.log('Area is available for placement'); +} +``` + +##### moveNode() + +```ts +moveNode(node, o): boolean; +``` + +Defined in: [gridstack-engine.ts:929](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L929) + +return true if the passed in node was actually moved (checks for no-op and locked) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | +| `o` | [`GridStackMoveOpts`](#gridstackmoveopts) | + +###### Returns + +`boolean` + +##### moveNodeCheck() + +```ts +moveNodeCheck(node, o): boolean; +``` + +Defined in: [gridstack-engine.ts:843](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L843) + +Check if a node can be moved to a new position, considering layout constraints. +This is a safer version of moveNode() that validates the move first. + +For complex cases (like maxRow constraints), it simulates the move in a clone first, +then applies the changes only if they meet all specifications. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | the node to move | +| `o` | [`GridStackMoveOpts`](#gridstackmoveopts) | move options including target position | + +###### Returns + +`boolean` + +true if the node was successfully moved + +###### Example + +```ts +const canMove = engine.moveNodeCheck(node, { x: 2, y: 1 }); +if (canMove) { + console.log('Node moved successfully'); +} +``` + +##### nodeBoundFix() + +```ts +nodeBoundFix(node, resizing?): GridStackEngine; +``` + +Defined in: [gridstack-engine.ts:560](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L560) + +Part 2 of preparing a node to fit inside the grid - validates and fixes coordinates and dimensions. +This ensures the node fits within grid boundaries and respects min/max constraints. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | the node to validate and fix | +| `resizing?` | `boolean` | if true, resize the node to fit; if false, move the node to fit | + +###### Returns + +[`GridStackEngine`](#gridstackengine-2) + +the engine instance for chaining + +###### Example + +```ts +// Fix a node that might be out of bounds +engine.nodeBoundFix(node, true); // Resize to fit +engine.nodeBoundFix(node, false); // Move to fit +``` + +##### prepareNode() + +```ts +prepareNode(node, resizing?): GridStackNode; +``` + +Defined in: [gridstack-engine.ts:507](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L507) + +Prepare and validate a node's coordinates and values for the current grid. +This ensures the node has valid position, size, and properties before being added to the grid. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | the node to prepare and validate | +| `resizing?` | `boolean` | if true, resize the node down if it's out of bounds; if false, move it to fit | + +###### Returns + +[`GridStackNode`](#gridstacknode-2) + +the prepared node with valid coordinates + +###### Example + +```ts +const node = { w: 3, h: 2, content: 'Hello' }; +const prepared = engine.prepareNode(node); +console.log('Node prepared at:', prepared.x, prepared.y); +``` + +##### removeAll() + +```ts +removeAll(removeDOM, triggerEvent): GridStackEngine; +``` + +Defined in: [gridstack-engine.ts:816](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L816) + +Remove all nodes from the grid. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `removeDOM` | `boolean` | `true` | if true (default), marks all nodes for DOM removal | +| `triggerEvent` | `boolean` | `true` | if true (default), triggers removal events | + +###### Returns + +[`GridStackEngine`](#gridstackengine-2) + +the engine instance for chaining + +###### Example + +```ts +engine.removeAll(); // Remove all nodes +``` + +##### removeNode() + +```ts +removeNode( + node, + removeDOM, + triggerEvent): GridStackEngine; +``` + +Defined in: [gridstack-engine.ts:790](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L790) + +Remove the given node from the grid. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | `undefined` | the node to remove | +| `removeDOM` | `boolean` | `true` | if true (default), marks node for DOM removal | +| `triggerEvent` | `boolean` | `false` | if true, adds node to removedNodes list for event triggering | + +###### Returns + +[`GridStackEngine`](#gridstackengine-2) + +the engine instance for chaining + +###### Example + +```ts +engine.removeNode(node, true, true); +``` + +##### removeNodeFromLayoutCache() + +```ts +removeNodeFromLayoutCache(n): void; +``` + +Defined in: [gridstack-engine.ts:1234](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1234) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `n` | [`GridStackNode`](#gridstacknode-2) | + +###### Returns + +`void` + +##### save() + +```ts +save( + saveElement, + saveCB?, + column?): GridStackNode[]; +``` + +Defined in: [gridstack-engine.ts:1018](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1018) + +saves a copy of the largest column layout (eg 12 even when rendering 1 column) so we don't loose orig layout, unless explicity column +count to use is given. returning a list of widgets for serialization + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `saveElement` | `boolean` | `true` | if true (default), the element will be saved to GridStackWidget.el field, else it will be removed. | +| `saveCB?` | [`SaveFcn`](#savefcn) | `undefined` | callback for each node -> widget, so application can insert additional data to be saved into the widget data structure. | +| `column?` | `number` | `undefined` | if provided, the grid will be saved for the given column count (IFF we have matching internal saved layout, or current layout). Note: nested grids will ALWAYS save the container w to match overall layouts (parent + child) to be consistent. | + +###### Returns + +[`GridStackNode`](#gridstacknode-2)[] + +##### sortNodes() + +```ts +sortNodes(dir): GridStackEngine; +``` + +Defined in: [gridstack-engine.ts:451](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L451) + +Sort the nodes array from first to last, or reverse. +This is called during collision/placement operations to enforce a specific order. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `dir` | `-1` \| `1` | `1` | sort direction: 1 for ascending (first to last), -1 for descending (last to first) | + +###### Returns + +[`GridStackEngine`](#gridstackengine-2) + +the engine instance for chaining + +###### Example + +```ts +engine.sortNodes(); // Sort ascending (default) +engine.sortNodes(-1); // Sort descending +``` + +##### swap() + +```ts +swap(a, b): boolean; +``` + +Defined in: [gridstack-engine.ts:314](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L314) + +Attempt to swap the positions of two nodes if they meet swapping criteria. +Nodes can swap if they are the same size or in the same column/row, not locked, and touching. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `a` | [`GridStackNode`](#gridstacknode-2) | first node to swap | +| `b` | [`GridStackNode`](#gridstacknode-2) | second node to swap | + +###### Returns + +`boolean` + +true if swap was successful, false if not possible, undefined if not applicable + +###### Example + +```ts +const swapped = engine.swap(nodeA, nodeB); +if (swapped) { + console.log('Nodes swapped successfully'); +} +``` + +##### willItFit() + +```ts +willItFit(node): boolean; +``` + +Defined in: [gridstack-engine.ts:894](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L894) + +return true if can fit in grid height constrain only (always true if no maxRow) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | + +###### Returns + +`boolean` + +#### Properties + +| Property | Modifier | Type | Default value | Description | Defined in | +| ------ | ------ | ------ | ------ | ------ | ------ | +| `addedNodes` | `public` | [`GridStackNode`](#gridstacknode-2)[] | `[]` | - | [gridstack-engine.ts:38](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L38) | +| `batchMode` | `public` | `boolean` | `undefined` | - | [gridstack-engine.ts:40](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L40) | +| `column` | `public` | `number` | `undefined` | - | [gridstack-engine.ts:35](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L35) | +| `defaultColumn` | `public` | `number` | `12` | - | [gridstack-engine.ts:41](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L41) | +| `maxRow` | `public` | `number` | `undefined` | - | [gridstack-engine.ts:36](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L36) | +| `nodes` | `public` | [`GridStackNode`](#gridstacknode-2)[] | `undefined` | - | [gridstack-engine.ts:37](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L37) | +| `removedNodes` | `public` | [`GridStackNode`](#gridstacknode-2)[] | `[]` | - | [gridstack-engine.ts:39](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L39) | +| `skipCacheUpdate?` | `public` | `boolean` | `undefined` | true when grid.load() already cached the layout and can skip out of bound caching info | [gridstack-engine.ts:55](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L55) | + +*** + + +### Utils + +Defined in: [utils.ts:97](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L97) + +Collection of utility methods used throughout GridStack. +These are general-purpose helper functions for DOM manipulation, +positioning calculations, object operations, and more. + +#### Constructors + +##### Constructor + +```ts +new Utils(): Utils; +``` + +###### Returns + +[`Utils`](#utils-1) + +#### Methods + +##### addElStyles() + +```ts +static addElStyles(el, styles): void; +``` + +Defined in: [utils.ts:690](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L690) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `el` | `HTMLElement` | +| `styles` | \{ \[`prop`: `string`\]: `string` \| `string`[]; \} | + +###### Returns + +`void` + +##### appendTo() + +```ts +static appendTo(el, parent): void; +``` + +Defined in: [utils.ts:672](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L672) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `el` | `HTMLElement` | +| `parent` | `string` \| `HTMLElement` | + +###### Returns + +`void` + +##### area() + +```ts +static area(a): number; +``` + +Defined in: [utils.ts:288](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L288) + +Calculate the total area of a grid position. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `a` | [`GridStackPosition`](#gridstackposition) | position with width and height | + +###### Returns + +`number` + +the total area (width * height) + +###### Example + +```ts +const area = Utils.area({x: 0, y: 0, w: 3, h: 2}); // returns 6 +``` + +##### areaIntercept() + +```ts +static areaIntercept(a, b): number; +``` + +Defined in: [utils.ts:269](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L269) + +Calculate the overlapping area between two grid positions. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `a` | [`GridStackPosition`](#gridstackposition) | first position | +| `b` | [`GridStackPosition`](#gridstackposition) | second position | + +###### Returns + +`number` + +the area of overlap (0 if no overlap) + +###### Example + +```ts +const overlap = Utils.areaIntercept( + {x: 0, y: 0, w: 3, h: 2}, + {x: 1, y: 0, w: 3, h: 2} +); // returns 4 (2x2 overlap) +``` + +##### canBeRotated() + +```ts +static canBeRotated(n): boolean; +``` + +Defined in: [utils.ts:793](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L793) + +true if the item can be rotated (checking for prop, not space available) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `n` | [`GridStackNode`](#gridstacknode-2) | + +###### Returns + +`boolean` + +##### clone() + +```ts +static clone(obj): T; +``` + +Defined in: [utils.ts:635](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L635) + +single level clone, returning a new object with same top fields. This will share sub objects and arrays + +###### Type Parameters + +| Type Parameter | +| ------ | +| `T` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `obj` | `T` | + +###### Returns + +`T` + +##### cloneDeep() + +```ts +static cloneDeep(obj): T; +``` + +Defined in: [utils.ts:651](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L651) + +Recursive clone version that returns a full copy, checking for nested objects and arrays ONLY. +Note: this will use as-is any key starting with double __ (and not copy inside) some lib have circular dependencies. + +###### Type Parameters + +| Type Parameter | +| ------ | +| `T` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `obj` | `T` | + +###### Returns + +`T` + +##### cloneNode() + +```ts +static cloneNode(el): HTMLElement; +``` + +Defined in: [utils.ts:666](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L666) + +deep clone the given HTML node, removing teh unique id field + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `el` | `HTMLElement` | + +###### Returns + +`HTMLElement` + +##### copyPos() + +```ts +static copyPos( + a, + b, + doMinMax): GridStackWidget; +``` + +Defined in: [utils.ts:465](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L465) + +Copy position and size properties from one widget to another. +Copies x, y, w, h and optionally min/max constraints. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `a` | [`GridStackWidget`](#gridstackwidget) | `undefined` | target widget to copy to | +| `b` | [`GridStackWidget`](#gridstackwidget) | `undefined` | source widget to copy from | +| `doMinMax` | `boolean` | `false` | if true, also copy min/max width/height constraints | + +###### Returns + +[`GridStackWidget`](#gridstackwidget) + +the target widget (a) + +###### Example + +```ts +Utils.copyPos(widget1, widget2); // Copy position/size +Utils.copyPos(widget1, widget2, true); // Also copy constraints +``` + +##### createDiv() + +```ts +static createDiv(classes, parent?): HTMLElement; +``` + +Defined in: [utils.ts:197](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L197) + +Create a div element with the specified CSS classes. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `classes` | `string`[] | array of CSS class names to add | +| `parent?` | `HTMLElement` | optional parent element to append the div to | + +###### Returns + +`HTMLElement` + +the created div element + +###### Example + +```ts +const div = Utils.createDiv(['grid-item', 'draggable']); +const nested = Utils.createDiv(['content'], parentDiv); +``` + +##### defaults() + +```ts +static defaults(target, ...sources): object; +``` + +Defined in: [utils.ts:412](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L412) + +Copy unset fields from source objects to target object (shallow merge with defaults). +Similar to Object.assign but only sets undefined/null fields. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `target` | `any` | the object to copy defaults into | +| ...`sources` | `any`[] | one or more source objects to copy defaults from | + +###### Returns + +`object` + +the modified target object + +###### Example + +```ts +const config = { width: 100 }; +Utils.defaults(config, { width: 200, height: 50 }); +// config is now { width: 100, height: 50 } +``` + +##### find() + +```ts +static find(nodes, id): GridStackNode; +``` + +Defined in: [utils.ts:323](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L323) + +Find a grid node by its ID. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `nodes` | [`GridStackNode`](#gridstacknode-2)[] | array of nodes to search | +| `id` | `string` | the ID to search for | + +###### Returns + +[`GridStackNode`](#gridstacknode-2) + +the node with matching ID, or undefined if not found + +###### Example + +```ts +const node = Utils.find(nodes, 'widget-1'); +if (node) console.log('Found node at:', node.x, node.y); +``` + +##### getElement() + +```ts +static getElement(els, root): HTMLElement; +``` + +Defined in: [utils.ts:146](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L146) + +Convert a potential selector into a single HTML element. +Similar to getElements() but returns only the first match. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `els` | [`GridStackElement`](#gridstackelement) | `undefined` | selector string or HTMLElement | +| `root` | `Document` \| `HTMLElement` | `document` | optional root element to search within (defaults to document) | + +###### Returns + +`HTMLElement` + +the first HTML element matching the selector, or null if not found + +###### Example + +```ts +const element = Utils.getElement('#myWidget'); +const first = Utils.getElement('.grid-item'); +``` + +##### getElements() + +```ts +static getElements(els, root): HTMLElement[]; +``` + +Defined in: [utils.ts:112](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L112) + +Convert a potential selector into an actual list of HTML elements. +Supports CSS selectors, element references, and special ID handling. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `els` | [`GridStackElement`](#gridstackelement) | `undefined` | selector string, HTMLElement, or array of elements | +| `root` | `Document` \| `HTMLElement` | `document` | optional root element to search within (defaults to document, useful for shadow DOM) | + +###### Returns + +`HTMLElement`[] + +array of HTML elements matching the selector + +###### Example + +```ts +const elements = Utils.getElements('.grid-item'); +const byId = Utils.getElements('#myWidget'); +const fromShadow = Utils.getElements('.item', shadowRoot); +``` + +##### getValuesFromTransformedElement() + +```ts +static getValuesFromTransformedElement(parent): DragTransform; +``` + +Defined in: [utils.ts:750](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L750) + +defines an element that is used to get the offset and scale from grid transforms +returns the scale and offsets from said element + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `parent` | `HTMLElement` | + +###### Returns + +[`DragTransform`](#dragtransform) + +##### initEvent() + +```ts +static initEvent(e, info): T; +``` + +Defined in: [utils.ts:707](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L707) + +###### Type Parameters + +| Type Parameter | +| ------ | +| `T` | + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `e` | `MouseEvent` \| `DragEvent` | +| `info` | \{ `target?`: `EventTarget`; `type`: `string`; \} | +| `info.target?` | `EventTarget` | +| `info.type` | `string` | + +###### Returns + +`T` + +##### isIntercepted() + +```ts +static isIntercepted(a, b): boolean; +``` + +Defined in: [utils.ts:235](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L235) + +Check if two grid positions overlap/intersect. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `a` | [`GridStackPosition`](#gridstackposition) | first position with x, y, w, h properties | +| `b` | [`GridStackPosition`](#gridstackposition) | second position with x, y, w, h properties | + +###### Returns + +`boolean` + +true if the positions overlap + +###### Example + +```ts +const overlaps = Utils.isIntercepted( + {x: 0, y: 0, w: 2, h: 1}, + {x: 1, y: 0, w: 2, h: 1} +); // true - they overlap +``` + +##### isTouching() + +```ts +static isTouching(a, b): boolean; +``` + +Defined in: [utils.ts:252](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L252) + +Check if two grid positions are touching (edges or corners). + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `a` | [`GridStackPosition`](#gridstackposition) | first position | +| `b` | [`GridStackPosition`](#gridstackposition) | second position | + +###### Returns + +`boolean` + +true if the positions are touching + +###### Example + +```ts +const touching = Utils.isTouching( + {x: 0, y: 0, w: 2, h: 1}, + {x: 2, y: 0, w: 1, h: 1} +); // true - they share an edge +``` + +##### lazyLoad() + +```ts +static lazyLoad(n): boolean; +``` + +Defined in: [utils.ts:182](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L182) + +Check if a widget should be lazy loaded based on node or grid settings. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `n` | [`GridStackNode`](#gridstacknode-2) | the grid node to check | + +###### Returns + +`boolean` + +true if the item should be lazy loaded + +###### Example + +```ts +if (Utils.lazyLoad(node)) { + // Set up intersection observer for lazy loading +} +``` + +##### parseHeight() + +```ts +static parseHeight(val): HeightData; +``` + +Defined in: [utils.ts:379](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L379) + +Parse a height value with units into numeric value and unit string. +Supports px, em, rem, vh, vw, %, cm, mm units. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `val` | [`numberOrString`](#numberorstring) | height value as number or string with units | + +###### Returns + +[`HeightData`](#heightdata) + +object with h (height) and unit properties + +###### Example + +```ts +Utils.parseHeight('100px'); // {h: 100, unit: 'px'} +Utils.parseHeight('2rem'); // {h: 2, unit: 'rem'} +Utils.parseHeight(50); // {h: 50, unit: 'px'} +``` + +##### removeInternalAndSame() + +```ts +static removeInternalAndSame(a, b): void; +``` + +Defined in: [utils.ts:494](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L494) + +removes field from the first object if same as the second objects (like diffing) and internal '_' for saving + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `a` | `unknown` | +| `b` | `unknown` | + +###### Returns + +`void` + +##### removeInternalForSave() + +```ts +static removeInternalForSave(n, removeEl): void; +``` + +Defined in: [utils.ts:509](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L509) + +removes internal fields '_' and default values for saving + +###### Parameters + +| Parameter | Type | Default value | +| ------ | ------ | ------ | +| `n` | [`GridStackNode`](#gridstacknode-2) | `undefined` | +| `removeEl` | `boolean` | `true` | + +###### Returns + +`void` + +##### removePositioningStyles() + +```ts +static removePositioningStyles(el): void; +``` + +Defined in: [utils.ts:542](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L542) + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `el` | `HTMLElement` | + +###### Returns + +`void` + +##### same() + +```ts +static same(a, b): boolean; +``` + +Defined in: [utils.ts:441](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L441) + +Compare two objects for equality (shallow comparison). +Checks if objects have the same fields and values at one level deep. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `a` | `unknown` | first object to compare | +| `b` | `unknown` | second object to compare | + +###### Returns + +`boolean` + +true if objects have the same values + +###### Example + +```ts +Utils.same({x: 1, y: 2}, {x: 1, y: 2}); // true +Utils.same({x: 1}, {x: 1, y: 2}); // false +``` + +##### samePos() + +```ts +static samePos(a, b): boolean; +``` + +Defined in: [utils.ts:480](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L480) + +true if a and b has same size & position + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `a` | [`GridStackPosition`](#gridstackposition) | +| `b` | [`GridStackPosition`](#gridstackposition) | + +###### Returns + +`boolean` + +##### sanitizeMinMax() + +```ts +static sanitizeMinMax(node): void; +``` + +Defined in: [utils.ts:485](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L485) + +given a node, makes sure it's min/max are valid + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `node` | [`GridStackNode`](#gridstacknode-2) | + +###### Returns + +`void` + +##### shouldSizeToContent() + +```ts +static shouldSizeToContent(n, strict): boolean; +``` + +Defined in: [utils.ts:216](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L216) + +Check if a widget should resize to fit its content. + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `n` | [`GridStackNode`](#gridstacknode-2) | `undefined` | the grid node to check (can be undefined) | +| `strict` | `boolean` | `false` | if true, only returns true for explicit sizeToContent:true (not numbers) | + +###### Returns + +`boolean` + +true if the widget should resize to content + +###### Example + +```ts +if (Utils.shouldSizeToContent(node)) { + // Trigger content-based resizing +} +``` + +##### simulateMouseEvent() + +```ts +static simulateMouseEvent( + e, + simulatedType, + target?): void; +``` + +Defined in: [utils.ts:723](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L723) + +copies the MouseEvent (or convert Touch) properties and sends it as another event to the given target + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `e` | `MouseEvent` \| `Touch` | +| `simulatedType` | `string` | +| `target?` | `EventTarget` | + +###### Returns + +`void` + +##### sort() + +```ts +static sort(nodes, dir): GridStackNode[]; +``` + +Defined in: [utils.ts:303](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L303) + +Sort an array of grid nodes by position (y first, then x). + +###### Parameters + +| Parameter | Type | Default value | Description | +| ------ | ------ | ------ | ------ | +| `nodes` | [`GridStackNode`](#gridstacknode-2)[] | `undefined` | array of nodes to sort | +| `dir` | `-1` \| `1` | `1` | sort direction: 1 for ascending (top-left first), -1 for descending | + +###### Returns + +[`GridStackNode`](#gridstacknode-2)[] + +the sorted array (modifies original) + +###### Example + +```ts +const sorted = Utils.sort(nodes); // Sort top-left to bottom-right +const reverse = Utils.sort(nodes, -1); // Sort bottom-right to top-left +``` + +##### swap() + +```ts +static swap( + o, + a, + b): void; +``` + +Defined in: [utils.ts:774](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L774) + +swap the given object 2 field values + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `o` | `unknown` | +| `a` | `string` | +| `b` | `string` | + +###### Returns + +`void` + +##### throttle() + +```ts +static throttle(func, delay): () => void; +``` + +Defined in: [utils.ts:532](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L532) + +delay calling the given function for given delay, preventing new calls from happening while waiting + +###### Parameters + +| Parameter | Type | +| ------ | ------ | +| `func` | () => `void` | +| `delay` | `number` | + +###### Returns + +```ts +(): void; +``` + +###### Returns + +`void` + +##### toBool() + +```ts +static toBool(v): boolean; +``` + +Defined in: [utils.ts:341](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L341) + +Convert various value types to boolean. +Handles strings like 'false', 'no', '0' as false. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `v` | `unknown` | value to convert | + +###### Returns + +`boolean` + +boolean representation + +###### Example + +```ts +Utils.toBool('true'); // true +Utils.toBool('false'); // false +Utils.toBool('no'); // false +Utils.toBool('1'); // true +``` + +##### toNumber() + +```ts +static toNumber(value): number; +``` + +Defined in: [utils.ts:363](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L363) + +Convert a string value to a number, handling null and empty strings. + +###### Parameters + +| Parameter | Type | Description | +| ------ | ------ | ------ | +| `value` | `string` | string or null value to convert | + +###### Returns + +`number` + +number value, or undefined for null/empty strings + +###### Example + +```ts +Utils.toNumber('42'); // 42 +Utils.toNumber(''); // undefined +Utils.toNumber(null); // undefined +``` + +## Interfaces + + +### GridStackOptions + +Defined in: [types.ts:184](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L184) + +Defines the options for a Grid + +#### Properties + +| Property | Type | Description | Defined in | +| ------ | ------ | ------ | ------ | +| `acceptWidgets?` | `string` \| `boolean` \| (`element`) => `boolean` | Accept widgets dragged from other grids or from outside (default: `false`). Can be: - `true`: will accept HTML elements having 'grid-stack-item' as class attribute - `false`: will not accept any external widgets - string: explicit class name to accept instead of default - function: callback called before an item will be accepted when entering a grid **Example** `// Accept all grid items acceptWidgets: true // Accept only items with specific class acceptWidgets: 'my-draggable-item' // Custom validation function acceptWidgets: (el) => { return el.getAttribute('data-accept') === 'true'; }` **See** [http://gridstack.github.io/gridstack.js/demo/two.html](http://gridstack.github.io/gridstack.js/demo/two.html) for complete example | [types.ts:206](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L206) | +| `alwaysShowResizeHandle?` | `boolean` \| `"mobile"` | possible values (default: `mobile`) - does not apply to non-resizable widgets `false` the resizing handles are only shown while hovering over a widget `true` the resizing handles are always shown 'mobile' if running on a mobile device, default to `true` (since there is no hovering per say), else `false`. See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html) | [types.ts:213](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L213) | +| `animate?` | `boolean` | turns animation on (default?: true) | [types.ts:216](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L216) | +| `auto?` | `boolean` | if false gridstack will not initialize existing items (default?: true) | [types.ts:219](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L219) | +| `cellHeight?` | [`numberOrString`](#numberorstring) | One cell height (default: 'auto'). Can be: - an integer (px): fixed pixel height - a string (ex: '100px', '10em', '10rem'): CSS length value - 0: library will not generate styles for rows (define your own CSS) - 'auto': height calculated for square cells (width / column) and updated live on window resize - 'initial': similar to 'auto' but stays fixed size during window resizing Note: % values don't work correctly - see demo/cell-height.html **Example** `// Fixed 100px height cellHeight: 100 // CSS units cellHeight: '5rem' cellHeight: '100px' // Auto-sizing for square cells cellHeight: 'auto' // No CSS generation (custom styles) cellHeight: 0` | [types.ts:245](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L245) | +| `cellHeightThrottle?` | `number` | throttle time delay (in ms) used when cellHeight='auto' to improve performance vs usability (default?: 100). A value of 0 will make it instant at a cost of re-creating the CSS file at ever window resize event! | [types.ts:250](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L250) | +| `cellHeightUnit?` | `string` | (internal) unit for cellHeight (default? 'px') which is set when a string cellHeight with a unit is passed (ex: '10rem') | [types.ts:253](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L253) | +| `children?` | [`GridStackWidget`](#gridstackwidget)[] | list of children item to create when calling load() or addGrid() | [types.ts:256](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L256) | +| `class?` | `string` | additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance. Note: only used by addGrid(), else your element should have the needed class | [types.ts:269](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L269) | +| `column?` | `number` \| `"auto"` | number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns. Note: for nested grids, it is recommended to use 'auto' which will always match the container grid-item current width (in column) to keep inside and outside items always the same. flag is NOT supported for regular non-nested grids. | [types.ts:262](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L262) | +| `columnOpts?` | [`Responsive`](#responsive) | responsive column layout for width:column behavior | [types.ts:265](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L265) | +| `disableDrag?` | `boolean` | disallows dragging of widgets (default?: false) | [types.ts:272](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L272) | +| `disableResize?` | `boolean` | disallows resizing of widgets (default?: false). | [types.ts:275](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L275) | +| `draggable?` | [`DDDragOpt`](#dddragopt) | allows to override UI draggable options. (default?: { handle?: '.grid-stack-item-content', appendTo?: 'body' }) | [types.ts:278](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L278) | +| `engineClass?` | *typeof* [`GridStackEngine`](#gridstackengine-2) | the type of engine to create (so you can subclass) default to GridStackEngine | [types.ts:284](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L284) | +| `float?` | `boolean` | enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html) | [types.ts:287](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L287) | +| `handle?` | `string` | draggable handle selector (default?: '.grid-stack-item-content') | [types.ts:290](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L290) | +| `handleClass?` | `string` | draggable handle class (e.g. 'grid-stack-item-content'). If set 'handle' is ignored (default?: null) | [types.ts:293](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L293) | +| `itemClass?` | `string` | additional widget class (default?: 'grid-stack-item') | [types.ts:296](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L296) | +| `layout?` | [`ColumnOptions`](#columnoptions) | re-layout mode when we're a subgrid and we are being resized. default to 'list' | [types.ts:299](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L299) | +| `lazyLoad?` | `boolean` | true when widgets are only created when they scroll into view (visible) | [types.ts:302](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L302) | +| `margin?` | [`numberOrString`](#numberorstring) | gap between grid item and content (default?: 10). This will set all 4 sides and support the CSS formats below an integer (px) a string with possible units (ex: '2em', '20px', '2rem') string with space separated values (ex: '5px 10px 0 20px' for all 4 sides, or '5em 10em' for top/bottom and left/right pairs like CSS). Note: all sides must have same units (last one wins, default px) | [types.ts:311](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L311) | +| `marginBottom?` | [`numberOrString`](#numberorstring) | - | [types.ts:316](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L316) | +| `marginLeft?` | [`numberOrString`](#numberorstring) | - | [types.ts:317](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L317) | +| `marginRight?` | [`numberOrString`](#numberorstring) | - | [types.ts:315](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L315) | +| `marginTop?` | [`numberOrString`](#numberorstring) | OLD way to optionally set each side - use margin: '5px 10px 0 20px' instead. Used internally to store each side. | [types.ts:314](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L314) | +| `marginUnit?` | `string` | (internal) unit for margin (default? 'px') set when `margin` is set as string with unit (ex: 2rem') | [types.ts:320](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L320) | +| `maxRow?` | `number` | maximum rows amount. Default? is 0 which means no maximum rows | [types.ts:323](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L323) | +| `minRow?` | `number` | minimum rows amount which is handy to prevent grid from collapsing when empty. Default is `0`. When no set the `min-height` CSS attribute on the grid div (in pixels) can be used, which will round to the closest row. | [types.ts:328](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L328) | +| `nonce?` | `string` | If you are using a nonce-based Content Security Policy, pass your nonce here and GridStack will add it to the