refactor(php): split columns in files-list component into multiple components

build(nodejs): add overrides in package.json

web/documentserver-example/nodejs/package-lock.json

@@ -479,6 +479,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
       "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -594,9 +595,9 @@
       }
     },
     "node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -675,6 +676,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -849,6 +851,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
       "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.4"
       },
@@ -860,6 +863,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -983,15 +987,6 @@
         "eslint-plugin-import": "^2.25.2"
       }
     },
-    "node_modules/eslint-config-airbnb-base/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -1108,15 +1103,6 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
-    "node_modules/eslint-plugin-import/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -1225,16 +1211,16 @@
       }
     },
     "node_modules/express": {
-      "version": "4.18.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.1",
+        "body-parser": "1.20.2",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -1265,29 +1251,6 @@
         "node": ">= 0.10.0"
       }
     },
-    "node_modules/express/node_modules/body-parser": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.4",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.11.0",
-        "raw-body": "2.5.1",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
     "node_modules/express/node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1296,20 +1259,6 @@
         "ms": "2.0.0"
       }
     },
-    "node_modules/express/node_modules/raw-body": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/express/node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -1553,6 +1502,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -1588,6 +1538,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
       "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
@@ -1685,6 +1636,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -1724,6 +1676,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0"
       },
@@ -1735,6 +1688,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
       "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -1746,6 +1700,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -1772,6 +1727,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
       "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -2261,14 +2217,6 @@
         "safe-buffer": "^5.0.1"
       }
     },
-    "node_modules/jws/node_modules/ecdsa-sig-formatter": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
-      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
     "node_modules/jws/node_modules/jwa": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
@@ -2496,6 +2444,7 @@
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
       "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2798,12 +2747,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "dependencies": {
-        "side-channel": "^1.0.4"
-      },
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.3.tgz",
+      "integrity": "sha512-WBoQWf5L/UOLqUj8Mvr4Om7J+ZTCqPbYPHyeLNRS9t9Q3M3/o/9ctpWnlo8yyETPclx7FhH5LidjKKJa9kdSRQ==",
       "engines": {
         "node": ">=0.6"
       },
@@ -2996,11 +2942,17 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
+      "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
       "bin": {
-        "semver": "bin/semver"
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/send": {
@@ -3093,6 +3045,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
       "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
+      "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.2",
         "es-errors": "^1.3.0",
@@ -3150,6 +3103,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -3336,18 +3290,6 @@
         "strip-bom": "^3.0.0"
       }
     },
-    "node_modules/tsconfig-paths/node_modules/json5": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "json5": "lib/cli.js"
-      }
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3548,20 +3490,6 @@
         "ms": "2.0.0"
       }
     },
-    "node_modules/urllib/node_modules/qs": {
-      "version": "6.11.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
-      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
-      "dependencies": {
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/urllib/node_modules/statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -3976,7 +3904,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.11.0",
+        "qs": "6.7.3",
         "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -4015,6 +3943,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
       "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "dev": true,
       "requires": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -4061,7 +3990,7 @@
       "resolved": "https://registry.npmjs.org/config/-/config-3.3.11.tgz",
       "integrity": "sha512-Dhn63ZoWCW5EMg4P0Sl/XNsj/7RLiUIA1x1npCy+m2cRwRHzLnt3UtYtxRDMZW/6oOMdWhCzaGYkOcajGgrAOA==",
       "requires": {
-        "json5": "^2.2.3"
+        "json5": "2.2.3"
       }
     },
     "confusing-browser-globals": {
@@ -4091,9 +4020,9 @@
       "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA=="
     },
     "cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw=="
     },
     "cookie-signature": {
       "version": "1.0.6",
@@ -4154,6 +4083,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
       "requires": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -4288,6 +4218,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
       "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.2.4"
       }
@@ -4295,7 +4226,8 @@
     "es-errors": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true
     },
     "es-set-tostringtag": {
       "version": "2.0.3",
@@ -4396,15 +4328,7 @@
         "confusing-browser-globals": "^1.0.10",
         "object.assign": "^4.1.2",
         "object.entries": "^1.1.5",
-        "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-          "dev": true
-        }
+        "semver": "7.5.2"
       }
     },
     "eslint-import-resolver-node": {
@@ -4482,7 +4406,7 @@
         "object.fromentries": "^2.0.7",
         "object.groupby": "^1.0.1",
         "object.values": "^1.1.7",
-        "semver": "^6.3.1",
+        "semver": "7.5.2",
         "tsconfig-paths": "^3.15.0"
       },
       "dependencies": {
@@ -4509,12 +4433,6 @@
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
           "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
           "dev": true
-        },
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-          "dev": true
         }
       }
     },
