@design.estate/dees-catalog 1.0.235 → 1.0.236

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.235",
+  "version": "1.0.236",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.235',
+  version: '1.0.236',
   description: 'website for lossless.com'
 }

package/ts_web/elements/dees-dataview-codebox.ts

@@ -69,41 +69,7 @@ export class DeesDataviewCodebox extends DeesElement {
           line-height: 24px;
         }
 
-        .appbar .macControls {
-          position: absolute;
-          top: 6px;
-          left: 20px;
-          width: 200px;
-          display: grid;
-          grid-template-columns: 24px 24px 24px;
-        }
-
-        .appbar .macControls div {
-          width: 12px;
-          height: 12px;
-          display: inline-block;
-          border-radius: 50%;
-          margin: 0px;
-          padding: 0px;
-          cursor: pointer;
-          background: #222222;
-        }
-
-        .appbar .macControls div.close {
-          background: #ff5f57;
-        }
-
-        .appbar .macControls div.toDock {
-          background: #ffbd2e;
-        }
-
-        .appbar .macControls div.minMax {
-          background: #27c93f;
-        }
-
-        .appbar .macControls div:hover {
-          background: #333333;
-        }
+        
 
         .appbar .fileName {
           text-align: center;
@@ -209,11 +175,7 @@ export class DeesDataviewCodebox extends DeesElement {
         }}"
       >
         <div class="appbar">
-          <div class="macControls">
-            <div class="close"></div>
-            <div class="toDock"></div>
-            <div class="minMax"></div>
-          </div>
+          <dees-windowcontrols></dees-windowcontrols>
           <div class="fileName">index.ts</div>
         </div>
         <div class="codegrid">

package/ts_web/elements/dees-windowcontrols.ts

@@ -0,0 +1,74 @@
+import {
+  customElement,
+  DeesElement,
+  domtools,
+  type TemplateResult,
+  html,
+  property,
+  type CSSResult,
+  state,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-windowcontrols': DeesWindowControls;
+  }
+}
+
+@customElement('dees-windowcontrols')
+export class DeesWindowControls extends DeesElement {
+  public static demo = () => html`<dees-windowcontrols></dees-windowcontrols>`;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .windowControls {
+        position: absolute;
+        top: 6px;
+        left: 20px;
+        width: 200px;
+        display: grid;
+        grid-template-columns: 24px 24px 24px;
+      }
+
+      .windowControls div {
+        width: 12px;
+        height: 12px;
+        display: inline-block;
+        border-radius: 50%;
+        margin: 0px;
+        padding: 0px;
+        cursor: pointer;
+        background: #222222;
+      }
+
+      .windowControls div.close {
+        background: #ff5f57;
+      }
+
+      .windowControls div.toDock {
+        background: #ffbd2e;
+      }
+
+      .windowControls div.minMax {
+        background: #27c93f;
+      }
+
+      .windowControls div:hover {
+        background: #333333;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="windowControls">
+        <div class="close"></div>
+        <div class="toDock"></div>
+        <div class="minMax"></div>
+      </div>
+    `;
+  }
+}

package/ts_web/elements/dees-windowlayer.ts

@@ -1,6 +1,4 @@
-import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
-
-import * as domtools from '@design.estate/dees-domtools';
+import { customElement, DeesElement, domtools, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
 
 declare global {
   interface HTMLElementTagNameMap {

package/ts_web/elements/index.ts

@@ -27,4 +27,5 @@ export * from './dees-stepper.js';
 export * from './dees-table.js';
 export * from './dees-toast.js';
 export * from './dees-updater.js';
+export * from './dees-windowcontrols.js';
 export * from './dees-windowlayer.js';