fix(core): update

ts_web/elements/dees-windowcontrols.ts

@@ -19,18 +19,37 @@ declare global {
 
 @customElement('dees-windowcontrols')
 export class DeesWindowControls extends DeesElement {
+  // STATIC
   public static demo = () => html`<dees-windowcontrols></dees-windowcontrols>`;
 
+  // Instance
+  @property({
+    reflect: true,
+  })
+  public type: 'mac' | 'linux' | 'windows' = 'mac';
+
+  @property({
+    reflect: true,
+  })
+  public position: 'left' | 'right' = 'left';
+
   public static styles = [
     cssManager.defaultStyles,
     css`
+      :host {
+        position: relative;
+        display: block;
+        box-sizing: border-box;
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+
       .windowControls {
-        position: absolute;
-        top: 6px;
-        left: 20px;
-        width: 200px;
-        display: grid;
-        grid-template-columns: 24px 24px 24px;
+        height: 100%;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
       .windowControls div {
@@ -40,16 +59,17 @@ export class DeesWindowControls extends DeesElement {
         border-radius: 50%;
         margin: 0px;
         padding: 0px;
-        cursor: pointer;
         background: #222222;
       }
 
       .windowControls div.close {
         background: #ff5f57;
+        margin-right: 12px;
       }
 
       .windowControls div.toDock {
         background: #ffbd2e;
+        margin-right: 12px;
       }
 
       .windowControls div.minMax {
@@ -64,11 +84,16 @@ export class DeesWindowControls extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="windowControls">
-        <div class="close"></div>
-        <div class="toDock"></div>
-        <div class="minMax"></div>
-      </div>
+      ${(this.type === 'mac' && this.position === 'left') ||
+      ((this.type === 'linux' || this.type === 'windows') && this.position === 'right')
+        ? html`
+            <div class="windowControls">
+              <div class="close"></div>
+              <div class="toDock"></div>
+              <div class="minMax"></div>
+            </div>
+          `
+        : html``}
     `;
   }
 }