@@ -4581,16 +4499,16 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
     "express": {
-      "version": "4.18.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
       "requires": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.1",
+        "body-parser": "1.20.2",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -4606,7 +4524,7 @@
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.7.3",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
         "send": "0.18.0",
@@ -4618,25 +4536,6 @@
         "vary": "~1.1.2"
       },
       "dependencies": {
-        "body-parser": {
-          "version": "1.20.1",
-          "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-          "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
-          "requires": {
-            "bytes": "3.1.2",
-            "content-type": "~1.0.4",
-            "debug": "2.6.9",
-            "depd": "2.0.0",
-            "destroy": "1.2.0",
-            "http-errors": "2.0.0",
-            "iconv-lite": "0.4.24",
-            "on-finished": "2.4.1",
-            "qs": "6.11.0",
-            "raw-body": "2.5.1",
-            "type-is": "~1.6.18",
-            "unpipe": "1.0.0"
-          }
-        },
         "debug": {
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -4645,17 +4544,6 @@
             "ms": "2.0.0"
           }
         },
-        "raw-body": {
-          "version": "2.5.1",
-          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-          "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
-          "requires": {
-            "bytes": "3.1.2",
-            "http-errors": "2.0.0",
-            "iconv-lite": "0.4.24",
-            "unpipe": "1.0.0"
-          }
-        },
         "safe-buffer": {
           "version": "5.2.1",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -4843,7 +4731,8 @@
     "function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true
     },
     "function.prototype.name": {
       "version": "1.1.6",
@@ -4867,6 +4756,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
       "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "dev": true,
       "requires": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
@@ -4931,6 +4821,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.3"
       }
@@ -4961,6 +4852,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
       "requires": {
         "es-define-property": "^1.0.0"
       }
@@ -4968,12 +4860,14 @@
     "has-proto": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q=="
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "dev": true
     },
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
     },
     "has-tostringtag": {
       "version": "1.0.2",
@@ -4988,6 +4882,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
       "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.2"
       }
@@ -5303,7 +5198,7 @@
         "lodash.isstring": "^4.0.1",
         "lodash.once": "^4.0.0",
         "ms": "^2.1.1",
-        "semver": "^7.5.4"
+        "semver": "7.5.2"
       },
       "dependencies": {
         "ms": {
@@ -5312,8 +5207,7 @@
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
         },
         "semver": {
-          "version": "7.6.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+          "version": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
           "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
           "requires": {
             "lru-cache": "^6.0.0"
@@ -5340,14 +5234,6 @@
         "safe-buffer": "^5.0.1"
       },
       "dependencies": {
-        "ecdsa-sig-formatter": {
-          "version": "1.0.11",
-          "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
-          "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-          "requires": {
-            "safe-buffer": "^5.0.1"
-          }
-        },
         "jwa": {
           "version": "1.4.1",
           "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
@@ -5528,7 +5414,8 @@
     "object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ=="
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "dev": true
     },
     "object-keys": {
       "version": "1.1.1",
@@ -5747,12 +5634,9 @@
       "dev": true
     },
     "qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "requires": {
-        "side-channel": "^1.0.4"
-      }
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.3.tgz",
+      "integrity": "sha512-WBoQWf5L/UOLqUj8Mvr4Om7J+ZTCqPbYPHyeLNRS9t9Q3M3/o/9ctpWnlo8yyETPclx7FhH5LidjKKJa9kdSRQ=="
     },
     "queue-microtask": {
       "version": "1.2.3",
@@ -5868,9 +5752,12 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
+      "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
+      "requires": {
+        "lru-cache": "^6.0.0"
+      }
     },
     "send": {
       "version": "0.18.0",
@@ -5953,6 +5840,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
       "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
+      "dev": true,
       "requires": {
         "define-data-property": "^1.1.2",
         "es-errors": "^1.3.0",
@@ -5998,6 +5886,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -6131,20 +6020,9 @@
       "dev": true,
       "requires": {
         "@types/json5": "^0.0.29",
-        "json5": "^1.0.2",
+        "json5": "2.2.3",
         "minimist": "^1.2.6",
         "strip-bom": "^3.0.0"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        }
       }
     },
     "type-check": {
@@ -6278,7 +6156,7 @@
         "iconv-lite": "^0.4.15",
         "ip": "^1.1.5",
         "pump": "^3.0.0",
-        "qs": "^6.4.0",
+        "qs": "6.7.3",
         "statuses": "^1.3.1",
         "utility": "^1.16.1"
       },
@@ -6291,14 +6169,6 @@
             "ms": "2.0.0"
           }
         },
