apex-grid 1.0.0-rc.0

package/dist/src/styles/header-cell/header-cell-styles.js

@@ -0,0 +1,141 @@
+import { css } from 'lit';
+export default css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
+:host {
+  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
+  --is-medium:
+      min(
+          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
+          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
+      );
+  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
+  --component-size: 3;
+}
+
+:host {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: relative;
+  -webkit-border-end: var(--igx-header-border-width, var(--header-border-width)) var(--igx-header-border-style, var(--header-border-style)) var(--igx-header-border-color, var(--header-border-color));
+          border-inline-end: var(--igx-header-border-width, var(--header-border-width)) var(--igx-header-border-style, var(--header-border-style)) var(--igx-header-border-color, var(--header-border-color));
+  font-weight: 600;
+  font-size: 0.75rem;
+}
+
+:host(:last-of-type) {
+  -webkit-border-end: none;
+          border-inline-end: none;
+}
+
+[part~=content] {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: 0 max(var(--is-large, 1) * 1.5rem, var(--is-medium, 1) * 1rem, var(--is-small, 1) * 0.5rem);
+  font-weight: 500;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+[part~=title] {
+  display: block;
+  position: relative;
+  cursor: initial;
+  white-space: nowrap;
+  -o-text-overflow: ellipsis;
+     text-overflow: ellipsis;
+  overflow: hidden;
+  min-width: 3ch;
+}
+
+[part~=actions] {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+[part~=action] {
+  cursor: pointer;
+  opacity: 0.7;
+  -webkit-transition: opacity 0.25s ease-in-out;
+  -o-transition: opacity 0.25s ease-in-out;
+  transition: opacity 0.25s ease-in-out;
+}
+[part~=action]:hover, [part~=action]:focus {
+  opacity: 1;
+}
+[part~=action] igc-icon {
+  --size: 0.9375rem;
+  color: var(--igx-icon-color, var(--icon-color));
+}
+[part~=action] igc-icon::after {
+  content: attr(data-sortIndex);
+  position: absolute;
+  top: -5px;
+  inset-inline-end: -1px;
+  font-size: 0.625rem;
+  text-align: end;
+  font-family: sans-serif;
+  line-height: 0.625rem;
+  color: var(--igx-sorted-header-icon-color, var(--sorted-header-icon-color));
+}
+
+[part~=sorted],
+[part~=filtered] {
+  color: var(--igx-sorted-header-icon-color, var(--sorted-header-icon-color));
+}
+[part~=sorted] igc-icon,
+[part~=filtered] igc-icon {
+  color: var(--igx-sorted-header-icon-color, var(--sorted-header-icon-color));
+}
+
+[part~=filtered] {
+  background: var(--igx-filtering-header-background, var(--filtering-header-background));
+}
+
+[part~=action]:empty {
+  display: none;
+}
+
+[part~=resizable] {
+  width: 0.25rem;
+  height: 100%;
+  position: absolute;
+  inset-inline-end: -0.125rem;
+  z-index: var(--z-index-base);
+  cursor: col-resize;
+}
+
+[part~=filter] {
+  position: relative;
+}
+
+[part~=filter-count] {
+  position: absolute;
+  top: -5px;
+  inset-inline-end: -1px;
+  font-size: 0.625rem;
+  text-align: end;
+  font-family: sans-serif;
+  line-height: 0.625rem;
+  color: currentcolor;
+}`;
+//# sourceMappingURL=header-cell-styles.js.map

package/dist/src/styles/header-cell/header-cell-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-cell-styles.js","sourceRoot":"","sources":["../../../../src/styles/header-cell/header-cell-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0IhB,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport default css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium:\n      min(\n          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n      );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  --component-size: 3;\n}\n\n:host {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  position: relative;\n  -webkit-border-end: var(--igx-header-border-width, var(--header-border-width)) var(--igx-header-border-style, var(--header-border-style)) var(--igx-header-border-color, var(--header-border-color));\n          border-inline-end: var(--igx-header-border-width, var(--header-border-width)) var(--igx-header-border-style, var(--header-border-style)) var(--igx-header-border-color, var(--header-border-color));\n  font-weight: 600;\n  font-size: 0.75rem;\n}\n\n:host(:last-of-type) {\n  -webkit-border-end: none;\n          border-inline-end: none;\n}\n\n[part~=content] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  padding: 0 max(var(--is-large, 1) * 1.5rem, var(--is-medium, 1) * 1rem, var(--is-small, 1) * 0.5rem);\n  font-weight: 500;\n  overflow: hidden;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n\n[part~=title] {\n  display: block;\n  position: relative;\n  cursor: initial;\n  white-space: nowrap;\n  -o-text-overflow: ellipsis;\n     text-overflow: ellipsis;\n  overflow: hidden;\n  min-width: 3ch;\n}\n\n[part~=actions] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  gap: 0.25rem;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n[part~=action] {\n  cursor: pointer;\n  opacity: 0.7;\n  -webkit-transition: opacity 0.25s ease-in-out;\n  -o-transition: opacity 0.25s ease-in-out;\n  transition: opacity 0.25s ease-in-out;\n}\n[part~=action]:hover, [part~=action]:focus {\n  opacity: 1;\n}\n[part~=action] igc-icon {\n  --size: 0.9375rem;\n  color: var(--igx-icon-color, var(--icon-color));\n}\n[part~=action] igc-icon::after {\n  content: attr(data-sortIndex);\n  position: absolute;\n  top: -5px;\n  inset-inline-end: -1px;\n  font-size: 0.625rem;\n  text-align: end;\n  font-family: sans-serif;\n  line-height: 0.625rem;\n  color: var(--igx-sorted-header-icon-color, var(--sorted-header-icon-color));\n}\n\n[part~=sorted],\n[part~=filtered] {\n  color: var(--igx-sorted-header-icon-color, var(--sorted-header-icon-color));\n}\n[part~=sorted] igc-icon,\n[part~=filtered] igc-icon {\n  color: var(--igx-sorted-header-icon-color, var(--sorted-header-icon-color));\n}\n\n[part~=filtered] {\n  background: var(--igx-filtering-header-background, var(--filtering-header-background));\n}\n\n[part~=action]:empty {\n  display: none;\n}\n\n[part~=resizable] {\n  width: 0.25rem;\n  height: 100%;\n  position: absolute;\n  inset-inline-end: -0.125rem;\n  z-index: var(--z-index-base);\n  cursor: col-resize;\n}\n\n[part~=filter] {\n  position: relative;\n}\n\n[part~=filter-count] {\n  position: absolute;\n  top: -5px;\n  inset-inline-end: -1px;\n  font-size: 0.625rem;\n  text-align: end;\n  font-family: sans-serif;\n  line-height: 0.625rem;\n  color: currentcolor;\n}`;\n"]}

package/dist/src/styles/header-row/header-row.base-styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=header-row.base-styles.d.ts.map

package/dist/src/styles/header-row/header-row.base-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-row.base-styles.d.ts","sourceRoot":"","sources":["../../../../src/styles/header-row/header-row.base-styles.ts"],"names":[],"mappings":";AAEA,wBAgCG"}

package/dist/src/styles/header-row/header-row.base-styles.js

@@ -0,0 +1,35 @@
+import { css } from 'lit';
+export default css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
+:host {
+  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
+  --is-medium:
+      min(
+          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
+          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
+      );
+  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
+  --component-size: 3;
+}
+
+:host {
+  display: grid;
+  grid-row: header-row;
+  min-height: max(var(--is-large, 1) * 3.125rem, var(--is-medium, 1) * 2.125rem, var(--is-small, 1) * 1.5rem);
+  background: var(--igx-header-background, var(--header-background));
+  color: var(--igx-header-text-color, var(--header-text-color));
+  contain: content;
+  -webkit-border-after: var(--igx-header-border-width, var(--header-border-width)) var(--igx-header-border-style, var(--header-border-style)) var(--igx-header-border-color, var(--header-border-color));
+          border-block-end: var(--igx-header-border-width, var(--header-border-width)) var(--igx-header-border-style, var(--header-border-style)) var(--igx-header-border-color, var(--header-border-color));
+  z-index: var(--z-index-base);
+  -webkit-padding-end: var(--scrollbar-offset);
+          padding-inline-end: var(--scrollbar-offset);
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+[part=filtered] {
+  background: var(--igx-filtering-header-background, var(--filtering-header-background));
+}`;
+//# sourceMappingURL=header-row.base-styles.js.map

package/dist/src/styles/header-row/header-row.base-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-row.base-styles.js","sourceRoot":"","sources":["../../../../src/styles/header-row/header-row.base-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgChB,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport default css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium:\n      min(\n          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n      );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  --component-size: 3;\n}\n\n:host {\n  display: grid;\n  grid-row: header-row;\n  min-height: max(var(--is-large, 1) * 3.125rem, var(--is-medium, 1) * 2.125rem, var(--is-small, 1) * 1.5rem);\n  background: var(--igx-header-background, var(--header-background));\n  color: var(--igx-header-text-color, var(--header-text-color));\n  contain: content;\n  -webkit-border-after: var(--igx-header-border-width, var(--header-border-width)) var(--igx-header-border-style, var(--header-border-style)) var(--igx-header-border-color, var(--header-border-color));\n          border-block-end: var(--igx-header-border-width, var(--header-border-width)) var(--igx-header-border-style, var(--header-border-style)) var(--igx-header-border-color, var(--header-border-color));\n  z-index: var(--z-index-base);\n  -webkit-padding-end: var(--scrollbar-offset);\n          padding-inline-end: var(--scrollbar-offset);\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n[part=filtered] {\n  background: var(--igx-filtering-header-background, var(--filtering-header-background));\n}`;\n"]}

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "apex-grid",
+  "version": "1.0.0-rc.0",
+  "description": "Web component data grid following open-wc recommendations",
+  "keywords": [
+    "lit",
+    "web-component",
+    "lit-element"
+  ],
+  "license": "SEE LICENSE IN LICENSE.mds",
+  "author": "apex-grid",
+  "exports": {
+    ".": "./dist/src/index.js"
+  },
+  "type": "module",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "files": [
+    "/dist/",
+    "/dist/bundle.*",
+    "!/dist/test/"
+  ],
+  "scripts": {
+    "analyze": "cem analyze --litelement --globs \"src/**/*.{js,ts}\"",
+    "build": "npm run build:tsc && npm run dev:vite && npm run typedoc",
+    "build:tsc": "tsc",
+    "dev:vite": "vite build",
+    "format": "npm run format:eslint && npm run format:prettier && npm run format:stylelint",
+    "format:eslint": "eslint \"**/*.{js,ts,html}\" --fix --ignore-path .eslintignore",
+    "format:prettier": "prettier \"**/*.{js,ts,json,html,md}\" --write --ignore-path .eslintignore",
+    "format:stylelint": "stylelint \"**/*.{scss,css}\" --fix --allow-empty-input --ignore-path .eslintignore",
+    "lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:stylelint",
+    "lint:eslint": "eslint \"**/*.{js,ts,html}\" --ignore-path .eslintignore",
+    "lint:prettier": "prettier \"**/*.{js,ts,json,html,md}\" --check --ignore-path .eslintignore",
+    "lint:stylelint": "stylelint \"**/*.{scss,css}\" --allow-empty-input --ignore-path .eslintignore",
+    "preview:vite": "vite preview",
+    "sass:watch": "sass-style-template -j ts",
+    "start": "concurrently -k -r \"npm:sass:watch\" \"npm:vite\"",
+    "start:wds": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"npm:sass:watch\" \"npm:wds\"",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "typedoc": "typedoc",
+    "vite": "vite",
+    "wds": "web-dev-server",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "**/*.{js,ts,html}": [
+      "npm run format:eslint"
+    ],
+    "**/*.{js,ts,json,html,md}": [
+      "npm run format:prettier"
+    ],
+    "**/*.{scss,css}": [
+      "npm run format:stylelint"
+    ]
+  },
+  "dependencies": {
+    "@lit-labs/context": "^0.1.3",
+    "@lit-labs/virtualizer": "^0.7.2",
+    "igniteui-theming": "^1.1.4",
+    "igniteui-webcomponents": "^4.0.0",
+    "lit": "^2.4.1"
+  },
+  "devDependencies": {
+    "@blockquote/rollup-plugin-total-bundlesize": "^1.0.0",
+    "@blockquote/sass-style-template": "^2.1.2",
+    "@blockquote/test-runner-mocha-style-reporter": "^1.4.1",
+    "@custom-elements-manifest/analyzer": "^0.6.6",
+    "@open-wc/eslint-config": "^9.0.0",
+    "@open-wc/testing": "^3.1.7",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
+    "@web/dev-server": "^0.1.35",
+    "@web/test-runner": "^0.15.0",
+    "@web/test-runner-playwright": "^0.9.0",
+    "concurrently": "^7.6.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-log-filenames": "^1.0.6",
+    "husky": "^8.0.2",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.8.0",
+    "sinon": "^14.0.2",
+    "stylelint": "^14.15.0",
+    "stylelint-config-standard-scss": "^6.1.0",
+    "tslib": "^2.4.1",
+    "typedoc": "^0.23.21",
+    "typescript": "^4.9.3",
+    "vite": "^3.2.4"
+  },
+  "customElements": "custom-elements.json"
+}