Showing preview only (1,442K chars total). Download the full file or copy to clipboard to get everything.
Repository: gridstack/gridstack.js
Branch: master
Commit: 497e122ab1a1
Files: 221
Total size: 1.3 MB
Directory structure:
gitextract_o1ju2pjk/
├── .eslintignore
├── .eslintrc.js
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ └── bug_report.md
│ └── workflows/
│ ├── deploy-docs.yml
│ └── sync-docs.yml
├── .gitignore
├── .travis.yml
├── .vitestrc.coverage.ts
├── Gruntfile.js
├── LICENSE
├── PULL_REQUEST_TEMPLATE.md
├── README.md
├── TESTING.md
├── angular/
│ ├── .editorconfig
│ ├── .gitignore
│ ├── README.md
│ ├── README_build.md
│ ├── angular.json
│ ├── doc/
│ │ └── api/
│ │ ├── base-widget.md
│ │ ├── gridstack-item.component.md
│ │ ├── gridstack.component.md
│ │ ├── gridstack.module.md
│ │ ├── index.md
│ │ └── types.md
│ ├── package.json
│ ├── projects/
│ │ ├── demo/
│ │ │ ├── .browserslistrc
│ │ │ ├── karma.conf.js
│ │ │ ├── src/
│ │ │ │ ├── app/
│ │ │ │ │ ├── app.component.css
│ │ │ │ │ ├── app.component.html
│ │ │ │ │ ├── app.component.spec.ts
│ │ │ │ │ ├── app.component.ts
│ │ │ │ │ ├── app.config.ts
│ │ │ │ │ ├── app.module.ts
│ │ │ │ │ ├── dummy.component.ts
│ │ │ │ │ ├── ngFor.ts
│ │ │ │ │ ├── ngFor_cmd.ts
│ │ │ │ │ └── simple.ts
│ │ │ │ ├── assets/
│ │ │ │ │ └── .gitkeep
│ │ │ │ ├── environments/
│ │ │ │ │ └── environment.ts
│ │ │ │ ├── index.html
│ │ │ │ ├── main.ts
│ │ │ │ ├── polyfills.ts
│ │ │ │ ├── styles.css
│ │ │ │ └── test.ts
│ │ │ ├── tsconfig.app.json
│ │ │ └── tsconfig.spec.json
│ │ └── lib/
│ │ ├── karma.conf.js
│ │ ├── ng-package.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── lib/
│ │ │ │ ├── base-widget.ts
│ │ │ │ ├── gridstack-item.component.ts
│ │ │ │ ├── gridstack.component.ts
│ │ │ │ ├── gridstack.module.ts
│ │ │ │ └── types.ts
│ │ │ └── test.ts
│ │ ├── tsconfig.lib.json
│ │ ├── tsconfig.lib.prod.json
│ │ └── tsconfig.spec.json
│ ├── tsconfig.doc.json
│ ├── tsconfig.json
│ ├── typedoc.html.json
│ └── typedoc.json
├── demo/
│ ├── anijs.html
│ ├── canvasJS.html
│ ├── cell-height.html
│ ├── column.html
│ ├── css_attributes.html
│ ├── custom-engine.html
│ ├── demo.css
│ ├── esmodule.html
│ ├── events.js
│ ├── float.html
│ ├── index.html
│ ├── knockout.html
│ ├── lazy_load.html
│ ├── locked.html
│ ├── mobile.html
│ ├── nested.html
│ ├── nested_advanced.html
│ ├── nested_constraint.html
│ ├── old_nested-jq.html
│ ├── old_two-jq.html
│ ├── react-hooks-controlled-multiple.html
│ ├── react-hooks.html
│ ├── react.html
│ ├── responsive.html
│ ├── responsive_break.html
│ ├── responsive_none.html
│ ├── right-to-left(rtl).html
│ ├── serialization.html
│ ├── sizeToContent.html
│ ├── static.html
│ ├── title_drag.html
│ ├── transform.html
│ ├── two.html
│ ├── two_vertical.html
│ ├── vue2js.html
│ ├── vue3js.html
│ ├── vue3js_dynamic-modern-renderCB.html
│ ├── vue3js_dynamic-render_grid-item-content.html
│ ├── vue3js_dynamic-render_grid-item.html
│ ├── vue3js_v-for.html
│ ├── web-comp.html
│ ├── web1.html
│ └── web2.html
├── doc/
│ ├── API.md
│ └── CHANGES.md
├── e2e/
│ ├── fixtures/
│ │ └── gridstack-with-height.html
│ └── gridstack-e2e.spec.ts
├── package.json
├── playwright.config.ts
├── protractor.conf.js
├── react/
│ ├── .gitignore
│ ├── README.md
│ ├── eslint.config.js
│ ├── index.html
│ ├── lib/
│ │ ├── grid-stack-context.ts
│ │ ├── grid-stack-provider.tsx
│ │ ├── grid-stack-render-context.ts
│ │ ├── grid-stack-render-provider.test.tsx
│ │ ├── grid-stack-render-provider.tsx
│ │ ├── grid-stack-render.tsx
│ │ ├── grid-stack-widget-context.ts
│ │ └── index.ts
│ ├── package.json
│ ├── src/
│ │ ├── App.tsx
│ │ ├── demo/
│ │ │ ├── demo.css
│ │ │ └── demo.tsx
│ │ ├── main.tsx
│ │ └── vite-env.d.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.app.tsbuildinfo
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ ├── tsconfig.node.tsbuildinfo
│ └── vite.config.ts
├── scripts/
│ ├── generate-docs.js
│ ├── reorder-docs.js
│ └── reorder-html-docs.js
├── spec/
│ ├── dd-base-impl-spec.ts
│ ├── dd-droppable-spec.ts
│ ├── dd-manager-spec.ts
│ ├── dd-simple-integration-spec.ts
│ ├── dd-touch-spec.ts
│ ├── e2e/
│ │ ├── gridstack-html-spec.js
│ │ └── html/
│ │ ├── 1017-items-no-x-y-for-autoPosition.html
│ │ ├── 1102-button-between-grids.html
│ │ ├── 1142_change_event_missing.html
│ │ ├── 1143_nested_acceptWidget_types.html
│ │ ├── 1155-max-row.html
│ │ ├── 1286-load.html
│ │ ├── 1330-1559-left-resize-maxW-and-others.html
│ │ ├── 1419-maxrow1-cant-insert.html
│ │ ├── 141_1534_swap.html
│ │ ├── 141_swap_old.html
│ │ ├── 1471-load-column1.html
│ │ ├── 1511-drag-any-content.html
│ │ ├── 1535-out-of-order.html
│ │ ├── 1545_disable_move_after.html
│ │ ├── 1558-vertical-grids-scroll-too-much.html
│ │ ├── 1570_drag_bottom_max_row.html
│ │ ├── 1571_drop_onto_full.html
│ │ ├── 1572_one_column.html
│ │ ├── 1581_drag_by_header_h5.html
│ │ ├── 1658_enableMove.html
│ │ ├── 1693_load_after.html
│ │ ├── 1704_scroll_bar.html
│ │ ├── 1727_resize_scroll_top.html
│ │ ├── 1785_column_many_switch.html
│ │ ├── 1858_full_grid_overlap.html
│ │ ├── 1924-many.html
│ │ ├── 1985_read_1_column_wrong_12.html
│ │ ├── 2206_load_collision.html
│ │ ├── 2232_dom_auto_placement_mix.html
│ │ ├── 2357_rem.html
│ │ ├── 2384_update_content.html
│ │ ├── 2394_save_sub_item_moved.html
│ │ ├── 2406_inf_loop_autoPosition_column1.html
│ │ ├── 2453 _recreated_trash.html
│ │ ├── 2469_min-height.html
│ │ ├── 2492_load_twice.html
│ │ ├── 2576_insert_column_shift_content.html
│ │ ├── 2633_drop_full_crash.html
│ │ ├── 2639_load_missing_coord.html
│ │ ├── 2677_drag_button.html
│ │ ├── 2729_web_component_drag_esc.html
│ │ ├── 2864_nested_resize_reflow.html
│ │ ├── 2947_load_responsive_list_smaller.html
│ │ ├── 2951_shadow_dom.html
│ │ ├── 810-many-columns.css
│ │ └── 810-many-columns.html
│ ├── gridstack-engine-spec.ts
│ ├── gridstack-spec.ts
│ ├── integration/
│ │ └── gridstack-integration.spec.ts
│ ├── regression-spec.ts
│ ├── test.html
│ └── utils-spec.ts
├── src/
│ ├── dd-base-impl.ts
│ ├── dd-draggable.ts
│ ├── dd-droppable.ts
│ ├── dd-element.ts
│ ├── dd-gridstack.ts
│ ├── dd-manager.ts
│ ├── dd-resizable-handle.ts
│ ├── dd-resizable.ts
│ ├── dd-touch.ts
│ ├── gridstack-engine.ts
│ ├── gridstack.scss
│ ├── gridstack.ts
│ ├── types.ts
│ └── utils.ts
├── tsconfig.build.json
├── tsconfig.docs.json
├── tsconfig.json
├── typedoc.html.json
├── typedoc.json
├── vitest.config.ts
├── vitest.setup.ts
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintignore
================================================
dist/*
demo/*
spec/*
================================================
FILE: .eslintrc.js
================================================
module.exports = {
parser: '@typescript-eslint/parser',
env: {
browser: true,
commonjs: true,
es6: true,
node: true
},
extends: [
'plugin:@typescript-eslint/recommended'
],
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module'
},
rules: {
'indent': ['error', 2],
'max-len': ['error', 180],
'no-trailing-spaces': 1,
'prefer-const': 0,
'@typescript-eslint/ban-ts-comment': 0,
'max-len': 0
}
};
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: [adumesny]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: ['https://www.paypal.me/alaind831', 'https://www.venmo.com/adumesny'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: bug report
title: ''
labels: ''
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-3978nsff6-HDNE_N45DydP36NBSV9JFQ
## Your environment
* version of gridstack.js - DON'T SAY LATEST as that doesn't mean anything a month/year from now.
* which browser/OS
## Steps to reproduce
You **MUST** provide a working demo - keep it simple and avoid frameworks as that could have issues - you can use
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.
================================================
FILE: .github/workflows/deploy-docs.yml
================================================
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: '20'
cache: 'yarn'
- name: Install main dependencies
run: yarn install
- name: Install Angular dependencies
run: |
cd angular
yarn install
- name: Build Angular library
run: yarn build:ng
- name: Build main library
run: |
grunt
webpack
tsc --project tsconfig.docs.json --stripInternal
- name: Generate all documentation
run: yarn doc
- 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
# Debug: Check what was generated
echo "📁 Checking generated documentation..."
echo "Main library HTML docs:"
if [ -d "doc/html" ]; then
echo " ✓ doc/html/ exists"
ls -la doc/html/ | head -10
else
echo " ✗ doc/html/ NOT FOUND"
fi
echo "Angular library HTML docs:"
if [ -d "angular/doc/html" ]; then
echo " ✓ angular/doc/html/ exists"
ls -la angular/doc/html/ | head -10
else
echo " ✗ angular/doc/html/ NOT FOUND"
fi
echo "Angular library Markdown docs (should NOT be deployed):"
if [ -d "angular/doc/api" ]; then
echo " ⚠ angular/doc/api/ exists (will NOT be copied to deployment)"
ls -la angular/doc/api/ | head -10
else
echo " ✓ angular/doc/api/ does not exist"
fi
# Copy main library HTML documentation
if [ -d "doc/html" ]; then
cp -r doc/html/* deploy/doc/html/
echo "✓ Copied main library HTML docs"
else
echo "⚠ Warning: Main library HTML docs not found, skipping..."
fi
# Copy Angular library HTML documentation
if [ -d "angular/doc/html" ]; then
cp -r angular/doc/html/* deploy/angular/doc/html/
echo "✓ Copied Angular library HTML docs"
else
echo "⚠ Warning: Angular library HTML docs not found, skipping..."
fi
# Note: Do NOT copy or create index.html at root
# The gh-pages branch has its own index.html that should be preserved
# The keep_files: true option will preserve existing files on gh-pages
# Ensure .nojekyll exists to prevent Jekyll processing
touch deploy/.nojekyll
# Final verification
echo ""
echo "📦 Deployment structure:"
find deploy -type f -name "*.html" | head -20
- name: Preserve gh-pages root index.html
run: |
# Fetch gh-pages to get existing index.html if we didn't create one
if [ ! -f "deploy/index.html" ]; then
echo "📄 No index.html in deploy, fetching from gh-pages..."
git fetch origin gh-pages:gh-pages 2>/dev/null || true
# Check out just the index.html from gh-pages if it exists
if git show origin/gh-pages:index.html > /dev/null 2>&1; then
git show origin/gh-pages:index.html > deploy/index.html
echo "✓ Preserved existing index.html from gh-pages"
else
echo "ℹ No index.html on gh-pages to preserve"
fi
else
echo "ℹ index.html already in deploy directory, not fetching from gh-pages"
fi
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v4
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./deploy
# Force clean deployment - creates orphan branch to remove ALL old files
force_orphan: true
commit_message: 'Deploy documentation from ${{ github.sha }}'
================================================
FILE: .github/workflows/sync-docs.yml
================================================
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 == 'adumesny/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: |
echo "🔍 Checking for documentation directories on master branch..."
if [ -d "doc/html" ]; then
echo " ✓ doc/html/ exists"
echo "main_docs=true" >> $GITHUB_OUTPUT
else
echo " ✗ doc/html/ NOT FOUND"
echo "main_docs=false" >> $GITHUB_OUTPUT
fi
if [ -d "angular/doc/html" ]; then
echo " ✓ angular/doc/html/ exists"
echo "angular_docs=true" >> $GITHUB_OUTPUT
else
echo " ✗ angular/doc/html/ NOT FOUND"
echo "angular_docs=false" >> $GITHUB_OUTPUT
fi
if [ -d "angular/doc/api" ]; then
echo " ℹ angular/doc/api/ exists (Markdown - will NOT be synced)"
fi
echo ""
echo "Sync decisions:"
echo " Main library HTML: $([ -d 'doc/html' ] && echo 'YES' || echo 'NO')"
echo " Angular library HTML: $([ -d 'angular/doc/html' ] && echo 'YES' || echo 'NO')"
- 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 doc/html directory if it exists
if [ -d "doc/html" ]; then
rm -rf doc/html
fi
# Extract docs from master branch using git archive
mkdir -p doc
git archive master doc/html | tar -xf -
# Add changes
git add doc/html
- name: Sync Angular documentation
if: steps.check-docs.outputs.angular_docs == 'true'
run: |
echo "Syncing Angular library documentation..."
# Remove existing Angular HTML docs if they exist
if [ -d "angular/doc/html" ]; then
rm -rf angular/doc/html
fi
# Extract Angular HTML docs from master branch using git archive
mkdir -p angular/doc
git archive master angular/doc/html | tar -xf -
# Add changes
git add -f angular/doc/html
- 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 (doc/html/)"
fi
if [ "${{ steps.check-docs.outputs.angular_docs }}" == "true" ]; then
COMMIT_MSG="${COMMIT_MSG}%0A%0A- Updated Angular library HTML docs (angular/doc/html/)"
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!"
================================================
FILE: .gitignore
================================================
*.log
*.tgz
*.zip
.npmrc
coverage
dist
dist_save
node_modules
.vscode
.idea/
.DS_Store
doc/html/
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- 10.19.0
dist: trusty
sudo: required
addons:
chrome: stable
#before_install:
#- yarn global add protractor@3.3.0
cache:
directories:
- node_modules
install:
#- yarn global add npm@6.0.1
- yarn global add grunt-cli
#- yarn add selenium-webdriver
- yarn
#- ./node_modules/protractor/bin/webdriver-manager update --standalone
#before_script:
#- export CHROME_BIN=chromium-browser
#- export DISPLAY=:99.0
#- sh -e /etc/init.d/xvfb start
script:
- yarn build
- yarn test
# - grunt e2e-test
notifications:
slack:
secure: iGLGsYyVIyKVpVVCskGh/zc6Pkqe0D7jpUtbywSbnq6l5seE6bvBVqm0F2FSCIN+AIC+qal2mPEWysDVsLACm5tTEeA8NfL8dmCrAKbiFbi+gHl4mnHHCHl7ii/7UkoIIXNc5UXbgMSXRS5l8UcsSDlN8VxC5zWstbJvjeYIvbA=
================================================
FILE: .vitestrc.coverage.ts
================================================
/// <reference types="vitest" />
import { defineConfig } from 'vitest/config'
// Enhanced coverage configuration
export default defineConfig({
test: {
globals: true,
environment: 'jsdom',
setupFiles: ['./vitest.setup.ts'],
include: [
'spec/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
'src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'
],
exclude: [
'**/node_modules/**',
'**/dist/**',
'**/angular/**',
'**/react/**',
'**/demo/**'
],
// Enhanced coverage configuration for detailed reporting
coverage: {
provider: 'v8',
reporter: [
'text',
'text-summary',
'json',
'json-summary',
'html',
'lcov',
'clover',
'cobertura'
],
// Comprehensive exclusion patterns
exclude: [
'coverage/**',
'dist/**',
'node_modules/**',
'demo/**',
'angular/**',
'react/**',
'scripts/**',
'spec/e2e/**',
'**/*.d.ts',
'**/*.config.{js,ts}',
'**/karma.conf.js',
'**/vitest.config.ts',
'**/vitest.setup.ts',
'**/webpack.config.js',
'**/Gruntfile.js',
'**/*.min.js',
'**/test.html'
],
// Include all source files for coverage analysis
all: true,
include: ['src/**/*.{js,ts}'],
// Strict coverage thresholds
thresholds: {
global: {
branches: 85,
functions: 85,
lines: 85,
statements: 85
},
// Per-file thresholds for critical files
'src/gridstack.ts': {
branches: 90,
functions: 90,
lines: 90,
statements: 90
},
'src/gridstack-engine.ts': {
branches: 90,
functions: 90,
lines: 90,
statements: 90
},
'src/utils.ts': {
branches: 85,
functions: 85,
lines: 85,
statements: 85
}
},
// Coverage report directory
reportsDirectory: './coverage',
// Enable branch coverage
reportOnFailure: true,
// Clean coverage directory before each run
clean: true,
// Skip files with no coverage
skipFull: false,
// Enable source map support for accurate line mapping
allowExternal: false,
// Watermarks for coverage coloring
watermarks: {
statements: [50, 80],
functions: [50, 80],
branches: [50, 80],
lines: [50, 80]
}
},
// Enhanced reporter configuration
reporter: [
'verbose',
'html',
'json',
'junit'
],
// Output files for CI/CD integration
outputFile: {
html: './coverage/test-results.html',
json: './coverage/test-results.json',
junit: './coverage/junit-report.xml'
}
}
})
================================================
FILE: Gruntfile.js
================================================
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-copy');
// grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-eslint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-protractor-runner');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-protractor-webdriver');
const sass = require('sass');
grunt.initConfig({
sass: {
options: {
// precision: 3, // doesn't work
implementation: sass,
sourceMap: false
},
dist: {
files: {
'dist/gridstack.css': 'src/gridstack.scss',
}
}
},
cssmin: {
dist: {
options: {
sourceMap: false,
keepSpecialComments: '*'
},
files: {
'dist/gridstack.min.css': ['dist/gridstack.css'],
}
}
},
copy: {
dist: {
files: {
'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'],
}
}
},
// uglify: {
// options: {
// sourceMap: true,
// output: {
// comments: 'some'
// }
// },
// dist: {
// files: {
// }
// }
// },
eslint: {
target: ['*.js', 'src/*.js']
},
watch: {
scripts: {
files: ['src/*.js'],
tasks: ['copy', 'uglify'],
options: {
},
},
styles: {
files: ['src/*.scss'],
tasks: ['sass', 'cssmin'],
options: {
},
}
},
protractor: {
options: {
configFile: 'protractor.conf.js',
},
all: {}
},
connect: {
all: {
options: {
port: 8080,
hostname: 'localhost',
base: '.',
},
},
},
// eslint-disable-next-line @typescript-eslint/camelcase
protractor_webdriver: {
all: {
options: {
command: 'webdriver-manager start',
}
}
}
});
grunt.registerTask('lint', ['eslint']);
grunt.registerTask('default', ['sass', 'cssmin', /*'eslint',*/ 'copy', /*'uglify'*/]);
grunt.registerTask('e2e-test', ['connect', 'protractor_webdriver', 'protractor']);
};
================================================
FILE: LICENSE
================================================
MIT License
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
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: PULL_REQUEST_TEMPLATE.md
================================================
### Description
Please explain the changes you made here. Include an example of what your changes fix or how to use the changes.
### Checklist
- [ ] Created tests which fail without the change (if possible)
- [ ] All tests passing (`yarn test`)
- [ ] Extended the README / documentation, if necessary
================================================
FILE: README.md
================================================
# gridstack.js
[](https://www.npmjs.com/package/gridstack)
[](https://coveralls.io/github/gridstack/gridstack.js?branch=develop)
[](https://www.npmjs.com/package/gridstack)
Mobile-friendly modern Typescript library for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Has multiple bindings and works great with [Angular](https://angular.io/) (included), [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Knockout.js](http://knockoutjs.com), [Ember](https://www.emberjs.com/) and others (see [frameworks](#specific-frameworks) section).
Inspired by no-longer maintained gridster, built with love.
Check http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/).
If you find this lib useful, please donate [PayPal](https://www.paypal.me/alaind831) (use **“send to a friend”** to avoid 3% fee) or [Venmo](https://www.venmo.com/adumesny) (adumesny) and help support it!
[](https://www.paypal.me/alaind831)
[](https://www.venmo.com/adumesny)
Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/gridstackjs/shared_invite/zt-3978nsff6-HDNE_N45DydP36NBSV9JFQ)
<!-- [](https://gridstackjs.slack.com) -->
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
**Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*
- [Demo and API Documentation](#demo-and-api-documentation)
- [Usage](#usage)
- [Install](#install)
- [Include](#include)
- [Basic usage](#basic-usage)
- [Requirements](#requirements)
- [Specific frameworks](#specific-frameworks)
- [Extend Library](#extend-library)
- [Extend Engine](#extend-engine)
- [Change grid columns](#change-grid-columns)
- [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)
- [Migrating to v0.6](#migrating-to-v06)
- [Migrating to v1](#migrating-to-v1)
- [Migrating to v2](#migrating-to-v2)
- [Migrating to v3](#migrating-to-v3)
- [Migrating to v4](#migrating-to-v4)
- [Migrating to v5](#migrating-to-v5)
- [Migrating to v6](#migrating-to-v6)
- [Migrating to v7](#migrating-to-v7)
- [Migrating to v8](#migrating-to-v8)
- [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)
- [The Team](#the-team)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
# Demo and API Documentation
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
## Install
[](https://www.npmjs.com/package/gridstack)
```js
yarn add gridstack
// or
npm install --save gridstack
```
## Include
ES6 or Typescript
```js
import 'gridstack/dist/gridstack.min.css';
import { GridStack } from 'gridstack';
```
Alternatively (single combined file, notice the -all.js) in html
```html
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<script src="node_modules/gridstack/dist/gridstack-all.js"></script>
```
**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
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<script src="node_modules/gridstack/dist/es5/gridstack-poly.js"></script>
<script src="node_modules/gridstack/dist/es5/gridstack-all.js"></script>
```
## Basic usage
creating items dynamically...
```js
// ...in your HTML
<div class="grid-stack"></div>
// ...in your script
var grid = GridStack.init();
grid.addWidget({w: 2, content: 'item 1'});
```
... or creating from list
```js
// using serialize data instead of .addWidget()
const serializedData = [
{x: 0, y: 0, w: 2, h: 2},
{x: 2, y: 3, w: 3, content: 'item 2'},
{x: 1, y: 3}
];
grid.load(serializedData);
```
... or DOM created items
```js
// ...in your HTML
<div class="grid-stack">
<div class="grid-stack-item">
<div class="grid-stack-item-content">Item 1</div>
</div>
<div class="grid-stack-item" gs-w="2">
<div class="grid-stack-item-content">Item 2 wider</div>
</div>
</div>
// ...in your script
GridStack.init();
```
...or see list of all [API and options](https://github.com/gridstack/gridstack.js/tree/master/doc) available.
see [stackblitz sample](https://stackblitz.com/edit/gridstack-demo) as running example too.
## Requirements
GridStack no longer requires external dependencies as of v1 (lodash was removed in v0.5 and jquery API in v1). v3 is a complete HTML5 re-write removing need for jquery. v6 is native mouse and touch event for mobile support, and no longer have jquery-ui version. All you need to include now is `gridstack-all.js` and `gridstack.min.css` (layouts are done using CSS column based %).
## Specific frameworks
search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
- **Angular**: we ship out of the box an Angular wrapper - see <a href="https://github.com/gridstack/gridstack.js/tree/master/angular" target="_blank">Angular Component</a>.
- **Angular9**: [lb-gridstack](https://github.com/pfms84/lb-gridstack) Note: very old v0.3 gridstack instance so recommend for **concept ONLY if you wish to use directive instead**. Code has **not been vented** at as I use components.
- **AngularJS**: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
- **Ember**: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
- **knockout**: see [demo](https://gridstackjs.com/demo/knockout.html) using component, but check [custom bindings ticket](https://github.com/gridstack/gridstack.js/issues/465) which is likely better approach.
- **Rails**: [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails)
- **React**: work in progress to have wrapper code: see <a href="https://github.com/gridstack/gridstack.js/tree/master/react" target="_blank">React Component</a>. But also see [demo](https://gridstackjs.com/demo/react.html) with [src](https://github.com/gridstack/gridstack.js/tree/master/demo/react.html), or [react-gridstack-example](https://github.com/Inder2108/react-gridstack-example/tree/master/src/App.js), or read on what [hooks to use](https://github.com/gridstack/gridstack.js/issues/735#issuecomment-329888796)
- **Vue**: see [demo](https://gridstackjs.com/demo/vue3js.html) with [v3 src](https://github.com/gridstack/gridstack.js/tree/master/demo/vue3js.html) or [v2 src](https://github.com/gridstack/gridstack.js/tree/master/demo/vue2js.html)
- **Aurelia**: [aurelia-gridstack](https://github.com/aurelia-ui-toolkits/aurelia-gridstack), see [demo](https://aurelia-ui-toolkits.github.io/aurelia-gridstack/)
## Extend Library
You can easily extend or patch gridstack with code like this:
```js
// extend gridstack with our own custom method
GridStack.prototype.printCount = function() {
console.log('grid has ' + this.engine.nodes.length + ' items');
};
let grid = GridStack.init();
// you can now call
grid.printCount();
```
## Extend Engine
You can now (5.1+) easily create your own layout engine to further customize your usage. Here is a typescript example
```ts
import { GridStack, GridStackEngine, GridStackNode, GridStackMoveOpts } from 'gridstack';
class CustomEngine extends GridStackEngine {
/** refined this to move the node to the given new location */
public override moveNode(node: GridStackNode, o: GridStackMoveOpts): boolean {
// keep the same original X and Width and let base do it all...
o.x = node.x;
o.w = node.w;
return super.moveNode(node, o);
}
}
GridStack.registerEngine(CustomEngine); // globally set our custom class
```
## Change grid columns
GridStack makes it very easy if you need [1-12] columns out of the box (default is 12), but you always need **2 things** if you need to customize this:
1) Change the `column` grid option when creating a grid to your number N
```js
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
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<link href="node_modules/gridstack/dist/gridstack-extra.min.css" rel="stylesheet"/>
<div class="grid-stack">...</div>
```
Note: class `.grid-stack-N` will automatically be added and we include `gridstack-extra.min.css` which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html) with 6 columns
## 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"]`.
For instance for 4-column grid you need CSS to be:
```css
.gs-4 > .grid-stack-item[gs-x="1"] { left: 25% }
.gs-4 > .grid-stack-item[gs-x="2"] { left: 50% }
.gs-4 > .grid-stack-item[gs-x="3"] { left: 75% }
.gs-4 > .grid-stack-item { width: 25% }
.gs-4 > .grid-stack-item[gs-w="2"] { width: 50% }
.gs-4 > .grid-stack-item[gs-w="3"] { width: 75% }
.gs-4 > .grid-stack-item[gs-w="4"] { width: 100% }
```
Better yet, here is a SCSS code snippet, you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
```scss
$columns: 20;
@function fixed($float) {
@return round($float * 1000) / 1000; // total 2+3 digits being %
}
.gs-#{$columns} > .grid-stack-item {
width: fixed(100% / $columns);
@for $i from 1 through $columns - 1 {
&[gs-x='#{$i}'] { left: fixed((100% / $columns) * $i); }
&[gs-w='#{$i+1}'] { width: fixed((100% / $columns) * ($i+1)); }
}
}
```
you can also use the SCSS [src/gridstack-extra.scss](https://github.com/gridstack/gridstack.js/tree/master/src/gridstack-extra.scss) included in NPM package and modify to add more columns.
Sample gulp command for 30 columns:
```js
gulp.src('node_modules/gridstack/dist/src/gridstack-extra.scss')
.pipe(replace('$start: 2 !default;','$start: 30;'))
.pipe(replace('$end: 11 !default;','$end: 30;'))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(rename({extname: '.min.css'}))
.pipe(gulp.dest('dist/css'))
```
## Override resizable/draggable options
You can override default `resizable`/`draggable` options. For instance to enable other then bottom right resizing handle
you can init gridstack like:
```js
GridStack.init({
resizable: {
handles: 'e,se,s,sw,w'
}
});
```
## Touch devices support
gridstack v6+ now support mobile out of the box, with the addition of native touch event (along with mouse event) for drag&drop and resize.
Older versions (3.2+) required the jq version with added touch punch, but doesn't work well with nested grids.
This option is now the default:
```js
let options = {
alwaysShowResizeHandle: 'mobile' // true if we're on mobile devices
};
GridStack.init(options);
```
See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html).
# Migrating
## Migrating to v0.6
starting in 0.6.x `change` event are no longer sent (for pretty much most nodes!) when an item is just added/deleted unless it also changes other nodes (was incorrect and causing inefficiencies). You may need to track `added|removed` [events](https://github.com/gridstack/gridstack.js/tree/master/doc#events) if you didn't and relied on the old broken behavior.
## Migrating to v1
v1.0.0 removed Jquery from the API and external dependencies, which will require some code changes. Here is a list of the changes:
0. see previous step if not on v0.6 already
1. your code only needs to `import GridStack from 'gridstack'` or include `gridstack.all.js` and `gristack.css` (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, see [jquery app](#jquery-application) section.
2. code change:
**OLD** initializing code + adding a widget + adding an event:
```js
// initialization returned Jquery element, requiring second call to get GridStack var
var grid = $('.grid-stack').gridstack(opts?).data('gridstack');
// returned Jquery element
grid.addWidget($('<div><div class="grid-stack-item-content"> test </div></div>'), undefined, undefined, 2, undefined, true);
// jquery event handler
$('.grid-stack').on('added', function(e, items) {/* items contains info */});
// grid access after init
var grid = $('.grid-stack').data('gridstack');
```
**NEW**
```js
// element identifier defaults to '.grid-stack', returns the grid
// Note: for Typescript use window.GridStack.init() until next native 2.x TS version
var grid = GridStack.init(opts?, element?);
// returns DOM element
grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {width: 2});
// Note: in 3.x it's ever simpler
// grid.addWidget({w:2, content: 'test'})
// event handler
grid.on('added', function(e, items) {/* items contains info */});
// grid access after init
var grid = el.gridstack; // where el = document.querySelector('.grid-stack') or other ways...
```
Other rename changes
```js
`GridStackUI` --> `GridStack`
`GridStackUI.GridStackEngine` --> `GridStack.Engine`
`grid.container` (jquery grid wrapper) --> `grid.el` // (grid DOM element)
`grid.grid` (GridStackEngine) --> `grid.engine`
`grid.setColumn(N)` --> `grid.column(N)` and `grid.column()` // to get value, old API still supported though
```
Recommend looking at the [many samples](./demo) for more code examples.
## Migrating to v2
make sure to read v1 migration first!
v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup to support ES6 modules. Your code might need to change from 1.x
1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set/get are also not function calls so API would have changed). Instead we decided to have <b>all set methods return</b> `GridStack` to they can be chain-able (ex: `grid.float(true).cellHeight(10).column(6)`). Also legacy methods that used to take many parameters will now take a single object (typically `GridStackOptions` or `GridStackWidget`).
```js
`addWidget(el, x, y, width, height)` --> `addWidget(el, {with: 2})`
// Note: in 2.1.x you can now just do addWidget({with: 2, content: "text"})
`float()` --> `getFloat()` // to get value
`cellHeight()` --> `getCellHeight()` // to get value
`verticalMargin` --> `margin` // grid options and API that applies to all 4 sides.
`verticalMargin()` --> `getMargin()` // to get value
```
2. event signatures are generic and not jquery-ui dependent anymore. `gsresizestop` has been removed as `resizestop|dragstop` are now called **after** the DOM attributes have been updated.
3. `oneColumnMode` would trigger when `window.width` < 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid `oneColumnSize` or `disableOneColumnMode`.
**Note:** 2.x no longer support legacy IE11 and older due to using more compact ES6 output and typecsript native code. You will need to stay at 1.x
## Migrating to v3
make sure to read v2 migration first!
v3 has a new HTML5 drag&drop plugging (63k total, all native code), while still allowing you to use the legacy jquery-ui version instead (188k), or a new static grid version (34k, no user drag&drop but full API support). You will need to decide which version to use as `gridstack.all.js` no longer exist (same is now `gridstack-jq.js`) - see [include info](#include).
**NOTE**: HTML5 version is almost on parity with the old jquery-ui based drag&drop. the `containment` (prevent a child from being dragged outside it's parent) and `revert` (not clear what it is for yet) are not yet implemented in initial release of v3.0.0.<br>
Also mobile devices don't support h5 `drag` events (will need to handle `touch`) whereas v3.2 jq version now now supports out of the box (see [v3.2 release](https://github.com/gridstack/gridstack.js/releases/tag/v3.2.0))
Breaking changes:
1. include (as mentioned) need to change
2. `GridStack.update(el, opt)` now takes single `GridStackWidget` options instead of only supporting (x,y,w,h) BUT legacy call in JS will continue working the same for now. That method is a complete re-write and does the right constrain and updates now for all the available params.
3. `locked()`, `move()`, `resize()`, `minWidth()`, `minHeight()`, `maxWidth()`, `maxHeight()` methods are hidden from Typescript (JS can still call for now) as they are just 1 liner wrapper around `update(el, opt)` anyway and will go away soon. (ex: `move(el, x, y)` => `update(el, {x, y})`)
4. item attribute like `data-gs-min-width` is now `gs-min-w`. We removed 'data-' from all attributes, and shorten 'width|height' to just 'w|h' to require less typing and more efficient (2k saved in .js alone!).
5. `GridStackWidget` used in most API `width|height|minWidth|minHeight|maxWidth|maxHeight` are now shorter `w|h|minW|minH|maxW|maxH` as well
## Migrating to v4
make sure to read v3 migration first!
v4 is a complete re-write of the collision and drag in/out heuristics to fix some very long standing request & bugs. It also greatly improved usability. Read the release notes for more detail.
**Unlikely** Breaking Changes (internal usage):
1. `removeTimeout` was removed (feedback over trash will be immediate - actual removal still on mouse up)
2. the following `GridStackEngine` methods changed (used internally, doesn't affect `GridStack` public API)
```js
// moved to 3 methods with new option params to support new code and pixel coverage check
`collision()` -> `collide(), collideAll(), collideCoverage()`
`moveNodeCheck(node, x, y, w, h)` -> `moveNodeCheck(node, opt: GridStackMoveOpts)`
`isNodeChangedPosition(node, x, y, w, h)` -> `changedPosConstrain(node, opt: GridStackMoveOpts)`
`moveNode(node, x, y, w, h, noPack)` -> `moveNode(node, opt: GridStackMoveOpts)`
```
3. removed old obsolete (v0.6-v1 methods/attrs) `getGridHeight()`, `verticalMargin`, `data-gs-current-height`,
`locked()`, `maxWidth()`, `minWidth()`, `maxHeight()`, `minHeight()`, `move()`, `resize()`
## Migrating to v5
make sure to read v4 migration first!
v5 does not have any breaking changes from v4, but a focus on nested grids in h5 mode:
You can now drag in/out of parent into nested child, with new API parameters values. See the release notes.
## Migrating to v6
the API did not really change from v5, but a complete re-write of Drag&Drop to use native `mouseevent` (instead of HTML draggable=true which is buggy on Mac Safari, and doesn't work on mobile devices) and `touchevent` (mobile), and we no longer have jquery ui option (wasn't working well for nested grids, didn't want to maintain legacy lib).
The main difference is you only need to include gridstack.js and get D&D (desktop and mobile) out of the box for the same size as h5 version.
## Migrating to v7
New addition, no API breakage per say. See release notes about creating sub-grids on the fly.
## Migrating to v8
Possible breaking change if you use nested grid JSON format, or original Angular wrapper, or relied on specific CSS paths. Also target is now ES2020 (see release notes).
* `GridStackOptions.subGrid` -> `GridStackOptions.subGridOpts` rename. We now have `GridStackWidget.subGridOpts` vs `GridStackNode.subGrid` (was both types which is error prone)
* `GridStackOptions.addRemoveCB` -> `GridStack.addRemoveCB` is now global instead of grid option
* removed `GridStackOptions.dragInOptions` since `GridStack.setupDragIn()` has it replaced since 4.0
* remove `GridStackOptions.minWidth` obsolete since 5.1, use `oneColumnSize` instead
* CSS rules removed `.grid-stack` prefix for anything already gs based, 12 column (default) now uses `.gs-12`, extra.css is less than 1/4th it original size!, `gs-min|max_w|h` attribute no longer written (but read)
## Migrating to v9
New addition - see release notes about `sizeToContent` feature.
Possible break:
* `GridStack.onParentResize()` is now called `onResize()` as grid now directly track size change, no longer involving parent per say to tell us anything. Note sure why it was public.
## Migrating to v10
we now support much richer responsive behavior with `GridStackOptions.columnOpts` including any breakpoint width:column pairs, or automatic column sizing.
breaking change:
* `disableOneColumnMode`, `oneColumnSize` have been removed (thought we temporary convert if you have them). use `columnOpts: { breakpoints: [{w:768, c:1}] }` for the same behavior.
* 1 column mode switch is no longer by default (`columnOpts` is not defined) as too many new users had issues. Instead set it explicitly (see above).
* `oneColumnModeDomSort` has been removed. Planning to support per column layouts at some future times. TBD
## Migrating to v11
* All instances of `el.innerHTML = 'some content'` have been removed for security reason as it opens up some potential for accidental XSS.
* Side panel drag&drop complete rewrite.
* new lazy loading option
**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: '<div>My html content</div>'});
```
**Potential breaking change:**
* BIG overall to how sidepanel helper drag&drop is done:
1. `clone()` helper is now passed full HTML element dragged, not an event on `grid-stack-item-content` so you can clone or set attr at the top.
2. use any class/structure you want for side panel items (see two.html)
3. `GridStack.setupDragIn()` now support associating a `GridStackWidget` for each sidepanel that will be used to define what to create on drop!
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
```js
import 'gridstack/dist/gridstack.min.css';
import { GridStack } from 'gridstack';
import 'gridstack/dist/jq/gridstack-dd-jqueryui';
```
**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file,
which means you can possibly bring your own version
```js
alias: {
'jquery': 'gridstack/dist/jq/jquery.js',
'jquery-ui': 'gridstack/dist/jq/jquery-ui.js',
'jquery.ui': 'gridstack/dist/jq/jquery-ui.js',
'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js',
},
```
Alternatively (single combined file) in html
```html
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<!-- HTML5 drag&drop (70k) -->
<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
<!-- OR jquery-ui drag&drop (195k) -->
<script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
<!-- OR static grid (40k) -->
<script src="node_modules/gridstack/dist/gridstack-static.js"></script>
```
We have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.13.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`.
**NOTE: in v4, v3**: we ES6 module import jquery & jquery-ui by name, so you need to specify location of those .js files, which means you might be able to bring your own version as well. See the include instructions.
**NOTE: in v1.x** IFF you want to use gridstack-jq instead and your app needs to bring your own JQ version, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).
As for events, you can still use `$(".grid-stack").on(...)` for the version that uses jquery-ui for things we don't support.
# Changes
View our change log [here](https://github.com/gridstack/gridstack.js/tree/master/doc/CHANGES.md).
# Usage Trend
[Usage Trend of gridstack](https://npm-compare.com/gridstack#timeRange=THREE_YEARS)
<a href="https://npm-compare.com/gridstack#timeRange=THREE_YEARS" target="_blank">
<img src="https://npm-compare.com/img/npm-trend/THREE_YEARS/gridstack.png" width="70%" alt="NPM Usage Trend of gridstack" />
</a>
# The Team
gridstack.js is currently maintained by [Alain Dumesny](https://github.com/adumesny), before that [Dylan Weiss](https://github.com/radiolips), originally created by [Pavel Reznikov](https://github.com/troolee). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help.
================================================
FILE: TESTING.md
================================================
# Testing Guide
This project uses **Vitest** as the modern testing framework, replacing the previous Karma + Jasmine setup. Vitest provides faster test execution, better TypeScript support, and enhanced developer experience.
## Quick Start
```bash
# Install dependencies
yarn install
# Run all tests once
yarn test
# Run tests in watch mode (development)
yarn test:watch
# Run tests with coverage
yarn test:coverage
# Open coverage report in browser
yarn test:coverage:html
# Run tests with UI interface
yarn test:ui
```
## Testing Framework
### Vitest Features
- ⚡ **Fast**: Native ESM support and Vite's dev server
- 🔧 **Zero Config**: Works out of the box with TypeScript
- 🎯 **Jest Compatible**: Same API as Jest for easy migration
- 📊 **Built-in Coverage**: V8 coverage with multiple reporters
- 🎨 **UI Interface**: Optional web UI for test debugging
- 🔍 **Watch Mode**: Smart re-running of affected tests
### Key Changes from Karma/Jasmine
- `function() {}` → `() => {}` (arrow functions)
- `jasmine.objectContaining()` → `expect.objectContaining()`
- `toThrowError()` → `toThrow()`
- Global `describe`, `it`, `expect` without imports
## Test Scripts
| Command | Description |
|---------|-------------|
| `yarn test` | Run tests once with linting |
| `yarn test:watch` | Run tests in watch mode |
| `yarn test:ui` | Open Vitest UI in browser |
| `yarn test:coverage` | Run tests with coverage report |
| `yarn test:coverage:ui` | Coverage with UI interface |
| `yarn test:coverage:detailed` | Detailed coverage with thresholds |
| `yarn test:coverage:html` | Generate and open HTML coverage |
| `yarn test:coverage:lcov` | Generate LCOV format for CI |
| `yarn test:ci` | CI-optimized run with JUnit output |
## Coverage Reports
### Coverage Thresholds
- **Global**: 85% minimum for branches, functions, lines, statements
- **Core Files**: 90% minimum for `gridstack.ts` and `gridstack-engine.ts`
- **Utils**: 85% minimum for `utils.ts`
### Coverage Formats
- **HTML**: Interactive browser report at `coverage/index.html`
- **LCOV**: For integration with CI tools and code coverage services
- **JSON**: Machine-readable format for automated processing
- **Text**: Terminal summary output
- **JUnit**: XML format for CI/CD pipelines
### Viewing Coverage
```bash
# Generate and view HTML coverage report
yarn test:coverage:html
# View coverage in terminal
yarn test:coverage
# Generate LCOV for external tools
yarn test:coverage:lcov
```
## Configuration Files
- **`vitest.config.ts`**: Main Vitest configuration
- **`vitest.setup.ts`**: Test environment setup and global mocks
- **`.vitestrc.coverage.ts`**: Enhanced coverage configuration
- **`tsconfig.json`**: TypeScript configuration with Vitest types
## Writing Tests
### Basic Test Structure
```typescript
import { Utils } from '../src/utils';
describe('Utils', () => {
it('should parse boolean values correctly', () => {
expect(Utils.toBool(true)).toBe(true);
expect(Utils.toBool(false)).toBe(false);
expect(Utils.toBool(1)).toBe(true);
expect(Utils.toBool(0)).toBe(false);
});
});
```
### DOM Testing
```typescript
describe('GridStack DOM', () => {
beforeEach(() => {
document.body.innerHTML = '<div class="grid-stack"></div>';
});
it('should create grid element', () => {
const grid = document.querySelector('.grid-stack');
expect(grid).toBeInTheDocument();
});
});
```
### Mocking
```typescript
// Mock a module
vi.mock('../src/utils', () => ({
Utils: {
toBool: vi.fn()
}
}));
// Mock DOM APIs
Object.defineProperty(window, 'ResizeObserver', {
value: vi.fn().mockImplementation(() => ({
observe: vi.fn(),
unobserve: vi.fn(),
disconnect: vi.fn()
}))
});
```
## File Organization
```
spec/
├── utils-spec.ts # Utils module tests
├── gridstack-spec.ts # Main GridStack tests
├── gridstack-engine-spec.ts # Engine logic tests
├── regression-spec.ts # Regression tests
└── e2e/ # End-to-end tests (not in coverage)
```
## CI/CD Integration
### GitHub Actions Example
```yaml
- name: Run Tests
run: yarn test:ci
- name: Upload Coverage
uses: codecov/codecov-action@v3
with:
file: ./coverage/lcov.info
```
### Test Results
- **JUnit XML**: `coverage/junit-report.xml`
- **Coverage LCOV**: `coverage/lcov.info`
- **Coverage JSON**: `coverage/coverage-final.json`
## Debugging Tests
### VS Code Integration
1. Install "Vitest" extension
2. Run tests directly from editor
3. Set breakpoints and debug
### Browser UI
```bash
yarn test:ui
```
Opens a web interface for:
- Running individual tests
- Viewing test results
- Coverage visualization
- Real-time updates
## Performance
### Speed Comparison
- **Karma + Jasmine**: ~15-20 seconds
- **Vitest**: ~3-5 seconds
- **Watch Mode**: Sub-second re-runs
### Optimization Tips
- Use `vi.mock()` for heavy dependencies
- Prefer `toBe()` over `toEqual()` for primitives
- Group related tests in `describe` blocks
- Use `beforeEach`/`afterEach` for setup/cleanup
## Migration Notes
This project was migrated from Karma + Jasmine to Vitest with the following changes:
1. **Dependencies**: Removed karma-\* packages, added vitest + utilities
2. **Configuration**: Replaced `karma.conf.js` with `vitest.config.ts`
3. **Syntax**: Updated test syntax to modern ES6+ style
4. **Coverage**: Enhanced coverage with V8 provider and multiple formats
5. **Scripts**: New npm scripts for various testing workflows
All existing tests were preserved and converted to work with Vitest.
================================================
FILE: angular/.editorconfig
================================================
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false
================================================
FILE: angular/.gitignore
================================================
# See http://help.github.com/ignore-files/ for more about ignoring files.
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
/doc/html/
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
# System files
.DS_Store
Thumbs.db
================================================
FILE: angular/README.md
================================================
# Angular wrapper
The Angular [wrapper component](projects/lib/src/lib/gridstack.component.ts) <gridstack> is a <b>better way to use Gridstack</b>, 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...
I.E. don't use Angular templating to create grid items as that is harder to sync when gridstack will also add/remove items.
MyComponent HTML
```html
<gridstack [options]="gridOptions"></gridstack>
```
MyComponent CSS
```css
@import "gridstack/dist/gridstack.min.css";
.grid-stack {
background: #fafad2;
}
.grid-stack-item-content {
text-align: center;
background-color: #18bc9c;
}
```
Standalone MyComponent Code
```ts
import { GridStackOptions } from 'gridstack';
import { GridstackComponent, GridstackItemComponent } from 'gridstack/dist/angular';
@Component({
imports: [ // SKIP if doing module import instead (next)
GridstackComponent,
GridstackItemComponent
]
...
})
export class MyComponent {
// sample grid options + items to load...
public gridOptions: GridStackOptions = {
margin: 5,
children: [ // or call load(children) or addWidget(children[0]) with same data
{x:0, y:0, minW:2, content:'Item 1'},
{x:1, y:0, content:'Item 2'},
{x:0, y:1, content:'Item 3'},
]
}
}
```
IF doing module import instead of standalone, you will also need this:
```ts
import { GridstackModule } from 'gridstack/dist/angular';
@NgModule({
imports: [GridstackModule, ...]
...
bootstrap: [AppComponent]
})
export class AppModule { }
```
# More Complete example
In this example (build on previous one) will use your actual custom angular components inside each grid item (instead of dummy html content) and have per component saved settings as well (using BaseWidget).
HTML
```html
<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
<div empty-content>message when grid is empty</div>
</gridstack>
```
Code
```ts
import { Component } from '@angular/core';
import { GridStack, GridStackOptions } from 'gridstack';
import { GridstackComponent, gsCreateNgComponents, NgGridStackWidget, nodesCB, BaseWidget } from 'gridstack/dist/angular';
// some custom components
@Component({
selector: 'app-a',
template: 'Comp A {{text}}',
})
export class AComponent extends BaseWidget implements OnDestroy {
@Input() text: string = 'foo'; // test custom input data
public override serialize(): NgCompInputs | undefined { return this.text ? {text: this.text} : undefined; }
ngOnDestroy() {
console.log('Comp A destroyed'); // test to make sure cleanup happens
}
}
@Component({
selector: 'app-b',
template: 'Comp B',
})
export class BComponent extends BaseWidget {
}
// ...in your module (classic), OR your ng19 app.config provideEnvironmentInitializer call this:
constructor() {
// register all our dynamic components types created by the grid
GridstackComponent.addComponentToSelectorType([AComponent, BComponent]) ;
}
// now our content will use Components instead of dummy html content
public gridOptions: NgGridStackOptions = {
margin: 5,
minRow: 1, // make space for empty message
children: [ // or call load()/addWidget() with same data
{x:0, y:0, minW:2, selector:'app-a'},
{x:1, y:0, minW:2, selector:'app-a', input: { text: 'bar' }}, // custom input that works using BaseWidget.deserialize() Object.assign(this, w.input)
{x:2, y:0, selector:'app-b'},
{x:3, y:0, content:'plain html'},
]
}
// called whenever items change size/position/etc.. see other events
public onChange(data: nodesCB) {
console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
}
```
# ngFor with wrapper
For simple case where you control the children creation (gridstack doesn't do create or re-parenting)
HTML
```html
<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
<!-- Angular 17+ -->
@for (n of items; track n.id) {
<gridstack-item [options]="n">Item {{n.id}}</gridstack-item>
}
<!-- Angular 16 -->
<gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n"> Item {{n.id}} </gridstack-item>
</gridstack>
```
Code
```javascript
import { GridStackOptions, GridStackWidget } from 'gridstack';
import { nodesCB } from 'gridstack/dist/angular';
/** sample grid options and items to load... */
public gridOptions: GridStackOptions = { margin: 5 }
public items: GridStackWidget[] = [
{x:0, y:0, minW:2, id:'1'}, // must have unique id used for trackBy
{x:1, y:0, id:'2'},
{x:0, y:1, id:'3'},
];
// called whenever items change size/position/etc..
public onChange(data: nodesCB) {
console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
}
// ngFor unique node id to have correct match between our items used and GS
public identify(index: number, w: GridStackWidget) {
return w.id; // or use index if no id is set and you only modify at the end...
}
```
## Demo
You can see a fuller example at [app.component.ts](projects/demo/src/app/app.component.ts)
to build the demo, go to [angular/projects/demo](projects/demo/) and run `yarn` + `yarn start` and navigate to `http://localhost:4200/`
Code started shipping with v8.1.2+ in `dist/angular` for people to use directly and is an angular module! (source code under `dist/angular/src`)
## Caveats
- This wrapper needs:
- gridstack v8+ to run as it needs the latest changes (use older version that matches GS versions)
- <b>Angular 14+</b> for dynamic `createComponent()` API and Standalone Components (verified against 19+)
NOTE: if you are on Angular 13 or below: copy the wrapper code over (or patch it - see main page example) and change `createComponent()` calls to use old API instead:
NOTE2: now that we're using standalone, you will also need to remove `standalone: true` and `imports` on each component so you will to copy those locally (or use <11.1.2 version)
```ts
protected resolver: ComponentFactoryResolver,
...
const factory = this.resolver.resolveComponentFactory(GridItemComponent);
const gridItemRef = grid.container.createComponent(factory) as ComponentRef<GridItemComponent>;
// ...do the same for widget selector...
```
## ngFor Caveats
- This wrapper handles well ngFor loops, but if you're using a trackBy function (as I would recommend) and no element id change after an update,
you must manually update the `GridstackItemComponent.option` directly - see [modifyNgFor()](./projects/demo/src/app/app.component.ts#L202) example.
- The original client list of items is not updated to match **content** changes made by gridstack (TBD later), but adding new item or removing (as shown in demo) will update those new items. Client could use change/added/removed events to sync that list if they wish to do so.
Would appreciate getting help doing the same for React and Vue (2 other popular frameworks)
-Alain
================================================
FILE: angular/README_build.md
================================================
# GridstackLib
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.10.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
================================================
FILE: angular/angular.json
================================================
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"lib": {
"projectType": "library",
"root": "projects/lib",
"sourceRoot": "projects/lib/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "projects/lib/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/lib/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/lib/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/lib/src/test.ts",
"tsConfig": "projects/lib/tsconfig.spec.json",
"karmaConfig": "projects/lib/karma.conf.js"
}
}
}
},
"demo": {
"projectType": "application",
"schematics": {},
"root": "projects/demo",
"sourceRoot": "projects/demo/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/demo",
"index": "projects/demo/src/index.html",
"main": "projects/demo/src/main.ts",
"polyfills": "projects/demo/src/polyfills.ts",
"tsConfig": "projects/demo/tsconfig.app.json",
"assets": [
"projects/demo/src/favicon.ico",
"projects/demo/src/assets"
],
"styles": [
"node_modules/gridstack/dist/gridstack.min.css",
"projects/demo/src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [{
"replace": "projects/demo/src/environments/environment.ts",
"with": "projects/demo/src/environments/environment.prod.ts"
}],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "demo:build:production"
},
"development": {
"browserTarget": "demo:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "demo:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/demo/src/test.ts",
"polyfills": "projects/demo/src/polyfills.ts",
"tsConfig": "projects/demo/tsconfig.spec.json",
"karmaConfig": "projects/demo/karma.conf.js",
"assets": [
"projects/demo/src/favicon.ico",
"projects/demo/src/assets"
],
"styles": [
"node_modules/gridstack/dist/gridstack.min.css",
"projects/demo/src/styles.css"
],
"scripts": []
}
}
}
}
},
"cli": {
"analytics": false
}
}
================================================
FILE: angular/doc/api/base-widget.md
================================================
# 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 |
| ------ | ------ | ------ | ------ | ------ |
| <a id="widgetitem"></a> `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) |
================================================
FILE: angular/doc/api/gridstack-item.component.md
================================================
# 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
<gridstack>
<gridstack-item [options]="{x: 0, y: 0, w: 2, h: 1}">
<my-widget-component></my-widget-component>
</gridstack-item>
</gridstack>
```
#### 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 |
| ------ | ------ | ------ | ------ | ------ |
| <a id="container"></a> `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) |
| <a id="ref"></a> `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) |
| <a id="childwidget"></a> `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) |
| <a id="_options"></a> `_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) |
| <a id="elementref"></a> `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<K>(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<K>(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<K>(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<E>(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<Element>;
```
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<K>(qualifiedName): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
```
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<K>(qualifiedName): HTMLCollectionOf<SVGElementTagNameMap[K]>;
```
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<K>(qualifiedName): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
```
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<K>(qualifiedName): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
```
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<Element>;
```
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<HTMLElement>;
```
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<SVGElement>;
```
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<MathMLElement>;
```
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<Element>;
```
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<void>;
```
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<K>(
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<K>(
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<T>(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<T>(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<T>(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<T>(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<K>(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<K>(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<K>(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<K>(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<E>(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<K>(selectors): NodeListOf<HTMLElementTagNameMap[K]>;
```
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<K>(selectors): NodeListOf<SVGElementTagNameMap[K]>;
```
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<K>(selectors): NodeListOf<MathMLElementTagNameMap[K]>;
```
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<K>(selectors): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
```
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<E>(selectors): NodeListOf<E>;
```
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 |
| ------ | ------ | ------ | ------ | ------ | ------ |
| <a id="_griditemcomp"></a> `_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) |
| <a id="ariaatomic"></a> `ariaAtomic` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaAtomic` | node\_modules/typescript/lib/lib.dom.d.ts:2020 |
| <a id="ariaautocomplete"></a> `ariaAutoComplete` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaAutoComplete` | node\_modules/typescript/lib/lib.dom.d.ts:2021 |
| <a id="ariabusy"></a> `ariaBusy` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaBusy` | node\_modules/typescript/lib/lib.dom.d.ts:2022 |
| <a id="ariachecked"></a> `ariaChecked` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaChecked` | node\_modules/typescript/lib/lib.dom.d.ts:2023 |
| <a id="ariacolcount"></a> `ariaColCount` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaColCount` | node\_modules/typescript/lib/lib.dom.d.ts:2024 |
| <a id="ariacolindex"></a> `ariaColIndex` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaColIndex` | node\_modules/typescript/lib/lib.dom.d.ts:2025 |
| <a id="ariacolspan"></a> `ariaColSpan` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaColSpan` | node\_modules/typescript/lib/lib.dom.d.ts:2026 |
| <a id="ariacurrent"></a> `ariaCurrent` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaCurrent` | node\_modules/typescript/lib/lib.dom.d.ts:2027 |
| <a id="ariadisabled"></a> `ariaDisabled` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaDisabled` | node\_modules/typescript/lib/lib.dom.d.ts:2028 |
| <a id="ariaexpanded"></a> `ariaExpanded` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaExpanded` | node\_modules/typescript/lib/lib.dom.d.ts:2029 |
| <a id="ariahaspopup"></a> `ariaHasPopup` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaHasPopup` | node\_modules/typescript/lib/lib.dom.d.ts:2030 |
| <a id="ariahidden"></a> `ariaHidden` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaHidden` | node\_modules/typescript/lib/lib.dom.d.ts:2031 |
| <a id="ariainvalid"></a> `ariaInvalid` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaInvalid` | node\_modules/typescript/lib/lib.dom.d.ts:2032 |
| <a id="ariakeyshortcuts"></a> `ariaKeyShortcuts` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaKeyShortcuts` | node\_modules/typescript/lib/lib.dom.d.ts:2033 |
| <a id="arialabel"></a> `ariaLabel` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaLabel` | node\_modules/typescript/lib/lib.dom.d.ts:2034 |
| <a id="arialevel"></a> `ariaLevel` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaLevel` | node\_modules/typescript/lib/lib.dom.d.ts:2035 |
| <a id="arialive"></a> `ariaLive` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaLive` | node\_modules/typescript/lib/lib.dom.d.ts:2036 |
| <a id="ariamodal"></a> `ariaModal` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaModal` | node\_modules/typescript/lib/lib.dom.d.ts:2037 |
| <a id="ariamultiline"></a> `ariaMultiLine` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaMultiLine` | node\_modules/typescript/lib/lib.dom.d.ts:2038 |
| <a id="ariamultiselectable"></a> `ariaMultiSelectable` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaMultiSelectable` | node\_modules/typescript/lib/lib.dom.d.ts:2039 |
| <a id="ariaorientation"></a> `ariaOrientation` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaOrientation` | node\_modules/typescript/lib/lib.dom.d.ts:2040 |
| <a id="ariaplaceholder"></a> `ariaPlaceholder` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaPlaceholder` | node\_modules/typescript/lib/lib.dom.d.ts:2041 |
| <a id="ariaposinset"></a> `ariaPosInSet` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaPosInSet` | node\_modules/typescript/lib/lib.dom.d.ts:2042 |
| <a id="ariapressed"></a> `ariaPressed` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaPressed` | node\_modules/typescript/lib/lib.dom.d.ts:2043 |
| <a id="ariareadonly"></a> `ariaReadOnly` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaReadOnly` | node\_modules/typescript/lib/lib.dom.d.ts:2044 |
| <a id="ariarequired"></a> `ariaRequired` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaRequired` | node\_modules/typescript/lib/lib.dom.d.ts:2045 |
| <a id="ariaroledescription"></a> `ariaRoleDescription` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaRoleDescription` | node\_modules/typescript/lib/lib.dom.d.ts:2046 |
| <a id="ariarowcount"></a> `ariaRowCount` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaRowCount` | node\_modules/typescript/lib/lib.dom.d.ts:2047 |
| <a id="ariarowindex"></a> `ariaRowIndex` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaRowIndex` | node\_modules/typescript/lib/lib.dom.d.ts:2048 |
| <a id="ariarowspan"></a> `ariaRowSpan` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaRowSpan` | node\_modules/typescript/lib/lib.dom.d.ts:2049 |
| <a id="ariaselected"></a> `ariaSelected` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaSelected` | node\_modules/typescript/lib/lib.dom.d.ts:2050 |
| <a id="ariasetsize"></a> `ariaSetSize` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaSetSize` | node\_modules/typescript/lib/lib.dom.d.ts:2051 |
| <a id="ariasort"></a> `ariaSort` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaSort` | node\_modules/typescript/lib/lib.dom.d.ts:2052 |
| <a id="ariavaluemax"></a> `ariaValueMax` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaValueMax` | node\_modules/typescript/lib/lib.dom.d.ts:2053 |
| <a id="ariavaluemin"></a> `ariaValueMin` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaValueMin` | node\_modules/typescript/lib/lib.dom.d.ts:2054 |
| <a id="ariavaluenow"></a> `ariaValueNow` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaValueNow` | node\_modules/typescript/lib/lib.dom.d.ts:2055 |
| <a id="ariavaluetext"></a> `ariaValueText` | `public` | `null` \| `string` | - | `GridItemHTMLElement.ariaValueText` | node\_modules/typescript/lib/lib.dom.d.ts:2056 |
| <a id="role"></a> `role` | `public` | `null` \| `string` | - | `GridItemHTMLElement.role` | node\_modules/typescript/lib/lib.dom.d.ts:2057 |
| <a id="attributes"></a> `attributes` | `readonly` | `NamedNodeMap` | - | `GridItemHTMLElement.attributes` | node\_modules/typescript/lib/lib.dom.d.ts:5041 |
| <a id="classlist"></a> `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 |
| <a id="classname"></a> `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 |
| <a id="clientheight"></a> `clientHeight` | `readonly` | `number` | - | `GridItemHTMLElement.clientHeight` | node\_modules/typescript/lib/lib.dom.d.ts:5046 |
| <a id="clientleft"></a> `clientLeft` | `readonly` | `number` | - | `GridItemHTMLElement.clientLeft` | node\_modules/typescript/lib/lib.dom.d.ts:5047 |
| <a id="clienttop"></a> `clientTop` | `readonly` | `number` | - | `GridItemHTMLElement.clientTop` | node\_modules/typescript/lib/lib.dom.d.ts:5048 |
| <a id="clientwidth"></a> `clientWidth` | `readonly` | `number` | - | `GridItemHTMLElement.clientWidth` | node\_modules/typescript/lib/lib.dom.d.ts:5049 |
| <a id="id"></a> `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 |
| <a id="localname"></a> `localName` | `readonly` | `string` | Returns the local name. | `GridItemHTMLElement.localName` | node\_modules/typescript/lib/lib.dom.d.ts:5053 |
| <a id="namespaceuri"></a> `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 |
| <a id="onfullscreenchange"></a> `onfullscreenchange` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onfullscreenchange` | node\_modules/typescript/lib/lib.dom.d.ts:5056 |
| <a id="onfullscreenerror"></a> `onfullscreenerror` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onfullscreenerror` | node\_modules/typescript/lib/lib.dom.d.ts:5057 |
| <a id="outerhtml"></a> `outerHTML` | `public` | `string` | - | `GridItemHTMLElement.outerHTML` | node\_modules/typescript/lib/lib.dom.d.ts:5058 |
| <a id="ownerdocument"></a> `ownerDocument` | `readonly` | `Document` | Returns the node document. Returns null for documents. | `GridItemHTMLElement.ownerDocument` | node\_modules/typescript/lib/lib.dom.d.ts:5059 |
| <a id="part"></a> `part` | `readonly` | `DOMTokenList` | - | `GridItemHTMLElement.part` | node\_modules/typescript/lib/lib.dom.d.ts:5060 |
| <a id="prefix"></a> `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 |
| <a id="scrollheight"></a> `scrollHeight` | `readonly` | `number` | - | `GridItemHTMLElement.scrollHeight` | node\_modules/typescript/lib/lib.dom.d.ts:5063 |
| <a id="scrollleft"></a> `scrollLeft` | `public` | `number` | - | `GridItemHTMLElement.scrollLeft` | node\_modules/typescript/lib/lib.dom.d.ts:5064 |
| <a id="scrolltop"></a> `scrollTop` | `public` | `number` | - | `GridItemHTMLElement.scrollTop` | node\_modules/typescript/lib/lib.dom.d.ts:5065 |
| <a id="scrollwidth"></a> `scrollWidth` | `readonly` | `number` | - | `GridItemHTMLElement.scrollWidth` | node\_modules/typescript/lib/lib.dom.d.ts:5066 |
| <a id="shadowroot"></a> `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 |
| <a id="slot"></a> `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 |
| <a id="tagname"></a> `tagName` | `readonly` | `string` | Returns the HTML-uppercased qualified name. | `GridItemHTMLElement.tagName` | node\_modules/typescript/lib/lib.dom.d.ts:5072 |
| <a id="style"></a> `style` | `readonly` | `CSSStyleDeclaration` | - | `GridItemHTMLElement.style` | node\_modules/typescript/lib/lib.dom.d.ts:5162 |
| <a id="contenteditable"></a> `contentEditable` | `public` | `string` | - | `GridItemHTMLElement.contentEditable` | node\_modules/typescript/lib/lib.dom.d.ts:5166 |
| <a id="enterkeyhint"></a> `enterKeyHint` | `public` | `string` | - | `GridItemHTMLElement.enterKeyHint` | node\_modules/typescript/lib/lib.dom.d.ts:5167 |
| <a id="inputmode"></a> `inputMode` | `public` | `string` | - | `GridItemHTMLElement.inputMode` | node\_modules/typescript/lib/lib.dom.d.ts:5168 |
| <a id="iscontenteditable"></a> `isContentEditable` | `readonly` | `boolean` | - | `GridItemHTMLElement.isContentEditable` | node\_modules/typescript/lib/lib.dom.d.ts:5169 |
| <a id="onabort"></a> `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 |
| <a id="onanimationcancel"></a> `onanimationcancel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onanimationcancel` | node\_modules/typescript/lib/lib.dom.d.ts:5857 |
| <a id="onanimationend"></a> `onanimationend` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onanimationend` | node\_modules/typescript/lib/lib.dom.d.ts:5858 |
| <a id="onanimationiteration"></a> `onanimationiteration` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onanimationiteration` | node\_modules/typescript/lib/lib.dom.d.ts:5859 |
| <a id="onanimationstart"></a> `onanimationstart` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onanimationstart` | node\_modules/typescript/lib/lib.dom.d.ts:5860 |
| <a id="onauxclick"></a> `onauxclick` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onauxclick` | node\_modules/typescript/lib/lib.dom.d.ts:5861 |
| <a id="onbeforeinput"></a> `onbeforeinput` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onbeforeinput` | node\_modules/typescript/lib/lib.dom.d.ts:5862 |
| <a id="onblur"></a> `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 |
| <a id="oncancel"></a> `oncancel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oncancel` | node\_modules/typescript/lib/lib.dom.d.ts:5868 |
| <a id="oncanplay"></a> `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 |
| <a id="oncanplaythrough"></a> `oncanplaythrough` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oncanplaythrough` | node\_modules/typescript/lib/lib.dom.d.ts:5874 |
| <a id="onchange"></a> `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 |
| <a id="onclick"></a> `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 |
| <a id="onclose"></a> `onclose` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onclose` | node\_modules/typescript/lib/lib.dom.d.ts:5885 |
| <a id="oncontextmenu"></a> `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 |
| <a id="oncopy"></a> `oncopy` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oncopy` | node\_modules/typescript/lib/lib.dom.d.ts:5891 |
| <a id="oncuechange"></a> `oncuechange` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oncuechange` | node\_modules/typescript/lib/lib.dom.d.ts:5892 |
| <a id="oncut"></a> `oncut` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oncut` | node\_modules/typescript/lib/lib.dom.d.ts:5893 |
| <a id="ondblclick"></a> `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 |
| <a id="ondrag"></a> `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 |
| <a id="ondragend"></a> `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 |
| <a id="ondragenter"></a> `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 |
| <a id="ondragleave"></a> `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 |
| <a id="ondragover"></a> `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 |
| <a id="ondragstart"></a> `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 |
| <a id="ondrop"></a> `ondrop` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ondrop` | node\_modules/typescript/lib/lib.dom.d.ts:5929 |
| <a id="ondurationchange"></a> `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 |
| <a id="onemptied"></a> `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 |
| <a id="onended"></a> `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 |
| <a id="onerror"></a> `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 |
| <a id="onfocus"></a> `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 |
| <a id="onformdata"></a> `onformdata` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onformdata` | node\_modules/typescript/lib/lib.dom.d.ts:5955 |
| <a id="ongotpointercapture"></a> `ongotpointercapture` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ongotpointercapture` | node\_modules/typescript/lib/lib.dom.d.ts:5956 |
| <a id="oninput"></a> `oninput` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oninput` | node\_modules/typescript/lib/lib.dom.d.ts:5957 |
| <a id="oninvalid"></a> `oninvalid` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.oninvalid` | node\_modules/typescript/lib/lib.dom.d.ts:5958 |
| <a id="onkeydown"></a> `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 |
| <a id="onkeypress"></a> ~~`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 |
| <a id="onkeyup"></a> `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 |
| <a id="onload"></a> `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 |
| <a id="onloadeddata"></a> `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 |
| <a id="onloadedmetadata"></a> `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 |
| <a id="onloadstart"></a> `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 |
| <a id="onlostpointercapture"></a> `onlostpointercapture` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onlostpointercapture` | node\_modules/typescript/lib/lib.dom.d.ts:5995 |
| <a id="onmousedown"></a> `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 |
| <a id="onmouseenter"></a> `onmouseenter` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onmouseenter` | node\_modules/typescript/lib/lib.dom.d.ts:6001 |
| <a id="onmouseleave"></a> `onmouseleave` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onmouseleave` | node\_modules/typescript/lib/lib.dom.d.ts:6002 |
| <a id="onmousemove"></a> `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 |
| <a id="onmouseout"></a> `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 |
| <a id="onmouseover"></a> `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 |
| <a id="onmouseup"></a> `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 |
| <a id="onpaste"></a> `onpaste` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpaste` | node\_modules/typescript/lib/lib.dom.d.ts:6023 |
| <a id="onpause"></a> `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 |
| <a id="onplay"></a> `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 |
| <a id="onplaying"></a> `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 |
| <a id="onpointercancel"></a> `onpointercancel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointercancel` | node\_modules/typescript/lib/lib.dom.d.ts:6039 |
| <a id="onpointerdown"></a> `onpointerdown` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointerdown` | node\_modules/typescript/lib/lib.dom.d.ts:6040 |
| <a id="onpointerenter"></a> `onpointerenter` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointerenter` | node\_modules/typescript/lib/lib.dom.d.ts:6041 |
| <a id="onpointerleave"></a> `onpointerleave` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointerleave` | node\_modules/typescript/lib/lib.dom.d.ts:6042 |
| <a id="onpointermove"></a> `onpointermove` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointermove` | node\_modules/typescript/lib/lib.dom.d.ts:6043 |
| <a id="onpointerout"></a> `onpointerout` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointerout` | node\_modules/typescript/lib/lib.dom.d.ts:6044 |
| <a id="onpointerover"></a> `onpointerover` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointerover` | node\_modules/typescript/lib/lib.dom.d.ts:6045 |
| <a id="onpointerup"></a> `onpointerup` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onpointerup` | node\_modules/typescript/lib/lib.dom.d.ts:6046 |
| <a id="onprogress"></a> `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 |
| <a id="onratechange"></a> `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 |
| <a id="onreset"></a> `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 |
| <a id="onresize"></a> `onresize` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onresize` | node\_modules/typescript/lib/lib.dom.d.ts:6062 |
| <a id="onscroll"></a> `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 |
| <a id="onsecuritypolicyviolation"></a> `onsecuritypolicyviolation` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onsecuritypolicyviolation` | node\_modules/typescript/lib/lib.dom.d.ts:6068 |
| <a id="onseeked"></a> `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 |
| <a id="onseeking"></a> `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 |
| <a id="onselect"></a> `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 |
| <a id="onselectionchange"></a> `onselectionchange` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onselectionchange` | node\_modules/typescript/lib/lib.dom.d.ts:6084 |
| <a id="onselectstart"></a> `onselectstart` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onselectstart` | node\_modules/typescript/lib/lib.dom.d.ts:6085 |
| <a id="onslotchange"></a> `onslotchange` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onslotchange` | node\_modules/typescript/lib/lib.dom.d.ts:6086 |
| <a id="onstalled"></a> `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 |
| <a id="onsubmit"></a> `onsubmit` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onsubmit` | node\_modules/typescript/lib/lib.dom.d.ts:6092 |
| <a id="onsuspend"></a> `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 |
| <a id="ontimeupdate"></a> `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 |
| <a id="ontoggle"></a> `ontoggle` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontoggle` | node\_modules/typescript/lib/lib.dom.d.ts:6103 |
| <a id="ontouchcancel"></a> `ontouchcancel?` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontouchcancel` | node\_modules/typescript/lib/lib.dom.d.ts:6104 |
| <a id="ontouchend"></a> `ontouchend?` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontouchend` | node\_modules/typescript/lib/lib.dom.d.ts:6105 |
| <a id="ontouchmove"></a> `ontouchmove?` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontouchmove` | node\_modules/typescript/lib/lib.dom.d.ts:6106 |
| <a id="ontouchstart"></a> `ontouchstart?` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontouchstart` | node\_modules/typescript/lib/lib.dom.d.ts:6107 |
| <a id="ontransitioncancel"></a> `ontransitioncancel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontransitioncancel` | node\_modules/typescript/lib/lib.dom.d.ts:6108 |
| <a id="ontransitionend"></a> `ontransitionend` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontransitionend` | node\_modules/typescript/lib/lib.dom.d.ts:6109 |
| <a id="ontransitionrun"></a> `ontransitionrun` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontransitionrun` | node\_modules/typescript/lib/lib.dom.d.ts:6110 |
| <a id="ontransitionstart"></a> `ontransitionstart` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.ontransitionstart` | node\_modules/typescript/lib/lib.dom.d.ts:6111 |
| <a id="onvolumechange"></a> `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 |
| <a id="onwaiting"></a> `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 |
| <a id="onwebkitanimationend"></a> ~~`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 |
| <a id="onwebkitanimationiteration"></a> ~~`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 |
| <a id="onwebkitanimationstart"></a> ~~`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 |
| <a id="onwebkittransitionend"></a> ~~`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 |
| <a id="onwheel"></a> `onwheel` | `public` | `null` \| (`this`, `ev`) => `any` | - | `GridItemHTMLElement.onwheel` | node\_modules/typescript/lib/lib.dom.d.ts:6130 |
| <a id="accesskey"></a> `accessKey` | `public` | `string` | - | `GridItemHTMLElement.accessKey` | node\_modules/typescript/lib/lib.dom.d.ts:6555 |
| <a id="accesskeylabel"></a> `accessKeyLabel` | `readonly` | `string` | - | `GridItemHTMLElement.accessKeyLabel` | node\_modules/typescript/lib/lib.dom.d.ts:6556 |
| <a id="autocapitalize"></a> `autocapitalize` | `public` | `string` | - | `GridItemHTMLElement.autocapitalize` | node\_modules/typescript/lib/lib.dom.d.ts:6557 |
| <a id="dir"></a> `dir` | `public` | `string` | - | `GridItemHTMLElement.dir` | node\_modules/typescript/lib/lib.dom.d.ts:6558 |
| <a id="draggable"></a> `draggable` | `public` | `boolean` | - | `GridItemHTMLElement.draggable` | node\_modules/typescript/lib/lib.dom.d.ts:6559 |
| <a id="hidden"></a> `hidden` | `public` | `boolean` | - | `GridItemHTMLElement.hidden` | node\_modules/typescript/lib/lib.dom.d.ts:6560 |
| <a id="inert"></a> `inert` | `public` | `boolean` | - | `GridItemHTMLElement.inert` | node\_modules/typescript/lib/lib.dom.d.ts:6561 |
| <a id="innertext"></a> `innerText` | `public` | `string` | - | `GridItemHTMLElement.innerText` | node\_modules/typescript/lib/lib.dom.d.ts:6562 |
| <a id="lang"></a> `lang` | `public` | `string` | - | `GridItemHTMLElement.lang` | node\_modules/typescript/lib/lib.dom.d.ts:6563 |
| <a id="offsetheight"></a> `offsetHeight` | `readonly` | `number` | - | `GridItemHTMLElement.offsetHeight` | node\_modules/typescript/lib/lib.dom.d.ts:6564 |
| <a id="offsetleft"></a> `offsetLeft` | `readonly` | `number` | - | `GridItemHTMLElement.offsetLeft` | node\_modules/typescript/lib/lib.dom.d.ts:6565 |
| <a id="offsetparent"></a> `offsetParent` | `readonly` | `null` \| `Element` | - | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`offsetParent`](gridstack.component.md#offsetparent) | node\_modules/typescript/lib/lib.dom.d.ts:6566 |
| <a id="offsettop"></a> `offsetTop` | `readonly` | `number` | - | `GridItemHTMLElement.offsetTop` | node\_modules/typescript/lib/lib.dom.d.ts:6567 |
| <a id="offsetwidth"></a> `offsetWidth` | `readonly` | `number` | - | `GridItemHTMLElement.offsetWidth` | node\_modules/typescript/lib/lib.dom.d.ts:6568 |
| <a id="outertext"></a> `outerText` | `public` | `string` | - | `GridItemHTMLElement.outerText` | node\_modules/typescript/lib/lib.dom.d.ts:6569 |
| <a id="spellcheck"></a> `spellcheck` | `public` | `boolean` | - | `GridItemHTMLElement.spellcheck` | node\_modules/typescript/lib/lib.dom.d.ts:6570 |
| <a id="title"></a> `title` | `public` | `string` | - | `GridItemHTMLElement.title` | node\_modules/typescript/lib/lib.dom.d.ts:6571 |
| <a id="translate"></a> `translate` | `public` | `boolean` | - | `GridItemHTMLElement.translate` | node\_modules/typescript/lib/lib.dom.d.ts:6572 |
| <a id="autofocus"></a> `autofocus` | `public` | `boolean` | - | `GridItemHTMLElement.autofocus` | node\_modules/typescript/lib/lib.dom.d.ts:7764 |
| <a id="dataset"></a> `dataset` | `readonly` | `DOMStringMap` | - | `GridItemHTMLElement.dataset` | node\_modules/typescript/lib/lib.dom.d.ts:7765 |
| <a id="nonce"></a> `nonce?` | `public` | `string` | - | `GridItemHTMLElement.nonce` | node\_modules/typescript/lib/lib.dom.d.ts:7766 |
| <a id="tabindex"></a> `tabIndex` | `public` | `number` | - | `GridItemHTMLElement.tabIndex` | node\_modules/typescript/lib/lib.dom.d.ts:7767 |
| <a id="innerhtml"></a> `innerHTML` | `public` | `string` | - | `GridItemHTMLElement.innerHTML` | node\_modules/typescript/lib/lib.dom.d.ts:9130 |
| <a id="baseuri"></a> `baseURI` | `readonly` | `string` | Returns node's node document's document base URL. | `GridItemHTMLElement.baseURI` | node\_modules/typescript/lib/lib.dom.d.ts:10249 |
| <a id="childnodes"></a> `childNodes` | `readonly` | `NodeListOf`\<`ChildNode`\> | Returns the children. | `GridItemHTMLElement.childNodes` | node\_modules/typescript/lib/lib.dom.d.ts:10251 |
| <a id="firstchild"></a> `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 |
| <a id="isconnected"></a> `isConnected` | `readonly` | `boolean` | Returns true if node is connected and false otherwise. | `GridItemHTMLElement.isConnected` | node\_modules/typescript/lib/lib.dom.d.ts:10255 |
| <a id="lastchild"></a> `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 |
| <a id="nextsibling"></a> `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 |
| <a id="nodename"></a> `nodeName` | `readonly` | `string` | Returns a string appropriate for the type of node. | `GridItemHTMLElement.nodeName` | node\_modules/typescript/lib/lib.dom.d.ts:10261 |
| <a id="nodetype"></a> `nodeType` | `readonly` | `number` | Returns the type of node. | `GridItemHTMLElement.nodeType` | node\_modules/typescript/lib/lib.dom.d.ts:10263 |
| <a id="nodevalue"></a> `nodeValue` | `public` | `null` \| `string` | - | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`nodeValue`](gridstack.component.md#nodevalue) | node\_modules/typescript/lib/lib.dom.d.ts:10264 |
| <a id="parentelement"></a> `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 |
| <a id="parentnode"></a> `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 |
| <a id="previoussibling"></a> `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 |
| <a id="textcontent"></a> `textContent` | `public` | `null` \| `string` | - | [`GridCompHTMLElement`](gridstack.component.md#gridcomphtmlelement).[`textContent`](gridstack.component.md#textcontent) | node\_modules/typescript/lib/lib.dom.d.ts:10273 |
| <a id="element_node"></a> `ELEMENT_NODE` | `readonly` | `1` | node is an element. | `GridItemHTMLElement.ELEMENT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10297 |
| <a id="attribute_node"></a> `ATTRIBUTE_NODE` | `readonly` | `2` | - | `GridItemHTMLElement.ATTRIBUTE_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10298 |
| <a id="text_node"></a> `TEXT_NODE` | `readonly` | `3` | node is a Text node. | `GridItemHTMLElement.TEXT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10300 |
| <a id="cdata_section_node"></a> `CDATA_SECTION_NODE` | `readonly` | `4` | node is a CDATASection node. | `GridItemHTMLElement.CDATA_SECTION_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10302 |
| <a id="entity_reference_node"></a> `ENTITY_REFERENCE_NODE` | `readonly` | `5` | - | `GridItemHTMLElement.ENTITY_REFERENCE_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10303 |
| <a id="entity_node"></a> `ENTITY_NODE` | `readonly` | `6` | - | `GridItemHTMLElement.ENTITY_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10304 |
| <a id="processing_instruction_node"></a> `PROCESSING_INSTRUCTION_NODE` | `readonly` | `7` | node is a ProcessingInstruction node. | `GridItemHTMLElement.PROCESSING_INSTRUCTION_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10306 |
| <a id="comment_node"></a> `COMMENT_NODE` | `readonly` | `8` | node is a Comment node. | `GridItemHTMLElement.COMMENT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10308 |
| <a id="document_node"></a> `DOCUMENT_NODE` | `readonly` | `9` | node is a document. | `GridItemHTMLElement.DOCUMENT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10310 |
| <a id="document_type_node"></a> `DOCUMENT_TYPE_NODE` | `readonly` | `10` | node is a doctype. | `GridItemHTMLElement.DOCUMENT_TYPE_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10312 |
| <a id="document_fragment_node"></a> `DOCUMENT_FRAGMENT_NODE` | `readonly` | `11` | node is a DocumentFragment node. | `GridItemHTMLElement.DOCUMENT_FRAGMENT_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10314 |
| <a id="notation_node"></a> `NOTATION_NODE` | `readonly` | `12` | - | `GridItemHTMLElement.NOTATION_NODE` | node\_modules/typescript/lib/lib.dom.d.ts:10315 |
| <a id="document_position_disconnected"></a> `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 |
| <a id="document_position_preceding"></a> `DOCUMENT_POSITION_PRECEDING` | `readonly` | `2` | Set when other is preceding node. | `GridItemHTMLElement.DOCUMENT_POSITION_PRECEDING` | node\_modules/typescript/lib/lib.dom.d.ts:10319 |
| <a id="document_position_following"></a> `DOCUMENT_POSITION_FOLLOWING` | `readonly` | `4` | Set when other is following node. | `GridItemHTMLElement.DOCUMENT_POSITION_FOLLOWING` | node\_modules/typescript/lib/lib.dom.d.ts:10321 |
| <a id="document_position_contains"></a> `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 |
| <a id="document_position_contained_by"></a> `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 |
| <a id="document_position_implementation_specific"></a> `DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | `readonly` | `32` | - | `GridItemHTMLElement.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | node\_modules/typescript/lib/lib.dom.d.ts:10326 |
| <a id="nextelementsibling"></a> `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 |
| <a id="previouselementsibling"></a> `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 |
| <a id="childelementcount"></a> `childElementCount` | `readonly` | `number` | - | `GridItemHTMLElement.childElementCount` | node\_modules/typescript/lib/lib.dom.d.ts:10685 |
| <a id="children"></a> `children` | `readonly` | `HTMLCollection` | Returns the child elements. | `GridItemHTMLElement.children` | node\_modules/typescript/lib/lib.dom.d.ts:10687 |
| <a id="firstelementchild"></a> `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 |
| <a id="lastelementchild"></a> `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 |
| <a id="assignedslot"></a> `assignedSlot` | `readonly` | `null` \| `HTMLSlotElement` | - | `GridItemHTMLElement.assignedSlot` | node\_modules/typescript/lib/lib.dom.d.ts:13933 |
================================================
FILE: angular/doc/api/gridstack.component.md
================================================
# 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
<gridstack [options]="gridOptions" (change)="onGridChange($event)">
<div empty-content>Drag widgets here</div>
</gridstack>
```
#### 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:253](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L253)
###### 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:267](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L267)
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:277](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L277)
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:285](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L285)
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:299](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L299)
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:310](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L310)
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:316](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L316)
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:343](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L343)
###### Parameters
| Parameter | Type |
| ------ | ------ |
| `grid?` | `GridStack` |
###### Returns
`void`
#### Properties
| Property | Modifier | Type | Default value | Description | Defined in |
| ------ | ------ | ------ | ------ | ------ | ------ |
| <a id="gridstackitems"></a> `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) |
| <a id="container"></a> `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) |
| <a id="isempty"></a> `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** `<gridstack [isEmpty]="gridItems.length === 0"> <div empty-content>Drag widgets here to get started</div> </gridstack>` | [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) |
| <a id="addedcb"></a> `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) |
| <a id="changecb"></a> `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) |
| <a id="disablecb"></a> `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) |
| <a id="dragcb"></a> `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) |
| <a id="dragstartcb"></a> `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) |
| <a id="dragstopcb"></a> `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) |
| <a id="droppedcb-1"></a> `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) |
| <a id="enablecb"></a> `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) |
| <a id="removedcb"></a> `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) |
| <a id="resizecb"></a> `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) |
| <a id="resizestartcb"></a> `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) |
| <a id="resizestopcb"></a> `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) |
| <a id="ref"></a> `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) |
| <a id="selectortotype-1"></a> `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) |
| <a id="_options"></a> `_options?` | `protected` | `GridStackOptions` | `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) |
| <a id="_grid"></a> `_grid?` | `protected` | `GridStack` | `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) |
| <a id="_sub"></a> `_sub` | `protected` | `undefined` \| `Subscription` | `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) |
| <a id="loaded"></a> `loaded?` | `protected` | `boolean` | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:251](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L251) |
| <a id="elementref"></a> `elementRef` | `readonly` | `ElementRef`\<[`GridCompHTMLElement`](#gridcomphtmlelement)\> | `undefined` | - | [angular/projects/lib/src/lib/gridstack.component.ts:253](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L253) |
## 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<K>(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<K>(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<K>(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<E>(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<Element>;
```
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<K>(qualifiedName): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
```
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<K>(qualifiedName): HTMLCollectionOf<SVGElementTagNameMap[K]>;
```
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<K>(qualifiedName): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
```
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<K>(qualifiedName): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
```
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<Element>;
```
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<HTMLElement>;
```
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<SVGElement>;
```
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<MathMLElement>;
```
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<Element>;
```
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<void>;
```
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<K>(
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
removeEvent
gitextract_o1ju2pjk/ ├── .eslintignore ├── .eslintrc.js ├── .github/ │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ └── bug_report.md │ └── workflows/ │ ├── deploy-docs.yml │ └── sync-docs.yml ├── .gitignore ├── .travis.yml ├── .vitestrc.coverage.ts ├── Gruntfile.js ├── LICENSE ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── TESTING.md ├── angular/ │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── README_build.md │ ├── angular.json │ ├── doc/ │ │ └── api/ │ │ ├── base-widget.md │ │ ├── gridstack-item.component.md │ │ ├── gridstack.component.md │ │ ├── gridstack.module.md │ │ ├── index.md │ │ └── types.md │ ├── package.json │ ├── projects/ │ │ ├── demo/ │ │ │ ├── .browserslistrc │ │ │ ├── karma.conf.js │ │ │ ├── src/ │ │ │ │ ├── app/ │ │ │ │ │ ├── app.component.css │ │ │ │ │ ├── app.component.html │ │ │ │ │ ├── app.component.spec.ts │ │ │ │ │ ├── app.component.ts │ │ │ │ │ ├── app.config.ts │ │ │ │ │ ├── app.module.ts │ │ │ │ │ ├── dummy.component.ts │ │ │ │ │ ├── ngFor.ts │ │ │ │ │ ├── ngFor_cmd.ts │ │ │ │ │ └── simple.ts │ │ │ │ ├── assets/ │ │ │ │ │ └── .gitkeep │ │ │ │ ├── environments/ │ │ │ │ │ └── environment.ts │ │ │ │ ├── index.html │ │ │ │ ├── main.ts │ │ │ │ ├── polyfills.ts │ │ │ │ ├── styles.css │ │ │ │ └── test.ts │ │ │ ├── tsconfig.app.json │ │ │ └── tsconfig.spec.json │ │ └── lib/ │ │ ├── karma.conf.js │ │ ├── ng-package.json │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── lib/ │ │ │ │ ├── base-widget.ts │ │ │ │ ├── gridstack-item.component.ts │ │ │ │ ├── gridstack.component.ts │ │ │ │ ├── gridstack.module.ts │ │ │ │ └── types.ts │ │ │ └── test.ts │ │ ├── tsconfig.lib.json │ │ ├── tsconfig.lib.prod.json │ │ └── tsconfig.spec.json │ ├── tsconfig.doc.json │ ├── tsconfig.json │ ├── typedoc.html.json │ └── typedoc.json ├── demo/ │ ├── anijs.html │ ├── canvasJS.html │ ├── cell-height.html │ ├── column.html │ ├── css_attributes.html │ ├── custom-engine.html │ ├── demo.css │ ├── esmodule.html │ ├── events.js │ ├── float.html │ ├── index.html │ ├── knockout.html │ ├── lazy_load.html │ ├── locked.html │ ├── mobile.html │ ├── nested.html │ ├── nested_advanced.html │ ├── nested_constraint.html │ ├── old_nested-jq.html │ ├── old_two-jq.html │ ├── react-hooks-controlled-multiple.html │ ├── react-hooks.html │ ├── react.html │ ├── responsive.html │ ├── responsive_break.html │ ├── responsive_none.html │ ├── right-to-left(rtl).html │ ├── serialization.html │ ├── sizeToContent.html │ ├── static.html │ ├── title_drag.html │ ├── transform.html │ ├── two.html │ ├── two_vertical.html │ ├── vue2js.html │ ├── vue3js.html │ ├── vue3js_dynamic-modern-renderCB.html │ ├── vue3js_dynamic-render_grid-item-content.html │ ├── vue3js_dynamic-render_grid-item.html │ ├── vue3js_v-for.html │ ├── web-comp.html │ ├── web1.html │ └── web2.html ├── doc/ │ ├── API.md │ └── CHANGES.md ├── e2e/ │ ├── fixtures/ │ │ └── gridstack-with-height.html │ └── gridstack-e2e.spec.ts ├── package.json ├── playwright.config.ts ├── protractor.conf.js ├── react/ │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── lib/ │ │ ├── grid-stack-context.ts │ │ ├── grid-stack-provider.tsx │ │ ├── grid-stack-render-context.ts │ │ ├── grid-stack-render-provider.test.tsx │ │ ├── grid-stack-render-provider.tsx │ │ ├── grid-stack-render.tsx │ │ ├── grid-stack-widget-context.ts │ │ └── index.ts │ ├── package.json │ ├── src/ │ │ ├── App.tsx │ │ ├── demo/ │ │ │ ├── demo.css │ │ │ └── demo.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.app.tsbuildinfo │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── tsconfig.node.tsbuildinfo │ └── vite.config.ts ├── scripts/ │ ├── generate-docs.js │ ├── reorder-docs.js │ └── reorder-html-docs.js ├── spec/ │ ├── dd-base-impl-spec.ts │ ├── dd-droppable-spec.ts │ ├── dd-manager-spec.ts │ ├── dd-simple-integration-spec.ts │ ├── dd-touch-spec.ts │ ├── e2e/ │ │ ├── gridstack-html-spec.js │ │ └── html/ │ │ ├── 1017-items-no-x-y-for-autoPosition.html │ │ ├── 1102-button-between-grids.html │ │ ├── 1142_change_event_missing.html │ │ ├── 1143_nested_acceptWidget_types.html │ │ ├── 1155-max-row.html │ │ ├── 1286-load.html │ │ ├── 1330-1559-left-resize-maxW-and-others.html │ │ ├── 1419-maxrow1-cant-insert.html │ │ ├── 141_1534_swap.html │ │ ├── 141_swap_old.html │ │ ├── 1471-load-column1.html │ │ ├── 1511-drag-any-content.html │ │ ├── 1535-out-of-order.html │ │ ├── 1545_disable_move_after.html │ │ ├── 1558-vertical-grids-scroll-too-much.html │ │ ├── 1570_drag_bottom_max_row.html │ │ ├── 1571_drop_onto_full.html │ │ ├── 1572_one_column.html │ │ ├── 1581_drag_by_header_h5.html │ │ ├── 1658_enableMove.html │ │ ├── 1693_load_after.html │ │ ├── 1704_scroll_bar.html │ │ ├── 1727_resize_scroll_top.html │ │ ├── 1785_column_many_switch.html │ │ ├── 1858_full_grid_overlap.html │ │ ├── 1924-many.html │ │ ├── 1985_read_1_column_wrong_12.html │ │ ├── 2206_load_collision.html │ │ ├── 2232_dom_auto_placement_mix.html │ │ ├── 2357_rem.html │ │ ├── 2384_update_content.html │ │ ├── 2394_save_sub_item_moved.html │ │ ├── 2406_inf_loop_autoPosition_column1.html │ │ ├── 2453 _recreated_trash.html │ │ ├── 2469_min-height.html │ │ ├── 2492_load_twice.html │ │ ├── 2576_insert_column_shift_content.html │ │ ├── 2633_drop_full_crash.html │ │ ├── 2639_load_missing_coord.html │ │ ├── 2677_drag_button.html │ │ ├── 2729_web_component_drag_esc.html │ │ ├── 2864_nested_resize_reflow.html │ │ ├── 2947_load_responsive_list_smaller.html │ │ ├── 2951_shadow_dom.html │ │ ├── 810-many-columns.css │ │ └── 810-many-columns.html │ ├── gridstack-engine-spec.ts │ ├── gridstack-spec.ts │ ├── integration/ │ │ └── gridstack-integration.spec.ts │ ├── regression-spec.ts │ ├── test.html │ └── utils-spec.ts ├── src/ │ ├── dd-base-impl.ts │ ├── dd-draggable.ts │ ├── dd-droppable.ts │ ├── dd-element.ts │ ├── dd-gridstack.ts │ ├── dd-manager.ts │ ├── dd-resizable-handle.ts │ ├── dd-resizable.ts │ ├── dd-touch.ts │ ├── gridstack-engine.ts │ ├── gridstack.scss │ ├── gridstack.ts │ ├── types.ts │ └── utils.ts ├── tsconfig.build.json ├── tsconfig.docs.json ├── tsconfig.json ├── typedoc.html.json ├── typedoc.json ├── vitest.config.ts ├── vitest.setup.ts └── webpack.config.js
SYMBOL INDEX (451 symbols across 37 files)
FILE: angular/projects/demo/src/app/app.component.ts
class AppComponent (line 18) | class AppComponent implements OnInit {
method constructor (line 108) | constructor() {
method ngOnInit (line 117) | ngOnInit(): void {
method onShow (line 133) | public onShow(val: number) {
method onChange (line 163) | public onChange(data: nodesCB) {
method onResizeStop (line 169) | public onResizeStop(data: elementCB) {
method add (line 176) | public add() {
method delete (line 181) | public delete() {
method modify (line 192) | public modify() {
method newLayout (line 195) | public newLayout() {
method load (line 203) | public load(layout: GridStackWidget[]) {
method addNgFor (line 210) | public addNgFor() {
method deleteNgFor (line 215) | public deleteNgFor() {
method modifyNgFor (line 218) | public modifyNgFor() {
method newLayoutNgFor (line 224) | public newLayoutNgFor() {
method clearGrid (line 232) | public clearGrid() {
method saveGrid (line 236) | public saveGrid() {
method loadGrid (line 240) | public loadGrid() {
method identify (line 246) | public identify(index: number, w: GridStackWidget) {
FILE: angular/projects/demo/src/app/app.module.ts
class AppModule (line 35) | class AppModule {
method constructor (line 36) | constructor() {
FILE: angular/projects/demo/src/app/dummy.component.ts
class AComponent (line 19) | class AComponent extends BaseWidget implements OnDestroy {
method serialize (line 21) | public override serialize(): NgCompInputs | undefined { return this.t...
method constructor (line 22) | constructor() { super(); console.log('Comp A created'); }
method ngOnDestroy (line 23) | ngOnDestroy() { console.log('Comp A destroyed'); } // test to make sur...
class BComponent (line 30) | class BComponent extends BaseWidget implements OnDestroy {
method constructor (line 31) | constructor() { super(); console.log('Comp B created'); }
method ngOnDestroy (line 32) | ngOnDestroy() { console.log('Comp B destroyed'); }
class CComponent (line 39) | class CComponent extends BaseWidget implements OnDestroy {
method ngOnDestroy (line 40) | ngOnDestroy() { console.log('Comp C destroyed'); }
class NComponent (line 56) | class NComponent extends BaseWidget implements OnDestroy {
method ngOnDestroy (line 59) | ngOnDestroy() { console.log('Comp N destroyed'); }
FILE: angular/projects/demo/src/app/ngFor.ts
class AngularNgForTestComponent (line 38) | class AngularNgForTestComponent implements AfterViewInit {
method items (line 43) | public set items(list: GridStackWidget[]) {
method items (line 47) | public get items(): GridStackWidget[] { return this._items}
method constructor (line 52) | constructor() {
method ngAfterViewInit (line 61) | public ngAfterViewInit() {
method onChange (line 88) | public onChange(list = this.grid.engine.nodes) {
method add (line 100) | public add() {
method delete (line 106) | public delete() {
method modify (line 110) | public modify() {
method newLayout (line 118) | public newLayout() {
method identify (line 128) | identify(index: number, w: GridStackWidget) {
FILE: angular/projects/demo/src/app/ngFor_cmd.ts
class AngularNgForCmdTestComponent (line 36) | class AngularNgForCmdTestComponent implements AfterViewInit {
method constructor (line 53) | constructor() {}
method ngAfterViewInit (line 56) | public ngAfterViewInit() {
method add (line 86) | public add() {
method delete (line 91) | public delete() {
method modify (line 97) | public modify() {
method identify (line 103) | identify(index: number) {
FILE: angular/projects/demo/src/app/simple.ts
class AngularSimpleComponent (line 19) | class AngularSimpleComponent implements OnInit {
method constructor (line 27) | constructor() {}
method ngOnInit (line 30) | public ngOnInit() {
method add (line 37) | public add() {
method delete (line 40) | public delete() {
method change (line 43) | public change() {
FILE: angular/projects/lib/src/lib/base-widget.ts
method serialize (line 66) | public serialize(): NgCompInputs | undefined { return; }
method deserialize (line 88) | public deserialize(w: NgGridStackWidget) {
FILE: angular/projects/lib/src/lib/gridstack-item.component.ts
type GridItemCompHTMLElement (line 14) | interface GridItemCompHTMLElement extends GridItemHTMLElement {
class GridstackItemComponent (line 56) | class GridstackItemComponent implements OnDestroy {
method options (line 89) | public set options(val: GridStackNode) {
method options (line 100) | public get options(): GridStackNode {
method el (line 107) | public get el(): GridItemCompHTMLElement { return this.elementRef.nati...
method clearOptions (line 110) | public clearOptions() {
method constructor (line 114) | constructor(protected readonly elementRef: ElementRef<GridItemCompHTML...
method ngOnDestroy (line 118) | public ngOnDestroy(): void {
FILE: angular/projects/lib/src/lib/gridstack.component.ts
type eventCB (line 24) | type eventCB = {event: Event};
type elementCB (line 27) | type elementCB = {event: Event, el: GridItemHTMLElement};
type nodesCB (line 30) | type nodesCB = {event: Event, nodes: GridStackNode[]};
type droppedCB (line 33) | type droppedCB = {event: Event, previousNode: GridStackNode, newNode: Gr...
type GridCompHTMLElement (line 39) | interface GridCompHTMLElement extends GridHTMLElement {
type SelectorToType (line 48) | type SelectorToType = {[key: string]: Type<object>};
class GridstackComponent (line 85) | class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
method options (line 112) | public set options(o: GridStackOptions) {
method options (line 120) | public get options(): GridStackOptions { return this._grid?.opts || th...
method el (line 190) | public get el(): GridCompHTMLElement { return this.elementRef.nativeEl...
method grid (line 201) | public get grid(): GridStack | undefined { return this._grid; }
method addComponentToSelectorType (line 234) | public static addComponentToSelectorType(typeList: Array<Type<object>>) {
method getSelector (line 243) | public static getSelector(type: Type<object>): string {
method constructor (line 253) | constructor(protected readonly elementRef: ElementRef<GridCompHTMLElem...
method ngOnInit (line 267) | public ngOnInit(): void {
method ngAfterContentInit (line 277) | public ngAfterContentInit(): void {
method ngOnDestroy (line 285) | public ngOnDestroy(): void {
method updateAll (line 299) | public updateAll() {
method checkEmpty (line 310) | public checkEmpty() {
method hookEvents (line 316) | protected hookEvents(grid?: GridStack) {
method unhookEvents (line 343) | protected unhookEvents(grid?: GridStack) {
function gsCreateNgComponents (line 354) | function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, n...
function gsSaveAdditionalNgInfo (line 439) | function gsSaveAdditionalNgInfo(n: NgGridStackNode, w: NgGridStackWidget) {
function gsUpdateNgComponents (line 458) | function gsUpdateNgComponents(n: NgGridStackNode) {
FILE: angular/projects/lib/src/lib/gridstack.module.ts
class GridstackModule (line 44) | class GridstackModule {}
FILE: angular/projects/lib/src/lib/types.ts
type NgGridStackWidget (line 12) | interface NgGridStackWidget extends GridStackWidget {
type NgGridStackNode (line 25) | interface NgGridStackNode extends GridStackNode {
type NgGridStackOptions (line 34) | interface NgGridStackOptions extends GridStackOptions {
type NgCompInputs (line 55) | type NgCompInputs = {[key: string]: any};
FILE: demo/events.js
function addEvents (line 1) | function addEvents(grid, id) {
FILE: react/lib/grid-stack-context.ts
function useGridStackContext (line 30) | function useGridStackContext() {
FILE: react/lib/grid-stack-provider.tsx
function GridStackProvider (line 5) | function GridStackProvider({
FILE: react/lib/grid-stack-render-context.ts
function useGridStackRenderContext (line 7) | function useGridStackRenderContext() {
FILE: react/lib/grid-stack-render-provider.test.tsx
class MockGridStack (line 5) | class MockGridStack {
method constructor (line 7) | constructor() {
FILE: react/lib/grid-stack-render-provider.tsx
function GridStackRenderProvider (line 20) | function GridStackRenderProvider({ children }: PropsWithChildren) {
FILE: react/lib/grid-stack-render.tsx
type ComponentDataType (line 9) | interface ComponentDataType<T = object> {
type ParsedComponentData (line 14) | type ParsedComponentData = ComponentDataType & {
type ComponentMap (line 20) | type ComponentMap = Record<string, ComponentType<any>>;
function parseWeightMetaToComponentData (line 22) | function parseWeightMetaToComponentData(
type WidgetMemoProps (line 57) | type WidgetMemoProps = {
function GridStackRender (line 83) | function GridStackRender(props: { componentMap: ComponentMap }) {
FILE: react/lib/grid-stack-widget-context.ts
function useGridStackWidgetContext (line 10) | function useGridStackWidgetContext() {
FILE: react/src/App.tsx
function App (line 3) | function App() {
FILE: react/src/demo/demo.tsx
constant CELL_HEIGHT (line 16) | const CELL_HEIGHT = 50;
constant BREAKPOINTS (line 17) | const BREAKPOINTS = [
function Text (line 24) | function Text({ content }: { content: string }) {
constant COMPONENT_MAP (line 28) | const COMPONENT_MAP: ComponentMap = {
function GridStackDemo (line 136) | function GridStackDemo() {
function Toolbar (line 162) | function Toolbar() {
function DebugInfo (line 242) | function DebugInfo() {
FILE: scripts/generate-docs.js
function execCommand (line 43) | function execCommand(command, cwd = '.', description = '') {
function fileExists (line 83) | function fileExists(filePath) {
function generateLibraryDocs (line 96) | function generateLibraryDocs(libConfig, libName) {
function runPostProcessing (line 160) | function runPostProcessing() {
function cleanup (line 186) | function cleanup() {
function showHelp (line 214) | function showHelp() {
function parseArgs (line 241) | function parseArgs() {
function main (line 280) | function main() {
FILE: scripts/reorder-html-docs.js
function extractClassSections (line 16) | function extractClassSections(html) {
function reorderMainContent (line 40) | function reorderMainContent(html) {
function reorderSidebarNavigation (line 132) | function reorderSidebarNavigation(html) {
FILE: spec/dd-touch-spec.ts
function createMockTouchList (line 28) | function createMockTouchList(touches: Touch[]): TouchList {
function createMockTouchEvent (line 38) | function createMockTouchEvent(type: string, touches: Touch[], options: P...
function createMockPointerEvent (line 72) | function createMockPointerEvent(type: string, pointerType: string, optio...
FILE: src/dd-base-impl.ts
type EventCallback (line 10) | type EventCallback = (event: Event) => boolean|void;
method disabled (line 22) | public get disabled(): boolean { return this._disabled; }
method on (line 37) | public on(event: string, callback: EventCallback): void {
method off (line 46) | public off(event: string): void {
method enable (line 54) | public enable(): void {
method disable (line 62) | public disable(): void {
method destroy (line 70) | public destroy(): void {
method triggerEvent (line 81) | public triggerEvent(eventName: string, event: Event): boolean|void {
type HTMLElementExtendOpt (line 91) | interface HTMLElementExtendOpt<T> {
FILE: src/dd-draggable.ts
type DragOffset (line 14) | interface DragOffset {
type GridStackNodeRotate (line 23) | interface GridStackNodeRotate extends GridStackNode {
type DDDragEvent (line 27) | type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
class DDDraggable (line 34) | class DDDraggable extends DDBaseImplement implements HTMLElementExtendOp...
method constructor (line 65) | constructor(public el: GridItemHTMLElement, public option: DDDragOpt =...
method on (line 83) | public on(event: DDDragEvent, callback: (event: DragEvent) => void): v...
method off (line 87) | public off(event: DDDragEvent): void {
method enable (line 91) | public enable(): void {
method disable (line 105) | public disable(forDestroy = false): void {
method destroy (line 118) | public destroy(): void {
method updateOption (line 129) | public updateOption(opts: DDDragOpt): DDDraggable {
method _mouseDown (line 135) | protected _mouseDown(e: MouseEvent): boolean {
method _callDrag (line 171) | protected _callDrag(e: DragEvent): void {
method _mouseMove (line 181) | protected _mouseMove(e: DragEvent): boolean {
method _mouseUp (line 228) | protected _mouseUp(e: MouseEvent): void {
method _keyEvent (line 269) | protected _keyEvent(e: KeyboardEvent): void {
method _createHelper (line 298) | protected _createHelper(): HTMLElement {
method _setupHelperStyle (line 313) | protected _setupHelperStyle(e: DragEvent): DDDraggable {
method _removeHelperStyle (line 335) | protected _removeHelperStyle(): DDDraggable {
method _dragFollow (line 357) | protected _dragFollow(e: DragEvent): void {
method _setupHelperContainmentStyle (line 370) | protected _setupHelperContainmentStyle(): DDDraggable {
method _getDragOffset (line 382) | protected _getDragOffset(event: DragEvent, el: HTMLElement, parent: HT...
method ui (line 404) | public ui(): DDUIData {
FILE: src/dd-droppable.ts
type DDDroppableOpt (line 14) | interface DDDroppableOpt {
class DDDroppable (line 23) | class DDDroppable extends DDBaseImplement implements HTMLElementExtendOp...
method constructor (line 27) | constructor(public el: HTMLElement, public option: DDDroppableOpt = {}) {
method on (line 36) | public on(event: 'drop' | 'dropover' | 'dropout', callback: (event: Dr...
method off (line 40) | public off(event: 'drop' | 'dropover' | 'dropout'): void {
method enable (line 44) | public enable(): void {
method disable (line 57) | public disable(forDestroy = false): void {
method destroy (line 70) | public destroy(): void {
method updateOption (line 77) | public updateOption(opts: DDDroppableOpt): DDDroppable {
method _mouseEnter (line 84) | protected _mouseEnter(e: MouseEvent): void {
method _mouseLeave (line 111) | protected _mouseLeave(e: MouseEvent, calledByEnter = false): void {
method drop (line 143) | public drop(e: MouseEvent): void {
method _canDrop (line 153) | protected _canDrop(el: HTMLElement): boolean {
method _setupAccept (line 158) | protected _setupAccept(): DDDroppable {
method _ui (line 169) | protected _ui(drag: DDDraggable): DDUIData {
FILE: src/dd-element.ts
type DDElementHost (line 11) | interface DDElementHost extends GridItemHTMLElement {
class DDElement (line 15) | class DDElement {
method init (line 17) | static init(el: DDElementHost): DDElement {
method constructor (line 26) | constructor(public el: DDElementHost) {}
method on (line 28) | public on(eventName: string, callback: (event: MouseEvent) => void): D...
method off (line 39) | public off(eventName: string): DDElement {
method setupDraggable (line 50) | public setupDraggable(opts: DDDragOpt): DDElement {
method cleanDraggable (line 59) | public cleanDraggable(): DDElement {
method setupResizable (line 67) | public setupResizable(opts: DDResizableOpt): DDElement {
method cleanResizable (line 76) | public cleanResizable(): DDElement {
method setupDroppable (line 84) | public setupDroppable(opts: DDDroppableOpt): DDElement {
method cleanDroppable (line 93) | public cleanDroppable(): DDElement {
FILE: src/dd-gridstack.ts
type DDDropOpt (line 17) | type DDDropOpt = {
type DDOpts (line 27) | type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;
type DDKey (line 32) | type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight' | 'maxH...
type DDValue (line 37) | type DDValue = number | string;
type DDCallback (line 46) | type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: Gri...
class DDGridStack (line 57) | class DDGridStack {
method resizable (line 72) | public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, v...
method draggable (line 120) | public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, v...
method dragIn (line 144) | public dragIn(el: GridStackElement, opts: DDDragOpt): DDGridStack {
method droppable (line 149) | public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, ke...
method isDroppable (line 169) | public isDroppable(el: DDElementHost): boolean {
method isDraggable (line 174) | public isDraggable(el: DDElementHost): boolean {
method isResizable (line 179) | public isResizable(el: DDElementHost): boolean {
method on (line 183) | public on(el: GridItemHTMLElement, name: string, callback: DDCallback)...
method off (line 195) | public off(el: GridItemHTMLElement, name: string): DDGridStack {
method _getDDElements (line 201) | protected _getDDElements(els: GridStackElement, opts?: DDOpts): DDElem...
FILE: src/dd-manager.ts
class DDManager (line 17) | class DDManager {
FILE: src/dd-resizable-handle.ts
type DDResizableHandleOpt (line 9) | interface DDResizableHandleOpt {
class DDResizableHandle (line 16) | class DDResizableHandle {
method constructor (line 26) | constructor(protected host: GridItemHTMLElement, protected dir: string...
method _init (line 37) | protected _init(): DDResizableHandle {
method destroy (line 70) | public destroy(): DDResizableHandle {
method _mouseDown (line 86) | protected _mouseDown(e: MouseEvent): void {
method _mouseMove (line 99) | protected _mouseMove(e: MouseEvent): void {
method _mouseUp (line 116) | protected _mouseUp(e: MouseEvent): void {
method _keyEvent (line 134) | protected _keyEvent(e: KeyboardEvent): void {
method _triggerEvent (line 144) | protected _triggerEvent(name: string, event: MouseEvent): DDResizableH...
FILE: src/dd-resizable.ts
type DDResizableOpt (line 15) | interface DDResizableOpt extends DDResizeOpt {
type RectScaleReciprocal (line 27) | interface RectScaleReciprocal {
class DDResizable (line 32) | class DDResizable extends DDBaseImplement implements HTMLElementExtendOp...
method constructor (line 59) | constructor(public el: GridItemHTMLElement, public option: DDResizable...
method on (line 69) | public on(event: 'resizestart' | 'resize' | 'resizestop', callback: (e...
method off (line 73) | public off(event: 'resizestart' | 'resize' | 'resizestop'): void {
method enable (line 77) | public enable(): void {
method disable (line 83) | public disable(): void {
method destroy (line 89) | public destroy(): void {
method updateOption (line 96) | public updateOption(opts: DDResizableOpt): DDResizable {
method _setupAutoHide (line 111) | protected _setupAutoHide(auto: boolean): DDResizable {
method _mouseOver (line 130) | protected _mouseOver(e: Event): void {
method _mouseOut (line 141) | protected _mouseOut(e: Event): void {
method _setupHandlers (line 150) | protected _setupHandlers(): DDResizable {
method _resizeStart (line 163) | protected _resizeStart(event: MouseEvent): DDResizable {
method _resizing (line 182) | protected _resizing(event: MouseEvent, dir: string): DDResizable {
method _resizeStop (line 196) | protected _resizeStop(event: MouseEvent): DDResizable {
method _setupHelper (line 214) | protected _setupHelper(): DDResizable {
method _cleanHelper (line 234) | protected _cleanHelper(): DDResizable {
method _getChange (line 243) | protected _getChange(event: MouseEvent, dir: string): Rect {
method _constrainSize (line 288) | protected _constrainSize(oWidth: number, oHeight: number, moveLeft: bo...
method _applyChange (line 300) | protected _applyChange(): DDResizable {
method _removeHandlers (line 317) | protected _removeHandlers(): DDResizable {
FILE: src/dd-touch.ts
class DDTouch (line 27) | class DDTouch {
function simulateMouseEvent (line 48) | function simulateMouseEvent(e: TouchEvent, simulatedType: string) {
function simulatePointerMouseEvent (line 65) | function simulatePointerMouseEvent(e: PointerEvent, simulatedType: strin...
function touchstart (line 79) | function touchstart(e: TouchEvent): void {
function touchmove (line 94) | function touchmove(e: TouchEvent): void {
function touchend (line 105) | function touchend(e: TouchEvent): void {
function pointerdown (line 136) | function pointerdown(e: PointerEvent): void {
function pointerenter (line 142) | function pointerenter(e: PointerEvent): void {
function pointerleave (line 153) | function pointerleave(e: PointerEvent): void {
FILE: src/gridstack-engine.ts
type OnChangeCB (line 10) | type OnChangeCB = (nodes: GridStackNode[]) => void;
type GridStackEngineOptions (line 13) | interface GridStackEngineOptions {
class GridStackEngine (line 34) | class GridStackEngine {
method constructor (line 61) | public constructor(opts: GridStackEngineOptions = {}) {
method batchUpdate (line 85) | public batchUpdate(flag = true, doPack = true): GridStackEngine {
method _useEntireRowArea (line 103) | protected _useEntireRowArea(node: GridStackNode, nn: GridStackPosition...
method _fixCollisions (line 109) | protected _fixCollisions(node: GridStackNode, nn = node, collide?: Gri...
method collide (line 182) | public collide(skip: GridStackNode, area = skip, skip2?: GridStackNode...
method collideAll (line 200) | public collideAll(skip: GridStackNode, area = skip, skip2?: GridStackN...
method directionCollideCoverage (line 207) | protected directionCollideCoverage(node: GridStackNode, o: GridStackMo...
method cacheRects (line 287) | public cacheRects(w: number, h: number, top: number, right: number, bo...
method swap (line 314) | public swap(a: GridStackNode, b: GridStackNode): boolean | undefined {
method isAreaEmpty (line 366) | public isAreaEmpty(x: number, y: number, w: number, h: number): boolean {
method compact (line 388) | public compact(layout: CompactOptions = 'compact', doSort = true): Gri...
method float (line 421) | public set float(val: boolean) {
method float (line 438) | public get float(): boolean { return this._float || false; }
method sortNodes (line 451) | public sortNodes(dir: 1 | -1 = 1): GridStackEngine {
method _packNodes (line 457) | protected _packNodes(): GridStackEngine {
method prepareNode (line 507) | public prepareNode(node: GridStackNode, resizing?: boolean): GridStack...
method nodeBoundFix (line 560) | public nodeBoundFix(node: GridStackNode, resizing?: boolean): GridStac...
method getDirtyNodes (line 636) | public getDirtyNodes(verify?: boolean): GridStackNode[] {
method _notify (line 645) | protected _notify(removedNodes?: GridStackNode[]): GridStackEngine {
method cleanNodes (line 660) | public cleanNodes(): GridStackEngine {
method saveInitial (line 679) | public saveInitial(): GridStackEngine {
method restoreInitial (line 696) | public restoreInitial(): GridStackEngine {
method findEmptyPosition (line 722) | public findEmptyPosition(node: GridStackNode, nodeList = this.nodes, c...
method addNode (line 756) | public addNode(node: GridStackNode, triggerAddEvent = false, after?: G...
method removeNode (line 790) | public removeNode(node: GridStackNode, removeDOM = true, triggerEvent ...
method removeAll (line 816) | public removeAll(removeDOM = true, triggerEvent = true): GridStackEngi...
method moveNodeCheck (line 843) | public moveNodeCheck(node: GridStackNode, o: GridStackMoveOpts): boole...
method willItFit (line 894) | public willItFit(node: GridStackNode): boolean {
method changedPosConstrain (line 915) | public changedPosConstrain(node: GridStackNode, p: GridStackPosition):...
method moveNode (line 929) | public moveNode(node: GridStackNode, o: GridStackMoveOpts): boolean {
method getRow (line 989) | public getRow(): number {
method beginUpdate (line 993) | public beginUpdate(node: GridStackNode): GridStackEngine {
method endUpdate (line 1002) | public endUpdate(): GridStackEngine {
method save (line 1018) | public save(saveElement = true, saveCB?: SaveFcn, column?: number): Gr...
method layoutsNodesChange (line 1044) | public layoutsNodesChange(nodes: GridStackNode[]): GridStackEngine {
method columnChanged (line 1093) | public columnChanged(prevColumn: number, column: number, layout: Colum...
method cacheLayout (line 1199) | public cacheLayout(nodes: GridStackNode[], column: number, clear = fal...
method cacheOneLayout (line 1219) | public cacheOneLayout(n: GridStackNode, column: number): GridStackEngi...
method findCacheLayout (line 1233) | protected findCacheLayout(n: GridStackNode, column: number): number | ...
method removeNodeFromLayoutCache (line 1237) | public removeNodeFromLayoutCache(n: GridStackNode) {
method cleanupNode (line 1250) | public cleanupNode(node: GridStackNode): GridStackEngine {
FILE: src/gridstack.ts
type GridHTMLElement (line 43) | interface GridHTMLElement extends HTMLElement {
type GridStackEvent (line 47) | type GridStackEvent = 'added' | 'change' | 'disable' | 'drag' | 'dragsta...
type MousePosition (line 51) | interface MousePosition {
type CellPosition (line 57) | interface CellPosition {
type InternalGridStackOptions (line 63) | interface InternalGridStackOptions extends GridStackOptions {
class GridStack (line 77) | class GridStack {
method init (line 92) | public static init(options: GridStackOptions = {}, elOrString: GridSta...
method initAll (line 119) | public static initAll(options: GridStackOptions = {}, selector = '.gri...
method addGrid (line 142) | public static addGrid(parent: HTMLElement, opt: GridStackOptions = {})...
method registerEngine (line 173) | static registerEngine(engineClass: typeof GridStackEngine): void {
method placeholder (line 231) | public get placeholder(): GridItemHTMLElement {
method constructor (line 267) | public constructor(public el: GridHTMLElement, public opts: GridStackO...
method _updateColumnVar (line 415) | private _updateColumnVar(opts: GridStackOptions = this.opts): void {
method addWidget (line 433) | public addWidget(w: GridStackWidget): GridItemHTMLElement {
method createWidgetDivs (line 479) | public createWidgetDivs(n: GridStackNode): HTMLElement {
method makeSubGrid (line 507) | public makeSubGrid(el: GridItemHTMLElement, ops?: GridStackOptions, no...
method removeAsSubGrid (line 600) | public removeAsSubGrid(nodeThatRemoved?: GridStackNode): void {
method save (line 635) | public save(saveContent = true, saveGridOpt = false, saveCB = GridStac...
method load (line 723) | public load(items: GridStackWidget[], addRemove: boolean | AddRemoveFc...
method batchUpdate (line 834) | public batchUpdate(flag = true): GridStack {
method getCellHeight (line 858) | public getCellHeight(forcePixel = false): number {
method cellHeight (line 905) | public cellHeight(val?: numberOrString): GridStack {
method cellWidth (line 951) | public cellWidth(): number {
method _widthOrContainer (line 956) | protected _widthOrContainer(forBreakpoint = false): number {
method checkDynamicColumn (line 963) | protected checkDynamicColumn(): boolean {
method compact (line 1008) | public compact(layout: CompactOptions = 'compact', doSort = true): Gri...
method column (line 1042) | public column(column: number, layout: ColumnOptions = 'moveScale'): Gr...
method getColumn (line 1079) | public getColumn(): number { return this.opts.column as number; }
method getGridItems (line 1093) | public getGridItems(): GridItemHTMLElement[] {
method isIgnoreChangeCB (line 1110) | public isIgnoreChangeCB(): boolean { return this._ignoreLayoutsNodeCha...
method destroy (line 1116) | public destroy(removeDOM = true): GridStack {
method float (line 1150) | public float(val: boolean): GridStack {
method getFloat (line 1167) | public getFloat(): boolean {
method getCellFromPixel (line 1180) | public getCellFromPixel(position: MousePosition, useDocRelative = fals...
method getRow (line 1210) | public getRow(): number {
method isAreaEmpty (line 1229) | public isAreaEmpty(x: number, y: number, w: number, h: number): boolean {
method makeWidget (line 1257) | public makeWidget(els: GridStackElement, options?: GridStackWidget): G...
method on (line 1321) | public on(name: GridStackEvent | string, callback: GridStackEventHandl...
method off (line 1353) | public off(name: GridStackEvent | string): GridStack {
method offAll (line 1380) | public offAll(): GridStack {
method removeWidget (line 1391) | public removeWidget(els: GridStackElement, removeDOM = true, triggerEv...
method removeAll (line 1429) | public removeAll(removeDOM = true, triggerEvent = true): GridStack {
method setAnimation (line 1448) | public setAnimation(doAnimate = this.opts.animate, delay?: boolean): G...
method hasAnimationCSS (line 1462) | private hasAnimationCSS(): boolean { return this.el.classList.contains...
method setStatic (line 1471) | public setStatic(val: boolean, updateClass = true, recurse = true): Gr...
method updateOptions (line 1489) | public updateOptions(o: GridStackOptions): GridStack {
method update (line 1551) | public update(els: GridStackElement, opt: GridStackWidget): GridStack {
method moveNode (line 1626) | private moveNode(n: GridStackNode, m: GridStackMoveOpts) {
method resizeToContent (line 1655) | public resizeToContent(el: GridItemHTMLElement) {
method resizeToContentCBCheck (line 1710) | private resizeToContentCBCheck(el: GridItemHTMLElement) {
method rotate (line 1730) | public rotate(els: GridStackElement, relative?: Position): GridStack {
method margin (line 1765) | public margin(value: numberOrString): GridStack {
method getMargin (line 1794) | public getMargin(): number { return this.opts.margin as number; }
method willItFit (line 1808) | public willItFit(node: GridStackWidget): boolean { return this.engine....
method _triggerChangeEvent (line 1811) | protected _triggerChangeEvent(): GridStack {
method _triggerAddEvent (line 1825) | protected _triggerAddEvent(): GridStack {
method _triggerRemoveEvent (line 1841) | public _triggerRemoveEvent(): GridStack {
method _triggerEvent (line 1852) | protected _triggerEvent(type: string, data?: GridStackNode[]): GridSta...
method _updateContainerHeight (line 1863) | protected _updateContainerHeight(): GridStack {
method _prepareElement (line 1901) | protected _prepareElement(el: GridItemHTMLElement, triggerAddEvent = f...
method _writePosAttr (line 1921) | protected _writePosAttr(el: HTMLElement, n: GridStackNode): GridStack {
method _writeAttr (line 1940) | protected _writeAttr(el: HTMLElement, node: GridStackNode): GridStack {
method _readAttr (line 1963) | protected _readAttr(el: HTMLElement, clearDefaultAttr = true): GridSta...
method _setStaticClass (line 2008) | protected _setStaticClass(): GridStack {
method onResize (line 2027) | public onResize(clientWidth = this.el?.clientWidth): GridStack {
method resizeToContentCheck (line 2064) | private resizeToContentCheck(delay = false, n: GridStackNode = undefin...
method _updateResizeEvent (line 2088) | protected _updateResizeEvent(forceRemove = false): GridStack {
method getElement (line 2109) | public static getElement(els: GridStackElement = '.grid-stack-item'): ...
method getElements (line 2111) | public static getElements(els: GridStackElement = '.grid-stack-item'):...
method getGridElement (line 2113) | public static getGridElement(els: GridStackElement): GridHTMLElement {...
method getGridElements (line 2115) | public static getGridElements(els: string): GridHTMLElement[] { return...
method _initMargin (line 2118) | protected _initMargin(): GridStack {
method getDD (line 2186) | public static getDD(): DDGridStack {
method setupDragIn (line 2199) | public static setupDragIn(dragIn?: string | HTMLElement[], dragInOptio...
method movable (line 2230) | public movable(els: GridStackElement, val: boolean): GridStack {
method resizable (line 2256) | public resizable(els: GridStackElement, val: boolean): GridStack {
method disable (line 2289) | public disable(recurse = true): GridStack {
method enable (line 2316) | public enable(recurse = true): GridStack {
method enableMove (line 2342) | public enableMove(doEnable: boolean, recurse = true): GridStack {
method enableResize (line 2370) | public enableResize(doEnable: boolean, recurse = true): GridStack {
method cancelDrag (line 2381) | public cancelDrag() {
method _removeDD (line 2397) | protected _removeDD(el: DDElementHost): GridStack {
method _setupAcceptWidget (line 2407) | protected _setupAcceptWidget(): GridStack {
method _itemRemoving (line 2683) | private static _itemRemoving(el: GridItemHTMLElement, remove: boolean) {
method _setupRemoveDrop (line 2692) | protected _setupRemoveDrop(): GridStack {
method prepareDragDrop (line 2713) | public prepareDragDrop(el: GridItemHTMLElement, force = false): GridSt...
method _onStartMoving (line 2818) | protected _onStartMoving(el: GridItemHTMLElement, event: Event, ui: DD...
method _dragOrResize (line 2876) | protected _dragOrResize(el: GridItemHTMLElement, event: GridStackMouse...
method triggerEvent (line 2972) | protected triggerEvent(event: Event, target: GridItemHTMLElement) {
method _leave (line 2985) | protected _leave(el: GridItemHTMLElement, helper?: GridItemHTMLElement...
FILE: src/types.ts
type ColumnOptions (line 59) | type ColumnOptions = 'list' | 'compact' | 'moveScale' | 'move' | 'scale'...
type CompactOptions (line 66) | type CompactOptions = 'list' | 'compact';
type numberOrString (line 71) | type numberOrString = number | string;
type GridItemHTMLElement (line 76) | interface GridItemHTMLElement extends HTMLElement {
type GridStackElement (line 87) | type GridStackElement = string | GridItemHTMLElement;
type GridStackEventHandler (line 95) | type GridStackEventHandler = (event: Event) => void;
type GridStackElementHandler (line 98) | type GridStackElementHandler = (event: Event, el: GridItemHTMLElement) =...
type GridStackNodesHandler (line 101) | type GridStackNodesHandler = (event: Event, nodes: GridStackNode[]) => v...
type GridStackDroppedHandler (line 104) | type GridStackDroppedHandler = (event: Event, previousNode: GridStackNod...
type GridStackEventHandlerCallback (line 107) | type GridStackEventHandlerCallback = GridStackEventHandler | GridStackEl...
type AddRemoveFcn (line 119) | type AddRemoveFcn = (parent: HTMLElement, w: GridStackWidget, add: boole...
type SaveFcn (line 128) | type SaveFcn = (node: GridStackNode, w: GridStackWidget) => void;
type RenderFcn (line 137) | type RenderFcn = (el: HTMLElement, w: GridStackWidget) => void;
type ResizeToContentFcn (line 145) | type ResizeToContentFcn = (el: GridItemHTMLElement) => void;
type Responsive (line 153) | interface Responsive {
type Breakpoint (line 170) | interface Breakpoint {
type GridStackOptions (line 184) | interface GridStackOptions {
type GridStackMoveOpts (line 388) | interface GridStackMoveOpts extends GridStackPosition {
type GridStackPosition (line 412) | interface GridStackPosition {
type GridStackWidget (line 426) | interface GridStackWidget extends GridStackPosition {
type DDResizeOpt (line 459) | interface DDResizeOpt {
type DDRemoveOpt (line 475) | interface DDRemoveOpt {
type DDDragOpt (line 483) | interface DDDragOpt {
type Size (line 501) | interface Size {
type Position (line 505) | interface Position {
type Rect (line 509) | interface Rect extends Size, Position {}
type DDUIData (line 512) | interface DDUIData {
type GridStackNode (line 529) | interface GridStackNode extends GridStackWidget {
type GridStackMouseEvent (line 579) | interface GridStackMouseEvent extends MouseEvent {
FILE: src/utils.ts
type HeightData (line 8) | interface HeightData {
type DragTransform (line 13) | interface DragTransform {
class Utils (line 97) | class Utils {
method getElements (line 112) | static getElements(els: GridStackElement, root: HTMLElement | Document...
method getElement (line 155) | static getElement(els: GridStackElement, root: HTMLElement | Document ...
method lazyLoad (line 191) | static lazyLoad(n: GridStackNode): boolean {
method createDiv (line 206) | static createDiv(classes: string[], parent?: HTMLElement): HTMLElement {
method shouldSizeToContent (line 225) | static shouldSizeToContent(n: GridStackNode | undefined, strict = fals...
method isIntercepted (line 244) | static isIntercepted(a: GridStackPosition, b: GridStackPosition): bool...
method isTouching (line 261) | static isTouching(a: GridStackPosition, b: GridStackPosition): boolean {
method areaIntercept (line 278) | static areaIntercept(a: GridStackPosition, b: GridStackPosition): numb...
method area (line 297) | static area(a: GridStackPosition): number {
method sort (line 312) | static sort(nodes: GridStackNode[], dir: 1 | -1 = 1): GridStackNode[] {
method find (line 332) | static find(nodes: GridStackNode[], id: string): GridStackNode | undef...
method toBool (line 350) | static toBool(v: unknown): boolean {
method toNumber (line 372) | static toNumber(value: null | string): number {
method parseHeight (line 388) | static parseHeight(val: numberOrString): HeightData {
method defaults (line 421) | static defaults(target, ...sources): {} {
method same (line 450) | static same(a: unknown, b: unknown): boolean {
method copyPos (line 474) | static copyPos(a: GridStackWidget, b: GridStackWidget, doMinMax = fals...
method samePos (line 489) | static samePos(a: GridStackPosition, b: GridStackPosition): boolean {
method sanitizeMinMax (line 494) | static sanitizeMinMax(node: GridStackNode) {
method removeInternalAndSame (line 503) | static removeInternalAndSame(a: unknown, b: unknown):void {
method removeInternalForSave (line 520) | static removeInternalForSave(n: GridStackNode, removeEl = true): void {
method throttle (line 543) | static throttle(func: () => void, delay: number): () => void {
method removePositioningStyles (line 553) | static removePositioningStyles(el: HTMLElement): void {
method getScrollElement (line 573) | static getScrollElement(el?: HTMLElement): HTMLElement {
method updateScrollPosition (line 586) | static updateScrollPosition(el: HTMLElement, position: {top: number}, ...
method updateScrollResize (line 624) | static updateScrollResize(event: MouseEvent, el: HTMLElement, distance...
method clone (line 646) | static clone<T>(obj: T): T {
method cloneDeep (line 662) | static cloneDeep<T>(obj: T): T {
method cloneNode (line 677) | public static cloneNode(el: HTMLElement): HTMLElement {
method appendTo (line 683) | public static appendTo(el: HTMLElement, parent: string | HTMLElement):...
method addElStyles (line 701) | public static addElStyles(el: HTMLElement, styles: { [prop: string]: s...
method initEvent (line 718) | public static initEvent<T>(e: DragEvent | MouseEvent, info: { type: st...
method simulateMouseEvent (line 734) | public static simulateMouseEvent(e: MouseEvent | Touch, simulatedType:...
method getValuesFromTransformedElement (line 761) | public static getValuesFromTransformedElement(parent: HTMLElement): Dr...
method swap (line 785) | public static swap(o: unknown, a: string, b: string): void {
method canBeRotated (line 804) | public static canBeRotated(n: GridStackNode): boolean {
Condensed preview — 221 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,476K chars).
[
{
"path": ".eslintignore",
"chars": 24,
"preview": "dist/*\r\ndemo/*\r\nspec/*\r\n"
},
{
"path": ".eslintrc.js",
"chars": 465,
"preview": "module.exports = {\n parser: '@typescript-eslint/parser',\n env: {\n browser: true,\n commonjs: true,\n es6: true,"
},
{
"path": ".github/FUNDING.yml",
"chars": 714,
"preview": "# These are supported funding model platforms\n\ngithub: [adumesny]\npatreon: # Replace with a single Patreon username\nopen"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 858,
"preview": "---\nname: Bug report\nabout: bug report\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n## Subject of the issue\nDescribe your is"
},
{
"path": ".github/workflows/deploy-docs.yml",
"chars": 4245,
"preview": "name: Deploy Documentation\n\non:\n push:\n branches: [ master ]\n # Allow manual triggering\n workflow_dispatch:\n\njobs:"
},
{
"path": ".github/workflows/sync-docs.yml",
"chars": 4150,
"preview": "name: Sync Documentation to gh-pages\n\non:\n push:\n branches: [master, develop]\n paths:\n - 'doc/html/**'\n "
},
{
"path": ".gitignore",
"chars": 97,
"preview": "*.log\n*.tgz\n*.zip\n.npmrc\ncoverage\ndist\ndist_save\nnode_modules\n.vscode\n.idea/\n.DS_Store\ndoc/html/\n"
},
{
"path": ".travis.yml",
"chars": 730,
"preview": "language: node_js\nnode_js:\n- 10.19.0\ndist: trusty\nsudo: required\naddons:\n chrome: stable\n#before_install:\n#- yarn globa"
},
{
"path": ".vitestrc.coverage.ts",
"chars": 2985,
"preview": "/// <reference types=\"vitest\" />\nimport { defineConfig } from 'vitest/config'\n\n// Enhanced coverage configuration\nexport"
},
{
"path": "Gruntfile.js",
"chars": 2914,
"preview": "module.exports = function(grunt) {\r\n grunt.loadNpmTasks('grunt-sass');\r\n grunt.loadNpmTasks('grunt-contrib-cssmin');\r\n"
},
{
"path": "LICENSE",
"chars": 1135,
"preview": "MIT License\n\nCopyright (c) 2019-2025 Alain Dumesny. v0.4.0 and older (c) 2014-2018 Pavel Reznikov, Dylan Weiss\n\nPermissi"
},
{
"path": "PULL_REQUEST_TEMPLATE.md",
"chars": 302,
"preview": "### Description\nPlease explain the changes you made here. Include an example of what your changes fix or how to use the "
},
{
"path": "README.md",
"chars": 27883,
"preview": "# gridstack.js\n\n[](https://www.npmjs.com/package/gridstack)\n[!"
},
{
"path": "TESTING.md",
"chars": 5530,
"preview": "# Testing Guide\n\nThis project uses **Vitest** as the modern testing framework, replacing the previous Karma + Jasmine se"
},
{
"path": "angular/.editorconfig",
"chars": 274,
"preview": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size ="
},
{
"path": "angular/.gitignore",
"chars": 559,
"preview": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# Compiled output\n/dist\n/tmp\n/out-tsc\n/bazel-"
},
{
"path": "angular/README.md",
"chars": 7138,
"preview": "# Angular wrapper\n\nThe Angular [wrapper component](projects/lib/src/lib/gridstack.component.ts) <gridstack> is a <b>bett"
},
{
"path": "angular/README_build.md",
"chars": 1067,
"preview": "# GridstackLib\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.10.\n\n"
},
{
"path": "angular/angular.json",
"chars": 4217,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \""
},
{
"path": "angular/doc/api/base-widget.md",
"chars": 2584,
"preview": "# base-widget\n\n## Classes\n\n### `abstract` BaseWidget\n\nDefined in: [angular/projects/lib/src/lib/base-widget.ts:39](https"
},
{
"path": "angular/doc/api/gridstack-item.component.md",
"chars": 89081,
"preview": "# gridstack-item.component\n\n## Classes\n\n### GridstackItemComponent\n\nDefined in: [angular/projects/lib/src/lib/gridstack-"
},
{
"path": "angular/doc/api/gridstack.component.md",
"chars": 101723,
"preview": "# gridstack.component\n\n## Classes\n\n### GridstackComponent\n\nDefined in: [angular/projects/lib/src/lib/gridstack.component"
},
{
"path": "angular/doc/api/gridstack.module.md",
"chars": 1028,
"preview": "# gridstack.module\n\n## Classes\n\n### ~~GridstackModule~~\n\nDefined in: [angular/projects/lib/src/lib/gridstack.module.ts:4"
},
{
"path": "angular/doc/api/index.md",
"chars": 324,
"preview": "# GridStack Angular Library v12.4.2\n\n## Modules\n\n| Module | Description |\n| ------ | ------ |\n| [gridstack.component](gr"
},
{
"path": "angular/doc/api/types.md",
"chars": 3616,
"preview": "# types\n\n## Interfaces\n\n### NgGridStackWidget\n\nDefined in: [angular/projects/lib/src/lib/types.ts:12](https://github.com"
},
{
"path": "angular/package.json",
"chars": 1257,
"preview": "{\n \"name\": \"gridstack-lib\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": "
},
{
"path": "angular/projects/demo/.browserslistrc",
"chars": 600,
"preview": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For addit"
},
{
"path": "angular/projects/demo/karma.conf.js",
"chars": 1425,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "angular/projects/demo/src/app/app.component.css",
"chars": 151,
"preview": ".test-container {\r\n margin-top: 30px;\r\n}\r\nbutton.active {\r\n color: #fff;\r\n background-color: #007bff;\r\n}\r\n\r\n.text-con"
},
{
"path": "angular/projects/demo/src/app/app.component.html",
"chars": 5387,
"preview": "<div class=\"button-container\">\n <p class=\"pick-info\">Pick a demo to load:</p>\n <button (click)=\"onShow(0)\" [class.acti"
},
{
"path": "angular/projects/demo/src/app/app.component.spec.ts",
"chars": 754,
"preview": "import { TestBed } from '@angular/core/testing';\nimport { AppComponent } from './app.component';\n\ndescribe('AppComponent"
},
{
"path": "angular/projects/demo/src/app/app.component.ts",
"chars": 9484,
"preview": "import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';\nimport { GridStack, GridStackOptions, GridStac"
},
{
"path": "angular/projects/demo/src/app/app.config.ts",
"chars": 599,
"preview": "import { ApplicationConfig, provideEnvironmentInitializer } from '@angular/core';\n\n// TEST local testing\n// import { Gri"
},
{
"path": "angular/projects/demo/src/app/app.module.ts",
"chars": 1207,
"preview": "import { NgModule } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\n\r\nimport { AppCom"
},
{
"path": "angular/projects/demo/src/app/dummy.component.ts",
"chars": 2153,
"preview": "/**\n * gridstack.component.ts 8.2.1\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\n */\n\n// dummy "
},
{
"path": "angular/projects/demo/src/app/ngFor.ts",
"chars": 4931,
"preview": "/**\r\n * Example using Angular ngFor to loop through items and create DOM items\r\n */\r\n\r\nimport { Component, AfterViewInit"
},
{
"path": "angular/projects/demo/src/app/ngFor_cmd.ts",
"chars": 4237,
"preview": "/**\r\n * Example using Angular ngFor to loop through items and create DOM items - this uses a custom command.\r\n * NOTE: s"
},
{
"path": "angular/projects/demo/src/app/simple.ts",
"chars": 1536,
"preview": "/**\r\n * Simplest Angular Example using GridStack API directly\r\n */\r\n import { Component, OnInit } from '@angular/core';\r"
},
{
"path": "angular/projects/demo/src/assets/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "angular/projects/demo/src/environments/environment.ts",
"chars": 658,
"preview": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build` replaces `environment.ts`"
},
{
"path": "angular/projects/demo/src/index.html",
"chars": 290,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>Demo</title>\n <base href=\"/\">\n <meta name=\"v"
},
{
"path": "angular/projects/demo/src/main.ts",
"chars": 372,
"preview": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynami"
},
{
"path": "angular/projects/demo/src/polyfills.ts",
"chars": 2338,
"preview": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfi"
},
{
"path": "angular/projects/demo/src/styles.css",
"chars": 6724,
"preview": "/* Optional styles for demos */\n.btn-primary {\n color: #fff;\n background-color: #007bff;\n}\n\n.btn {\n display: inline-b"
},
{
"path": "angular/projects/demo/src/test.ts",
"chars": 749,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/testi"
},
{
"path": "angular/projects/demo/tsconfig.app.json",
"chars": 295,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../../tsconfig.json\",\n \"co"
},
{
"path": "angular/projects/demo/tsconfig.spec.json",
"chars": 341,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../../tsconfig.json\",\n \"co"
},
{
"path": "angular/projects/lib/karma.conf.js",
"chars": 1424,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "angular/projects/lib/ng-package.json",
"chars": 155,
"preview": "{\n \"$schema\": \"../../node_modules/ng-packagr/ng-package.schema.json\",\n \"dest\": \"../../../dist/angular\",\n \"lib\": {\n "
},
{
"path": "angular/projects/lib/package.json",
"chars": 192,
"preview": "{\n \"name\": \"gridstack-angular\",\n \"version\": \"12.4.3\",\n \"peerDependencies\": {\n \"@angular/common\": \">=14\",\n \"@ang"
},
{
"path": "angular/projects/lib/src/index.ts",
"chars": 246,
"preview": "/*\n * Public API Surface of gridstack-angular\n */\n\nexport * from './lib/types';\nexport * from './lib/base-widget';\nexpor"
},
{
"path": "angular/projects/lib/src/lib/base-widget.ts",
"chars": 2637,
"preview": "/**\r\n * gridstack-item.component.ts 12.4.3\r\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\r\n */\r\n"
},
{
"path": "angular/projects/lib/src/lib/gridstack-item.component.ts",
"chars": 4062,
"preview": "/**\n * gridstack-item.component.ts 12.4.3\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\n */\n\nimp"
},
{
"path": "angular/projects/lib/src/lib/gridstack.component.ts",
"chars": 17326,
"preview": "/**\n * gridstack.component.ts 12.4.3\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\n */\n\nimport {"
},
{
"path": "angular/projects/lib/src/lib/gridstack.module.ts",
"chars": 1214,
"preview": "/**\r\n * gridstack.component.ts 12.4.3\r\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\r\n */\r\n\r\nimp"
},
{
"path": "angular/projects/lib/src/lib/types.ts",
"chars": 1770,
"preview": "/**\r\n * gridstack-item.component.ts 12.4.3\r\n * Copyright (c) 2025 Alain Dumesny - see GridStack root license\r\n */\r\n\r\nimp"
},
{
"path": "angular/projects/lib/src/test.ts",
"chars": 767,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js';\nimp"
},
{
"path": "angular/projects/lib/tsconfig.lib.json",
"chars": 333,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../../tsconfig.json\",\n \"co"
},
{
"path": "angular/projects/lib/tsconfig.lib.prod.json",
"chars": 240,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"./tsconfig.lib.json\",\n \"co"
},
{
"path": "angular/projects/lib/tsconfig.spec.json",
"chars": 309,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../../tsconfig.json\",\n \"co"
},
{
"path": "angular/tsconfig.doc.json",
"chars": 309,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"declaration\": true,\n \"emitDeclarationOnly\": true,\n \""
},
{
"path": "angular/tsconfig.json",
"chars": 934,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"compileOnSave\": false,\n \"compilerOpti"
},
{
"path": "angular/typedoc.html.json",
"chars": 1979,
"preview": "{\n \"$schema\": \"https://typedoc.org/schema.json\",\n \"entryPoints\": [\n \"projects/lib/src/lib/gridstack.component.ts\",\n"
},
{
"path": "angular/typedoc.json",
"chars": 2082,
"preview": "{\n \"$schema\": \"https://typedoc.org/schema.json\",\n \"entryPoints\": [\n \"projects/lib/src/lib/gridstack.component.ts\",\n"
},
{
"path": "demo/anijs.html",
"chars": 1769,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge"
},
{
"path": "demo/canvasJS.html",
"chars": 2361,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <title>CanvasJS grid demo</title>\r\n\r\n <link rel=\"stylesheet\" href=\"demo.cs"
},
{
"path": "demo/cell-height.html",
"chars": 1720,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/column.html",
"chars": 4499,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/css_attributes.html",
"chars": 1527,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/custom-engine.html",
"chars": 2349,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/demo.css",
"chars": 6321,
"preview": "/* required file for gridstack to work */\r\n@import \"../dist/gridstack.css\";\r\n\r\n/* Optional styles for demos */\r\n.btn-pri"
},
{
"path": "demo/esmodule.html",
"chars": 750,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/events.js",
"chars": 2927,
"preview": "function addEvents(grid, id) {\r\n let g = (id !== undefined ? 'grid' + id : '');\r\n\r\n grid.on('added removed change', fu"
},
{
"path": "demo/float.html",
"chars": 2353,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/index.html",
"chars": 3180,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <title>Demo</title>\n</head>\n\n<body>\n <h1>Demos</h1>\n <ul>\n "
},
{
"path": "demo/knockout.html",
"chars": 2850,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/lazy_load.html",
"chars": 1429,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/locked.html",
"chars": 1774,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/mobile.html",
"chars": 691,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/nested.html",
"chars": 5580,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/nested_advanced.html",
"chars": 4815,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/nested_constraint.html",
"chars": 3757,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/old_nested-jq.html",
"chars": 5036,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/old_two-jq.html",
"chars": 3463,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/react-hooks-controlled-multiple.html",
"chars": 7254,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-s"
},
{
"path": "demo/react-hooks.html",
"chars": 5017,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-s"
},
{
"path": "demo/react.html",
"chars": 3392,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, init"
},
{
"path": "demo/responsive.html",
"chars": 2013,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <title>Responsive column</title>\n\n <link rel=\"stylesheet\" href=\"demo.css\"/>\n "
},
{
"path": "demo/responsive_break.html",
"chars": 2079,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <title>Responsive breakpoint</title>\n\n <link rel=\"stylesheet\" href=\"demo.css\""
},
{
"path": "demo/responsive_none.html",
"chars": 1202,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/right-to-left(rtl).html",
"chars": 1255,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" dir=\"rtl\"> <!-- set text reading direction -->\n<head>\n <meta charset=\"utf-8\">\n <meta h"
},
{
"path": "demo/serialization.html",
"chars": 3453,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/sizeToContent.html",
"chars": 5006,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/static.html",
"chars": 1810,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/title_drag.html",
"chars": 901,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/transform.html",
"chars": 3644,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/two.html",
"chars": 5278,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/two_vertical.html",
"chars": 1386,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "demo/vue2js.html",
"chars": 3397,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "demo/vue3js.html",
"chars": 3154,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "demo/vue3js_dynamic-modern-renderCB.html",
"chars": 4670,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width,"
},
{
"path": "demo/vue3js_dynamic-render_grid-item-content.html",
"chars": 5378,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "demo/vue3js_dynamic-render_grid-item.html",
"chars": 5300,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "demo/vue3js_v-for.html",
"chars": 5413,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width,"
},
{
"path": "demo/web-comp.html",
"chars": 999,
"preview": "<html>\r\n<head>\r\n <title>Web Component demo</title>\r\n <!-- Polyfills only needed for Firefox and Edge. -->\r\n <script s"
},
{
"path": "demo/web1.html",
"chars": 2013,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "demo/web2.html",
"chars": 3192,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "doc/API.md",
"chars": 195205,
"preview": "# gridstack v12.4.2\n\n## Classes\n\n\n## Table of Contents\n\n- [GridStack](#gridstack)\n- [GridStackEngine](#gridstackengine)\n"
},
{
"path": "doc/CHANGES.md",
"chars": 74848,
"preview": "Change log\n==========================\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->"
},
{
"path": "e2e/fixtures/gridstack-with-height.html",
"chars": 3841,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "e2e/gridstack-e2e.spec.ts",
"chars": 12781,
"preview": "import { test, expect } from '@playwright/test';\n\ntest.describe('GridStack E2E Tests', () => {\n \n test.beforeEach(asyn"
},
{
"path": "package.json",
"chars": 3979,
"preview": "{\n \"name\": \"gridstack\",\n \"version\": \"12.4.3\",\n \"license\": \"MIT\",\n \"author\": \"Alain Dumesny <alaind831+github@gmail.c"
},
{
"path": "playwright.config.ts",
"chars": 1942,
"preview": "import { defineConfig, devices } from '@playwright/test';\n\n/**\n * @see https://playwright.dev/docs/test-configuration\n *"
},
{
"path": "protractor.conf.js",
"chars": 245,
"preview": "exports.config = {\n seleniumAddress: 'http://localhost:4444/wd/hub',\n specs: ['spec/e2e/*-spec.js'],\n capabilities: {"
},
{
"path": "react/.gitignore",
"chars": 253,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "react/README.md",
"chars": 2561,
"preview": "# React GridStack Wrapper Demo\n\nA React wrapper component for GridStack that provides better TypeScript support and Reac"
},
{
"path": "react/eslint.config.js",
"chars": 734,
"preview": "import js from '@eslint/js'\nimport globals from 'globals'\nimport reactHooks from 'eslint-plugin-react-hooks'\nimport reac"
},
{
"path": "react/index.html",
"chars": 366,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/"
},
{
"path": "react/lib/grid-stack-context.ts",
"chars": 1247,
"preview": "import type { GridStack, GridStackOptions, GridStackWidget } from \"gridstack\";\nimport { createContext, useContext } from"
},
{
"path": "react/lib/grid-stack-provider.tsx",
"chars": 3141,
"preview": "import type { GridItemHTMLElement, GridStack, GridStackOptions, GridStackWidget } from \"gridstack\";\nimport { type PropsW"
},
{
"path": "react/lib/grid-stack-render-context.ts",
"chars": 432,
"preview": "import { createContext, useContext } from \"react\";\n\nexport const GridStackRenderContext = createContext<{\n getWidgetCon"
},
{
"path": "react/lib/grid-stack-render-provider.test.tsx",
"chars": 4888,
"preview": "import { describe, it, expect, beforeEach, vi } from 'vitest';\r\nimport { gridWidgetContainersMap } from './grid-stack-re"
},
{
"path": "react/lib/grid-stack-render-provider.tsx",
"chars": 4059,
"preview": "import {\n PropsWithChildren,\n useCallback,\n useLayoutEffect,\n useMemo,\n useRef,\n useReducer,\n} from \"react\";\nimpor"
},
{
"path": "react/lib/grid-stack-render.tsx",
"chars": 2984,
"preview": "import { useRef, memo } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useGridStackContext } from \"./g"
},
{
"path": "react/lib/grid-stack-widget-context.ts",
"chars": 445,
"preview": "import { createContext, useContext } from \"react\";\n\n// TODO: support full widget metadata\nexport const GridStackWidgetCo"
},
{
"path": "react/lib/index.ts",
"chars": 538,
"preview": "import { GridStackProvider } from \"./grid-stack-provider\";\nimport { GridStackRenderProvider } from \"./grid-stack-render-"
},
{
"path": "react/package.json",
"chars": 894,
"preview": "{\n \"name\": \"react\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n "
},
{
"path": "react/src/App.tsx",
"chars": 216,
"preview": "import { GridStackDemo } from \"./demo/demo\";\n\nfunction App() {\n return (\n <>\n <h1>Gridstack React Wrapper Demo<"
},
{
"path": "react/src/demo/demo.css",
"chars": 4741,
"preview": ".grid-stack {\n background: #FAFAD2;\n}\n\n.grid-stack-item-content {\n text-align: center;\n background-color: #18bc9c;\n}\n"
},
{
"path": "react/src/demo/demo.tsx",
"chars": 6948,
"preview": "import { ComponentProps, useEffect, useState } from \"react\";\nimport { GridStackOptions, GridStackWidget } from \"gridstac"
},
{
"path": "react/src/main.tsx",
"chars": 252,
"preview": "\nimport { StrictMode } from 'react'\nimport { createRoot } from 'react-dom/client'\n\nimport 'gridstack/dist/gridstack.css'"
},
{
"path": "react/src/vite-env.d.ts",
"chars": 38,
"preview": "/// <reference types=\"vite/client\" />\n"
},
{
"path": "react/tsconfig.app.json",
"chars": 552,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"useDefineForClassFields\": true,\n \"lib\": [\"ES2020\", \"DOM\", \"DOM."
},
{
"path": "react/tsconfig.app.tsbuildinfo",
"chars": 105,
"preview": "{\"root\":[\"./src/app.tsx\",\"./src/main.tsx\",\"./src/vite-env.d.ts\",\"./src/demo/demo.tsx\"],\"version\":\"5.6.2\"}"
},
{
"path": "react/tsconfig.json",
"chars": 119,
"preview": "{\n \"files\": [],\n \"references\": [\n { \"path\": \"./tsconfig.app.json\" },\n { \"path\": \"./tsconfig.node.json\" }\n ]\n}\n"
},
{
"path": "react/tsconfig.node.json",
"chars": 479,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2023\"],\n \"module\": \"ESNext\",\n \"skipLibCheck\": true"
},
{
"path": "react/tsconfig.node.tsbuildinfo",
"chars": 47,
"preview": "{\"root\":[\"./vite.config.ts\"],\"version\":\"5.6.2\"}"
},
{
"path": "react/vite.config.ts",
"chars": 227,
"preview": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react-swc'\n\n// https://vitejs.dev/config/\nexport d"
},
{
"path": "scripts/generate-docs.js",
"chars": 8968,
"preview": "#!/usr/bin/env node\n\n/**\n * Generic documentation generation script for GridStack.js\n * Generates both HTML and Markdown"
},
{
"path": "scripts/reorder-docs.js",
"chars": 4791,
"preview": "#!/usr/bin/env node\n\nconst fs = require('fs');\nconst path = require('path');\n\nconst docsPath = path.join(__dirname, '../"
},
{
"path": "scripts/reorder-html-docs.js",
"chars": 7099,
"preview": "#!/usr/bin/env node\n\nconst fs = require('fs');\nconst path = require('path');\n\nconst docsPath = path.join(__dirname, '../"
},
{
"path": "spec/dd-base-impl-spec.ts",
"chars": 2681,
"preview": "import { DDBaseImplement } from '../src/dd-base-impl';\n\ndescribe('DDBaseImplement', () => {\n let baseImpl: DDBaseImplem"
},
{
"path": "spec/dd-droppable-spec.ts",
"chars": 9638,
"preview": "import { DDDroppable } from '../src/dd-droppable';\nimport { DDManager } from '../src/dd-manager';\n\ndescribe('DDDroppable"
},
{
"path": "spec/dd-manager-spec.ts",
"chars": 1809,
"preview": "import { DDManager } from '../src/dd-manager';\n\ndescribe('DDManager', () => {\n afterEach(() => {\n // Clean up DDMana"
},
{
"path": "spec/dd-simple-integration-spec.ts",
"chars": 7460,
"preview": "import { DDDraggable } from '../src/dd-draggable';\nimport { DDDroppable } from '../src/dd-droppable';\nimport { DDResizab"
},
{
"path": "spec/dd-touch-spec.ts",
"chars": 16223,
"preview": "import { \n isTouch, \n touchstart, \n touchmove, \n touchend, \n pointerdown, \n pointerenter, \n pointerleave \n} from "
},
{
"path": "spec/e2e/gridstack-html-spec.js",
"chars": 1083,
"preview": "describe('gridstack.js with height', function() {\n beforeAll(function() {\n browser.ignoreSynchronization = true;\n }"
},
{
"path": "spec/e2e/html/1017-items-no-x-y-for-autoPosition.html",
"chars": 1598,
"preview": "<!-- \n grid items have no x,y position, just size. Used to come up with wrong size and overlap. https://github.com/grid"
},
{
"path": "spec/e2e/html/1102-button-between-grids.html",
"chars": 952,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1142_change_event_missing.html",
"chars": 1474,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1143_nested_acceptWidget_types.html",
"chars": 2396,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1155-max-row.html",
"chars": 736,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1286-load.html",
"chars": 1233,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1330-1559-left-resize-maxW-and-others.html",
"chars": 705,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>resize maxW</title>\n <link rel=\"stylesheet\" h"
},
{
"path": "spec/e2e/html/1419-maxrow1-cant-insert.html",
"chars": 2023,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/141_1534_swap.html",
"chars": 5403,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/141_swap_old.html",
"chars": 2552,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1471-load-column1.html",
"chars": 1644,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1511-drag-any-content.html",
"chars": 1134,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1535-out-of-order.html",
"chars": 3465,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1545_disable_move_after.html",
"chars": 1587,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1558-vertical-grids-scroll-too-much.html",
"chars": 1341,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1570_drag_bottom_max_row.html",
"chars": 2669,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1571_drop_onto_full.html",
"chars": 7196,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1572_one_column.html",
"chars": 1518,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1581_drag_by_header_h5.html",
"chars": 1581,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <title>drag by header</title>\n <link rel=\"stylesheet\" href=\"../../../demo/dem"
},
{
"path": "spec/e2e/html/1658_enableMove.html",
"chars": 1703,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1693_load_after.html",
"chars": 1011,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1704_scroll_bar.html",
"chars": 1607,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1727_resize_scroll_top.html",
"chars": 2382,
"preview": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=ed"
},
{
"path": "spec/e2e/html/1785_column_many_switch.html",
"chars": 2049,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1858_full_grid_overlap.html",
"chars": 994,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1924-many.html",
"chars": 1573,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/1985_read_1_column_wrong_12.html",
"chars": 1269,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/2206_load_collision.html",
"chars": 1629,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/2232_dom_auto_placement_mix.html",
"chars": 1087,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/2357_rem.html",
"chars": 516,
"preview": "<!DOCTYPE html>\n<head>\n <title>REM demo</title>\n <link rel=\"stylesheet\" href=\"../../../demo/demo.css\"/>\n <script src="
},
{
"path": "spec/e2e/html/2384_update_content.html",
"chars": 1436,
"preview": "<!DOCTYPE html>\n<head>\n <title>Nested grid update content</title>\n <link rel=\"stylesheet\" href=\"../../../demo/demo.css"
},
{
"path": "spec/e2e/html/2394_save_sub_item_moved.html",
"chars": 1493,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/2406_inf_loop_autoPosition_column1.html",
"chars": 1326,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "spec/e2e/html/2453 _recreated_trash.html",
"chars": 2224,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/2469_min-height.html",
"chars": 937,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/2492_load_twice.html",
"chars": 984,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/2576_insert_column_shift_content.html",
"chars": 1489,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "spec/e2e/html/2633_drop_full_crash.html",
"chars": 1262,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/2639_load_missing_coord.html",
"chars": 2014,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/2677_drag_button.html",
"chars": 751,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/2729_web_component_drag_esc.html",
"chars": 2287,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "spec/e2e/html/2864_nested_resize_reflow.html",
"chars": 1531,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/e2e/html/2947_load_responsive_list_smaller.html",
"chars": 1085,
"preview": "<!DOCTYPE html>\n<head>\n <title>Responsive column</title>\n <link rel=\"stylesheet\" href=\"../../../demo/demo.css\"/>\n <sc"
},
{
"path": "spec/e2e/html/2951_shadow_dom.html",
"chars": 1894,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"I"
},
{
"path": "spec/e2e/html/810-many-columns.css",
"chars": 7566,
"preview": "/* SASS code using https://www.sassmeister.com/\r\n$columns: 60;\r\n@function fixed($float) {\r\n @return calc(round($float *"
},
{
"path": "spec/e2e/html/810-many-columns.html",
"chars": 1070,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/gridstack-engine-spec.ts",
"chars": 14799,
"preview": "import { GridStackEngine } from'../src/gridstack-engine';\nimport { GridStackNode } from'../src/types';\n\ndescribe('gridst"
},
{
"path": "spec/gridstack-spec.ts",
"chars": 71162,
"preview": "import { GridItemHTMLElement, GridStack, GridStackNode, GridStackWidget } from '../src/gridstack';\nimport { Utils } from"
},
{
"path": "spec/integration/gridstack-integration.spec.ts",
"chars": 7151,
"preview": "import { GridStack } from '../../src/gridstack';\n\n// Integration tests for GridStack HTML scenarios\n// These test actual"
},
{
"path": "spec/regression-spec.ts",
"chars": 4550,
"preview": "import { GridItemHTMLElement, GridStack, GridStackWidget } from '../src/gridstack';\r\n\r\ndescribe('regression >', () => {\r"
},
{
"path": "spec/test.html",
"chars": 1527,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "spec/utils-spec.ts",
"chars": 34093,
"preview": "import { Utils } from '../src/utils';\n\ndescribe('gridstack utils', () => {\n describe('setup of utils', () => {\n it('"
},
{
"path": "src/dd-base-impl.ts",
"chars": 2944,
"preview": "/**\n * dd-base-impl.ts 12.4.3\n * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license\n */\n\n/**\n * Type fo"
}
]
// ... and 21 more files (download for full content)
About this extraction
This page contains the full source code of the gridstack/gridstack.js GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 221 files (1.3 MB), approximately 389.4k tokens, and a symbol index with 451 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.