-        "qs": {
-          "version": "6.11.2",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
-          "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
-          "requires": {
-            "side-channel": "^1.0.4"
-          }
-        },
         "statuses": {
           "version": "1.5.0",
           "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -6368,7 +6238,7 @@
       "resolved": "https://registry.npmjs.org/win-release/-/win-release-1.1.1.tgz",
       "integrity": "sha1-X6VeAr58qTTt/BJmVjLoSbcuUgk=",
       "requires": {
-        "semver": "^5.0.1"
+        "semver": "7.5.2"
       }
     },
     "wrappy": {

web/documentserver-example/nodejs/package.json

@@ -47,5 +47,13 @@
     "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.29.1"
+  },
+  "overrides": {
+    "semver": "7.5.2",
+    "word-wrap": "1.2.4",
+    "pac-resolver": "7.0.0",
+    "degenerator": "3.0.1",
+    "qs": "6.7.3",
+    "json5": "2.2.3"
   }
 }

web/documentserver-example/nodejs/public/images/mobile-logo.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5332 22.2243L0.632544 17.5921C-0.210848 17.1877 -0.210848 16.5627 0.632544 16.1951L4.07945 14.5775L10.4966 17.5921C11.34 17.9965 12.6967 17.9965 13.5034 17.5921L19.9206 14.5775L23.3675 16.1951C24.2108 16.5995 24.2108 17.2245 23.3675 17.5921L13.4668 22.2243C12.6967 22.592 11.34 22.592 10.5332 22.2243Z" fill="#FF6F3D"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5011 16.4922L0.630617 11.8546C-0.210206 11.4497 -0.210206 10.824 0.630617 10.456L3.99391 8.87329L10.5011 11.9282C11.342 12.3331 12.6946 12.3331 13.4989 11.9282L20.0061 8.87329L23.3694 10.456C24.2102 10.8608 24.2102 11.4865 23.3694 11.8546L13.4989 16.4922C12.658 16.897 11.3054 16.897 10.5011 16.4922Z" fill="#95C038"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5011 10.8195L0.630617 6.24863C-0.210206 5.84959 -0.210206 5.23289 0.630617 4.87013L10.5011 0.299281C11.342 -0.0997605 12.6946 -0.0997605 13.4989 0.299281L23.3694 4.87013C24.2102 5.26917 24.2102 5.88587 23.3694 6.24863L13.4989 10.8195C12.658 11.1822 11.3054 11.1822 10.5011 10.8195Z" fill="#5DC0E8"/>
-</svg>

web/documentserver-example/nodejs/public/images/mobile-menu.svg

@@ -1,5 +0,0 @@
-<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="20" height="2" rx="1" fill="white"/>
-    <rect y="6" width="20" height="2" rx="1" fill="white"/>
-    <rect y="12" width="20" height="2" rx="1" fill="white"/>
-</svg>

web/documentserver-example/nodejs/public/images/plus.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V13H7C6.44772 13 6 12.5523 6 12C6 11.4477 6.44772 11 7 11H11V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H13V17Z" fill="#444444"/>
-</svg>

web/documentserver-example/nodejs/public/javascripts/jscript.js

@@ -20,7 +20,6 @@ var language;
 var userid;
 var directUrl;
 var formatManager;
-var leftPanelToggle = false;
 
 window.onload = function () {
     fetch('formats')
@@ -611,26 +610,3 @@ function collectParams(startParams) {
     });
     return startChar + params.join("&");
 }
-
-function toggleLeftPanel(event) {
-    leftPanelToggle = !leftPanelToggle;
-    event.preventDefault();
-    let leftPanel = document.querySelector(".left-panel");
-    if (leftPanelToggle) {
-        leftPanel.classList.remove("hide");
-        leftPanel.classList.add("active")
-    } else {
-        leftPanel.classList.remove("active");
-        leftPanel.classList.add("hide");
-    }
-}
-
-function toggleUserDescr(event) {
-    let list = event.currentTarget.querySelector("ul");
-    let cursor = window.getComputedStyle(event.currentTarget).getPropertyValue("cursor");
-
-    if (cursor === 'pointer') {
-        if (list.classList.contains("open")) list.classList.remove("open");
-        else list.classList.add("open");
-    }
-}

web/documentserver-example/nodejs/public/stylesheets/media-wopi.css

@@ -141,6 +141,9 @@
     .contentCells-wopi {
         width: 100%;
     }
+    .contentCells-icon {
+    width: 1%;
+    }
     .contentCells-shift {
         padding-right: 30px;
         padding-left: 3px;
@@ -151,16 +154,3 @@
         width: 100%;
     }
 }
-@media (max-width: 592px) and (min-width: 320px) {
-    .tableRow td:last-child:after{
-        display: none;
-    }
-
-    .contentCells-wopi {
-        width: auto;
-    }
-
-    .downloadContentCells {
-        margin-left: 24px;
-    }
-}

web/documentserver-example/nodejs/public/stylesheets/media.css

@@ -74,12 +74,6 @@
     }
 }
 
-@media (max-width: 1279px) and (min-width: 1024px) {
-    menu.main-nav {
-        padding-left: 64px;
-    }
-}
-
 @media (max-width: 1080px) {
     .copy {
         margin-right: 32px;
@@ -131,12 +125,6 @@
     }
 }
 
