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 e9ab71a34..d5364258b 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -21,7 +21,6 @@ module.exports = function(grunt) { dist: { files: { 'dist/gridstack.css': 'src/gridstack.scss', - 'dist/gridstack-extra.css': 'src/gridstack-extra.scss' } } }, @@ -33,21 +32,19 @@ module.exports = function(grunt) { }, files: { 'dist/gridstack.min.css': ['dist/gridstack.css'], - 'dist/gridstack-extra.min.css': ['dist/gridstack-extra.css'] } } }, copy: { dist: { files: { - 'dist/es5/gridstack-poly.js': ['src/gridstack-poly.js'], 'dist/src/gridstack.scss': ['src/gridstack.scss'], - 'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'], 'dist/angular/README.md': ['angular/README.md'], 'dist/angular/src/gridstack.component.ts': ['angular/projects/lib/src/lib/gridstack.component.ts'], '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 315a825c1..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) @@ -32,7 +32,7 @@ Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/grids - [Extend Library](#extend-library) - [Extend Engine](#extend-engine) - [Change grid columns](#change-grid-columns) - - [Custom columns CSS](#custom-columns-css) + - [Custom columns CSS (OLD, not needed with v12+)](#custom-columns-css-old-not-needed-with-v12) - [Override resizable/draggable options](#override-resizabledraggable-options) - [Touch devices support](#touch-devices-support) - [Migrating](#migrating) @@ -48,6 +48,7 @@ Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/grids - [Migrating to v9](#migrating-to-v9) - [Migrating to v10](#migrating-to-v10) - [Migrating to v11](#migrating-to-v11) + - [Migrating to v12](#migrating-to-v12) - [jQuery Application](#jquery-application) - [Changes](#changes) - [Usage Trend](#usage-trend) @@ -58,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 @@ -87,7 +88,7 @@ Alternatively (single combined file, notice the -all.js) in html ``` -**Note**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this likely will break again in the future). +**Note**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this likely will break again in the future) and DROPPED again in v12 (css variable needed). You can use the es5 files and polyfill (larger) for older browser instead. For example: ```html @@ -141,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 @@ -207,6 +208,8 @@ GridStack makes it very easy if you need [1-12] columns out of the box (default GridStack.init( {column: N} ); ``` +NOTE: step 2 is OLD and not needed with v12+ which uses CSS variables instead of classes + 2) also include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly. ```html @@ -219,7 +222,9 @@ Note: class `.grid-stack-N` will automatically be added and we include `gridstac See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html) with 6 columns -## Custom columns CSS +## Custom columns CSS (OLD, not needed with v12+) + +NOTE: step is OLD and not needed with v12+ which uses CSS variables instead of classes If you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for `.grid-stack-item[gs-w="X"]` and `.grid-stack-item[gs-x="X"]`. @@ -472,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:** @@ -491,6 +499,16 @@ GridStack.renderCB = function(el: HTMLElement, w: GridStackNode) { 4. if no `GridStackWidget` is defined, the helper will now be inserted as is, and NOT original sidepanel item. 5. support DOM gs- attr as well as gridstacknode JSON (see two.html) alternatives. +## Migrating to v12 + +* 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). + +**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 This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before 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 587370453..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... @@ -18,7 +20,6 @@ MyComponent CSS ```css @import "gridstack/dist/gridstack.min.css"; -@import "gridstack/dist/gridstack-extra.min.css"; // if you use 2-11 column .grid-stack { background: #fafad2; diff --git a/angular/angular.json b/angular/angular.json index c7961035d..ad2ef7214 100644 --- a/angular/angular.json +++ b/angular/angular.json @@ -55,7 +55,6 @@ ], "styles": [ "node_modules/gridstack/dist/gridstack.min.css", - "node_modules/gridstack/dist/gridstack-extra.min.css", "projects/demo/src/styles.css" ], "scripts": [] @@ -121,7 +120,6 @@ ], "styles": [ "node_modules/gridstack/dist/gridstack.min.css", - "node_modules/gridstack/dist/gridstack-extra.min.css", "projects/demo/src/styles.css" ], "scripts": [] 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..5dbb8f8a5 --- /dev/null +++ b/angular/doc/api/index.md @@ -0,0 +1,11 @@ +# GridStack Angular Library + +## 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 c5bca5fbc..66b662f0f 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": "^11.4.0", + "gridstack": "^12.3.1", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/angular/projects/demo/src/app/app.component.ts b/angular/projects/demo/src/app/app.component.ts index c827d6272..4874f9b9d 100644 --- a/angular/projects/demo/src/app/app.component.ts +++ b/angular/projects/demo/src/app/app.component.ts @@ -56,7 +56,7 @@ export class AppComponent implements OnInit { // nested grid options private subOptions: GridStackOptions = { cellHeight: 50, // should be 50 - top/bottom - column: 'auto', // size to match container. make sure to include gridstack-extra.min.css + column: 'auto', // size to match container acceptWidgets: true, // will accept .grid-stack-item by default margin: 5, }; diff --git a/angular/projects/lib/package.json b/angular/projects/lib/package.json index bef129c20..b9e758e4d 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.1", "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 a57fcb588..d1d7e33b6 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 11.4.0 + * gridstack-item.component.ts 12.3.1 * 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 e84b72e66..9843666c6 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 11.4.0 + * gridstack-item.component.ts 12.3.1 * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license */ @@ -7,23 +7,44 @@ 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', template: `
- + - + - + {{options.content}}
`, styles: [` @@ -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 be6b4797c..b6d016f7d 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 11.4.0 + * gridstack.component.ts 12.3.1 * 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,58 +84,162 @@ export type SelectorToType = {[key: string]: Type}; }) export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy { - /** track list of TEMPLATE 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 */ + /** + * 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 */ - @Input() public set options(val: GridStackOptions) { this._options = val; } - /** return the current running options */ + /** + * 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); + } else { + this._options = o; + } + } + /** 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; } @@ -110,11 +249,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy { protected _sub: Subscription | undefined; protected loaded?: boolean; - constructor( - // protected readonly zone: NgZone, - // protected readonly cd: ChangeDetectorRef, - protected readonly elementRef: ElementRef, - ) { + constructor(protected readonly elementRef: ElementRef) { // set globally our method to create the right widget type if (!GridStack.addRemoveCB) { GridStack.addRemoveCB = gsCreateNgComponents; @@ -122,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; } @@ -154,7 +292,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy { } /** - * called when the TEMPLATE list of items changes - get a list of nodes and + * 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) */ public updateAll() { @@ -170,17 +308,20 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy { /** check if the grid is empty, if so show alternative content */ public checkEmpty() { if (!this.grid) return; - const isEmpty = !this.grid.engine.nodes.length; - if (isEmpty === this.isEmpty) return; - this.isEmpty = isEmpty; - // this.cd.detectChanges(); + this.isEmpty = !this.grid.engine.nodes.length; } /** 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})) @@ -188,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})) @@ -196,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'); } } @@ -302,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 5c75f8902..a753a8784 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 11.4.0 + * gridstack.component.ts 12.3.1 * 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 192153932..12c1afb63 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 11.4.0 + * gridstack-item.component.ts 12.3.1 * 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..40b73031b --- /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": false, + "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..be4bd4ca6 --- /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": false, + "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 00f53d7bf..9c253aeb4 100644 --- a/angular/yarn.lock +++ b/angular/yarn.lock @@ -25,7 +25,7 @@ "@angular-devkit/architect@0.1402.13": version "0.1402.13" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular-devkit/architect/-/architect-0.1402.13.tgz#5f60669f32dd94da24b54f38a2fe740146a00428" + resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.1402.13.tgz#5f60669f32dd94da24b54f38a2fe740146a00428" integrity sha512-n0ISBuvkZHoOpAzuAZql1TU9VLHUE9e/a9g4VNOPHewjMzpN02VqeGKvJfOCKtzkCs6gVssIlILm2/SXxkIFxQ== dependencies: "@angular-devkit/core" "14.2.13" @@ -33,7 +33,7 @@ "@angular-devkit/build-angular@^14": version "14.2.13" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular-devkit/build-angular/-/build-angular-14.2.13.tgz#cbe89e8e9b11ba4a7984cb224db212c386aa4e77" + resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-14.2.13.tgz#cbe89e8e9b11ba4a7984cb224db212c386aa4e77" integrity sha512-FJZKQ3xYFvEJ807sxVy4bCVyGU2NMl3UUPNfLIdIdzwwDEP9tx/cc+c4VtVPEZZfU8jVenu8XOvL6L0vpjt3yg== dependencies: "@ampproject/remapping" "2.2.0" @@ -103,7 +103,7 @@ "@angular-devkit/build-webpack@0.1402.13": version "0.1402.13" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular-devkit/build-webpack/-/build-webpack-0.1402.13.tgz#20d0059848ef79c8799572fa9856edc96cda262e" + resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.1402.13.tgz#20d0059848ef79c8799572fa9856edc96cda262e" integrity sha512-K27aJmuw86ZOdiu5PoGeGDJ2v7g2ZCK0bGwc8jzkjTLRfvd4FRKIIZumGv3hbQ3vQRLikiU6WMDRTFyCZky/EA== dependencies: "@angular-devkit/architect" "0.1402.13" @@ -111,7 +111,7 @@ "@angular-devkit/core@14.2.13": version "14.2.13" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular-devkit/core/-/core-14.2.13.tgz#6c9e3420df7fa7fd2bafbf07405b0abfdcf0dac4" + resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-14.2.13.tgz#6c9e3420df7fa7fd2bafbf07405b0abfdcf0dac4" integrity sha512-aIefeZcbjghQg/V6U9CTLtyB5fXDJ63KwYqVYkWP+i0XriS5A9puFgq2u/OVsWxAfYvqpDqp5AdQ0g0bi3CAsA== dependencies: ajv "8.11.0" @@ -122,7 +122,7 @@ "@angular-devkit/schematics@14.2.13": version "14.2.13" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular-devkit/schematics/-/schematics-14.2.13.tgz#c60a1e320e920ff7efc199b7bce2d644ce280d06" + resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-14.2.13.tgz#c60a1e320e920ff7efc199b7bce2d644ce280d06" integrity sha512-2zczyeNzeBcrT2HOysv52X9SH3tZoHfWJvVf6H0SIa74rfDKEl7hFpKNXnh3x8sIMLj5mZn05n5RCqGxCczcIg== dependencies: "@angular-devkit/core" "14.2.13" @@ -133,14 +133,14 @@ "@angular/animations@^14": version "14.3.0" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular/animations/-/animations-14.3.0.tgz#71e22cc1bdfcefc7d8d38cc3bb300b768940f816" + resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-14.3.0.tgz#71e22cc1bdfcefc7d8d38cc3bb300b768940f816" integrity sha512-QoBcIKy1ZiU+4qJsAh5Ls20BupWiXiZzKb0s6L9/dntPt5Msr4Ao289XR2P6O1L+kTsCprH9Kt41zyGQ/bkRqg== dependencies: tslib "^2.3.0" "@angular/cli@^14": version "14.2.13" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular/cli/-/cli-14.2.13.tgz#0c61dce5cc27d330d157bece52d0a1f40e70b607" + resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-14.2.13.tgz#0c61dce5cc27d330d157bece52d0a1f40e70b607" integrity sha512-I5EepRem2CCyS3GDzQxZ2ZrqQwVqoGoLY+ZQhsK1QGWUnUyFOjbv3OlUGxRUYwcedu19V1EBAKjmQ96HzMIcVQ== dependencies: "@angular-devkit/architect" "0.1402.13" @@ -166,14 +166,14 @@ "@angular/common@^14": version "14.3.0" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular/common/-/common-14.3.0.tgz#dcf675e1db3016cdb605a05be6182a8cea71e139" + resolved "https://registry.yarnpkg.com/@angular/common/-/common-14.3.0.tgz#dcf675e1db3016cdb605a05be6182a8cea71e139" integrity sha512-pV9oyG3JhGWeQ+TFB0Qub6a1VZWMNZ6/7zEopvYivdqa5yDLLDSBRWb6P80RuONXyGnM1pa7l5nYopX+r/23GQ== dependencies: tslib "^2.3.0" "@angular/compiler-cli@^14": version "14.3.0" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular/compiler-cli/-/compiler-cli-14.3.0.tgz#e9c4760cf4473c53217f6cf3a27365954438e7a6" + resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-14.3.0.tgz#e9c4760cf4473c53217f6cf3a27365954438e7a6" integrity sha512-eoKpKdQ2X6axMgzcPUMZVYl3bIlTMzMeTo5V29No4BzgiUB+QoOTYGNJZkGRyqTNpwD9uSBJvmT2vG9+eC4ghQ== dependencies: "@babel/core" "^7.17.2" @@ -189,42 +189,42 @@ "@angular/compiler@^14": version "14.3.0" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular/compiler/-/compiler-14.3.0.tgz#106d3ef296700ab7021a52b2e09d8da1384d086a" + resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-14.3.0.tgz#106d3ef296700ab7021a52b2e09d8da1384d086a" integrity sha512-E15Rh0t3vA+bctbKnBCaDmLvc3ix+ZBt6yFZmhZalReQ+KpOlvOJv+L9oiFEgg+rYVl2QdvN7US1fvT0PqswLw== dependencies: tslib "^2.3.0" "@angular/core@^14": version "14.3.0" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular/core/-/core-14.3.0.tgz#7f44c59b6e866fa4cee7221495040c1ead433895" + resolved "https://registry.yarnpkg.com/@angular/core/-/core-14.3.0.tgz#7f44c59b6e866fa4cee7221495040c1ead433895" integrity sha512-wYiwItc0Uyn4FWZ/OAx/Ubp2/WrD3EgUJ476y1XI7yATGPF8n9Ld5iCXT08HOvc4eBcYlDfh90kTXR6/MfhzdQ== dependencies: tslib "^2.3.0" "@angular/forms@^14": version "14.3.0" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular/forms/-/forms-14.3.0.tgz#f8659269c9ddef557f04fb782942f5983c5e4556" + resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-14.3.0.tgz#f8659269c9ddef557f04fb782942f5983c5e4556" integrity sha512-fBZZC2UFMom2AZPjGQzROPXFWO6kvCsPDKctjJwClVC8PuMrkm+RRyiYRdBbt2qxWHEqOZM2OCQo73xUyZOYHw== dependencies: tslib "^2.3.0" "@angular/platform-browser-dynamic@^14": version "14.3.0" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular/platform-browser-dynamic/-/platform-browser-dynamic-14.3.0.tgz#56b24d0408a0f0d29b84f95ab39ed31774607cbd" + resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-14.3.0.tgz#56b24d0408a0f0d29b84f95ab39ed31774607cbd" integrity sha512-rneZiMrIiYRhrkQvdL40E2ErKRn4Zdo6EtjBM9pAmWeyoM8oMnOZb9gz5vhrkNWg06kVMVg0yKqluP5How7j3A== dependencies: tslib "^2.3.0" "@angular/platform-browser@^14": version "14.3.0" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular/platform-browser/-/platform-browser-14.3.0.tgz#d0cd6f7a439b862d16ed3fbf78f68295048a6434" + resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-14.3.0.tgz#d0cd6f7a439b862d16ed3fbf78f68295048a6434" integrity sha512-w9Y3740UmTz44T0Egvc+4QV9sEbO61L+aRHbpkLTJdlEGzHByZvxJmJyBYmdqeyTPwc/Zpy7c02frlpfAlyB7A== dependencies: tslib "^2.3.0" "@angular/router@^14": version "14.3.0" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@angular/router/-/router-14.3.0.tgz#c92f5c4317a65c6fbe27de539af53715811b9006" + resolved "https://registry.yarnpkg.com/@angular/router/-/router-14.3.0.tgz#c92f5c4317a65c6fbe27de539af53715811b9006" integrity sha512-uip0V7w7k7xyxxpTPbr7EuMnYLj3FzJrwkLVJSEw3TMMGHt5VU5t4BBa9veGZOta2C205XFrTAHnp8mD+XYY1w== dependencies: tslib "^2.3.0" @@ -1504,7 +1504,7 @@ "@ngtools/webpack@14.2.13": version "14.2.13" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@ngtools/webpack/-/webpack-14.2.13.tgz#859b38aaa57ffe1351d08f9166724936c9e6b365" + resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-14.2.13.tgz#859b38aaa57ffe1351d08f9166724936c9e6b365" integrity sha512-RQx/rGX7K/+R55x1R6Ax1JzyeHi8cW11dEXpzHWipyuSpusQLUN53F02eMB4VTakXsL3mFNWWy4bX3/LSq8/9w== "@nodelib/fs.scandir@2.1.5": @@ -1620,7 +1620,7 @@ "@schematics/angular@14.2.13": version "14.2.13" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/@schematics/angular/-/angular-14.2.13.tgz#35ee9120a3ac07077bad169fa74fdf4ce4e193d7" + resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-14.2.13.tgz#35ee9120a3ac07077bad169fa74fdf4ce4e193d7" integrity sha512-MLxTpTU3E8QACQ/5c0sENMR2gRiMXpGaKeD5IHY+3wyU2fUSJVB0QPU/l1WhoyZbX8N9ospBgf5UEG7taVF9rg== dependencies: "@angular-devkit/core" "14.2.13" @@ -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@^11.4.0: - version "11.4.0" - resolved "https://registry.yarnpkg.com/gridstack/-/gridstack-11.4.0.tgz#5d98a471c90a3e8c478382ac71f5a63551eb83c4" - integrity sha512-V1faqcHZjbXODt/cMg8a0aIN1uqqR4R5lENTls3sP8vbArvHrYAa9UPzzJWR6+RqPMLxmFG/OG2Evnmu/XOE9A== +gridstack@^12.3.1: + version "12.3.1" + resolved "https://registry.yarnpkg.com/gridstack/-/gridstack-12.3.1.tgz#900418be49b6b9ac45abda57bf03200e3863e8e1" + integrity sha512-AeS3YW8FbnTwXuZMsm+9AfeAce0wxV1t04ph3Ed74UekFhAjFhZJndH+/63YtecNygBUCgzictQ117oaQkL+pg== handle-thing@^2.0.0: version "2.0.1" @@ -3895,9 +3895,9 @@ http-proxy-agent@^5.0.0: debug "4" http-proxy-middleware@^2.0.3: - version "2.0.7" - resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz#915f236d92ae98ef48278a95dedf17e991936ec6" - integrity sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA== + version "2.0.9" + resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz#e9e63d68afaa4eee3d147f39149ab84c0c2815ef" + integrity sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q== dependencies: "@types/http-proxy" "^1.17.8" http-proxy "^1.18.1" @@ -4806,7 +4806,7 @@ neo-async@^2.6.2: ng-packagr@^14: version "14.3.0" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/ng-packagr/-/ng-packagr-14.3.0.tgz#517a7c343aa125a7d631097fede16941949fb503" + resolved "https://registry.yarnpkg.com/ng-packagr/-/ng-packagr-14.3.0.tgz#517a7c343aa125a7d631097fede16941949fb503" integrity sha512-GNIiB5BsYPYF31lV/u5bDCLYc4eiOmZ5ndvWRQ8JjdkBXaHaiZ2x0JLJrF1/hkjxUhakYmx2IHjVyC746cpN5w== dependencies: "@rollup/plugin-json" "^4.1.0" @@ -5663,7 +5663,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^ postcss@8.4.31: version "8.4.31" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ== dependencies: nanoid "^3.3.6" @@ -6101,7 +6101,7 @@ selfsigned@^2.0.1: semver@7.5.3: version "7.5.3" - resolved "https://usw1.packages.broadcom.com/artifactory/api/npm/tis-npm-virtual/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e" integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ== dependencies: lru-cache "^6.0.0" diff --git a/demo/column.html b/demo/column.html index bed7fc05d..61433ba6b 100644 --- a/demo/column.html +++ b/demo/column.html @@ -7,7 +7,6 @@ Column grid demo - 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/events.js b/demo/events.js index d32bbeb76..bca7ae3f8 100644 --- a/demo/events.js +++ b/demo/events.js @@ -1,59 +1,59 @@ function addEvents(grid, id) { - let g = (id !== undefined ? 'grid' + id + ' ' : ''); + let g = (id !== undefined ? 'grid' + id : ''); grid.on('added removed change', function(event, items) { let str = ''; items.forEach(function(item) { str += ' (' + item.x + ',' + item.y + ' ' + item.w + 'x' + item.h + ')'; }); - console.log(g + event.type + ' ' + items.length + ' items (x,y w h):' + str ); + console.log((g || items[0].grid.opts.id) + ' ' + event.type + ' ' + items.length + ' items (x,y w h):' + str ); }) .on('enable', function(event) { - let grid = event.target; - console.log(g + 'enable'); + let el = event.target; + console.log((g || el.gridstackNode.grid.opts.id) + ' enable'); }) .on('disable', function(event) { - let grid = event.target; - console.log(g + 'disable'); + let el = event.target; + console.log((g || el.gridstackNode.grid.opts.id) + ' disable'); }) .on('dragstart', function(event, el) { let n = el.gridstackNode; let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same let y = el.getAttribute('gs-y'); - console.log(g + 'dragstart ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')'); + console.log((g || el.gridstackNode.grid.opts.id) + ' dragstart ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')'); }) .on('drag', function(event, el) { let n = el.gridstackNode; let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same let y = el.getAttribute('gs-y'); - // console.log(g + 'drag ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')'); + // console.log((g || el.gridstackNode.grid.opts.id) + ' drag ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')'); }) .on('dragstop', function(event, el) { let n = el.gridstackNode; let x = el.getAttribute('gs-x'); // verify node (easiest) and attr are the same let y = el.getAttribute('gs-y'); - console.log(g + 'dragstop ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')'); + console.log((g || el.gridstackNode.grid.opts.id) + ' dragstop ' + (n.content || '') + ' pos: (' + n.x + ',' + n.y + ') = (' + x + ',' + y + ')'); }) .on('dropped', function(event, previousNode, newNode) { if (previousNode) { - console.log(g + 'dropped - Removed widget from grid:', previousNode); + console.log((g || previousNode.grid.opts.id) + ' dropped - Removed widget from grid:', previousNode); } if (newNode) { - console.log(g + 'dropped - Added widget in grid:', newNode); + console.log((g || newNode.grid.opts.id) + ' dropped - Added widget in grid:', newNode); } }) .on('resizestart', function(event, el) { let n = el.gridstackNode; let rec = el.getBoundingClientRect(); - console.log(`${g} resizestart ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`); + console.log(`${g || el.gridstackNode.grid.opts.id} resizestart ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`); }) .on('resize', function(event, el) { let n = el.gridstackNode; let rec = el.getBoundingClientRect(); - console.log(`${g} resize ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`); + console.log(`${g || el.gridstackNode.grid.opts.id} resize ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`); }) .on('resizestop', function(event, el) { let n = el.gridstackNode; let rec = el.getBoundingClientRect(); - console.log(`${g} resizestop ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`); + console.log(`${g || el.gridstackNode.grid.opts.id} resizestop ${n.content || ''} size: (${n.w}x${n.h}) = (${Math.round(rec.width)}x${Math.round(rec.height)})px`); }); } \ No newline at end of file diff --git a/demo/mobile.html b/demo/mobile.html index 6018bc3f6..6cbdb36aa 100644 --- a/demo/mobile.html +++ b/demo/mobile.html @@ -7,7 +7,6 @@ Simple mobile demo - diff --git a/demo/nested.html b/demo/nested.html index 9366b60f2..d8a099c72 100644 --- a/demo/nested.html +++ b/demo/nested.html @@ -6,7 +6,6 @@ Nested grids demo - @@ -41,7 +40,7 @@

Nested grids demo

Load

- d + 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/demo/web1.html b/demo/web1.html index 659c89f6b..91247cc36 100644 --- a/demo/web1.html +++ b/demo/web1.html @@ -13,9 +13,7 @@ - - - + diff --git a/demo/web2.html b/demo/web2.html index 0f420d3d1..682816684 100644 --- a/demo/web2.html +++ b/demo/web2.html @@ -13,9 +13,7 @@ - - - +