Bug fixes.

Author: Templarian

src/pg/icon/__examples__/basic/basic.ts

@@ -21,7 +21,7 @@ export default class XPgIconBasic extends HTMLElement {
   }
 
   handleClear() {
-    this.$icon1.path = '';
+    this.$icon1.path = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
   }
 
   handleAccount() {

src/pg/icon/icon.ts

@@ -20,7 +20,7 @@ export default class PgIcon extends HTMLElement {
     if (changes.path) {
       const viewBox = getComputedStyle(this).getPropertyValue('--pg-icon-viewbox');
       this.$svg.setAttribute('viewBox', viewBox || '0 0 24 24');
-      if (!this.path) {
+      if (this.path) {
         throw new Error('invalid path set on pg-icon');
       }
       this.$path.setAttribute('d', this.path);

src/pg/tabs/partials/tab.css

@@ -0,0 +1,54 @@
+
+[part="button"] {
+  position: relative;
+  display: flex;
+  line-height: calc(2.5rem - 0.5px);
+  border-top: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-bottom: 0;
+  border-left: 1px solid transparent;
+  border-radius: 0.25rem 0.25rem 0 0;
+  padding: 0 0.75rem;
+  text-decoration: none;
+  color: var(--pg-tab-border, #453C4F);
+  align-items: center;
+  align-content: center;
+  box-sizing: border-box;
+  outline: none;
+  background: transparent;
+}
+
+[part="button"].selected {
+  border-color: var(--pg-tab-border, #453C4F);
+  font-weight: bold;
+  background: #fff;
+  cursor: default;
+  height: calc(2.5rem + 0.5px);
+}
+
+[part="button"]:not(.selected):hover {
+  border-color: var(--pg-tab-border, #453C4F);
+}
+
+[part="button"]:active::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: 0;
+  left: -1px;
+  border-radius: 0.25rem 0.25rem 0 0;
+  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+}
+
+[part="button"]:focus::before {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: 0;
+  left: -1px;
+  border-radius: 0.25rem 0.25rem 0 0;
+  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
+}

src/pg/tabs/partials/tab.ts

@@ -1,10 +1,12 @@
 import { Component, Prop, Part, node, forEach } from '@pictogrammers/element';
 
 import template from './tab.html';
+import style from './tab.css';
 
 @Component({
   selector: 'pg-partial-tab',
-  template
+  template,
+  style
 })
 export default class PgPartialTab extends HTMLElement {
 
@@ -47,6 +49,7 @@ export default class PgPartialTab extends HTMLElement {
           }
         });
         this.dispatchEvent(arrowLeftEvent);
+        e.preventDefault();
         break;
       case 'ArrowRight':
         const arrowRightEvent = new CustomEvent('arrowright', {
@@ -55,6 +58,7 @@ export default class PgPartialTab extends HTMLElement {
           }
         });
         this.dispatchEvent(arrowRightEvent);
+        e.preventDefault();
         break;
     }
   }

src/pg/tabs/tabs.css

@@ -14,57 +14,3 @@
 [part="tab"] {
   margin-right: 0.25rem;
 }
-
-[part="button"] {
-  position: relative;
-  display: flex;
-  line-height: calc(2.5rem - 0.5px);
-  border-top: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-bottom: 0;
-  border-left: 1px solid transparent;
-  border-radius: 0.25rem 0.25rem 0 0;
-  padding: 0 0.75rem;
-  text-decoration: none;
-  color: var(--pg-tab-border, #453C4F);
-  align-items: center;
-  align-content: center;
-  box-sizing: border-box;
-  outline: none;
-  background: transparent;
-}
-
-[part="tab"].active [part="button"] {
-  border-color: var(--pg-tab-border, #453C4F);
-  font-weight: bold;
-  background: #fff;
-  cursor: default;
-  height: calc(2.5rem + 0.5px);
-}
-
-[part="button"]:not(.active):hover {
-  border-color: var(--pg-tab-border, #453C4F);
-}
-
-[part="button"]:active::before {
-  content: '';
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: 0;
-  left: -1px;
-  border-radius: 0.25rem 0.25rem 0 0;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
-}
-
-[part="button"]:focus::before {
-  pointer-events: none;
-  content: '';
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: 0;
-  left: -1px;
-  border-radius: 0.25rem 0.25rem 0 0;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
-}

src/pg/tabs/tabs.ts

@@ -19,6 +19,7 @@ export default class PgTabs extends HTMLElement {
   #tabs: any[] = [];
 
   #selectedTab: number = 0;
+  #focusedTab: number = 0;
 
   connectedCallback() {
     this.addEventListener('tab', this.#handleTab.bind(this));
@@ -36,29 +37,31 @@ export default class PgTabs extends HTMLElement {
           console.log(index, this.#tabs[e.detail.index]);
           const elements = this.$slot.assignedElements() as PgTab[];
           elements[this.#selectedTab].hide();
+          $tabs[this.#selectedTab].selected = false;
           elements[index].show();
+          $tabs[index].selected = true;
           this.#selectedTab = index;
         });
-        $tab.addEventListener('arrowleft',  (e: any) => {
+        $tab.addEventListener('arrowleft', (e: any) => {
           const { index } = e.detail;
           if (this.#tabs.length > 1) {
             if (index === 0) {
-              this.#selectedTab = this.#tabs.length - 1;
+              this.#focusedTab = this.#tabs.length - 1;
             } else {
-              this.#selectedTab = index - 1;
+              this.#focusedTab = index - 1;
             }
-            $tabs[this.#selectedTab].focus();
+            $tabs[this.#focusedTab].focus();
           }
         });
         $tab.addEventListener('arrowright',  (e: any) => {
           const { index } = e.detail;
           if (this.#tabs.length > 1) {
             if (index === this.#tabs.length - 1) {
-              this.#selectedTab = 0;
+              this.#focusedTab = 0;
             } else {
-              this.#selectedTab++;
+              this.#focusedTab++;
             }
-            $tabs[this.#selectedTab].focus();
+            $tabs[this.#focusedTab].focus();
           }
         });
       }
@@ -72,9 +75,11 @@ export default class PgTabs extends HTMLElement {
   }
 
   handleSlotChange(e) {
+    const tabs = Array.from(this.$tabset.children) as PgPartialTab[];
     const elements = this.$slot.assignedElements() as PgTab[];
     if (elements.length !== 0) {
       elements[0].show();
+      tabs[0].selected = true;
     }
   }