-@media (max-width: 1023px) and (min-width: 593px) {
-    menu.main-nav {
-        padding-left: 40px;
-    }
-}
-
 @media (max-width: 769px) and (min-width: 593px) {
     .contentCells-icon{
         width: 5%;
@@ -782,229 +770,3 @@
         max-width: none;
     }
 }
-@media (max-width: 592px) and (min-width: 320px) {
-    header {
-        min-width: auto;
-    }
-
-    header, footer {
-        position: -webkit-sticky; /* Safari */
-        position: sticky;
-        top: 0;
-        z-index: 99;
-    }
-
-    .main-nav {
-        display: none;
-    }
-
-    .responsive-nav {
-        height: 24px;
-        display: flex;
-        flex-direction: row;
-        margin: 0;
-        align-items: center;
-        column-gap: 16px;
-        padding: 10px 16px;
-        width: 100%;
-    }
-
-    .left-panel {
-        background-color: rgba(186, 186, 186, 0.6);
-        display: none;
-        align-items: start;
-        width: 100%;
-        margin: 0;
-        position: fixed;
-        left: 0;
-        overflow-y: hidden;
-        height: calc(100% - 124px);
-        z-index:99;
-    }
-
-    .left-panel.hide {
-        display: none;
-    }
-
-    .left-panel.active {
-        display: flex;
-    }
-
-    .help-block {
-        height: calc(100% - 66px);
-        margin: 0;
-        background-color: #F5F5F5;
-        width: 192px;
-        padding: 33px 40px 33px 16px;
-        overflow-y: scroll;
-    }
-
-    .help-block::-webkit-scrollbar {
-        display: none;
-      }
-
-    .help-block {
-        -ms-overflow-style: none;  /* IE and Edge */
-        scrollbar-width: none;  /* Firefox */
-    }
-
-    .mobile-close-btn {
-        display: block;
-        width: 48px;
-        height: 48px;
-        background-color: #E2E2E2;
-        border-radius: 2px;
-        border-color: #E2E2E2;
-        color: #808080;
-        cursor: pointer;
-	    outline: inherit;
-        border: none;
-    }
-
-    .center {
-        width: 100%;
-        margin: 0;
-    }
-
-    .table-main {
-        width: 100%;
-    }
-
-    .main {
-        height: calc(100% - 124px);
-    }
-
-    .main-panel {
-        width: 100%;
-        left: 0;
-        padding: 28px 16px;
-        row-gap: 12px;
-    }
-
-    menu.links {
-        width: 100%;
-        margin: 0;
-        padding: 0;
-    }
-
-    #portal-info {
-        width: 100%;
-        max-width: fit-content;
-    }
-
-    #portal-info .portal-name {
-        font-size: 16px;
-    }
-
-    #portal-info span:nth-child(2) {
-        font-size: 13px;
-    }
-
-    #portal-info .portal-descr {
-        font-size: 12px;
-    }
-
-    .users-list>li:first-child {
-        margin-top: 12px;
-        border-top: 1px solid #E5E5E5;
-    }
-
-    .user-descr {
-        width: 100%;
-        max-width: none;
-        min-width: auto;
-        border-bottom: 1px solid #E5E5E5;
-        padding: 12px 0;
-        margin: 0;
-        cursor: pointer;
-    }
-
-    .user-descr ul {
-        display: none;
-    }
-
-    .user-descr ul.open {
-        display: block;
-    }
-
-    .user-descr b {
-        font-size: 13px;
-        display: flex;
-        align-items: center;
-        column-gap: 8px;
-        margin: 0;
-    }
-
-    .user-descr b::before {
-        content: url("/images/plus.svg");
-        display: inline-block;
-        width: 24px;
-        height: 24px;
-    }
-
-    .storedHeader {
-        width: 100%;
-        padding: 12px 0;
-    }
-
-    .scroll-table-body tr:first-child {
-        padding-top: 0;
-    }
-
-    .tableRow {
-        width: 100%;
-        row-gap: 16px;
-        padding: 16px 0;
-        border-bottom: 1px solid #e5e5e5;
-    }
-
-    .tableRow td:first-child {
-        width: 100%;
-    }
-
-    .tableRow td {
-        padding: 0;
-    }
-
-    .firstContentCellViewers {
-        border-bottom: none !important;
-    }
-
-    .firstContentCellViewers ~ td {
-        border-bottom: none !important;
-    }
-
-    .downloadContentCellShift:after {
-        display: none;
-    }
-
-    .stored-edit {
-        padding: 0;
-        padding-left: 26px;
-        display: flex;
-        align-items: center;
-    }
-
-    .stored-edit span {
-        font-size: 14px;
-        line-height: 22px;
-    }
-
-    .clear-all {
-        font-size: 11px;
-        width: 112px;
-        height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-    }
-
-    .scroll-table-body {
-        position: static;
-    }
-
-    .user-block-table {
-        height: auto;
-    }
-}

