custom-electron-titlebar 4.4.0 → 4.4.1

package/README.md

@@ -2,15 +2,11 @@
 
 This project is a typescript library for electron that allows you to configure a fully customizable title bar.
 
-[![CI](https://badgen.net/github/checks/AlexTorresDev/custom-electron-titlebar?label=CI)](https://github.com/AlexTorresDev/custom-electron-titlebar/actions/workflows/build-release.yml)
+[![CI](https://badgen.net/github/checks/AlexTorresDev/custom-electron-titlebar?label=CI)](https://github.com/AlexTorresDev/custom-electron-titlebar/actions/workflows/build.yml)
 [![License](https://badgen.net/github/license/AlexTorresDev/custom-electron-titlebar?label=License)](https://github.com/AlexTorresDev/custom-electron-titlebar/blob/master/LICENSE)
 [![NPM](https://badgen.net/npm/v/custom-electron-titlebar?label=NPM)](https://npmjs.org/package/custom-electron-titlebar)
 [![Install size](https://badgen.net/packagephobia/install/custom-electron-titlebar?label=Install%20size)](https://packagephobia.com/result?p=custom-electron-titlebar)
 
-> [!IMPORTANT]  
-> This project will no longer be maintained, because I am the only one working on it and I have no free time left to review the issues and incorporate new features or update the dependencies to the latest versions.
->
-> **Thanks to all the contributors and dependents of this library.**
 
 [📄 Documentation](https://github.com/AlexTorresDev/custom-electron-titlebar/wiki)
 

package/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -4434,29 +4424,20 @@ var _MenuBar = class _MenuBar extends Disposable {
 _MenuBar.OVERFLOW_INDEX = -1;
 var MenuBar = _MenuBar;
 
+// raw-loader:/home/runner/work/custom-electron-titlebar/custom-electron-titlebar/static/theme/base.css?raw
+var base_default = "body {\n  margin: 0 !important;\n  overflow: hidden !important;\n}\n\n/* Titlebar */\n.cet-titlebar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  font-size: var(--cet-font-size, 13px);\n  font-family: var(--cet-font-family, Arial, Helvetica, sans-serif);\n  box-sizing: border-box;\n  padding: 0 16px;\n  overflow: hidden;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  zoom: 1;\n  width: 100%;\n  height: 31px;\n  line-height: 31px;\n  z-index: 99999;\n}\n\n.cet-titlebar *,\n.cet-titlebar *:before,\n.cet-titlebar *:after {\n  box-sizing: border-box;\n}\n\n.cet-titlebar.cet-windows,\n.cet-titlebar.cet-linux,\n.cet-titlebar.cet-freebsd {\n  padding: 0;\n  height: 30px;\n  line-height: 30px;\n  justify-content: left;\n  overflow: visible;\n}\n\n/* Inverted */\n.cet-titlebar.cet-inverted {\n  flex-direction: row-reverse;\n}\n\n.cet-titlebar.cet-inverted .cet-menubar,\n.cet-titlebar.cet-inverted .cet-window-controls {\n  flex-direction: row-reverse;\n  margin-left: 20px;\n  margin-right: 0;\n}\n\n/* First buttons */\n.cet-titlebar.cet-first-buttons .cet-window-controls {\n  order: -1;\n  margin: 0 5px 0 0;\n}\n\n.cet-titlebar.cet-inverted .cet-window-controls {\n  margin: 0 5px 0 0;\n}\n\n/* Shadow */\n.cet-titlebar.cet-shadow {\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);\n}\n\n/* Drag region */\n.cet-drag-region {\n  top: 0;\n  left: 0;\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  -webkit-app-region: drag;\n}\n\n/* Icon */\n.cet-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 30px;\n  z-index: 99;\n  overflow: hidden;\n}\n\n/* Title */\n.cet-title {\n  flex: 0 1 auto;\n  font-size: var(--cet-title-font-size, 12px);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  zoom: 1;\n}\n\n/* Title alignment */\n.cet-title.cet-title-left {\n  margin-left: 8px;\n  margin-right: auto;\n}\n\n.cet-title.cet-title-right {\n  margin-left: auto;\n  margin-right: 8px;\n}\n\n.cet-title.cet-title-center {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.cet-title.cet-bigsur {\n  font-size: 13px;\n  font-weight: 600;\n}\n\n/* Window controls */\n.cet-window-controls {\n  display: flex;\n  flex-grow: 0;\n  flex-shrink: 0;\n  text-align: center;\n  position: relative;\n  z-index: 99;\n  -webkit-app-region: no-drag;\n  height: 30px;\n  font-family: initial !important;\n  margin-left: auto;\n}\n\n.cet-control-icon {\n  width: 2.85rem;\n}\n\n.cet-control-icon:not(.inactive):hover {\n  background-color: rgb(255 255 255 / 12%);\n}\n\n.light .cet-control-icon:not(.inactive):hover {\n  background-color: rgb(0 0 0 / 12%);\n}\n\n.cet-control-icon.inactive svg {\n  opacity: 0.4;\n}\n\n.cet-control-icon svg {\n  width: 10px;\n  height: -webkit-fill-available;\n  fill: #fff;\n  display: initial !important;\n  vertical-align: unset !important;\n}\n\n.cet-titlebar.light .cet-control-icon svg {\n  fill: #222222 !important;\n}\n\n.cet-control-close:not(.inactive):hover {\n  background-color: rgb(232 17 35 / 90%) !important;\n}\n\n.cet-control-close:not(.inactive):hover svg {\n  fill: #fff !important;\n}\n\n/* Resizer */\n.cet-resizer {\n  -webkit-app-region: no-drag;\n  position: absolute;\n}\n\n.cet-resizer.left {\n  top: 0;\n  left: 0;\n  width: 6px;\n  height: 100%;\n}\n\n.cet-resizer.top {\n  top: 0;\n  width: 100%;\n  height: 6px;\n}\n\n/* Container */\n.cet-container {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: auto;\n  z-index: 1;\n}\n\n/* MenuBar */\n.cet-menubar {\n  min-width: 0;\n  display: flex;\n  flex-shrink: 1;\n  flex-grow: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  flex-wrap: nowrap;\n  margin-right: 20px;\n}\n\n.cet-menubar.bottom {\n  order: 1;\n  width: 100%;\n  padding: 0 5px 5px;\n  margin-right: 0;\n}\n\n.cet-menubar.bottom .cet-menubar-menu-button {\n  border-radius: 4px;\n}\n\n.cet-menubar.bottom .cet-menubar-menu-button .cet-menubar-menu-title {\n  line-height: 26px;\n}\n\n.cet-menubar .cet-menubar-menu-button {\n  box-sizing: border-box;\n  padding: 0px 8px;\n  height: 100%;\n  cursor: default;\n  zoom: 1;\n  white-space: nowrap;\n  -webkit-app-region: no-drag;\n  outline: 0;\n}\n\n.cet-menubar .cet-menubar-menu-button .cet-menubar-menu-title {\n  font-size: var(--cet-menu-font-size, 12px);\n}\n\n.cet-menubar .cet-menubar-menu-title.cet-toggle-more {\n  font-weight: 700;\n  letter-spacing: 1px;\n}\n\n.cet-menubar .cet-menubar-menu-button.disabled {\n  opacity: 0.4;\n}\n\n.cet-menubar .cet-menubar-menu-button:not(.disabled):hover,\n.cet-menubar .cet-menubar-menu-button:not(.disabled).open {\n  background-color: rgb(255 255 255 / 12%);\n}\n\n.cet-titlebar.light .cet-menubar .cet-menubar-menu-button:not(.disabled):hover,\n.cet-titlebar.light .cet-menubar .cet-menubar-menu-button:not(.disabled).open {\n  background-color: rgb(0 0 0 / 12%);\n}\n\n.cet-menubar-menu-container {\n  position: absolute;\n  display: block;\n  left: 0px;\n  opacity: 1;\n  outline: 0;\n  border: none;\n  text-align: left;\n  margin: 0 auto;\n  margin-left: 0;\n  font-size: inherit;\n  overflow-x: visible;\n  overflow-y: visible;\n  -webkit-overflow-scrolling: touch;\n  justify-content: flex-end;\n  white-space: nowrap;\n  border-radius: 7px;\n  backdrop-filter: blur(10px);\n  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);\n  z-index: 99999;\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar {\n  width: 8px;\n  height: 4px;\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar-track {\n  border: none;\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar-thumb {\n  border-radius: 10px;\n  background-color: rgba(110, 110, 110, 0.2);\n}\n\n.cet-menubar-menu-container:focus {\n  outline: 0;\n}\n\n.cet-menubar-menu-container .cet-action-item {\n  padding: 0;\n  margin: 0;\n  transform: none;\n  display: -ms-flexbox;\n  display: flex;\n  outline: none;\n}\n\n.cet-menubar-menu-container .cet-action-item.active {\n  transform: none;\n}\n\n.cet-menubar-menu-container .cet-action-item.disabled .cet-action-menu-item {\n  opacity: 0.4;\n}\n\n.cet-menubar-menu-container .cet-action-item .cet-submenu {\n  position: absolute;\n}\n\n.cet-menubar-menu-container .cet-action-menu-item {\n  -ms-flex: 1 1 auto;\n  flex: 1 1 auto;\n  display: -ms-flexbox;\n  display: flex;\n  height: 2.231em;\n  margin: 4px 3px;\n  align-items: center;\n  position: relative;\n  border-radius: 4px;\n  text-decoration: none;\n}\n\n.cet-menubar-menu-container .cet-action-label {\n  -ms-flex: 1 1 auto;\n  flex: 1 1 auto;\n  text-decoration: none;\n  padding: 0 1em;\n  background: none;\n  font-size: 12px;\n  line-height: 1;\n}\n\n.cet-menubar-menu-container .cet-action-label:not(.separator) {\n  display: inline-block;\n  -webkit-box-sizing: border-box;\n  -o-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  -ms-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0 2em 0 0.8em;\n}\n\n.cet-menubar-menu-container .cet-action-label.separator {\n  opacity: 0.1;\n  font-size: inherit;\n  width: 100%;\n  border-bottom: 1px solid transparent;\n}\n\n.cet-menubar-menu-container .cet-action-label.separator.text {\n  padding: 0.7em 1em 0.1em 1em;\n  font-weight: bold;\n  opacity: 1;\n}\n\n.cet-menubar-menu-container .cet-action-label:hover {\n  color: inherit;\n}\n\n.cet-menubar-menu-container .keybinding,\n.cet-menubar-menu-container .cet-submenu-indicator {\n  display: inline-block;\n  -ms-flex: 2 1 auto;\n  flex: 2 1 auto;\n  padding: 0 2em 0 1em;\n  text-align: right;\n  font-size: 11px;\n  line-height: 1;\n}\n\n.cet-menubar-menu-container .cet-submenu-indicator {\n  position: absolute;\n  right: 4px;\n  height: 12px;\n  width: 12px;\n  padding: 0;\n}\n\n.cet-menubar-menu-container .cet-submenu-indicator img,\n.cet-menubar-menu-container .cet-menu-item-icon .icon,\n.cet-menubar-menu-container .cet-submenu-indicator svg,\n.cet-menubar-menu-container .cet-menu-item-icon svg {\n  display: inherit;\n  width: 100%;\n  height: 100%;\n}\n\n.cet-menubar-menu-container .cet-action-menu-item.checked>.cet-menu-item-icon.checkbox {\n  visibility: visible;\n}\n\n.cet-menubar-menu-container .cet-menu-item-icon {\n  width: 14px;\n  height: 14px;\n  margin: 0 0 0 12px;\n}\n\n.cet-menubar-menu-container .cet-menu-item-icon.checkbox {\n  visibility: hidden;\n}";
+
+// raw-loader:/home/runner/work/custom-electron-titlebar/custom-electron-titlebar/static/theme/mac.css?raw
+var mac_default = "";
+
+// raw-loader:/home/runner/work/custom-electron-titlebar/custom-electron-titlebar/static/theme/win.css?raw
+var win_default = "";
+
 // src/titlebar/themebar.ts
-var path = __toESM(require("path"));
-var fs = __toESM(require("fs"));
-function loadThemeCss(filename) {
-  let cssPath = path.resolve(process.cwd(), "dist/theme", filename);
-  if (!fs.existsSync(cssPath)) {
-    cssPath = path.resolve(process.cwd(), "static/theme", filename);
-  }
-  try {
-    return fs.readFileSync(cssPath, "utf8");
-  } catch (e) {
-    console.warn("Could not load theme CSS:", cssPath, e);
-    return "";
-  }
-}
-var baseTheme = loadThemeCss("base.css");
-var macTheme = loadThemeCss("mac.css");
-var winTheme = loadThemeCss("win.css");
 var ThemingRegistry = class extends Disposable {
   constructor() {
     super();
     this.theming = [];
-    this.theming = [];
   }
   onThemeChange(theme) {
     this.theming.push(theme);
@@ -4473,7 +4454,7 @@ var ThemeBar = class extends ThemingRegistry {
   constructor() {
     super();
     this.registerTheme((collector) => {
-      collector.addRule(baseTheme);
+      collector.addRule(base_default);
     });
   }
   registerTheme(theme) {
@@ -4493,12 +4474,12 @@ var ThemeBar = class extends ThemingRegistry {
   }
   static get win() {
     return (collector) => {
-      collector.addRule(winTheme);
+      collector.addRule(win_default);
     };
   }
   static get mac() {
     return (collector) => {
-      collector.addRule(macTheme);
+      collector.addRule(mac_default);
     };
   }
 };
@@ -4510,6 +4491,7 @@ function _applyRules(styleSheetContent, rulesClassName) {
     styleElement.innerHTML = styleSheetContent;
     document.head.appendChild(styleElement);
   } else {
+    ;
     themeStyles[0].innerHTML = styleSheetContent;
   }
 }
@@ -5093,9 +5075,9 @@ var CustomTitlebar = class extends ThemeBar {
    * It method set new icon to title-bar-icon of title-bar.
    * @param path path to icon
    */
-  updateIcon(path2) {
+  updateIcon(path) {
     if (this.icon && this.icon.firstElementChild) {
-      this.icon.firstElementChild.setAttribute("src", path2);
+      this.icon.firstElementChild.setAttribute("src", path);
     }
     return this;
   }
@@ -5244,8 +5226,8 @@ var CustomTitlebar = class extends ThemeBar {
 var createTitlebar = (options = {}) => new CustomTitlebar(options);
 var createTitlebarOnDOMContentLoaded = (options = {}) => {
   if (document.readyState === "loading") {
-    return new Promise((resolve2) => {
-      window.addEventListener("DOMContentLoaded", () => resolve2(new CustomTitlebar(options)), { once: true });
+    return new Promise((resolve) => {
+      window.addEventListener("DOMContentLoaded", () => resolve(new CustomTitlebar(options)), { once: true });
     });
   }
   return Promise.resolve(new CustomTitlebar(options));