web/documentserver-example/nodejs/public/stylesheets/stylesheet.css

@@ -53,34 +53,14 @@ a:visited {
 
 header {
     background: #333333;
-    width: 100%;
-}
-
-.main-nav {
-    margin: 0;
-    display: flex;
-    align-items: center;
-    padding-left: 192px;
     height: 48px;
+    margin: 0 auto;
+    min-width: 1152px;
+    width: auto;
 }
 
-.main-nav, .responsive-nav {
-    list-style: none;
-    column-gap: 24px;
-}
-
-.main-nav li, .mobile-nav li {
-    display: flex;
-    align-items: center;
-    height: 24px;
-}
-
-.responsive-nav {
-    display: none;
-}
-
-.mobile-close-btn {
-    display: none;
+header img {
+    margin: 10px 0 22px 32px;
 }
 
 .center {
@@ -995,12 +975,6 @@ html {
     padding-right: 28px;
 }
 
-ul.users-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
 .user-descr {
     display: inline-table;
     width: 30vw;

web/documentserver-example/nodejs/views/index.ejs

@@ -32,27 +32,11 @@
 </head>
 <body>
     <header>
-        <nav>
-            <menu class="main-nav">
-                <li>
-                    <a href="./">
-                        <img src ="images/logo.svg" alt="ONLYOFFICE" />
-                    </a>
-                </li>
-            </menu>
-            <menu class="responsive-nav">
-                <li>
-                    <a href="#" onclick="toggleLeftPanel(event)">
-                        <img src ="images/mobile-menu.svg" alt="ONLYOFFICE" />
-                    </a>
-                </li>
-                <li>
-                    <a href="./">
-                        <img src ="images/mobile-logo.svg" alt="ONLYOFFICE" />
-                    </a>
-                </li>
-            </menu>
-        </nav>
+        <div class="center">
+            <a href="./">
+                <img src ="images/logo.svg" alt="ONLYOFFICE" />
+            </a>
+        </div>
     </header>
     <div class="center main">
         <table class="table-main">
@@ -124,9 +108,6 @@
                                 </table>
                             </div>
                         </div>
-                        <button class="mobile-close-btn" onclick="toggleLeftPanel(event)">
-                            <img src="images/close.svg" alt="">
-                        </button>
                     </td>
                     <td class="section">
                         <div class="main-panel">
@@ -148,18 +129,16 @@
                                 </span>
                                 <span class="portal-descr">Please do NOT use this integration example on your own server without proper code modifications, it is intended for testing purposes only. In case you enabled this test example, disable it before going for production.</span>
                                 <span class="portal-descr">You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.</span>
-                                <ul class="users-list">
-                                    <% users.forEach(user => { %>
-                                        <li class="user-descr" onclick="toggleUserDescr(event)">
-                                            <b><%= user.name == null ? 'Anonymous' : user.name %></b>
-                                            <ul>
-                                                <% user.descriptions.forEach(description => { %>
-                                                    <li><%= description %></li>
-                                                <% }) %>
-                                            </ul>
-                                        </li>
-                                    <% }) %>
-                                </ul>
+                                <% users.forEach(user => { %>
+                                    <div class="user-descr">
+                                        <b><%= user.name == null ? 'Anonymous' : user.name %></b>
+                                        <ul>
+                                            <% user.descriptions.forEach(description => { %>
+                                                <li><%= description %></li>
+                                            <% }) %>
+                                        </ul>
+                                    </div>
+                                <% }) %>
                             </div>
                             <%if (storedFiles.length > 0)
                                 {%>

web/documentserver-example/nodejs/views/wopiIndex.ejs

@@ -34,27 +34,11 @@
 
 <body>
     <header>
-        <nav>
-            <menu class="main-nav">
-                <li>
-                    <a href="./">
-                        <img src ="images/logo.svg" alt="ONLYOFFICE" />
-                    </a>
-                </li>
-            </menu>
-            <menu class="responsive-nav">
-                <li>
-                    <a href="#" onclick="toggleLeftPanel(event)">
-                        <img src ="images/mobile-menu.svg" alt="ONLYOFFICE" />
-                    </a>
-                </li>
-                <li>
-                    <a href="./">
-                        <img src ="images/mobile-logo.svg" alt="ONLYOFFICE" />
-                    </a>
-                </li>
-            </menu>
-        </nav>
+        <div class="center">
+            <a href="wopi">
+                <img src="images/logo.svg" alt="ONLYOFFICE" />
+            </a>
+        </div>
     </header>
     <div class="center main">
         <table class="table-main">
@@ -115,9 +99,6 @@
                                 </tbody>
                             </table>
                         </div>
-                        <button class="mobile-close-btn" onclick="toggleLeftPanel(event)">
-                            <img src="images/close.svg" alt="">
-                        </button>
                     </td>
                     <td class="section">
                         <div class="main-panel">

web/documentserver-example/php/assets/components/files/actions.html

@@ -0,0 +1,10 @@
+<td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">
+    <a href="download?fileName=">
+        <img class="icon-download" src="assets/images/download.svg" alt="Download" title="Download">
+    </a>
+</td>
+<td class="contentCells contentCells-icon contentCells-shift">
+    <a class="delete-file">
+        <img class="icon-delete" src="assets/images/delete.svg" alt="Delete" title="Delete">
+    </a>
+</td>

web/documentserver-example/php/assets/components/files/editors.html

@@ -0,0 +1,54 @@
+<template id="action-editable">
+    <td class="contentCells contentCells-icon">
+        <a href="&action=edit&type=desktop" target="_blank">
+            <img src="assets/images/desktop.svg" alt="Open in editor for full size screens"
+                title="Open in editor for full size screens">
+        </a>
+    </td>
+    <td class="contentCells contentCells-icon">
+        <a href="&action=edit&type=mobile" target="_blank">
+            <img src="assets/images/mobile.svg" alt="Open in editor for mobile devices"
+                title="Open in editor for mobile devices">
+        </a>
+    </td>
+    <td class="contentCells contentCells-icon">
+        <a href="&action=comment&type=desktop" target="_blank">
+            <img src="assets/images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment">
+        </a>
+    </td>
+</template>
+<template id="type-word">
+    <td class="contentCells contentCells-icon">
+        <a href="&action=review&type=desktop" target="_blank">
+            <img src="assets/images/review.svg" alt="Open in editor for review" title="Open in editor for review">
+        </a>
+    </td>
+    <td class="contentCells contentCells-icon">
+        <a href="&action=blockcontent&type=desktop" target="_blank">
+            <img src="assets/images/block-content.svg" alt="Open in editor without content control modification"
+                title="Open in editor without content control modification">
+        </a>
+    </td>
+</template>
+<template id="type-cell">
+    <td class="contentCells contentCells-icon">
+        <a href="&action=filter&type=desktop" target="_blank">
+            <img src="assets/images/filter.svg" alt="Open in editor without access to change the filter"
+                title="Open in editor without access to change the filter">
+        </a>
+    </td>
+</template>
+<template id="action-fillable">
+    <td class="contentCells contentCells-icon firstContentCellShift contentCells-shift">
+        <a href="&action=fillForms&type=desktop" target="_blank">
+            <img src="assets/images/fill-forms.svg" alt="Open in editor for filling in forms"
+                title="Open in editor for filling in forms">
+        </a>
+    </td>
+    <td class="contentCells contentCells-icon">
+        <a href="&action=fillForms&type=desktop" target="_blank">
+            <img src="assets/images/mobile-fill-forms.svg" alt="Open in editor for filling in forms for mobile devices"
+                title="Open in editor for filling in forms for mobile devices">
+        </a>
+    </td>
+</template>

web/documentserver-example/php/assets/components/files/files.js

@@ -0,0 +1,281 @@
+/**
+ *
+ * (c) Copyright Ascensio System SIA 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+class FilesList extends HTMLElement {
+    constructor() {
+        super();
+        this.template = null;
+    }
+
+    async connectedCallback() {
+        if (!this.template) {
+            await this.initTemplate();
+        }
+    }
+
+    async initTemplate() {
+        let templateHtml = await fetch("assets/components/files/template.html")
+            .then((stream) => stream.text());
+
+        this.template = document.createElement("template");
+        this.template.innerHTML = templateHtml;
+        const templateContent = this.template.content.cloneNode(true);
+        this.style.display = "block";
+        this.classList.add("stored-list");
+        this.container = templateContent.querySelector("tbody");
+        this.appendChild(templateContent);
+
+    }
+
+    render() {
+        this.files.forEach(file => {
+            const row = document.createElement("tr", { is: "files-row" })
+            row.dataset.file = JSON.stringify(file);
+            row.dataset.user = this.user;
+            row.dataset.directUrl = this.directUrl;
+
+            this.container.appendChild(row);
+        });
+    }
+
+    static get observedAttributes() {
+        return ["data"];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "data") {
+            this.container.innerHTML = "";
+            this.render();
+        }
+    }
+
+    get data() {
+        return JSON.parse(this.getAttribute("data")) || {}
+    }
+
+    get files() {
+        return this.data.files;
+    }
+
+    get user() {
+        return this.data.user;
+    }
+
+    get encodedUser() {
+        return encodeURIComponent(this.user);
+    }
+
+    get directUrl() {
+        return this.data.directUrl;
+    }
+
+    get encodedDirectUrl() {
+        return encodeURIComponent(this.directUrl);
+    }
+}
+
+class FilesRow extends HTMLTableRowElement {
+    constructor() {
+        super();
+        this.viewersTemplate = null;
+        this.editorsTemplate = null;
+        this.actionsTemplate = null;
+    }
+
+    async connectedCallback() {
+        if (!this.viewersTemplate || !this.editorsTemplate || !this.actionsTemplate)
+            await this.initTemplates();
+        this.render();
+    }
+
+    async initTemplates() {
+        this.viewersTemplate = await fetch("assets/components/files/viewers.html")
+            .then((stream) => stream.text());
+        this.editorsTemplate = await fetch("assets/components/files/editors.html")
+            .then((stream) => stream.text());
+        this.actionsTemplate = await fetch("assets/components/files/actions.html")
+            .then((stream) => stream.text());
+    }
+
+    render() {
+        this.initSelf();
+        this.appendChild(this.createNameColumn());
+
+        let editors = this.createEditorsColumns();
+        for (let i = 0; i < editors.length; i++) {
+            this.appendChild(editors[i]);
+        }
+
+        let viewers = this.createViewersColumns();
+        for (let i = 0; i < viewers.length; i++) {
+            this.appendChild(viewers[i]);
+        }
+
+        let actions = this.createActionsColumns();
+        for (let i = 0; i < actions.length; i++) {
+            this.appendChild(actions[i]);
+        }
+    }
+
+    initSelf() {
+        this.classList.add("tableRow");
+        this.title = this.name;
+    }
+
+    createNameColumn() {
+        let column = document.createElement("td", { is: "files-name-column" })
+        column.dataset.type = this.file.type;
+        column.dataset.url = this.editorUrl;
+        column.dataset.name = this.file.title;
+
+        return column;
+    }
+
+    createEditorsColumns() {
+        let template = document.createElement("template");
+        template.innerHTML = this.editorsTemplate;
+        let columns = [];
+
+        if (this.file.editable) {
+            let container = template.content.querySelector("#action-editable").content.cloneNode(true);
+            container.querySelectorAll("td").forEach(td => {
+                container.querySelectorAll("a").forEach(link => {
+                    link.href = this.editorUrl + link.href;
+                });
+                columns.push(td);
+            })
+        }
+        if (this.file.type === "word") {
+            let container = template.content.querySelector("#type-word").content.cloneNode(true);
+            container.querySelectorAll("td").forEach(td => {
+                container.querySelectorAll("a").forEach(link => {
+                    link.href = this.editorUrl + link.href;
+                });
+                columns.push(td);
+            })
+        }
+        if (this.file.type === "cell") {
+            let container = template.content.querySelector("#type-cell").content.cloneNode(true);
+            container.querySelectorAll("td").forEach(td => {
+                container.querySelectorAll("a").forEach(link => {
+                    link.href = this.editorUrl + link.href;
+                });
+                columns.push(td);
+            })
+        }
+        if (this.file.fillable) {
+            let container = template.content.querySelector("#action-fillable").content.cloneNode(true);
+            container.querySelectorAll("td").forEach(td => {
+                container.querySelectorAll("a").forEach(link => {
+                    link.href = this.editorUrl + link.href;
+                });
+                columns.push(td);
+            })
+        }
+        return columns;
+    }
+
+    createViewersColumns() {
+        let template = document.createElement("template");
+        template.innerHTML = this.viewersTemplate;
+        let columns = template.content.querySelectorAll("td");
+        columns.forEach(column => {
+            let link = column.querySelector("a");
+            link.href = this.editorUrl + link.href;
+        });
+        return columns;
+    }
+
+    createActionsColumns() {
+        let template = document.createElement("template");
+        template.innerHTML = this.actionsTemplate;
+        let columns = template.content.querySelectorAll("td");
+        columns.forEach(column => {
+            let link = column.querySelector("a");
+            let img = link.querySelector("img");
+            if (img.title === "Download") link.href += this.encodedTitle;
+            if (img.title === "Delete") link.setAttribute("data", this.file.title);
+        });
+        return columns;
+    }
+
+    get file() {
+        return JSON.parse(this.dataset.file || {});
+    }
+
+    get name() {
+        return `${this.file.title} ${this.file.version}`;
+    }
+
+    get encodedTitle() {
+        return encodeURIComponent(this.file.title);
+    }
+
+    get user() {
+        return this.dataset.user;
+    }
+
+    get encodedUser() {
+        return encodeURIComponent(this.user);
+    }
+
+    get directUrl() {
+        return this.dataset.directUrl;
+    }
+
+    get encodedDirectUrl() {
+        return encodeURIComponent(this.directUrl);
+    }
+
+    get editorUrl() {
+        return `editor?fileID=${this.encodedTitle}&user=${this.encodedUser}&directUrl=${this.encodedDirectUrl}`;
+    }
+}
+
+class FilesNameColumn extends HTMLTableCellElement {
+    connectedCallback() {
+        this.classList.add("contentCells");
+
+        let link = document.createElement("a");
+        link.classList.add("stored-edit", this.type);
+        link.href = this.url;
+        link.target = "_blank";
+
+        let span = document.createElement("span");
+        span.innerHTML = this.name;
+
+        link.appendChild(span);
+        this.appendChild(link);
+    }
+
+    get type() {
+        return this.dataset.type || "";
+    }
+
+    get url() {
+        return this.dataset.url || "";
+    }
+
+    get name() {
+        return this.dataset.name || "";
+    }
+}
+
+customElements.define("files-list", FilesList);
+customElements.define("files-row", FilesRow, { extends: "tr" });
+customElements.define("files-name-column", FilesNameColumn, { extends: "td" });

web/documentserver-example/php/assets/components/files/template.html

@@ -0,0 +1,27 @@
+<span class="header-list">Your documents</span>
+<table class="tableHeader" cellspacing="0" cellpadding="0" width="100%">
+    <thead>
+        <tr>
+            <td class="tableHeaderCell tableHeaderCellFileName">
+                Filename
+            </td>
+            <td class="tableHeaderCell tableHeaderCellEditors contentCells-shift">
+                Editors
+            </td>
+            <td class="tableHeaderCell tableHeaderCellViewers">
+                Viewers
+            </td>
+            <td class="tableHeaderCell tableHeaderCellDownload">
+                Download
+            </td>
+            <td class="tableHeaderCell tableHeaderCellRemove">
+                Remove
+            </td>
+        </tr>
+    </thead>
+</table>
+<div class="scroll-table-body">
+    <table cellspacing="0" cellpadding="0" width="100%">
+        <tbody><tbody>
+    </table>
+</div>

web/documentserver-example/php/assets/components/files/viewers.html

@@ -0,0 +1,17 @@
+<td class="contentCells contentCells-icon firstContentCellViewers">
+    <a href="&action=view&type=desktop" target="_blank">
+        <img src="assets/images/desktop.svg" alt="Open in viewer for full size screens"
+            title="Open in viewer for full size screens">
+    </a>
+</td>
+<td class="contentCells contentCells-icon">
+    <a href="&action=edit&type=mobile" target="_blank">
+        <img src="assets/images/mobile.svg" alt="Open in viewer for mobile devices"
+            title="Open in viewer for mobile devices">
+    </a>
+</td>
+<td class="contentCells contentCells-icon contentCells-shift">
+    <a href="&action=embedded&type=embedded" target="_blank">
+        <img src="assets/images/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode">
+    </a>
+</td>

web/documentserver-example/php/assets/js/jscript.js

@@ -19,8 +19,8 @@
 var directUrl;
 var formatManager;
 
-window.onload = function () {
-    fetch('formats')
+window.onload = async function () {
+    await fetch('formats')
         .then((response) => response.json())
         .then((data) => {
             if (data.formats) {
@@ -37,6 +37,36 @@ window.onload = function () {
                 formatManager = new FormatManager(formats);
             }
         })
+    let files = await fetchFilesList();
+    displayFilesList(files);
+}
+
+function fetchFilesList() {
+    return fetch('/files')
+    .then(response => response.json())
+    .then(files => {
+        files.forEach((file) => {
+            let format = this.formatManager.findByExtension(file.title.split('.').pop());
+            file.editable = format.isEditable();
+            file.fillable = format.isFillable();
+            file.type = format.type;
+        });
+        files = Array.isArray(files) && files.length ? files : null;
+        return files;
+    });
+}
+
+function displayFilesList(files) {
+    let list = document.querySelector("files-list");
+    if (files) {
+        list.setAttribute("data", JSON.stringify({
+            user,
+            directUrl,
+            files
+        }));
+    } else {
+        list.style.display = "none";
+    }   
 }
 
 if (typeof jQuery != "undefined") {

web/documentserver-example/php/src/ajax.php

@@ -326,7 +326,7 @@ function files()
     try {
         @header("Content-Type", "application/json");
 
-        $fileId = $_GET["fileId"];
+        $fileId = isset($_GET["fileName"]) && !empty($_GET["fileName"]) ? $_GET["fileName"] : null;
         $result = getFileInfo($fileId);
 
         return $result;

web/documentserver-example/php/templates/index.tpl

@@ -125,7 +125,7 @@
                                     </span>
                             {userDescr}
                             </div>
-                            {storedList}
+                            <files-list></files-list>
                         </div>
                 </td>
             </tr>
@@ -221,6 +221,7 @@
 <script type="text/javascript" src="assets/js/jquery.fileupload.js"></script>
 <script type="text/javascript" src="assets/js/jquery.dropdownToggle.js"></script>
 <script type="text/javascript" src="assets/js/formats.js"></script>
+<script type="text/javascript" src="assets/components/files/files.js"></script>
 <script type="text/javascript" src="assets/js/jscript.js"></script>
 </body>
 </html>