@ewc-lib/ewc-icon-button-group 2.0.2-alpha → 3.0.0-alpha

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ewc-lib/ewc-icon-button-group",
   "//": "please always keep version in sync with constructor in main.js", 
-  "version": "2.0.2-alpha",
+  "version": "3.0.0-alpha",
   "basedOnStandard": "3.0.1",
   "description": "",
   "main": "src/main.js",
@@ -16,6 +16,6 @@
     "@ewc-lib/ewc-css-common": "0.1.0"
   },
   "dependencies": {
-    "@ewc-lib/ewc-icon-button": "2.0.1-alpha"
+    "@ewc-lib/ewc-icon-button": "2.1.0-alpha"
   }
 }

package/readme.md

@@ -7,8 +7,8 @@ The EWC Icon-button group component provides standardized radiobuttons for Euros
 ## Features
 
 - Responsive design that adapts to different screen sizes
-- Customizable
-- Tab-Focus trap, keeping focus within the dialog
+- Customizable (there are 4 buttons available, arbitrary order)
+- Button group respects tri-state of button (pressed/not pressed/disabled)
 - Accessibility compliant
 
 ## Screenshot
@@ -23,37 +23,83 @@ The ewc-icon-button-group HTML tag encloses ewc-icon-buttons. It modifies their
 
 Note that adding/removing children at runtime is not supported.
 
-Regarding focus, arrow keys work analoguous to tab key.
+Regarding focus, arrow keys work alongside the tab key.
 
-Within a button-group, only buttons that are not currently pressed can be focussed.
+Within a button-group, only buttons that are not currently pressed and not disabled can be focussed.
 
 # API
 
 ## Properties and Attributes
 
-| Attribute             | Type                | Default | Description
-|-----------------------|---------------------|---------|------------
-| selectedIndex         | Number              | 0       | The ordinal number of the button pressed. 0 based.
-| breakpoint            | String              | 650px   | if viewport width is smaller than this, the buttons are displayed without label
+| Property       | Attribute             | Type                | Default | Description
+|----------------|-----------------------|---------------------|---------|------------
+| selectedIndex  | selectedIndex         | Number              | 0       | The 0-based ordinal number of the button pressed.
+| selectedId     | selectedId            | Number              | -       | The id of the button pressed. Can be null if the id attribute is not set.
+| breakpoint     | breakpoint            | CSS String          | 650px   | if viewport width is smaller than this, the buttons are displayed without label.
+| selectedElement|                       | HTML element        | -       | The HTML element currently selected. Read only.
+
 
 Notes:
 
-- The attributes do not support modification at runtime.
+- The attribute **breakpoint** does not support modification at runtime, all others do.
 - The width of an ewc-icon-button (when used in conjunction with the ewc-icon-button-group) is determined as follows:
   - width of button-group < breakpoint: size or weight attribute of ewc-icon-button
-  - width of button-group > breakpoint: 125px as per standard definition
+  - width of button-group > breakpoint: 125px as per definition in the EWC standards
+
+## Enabling / Disabling
+
+While selection is handled via attributes and properties, enabling/disabling is done with the following public member functions.
+
+    setEnabledById(id, isEnabled)
+    setEnabledByIndex(index, isEnabled)
+
+- isEnabled is a boolean
+- id is of type string
+- index of type number
+
+## Caution
+
+- ❗Refrain from setting state on a button directly when used in a group.
+- This is because ewc-button-icon group is not aware of state changes it doesn't initiate itself.
+- For the state "true" and "false", let ewc-button-icon handle this via **selectedIndex** or **selectedId**
+- To disable a button, use **setEnabledByIndex** or **setEnabledById**
+- Note that reading the state of a button is unproblematic - this note is just about setting the state.
+
+### Responsabilities
+
+- Precaution has to be taken in case the button being disabled is the currently selected one. 
+  - The user of the component retains full control over what's happening in this case.
+  - For instance, programmatically switching to another button **before** disabling a certain button.
+    - And of course the effect such a button switch has in the host project / application.
+- Disabling all buttons is technically supported.
+  - But what that means in the context of the application is the user's responsability - the component can't know that.
+  - In this case, the same applies - the user is responsible for setting a button when not all buttons are disabled anymore.
+
+Example code for toggling between state "disabled" and "false"
+
+```javascript
+const button = document.getElementById("myButton")
+const group = document.getElementById("myButtonGroup")
+group.setEnabledByIndex(0, button.state==="disabled")
+```
+
+❗ Don't miss to see also usage-examples/ directory for more examples, especially how to handle enable/disabling of a single button and also all buttons at once.
 
 ## Events
 
 - When a user attempts to press a button, a custom event named "action" is dispatched. 
 - The event detail contains the 0-based index of the button which was pressed.
-  - It's the component user's responsability to actually set it pressed. 
+  - It's the component user's responsability to actually set the button state to "pressed". 
   - This is for two reasons:
-    - the developer has a possibility to prevent the button from being pressed
-    - to be consistent with the usage of the ewc-icon-button
+    - provides possibility to prevent the button from being pressed
+    - is consistent with the usage of the ewc-icon-button
 
 Please see usage-examples/ directory which contains working source-code demonstrating how this works.
 
+### UML
+
+![events](./events.png)
+
 # Usage
 
 ## Installation
@@ -72,7 +118,7 @@ import '@ewc-lib/ewc-icon-button-group';
 
 ### Note about ewc-css-common
 
-- "ewc-css-common/custom-props.css" is necessary and downloaded along with ewc-dialog.
+- "ewc-css-common/custom-props.css" is necessary and downloaded along with this component.
 - It needs to be imported by the host project because it's imported neither by ewc-icon-button nor ewc-icon-button-group.
 
 
@@ -92,12 +138,33 @@ For an explanation about the attribute **use-config**, please refer to the [read
 
 Note: The usage-example/ directory contains a working example.
 
+# Migration guide
+
+## Updating to 3.0.0-alpha (from any older version)
+
+### Option to use ID instead of index
+
+Referring to a button in a group can now be done via ID, additionally to the previously existing index.
+
+### ID in the event details
+
+e.detail was only a number before (containing an ordinal index). Now it's an object w/ 2 fields: index and id.
+
+```javascript
+document.getElementById("lightEnabled").addEventListener("action",(e)=>{
+  console.log("button clicked or selected w/ kdb: ", e.detail.id, e.detail.index)
+})
+```
+
+The ID is taken from the HTML tag's "id" attribute. If it's missing, e.detail.id is null.
+
+
 # Notes
 
 ## Accessibility
 
 The component is designed with accessibility in mind:
-- Proper semantic HTML structure (dialog and header elements)
+- Proper semantic HTML structure
 - Keyboard navigable elements
 - Sufficient color contrast
 - Screen reader friendly with appropriate ARIA attributes
@@ -115,6 +182,16 @@ European Union Public License (EUPL)
 
 # Changelog
 
+- 3.0.0-alpha
+  - properly support disabled state, 
+  - add selection by id
+  - add id-info to event
+  - update usage examples
+  - update documentation
+
+- 2.0.3-alpha
+  - fix label casing bug
+
 - 2.0.2-alpha
   - support integration, update dependency, add aria-label
 

package/src/buttonGroup.js

@@ -0,0 +1,52 @@
+/*
+handles pressed state.
+oblivious about disabled state.
+deals only with index, not with element IDs
+*/
+export class ButtonGroup {
+  #currentIndex
+  #pressedBtnElement = null
+  #pressedBtnElementIcon = null   // accomodate the possibility that the button might have a different icon in pressed state
+
+  applyCurrentSelection(nodes) {
+    this.setPressed(nodes, this.#currentIndex)
+  }
+
+  #storePressed(el) {
+    if(el) {
+      this.#pressedBtnElement=el
+      this.#pressedBtnElementIcon=el.getAttribute("icon")
+    }
+  }
+
+  #restorePressed() {
+    if(this.#pressedBtnElement) {
+      this.#pressedBtnElement.setAttribute("icon", this.#pressedBtnElementIcon)
+    }
+  }
+
+  // ensures that max 1 button is pressed
+  setPressed(allElements, selectedElIdx) {
+    //console.debug("ewc-icon-button-group setPressed: ", selectedElIdx)
+    this.#restorePressed()
+    for(let i=0;i<allElements.length;i++) {
+      const el = allElements[i]
+      if(el.getAttribute("state")==="disabled") {continue}
+      if(i===selectedElIdx){
+        el.setAttribute("state","true")
+        this.#storePressed(el)
+      } else {
+        el.setAttribute("state","false")
+      }
+    }
+    this.#currentIndex = Number(selectedElIdx)
+  }
+
+  getPressedIndex() {
+    return this.#currentIndex
+  }
+
+  getPressedElement() {
+    return this.#pressedBtnElement
+  }
+}

package/src/main.js

@@ -5,56 +5,13 @@ keyboard navigation:
 - a group can't get a focus
 - buttons in the group can get a focus
 - only not-pressed buttons can get a focus
+- disabled buttons can't be pressed
 - left/up and right/down keys move the focus
 - enter and space key presses a button, releases the currently pressed button
 */
 
 import CSS from "./css.js"
-
-
-class ButtonGroup {
-  #pressedBtnElement = null
-  #pressedBtnElementIcon = null
-  #currentIndex
-
-  #storeCurrentBtn(el) {
-    if(el) {
-      this.#pressedBtnElement=el
-      this.#pressedBtnElementIcon=el.getAttribute("icon")
-    }
-  }
-
-  #restoreCurrent() {
-    if(this.#pressedBtnElement) {
-      this.#pressedBtnElement.setAttribute("icon", this.#pressedBtnElementIcon)
-    }
-  }
-
-  setPressed(allElements, selectedElIdx) {
-    this.#restoreCurrent()
-    for(let i=0;i<allElements.length;i++) {
-      const el = allElements[i]
-      if(i===selectedElIdx){
-        el.setAttribute("tabindex","-1")
-        el.setAttribute("state","true")
-        this.#storeCurrentBtn(el)
-      } else {
-        el.setAttribute("tabindex","0")
-        el.setAttribute("state","false")
-      }
-    }
-    this.#currentIndex = Number(selectedElIdx)
-  }
-
-  getCurrentIndex() {
-    return this.#currentIndex
-  }
-
-  getCurrentElement() {
-    return this.#pressedBtnElement
-  }
-}
-
+import {ButtonGroup} from "./buttonGroup.js"
 
 class Element extends HTMLElement {
   // only affect ewc-icon-buttons which are children of this element
@@ -67,80 +24,166 @@ class Element extends HTMLElement {
     return r
   }
 
+  constructor() {	
+    super()
+  }
+
   connectedCallback() {
-    this.setAttribute("ewc-version", "2.0.1-alpha")		// please always keep in sync with version in package.json
+    this.setAttribute("ewc-version", "3.0.0-alpha")		// please always keep in sync with version in package.json
     if(this.#isInitialised == true) {return}
 
     this.classList.add(this.#cssClassPrefix)
     this.appendChild(CSS(this.#cssClassPrefix, this.getAttr("breakpoint","480px")).cloneNode(true))     // .ecl-col-s- in ECL 4.8.1.
-    this.#installEventHandlers()
+
+    const nodes = this.querySelectorAll("ewc-icon-button")
+    this.#setIndexOnNodes(nodes)
+    this.#installEventHandlers(nodes)
+    // attributeChangedCallback() might have been called before this, so it just stored the number but couldn't yet press the button. let it catch up now.
+    this.#buttonGroup.applyCurrentSelection(nodes)  
+
     this.#isInitialised = true
   }
 
-  constructor() {	
-    super()
+  get selectedIndex() {
+    return this.#buttonGroup.getPressedIndex()
+  }
+
+  set selectedIndex(index) {
+    this.setAttribute("selectedindex", index)
+  }
+
+  // convenience
+  get selectedId() {
+    return this.selectedElement.getAttribute("id")
+  }
+
+  set selectedId(id) {
+    this.setAttribute("selectedid", id)
+  }
+
+  get selectedElement() {
+    return this.#buttonGroup.getPressedElement()
+  }
+
+  setEnabledByIndex(index, isEnabled) {
+    const el = this.#getElByIndex(index)
+    if(el) {
+      el.state = isEnabled ? "false":"disabled"
+    } else {
+      console.error("ewc-icon-button-group: no button with given index found. index=", id)
+    }
+  }
+
+  setEnabledById(id, isEnabled) {
+    const [index,el] = this.#getElById(id)
+    if(el) {
+      this.setEnabledByIndex(index, isEnabled)
+    } else {
+      console.error("ewc-icon-button-group: no button with given id found. id=", id)
+    }
+  }
+
+  #getElByIndex(index) {
+    const el = this.querySelector(`ewc-icon-button[__index='${index}']`)
+    return el ? el : null
+  }
+
+  #getElById(id) {
+    const allElements = this.querySelectorAll("ewc-icon-button")
+    for(let i=0;i<allElements.length;i++) {
+      const el = allElements[i]
+      if(el.getAttribute("id")==id) {return [i,el]}
+    }
+    return [-1,null]
   }
 
-  static observedAttributes = ["selectedindex"]
+
+  static observedAttributes = ["selectedindex", "selectedid"]
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (name==="selectedindex") {
-      //console.log(Number(newValue),this.#buttonGroup.getCurrentIndex())
-      if(Number(newValue)!==this.#buttonGroup.getCurrentIndex()) {
+      if(Number(newValue)!==this.#buttonGroup.getPressedIndex()) {
         this.#buttonGroup.setPressed(this.querySelectorAll("ewc-icon-button"), Number(newValue))
       }
     }
+    if (name==="selectedid") {
+      const [index,el] = this.#getElById(newValue)
+      if(el) {
+        this.#buttonGroup.setPressed(this.querySelectorAll("ewc-icon-button"), index)
+      }
+    }
   }
 
-  #installEventHandlers() {
-
-    const nodes = this.querySelectorAll("ewc-icon-button")
 
+  #installActionEventHandler(nodes) {
     // relay click/enter presses
     for(let i=0;i<nodes.length;i++) {
       nodes[i].addEventListener("action", (ev) => {
+        //console.debug("ewc-icon-button-group: got action event", this.#buttonGroup.getPressedIndex(),i)
+
         ev.stopPropagation()
-        if(this.#buttonGroup.getCurrentIndex() !== i) {
-          const event = new CustomEvent("action", { detail: i});
-          this.dispatchEvent(event)
+        if(this.#buttonGroup.getPressedIndex() == i) {
+          // no operation. the already pressed button has been clicked again.
+        } else {
+          if(this.selectedElement) {
+            const event = new CustomEvent("action", { detail: {"index":i, "id":this.selectedElement.getAttribute("id")} });
+            this.dispatchEvent(event)
+          }
+          //console.debug("ewc-icon-button-group: sent new action event")
         }
       })
-      nodes[i].setAttribute("__index", i)
     }
+  }
+
 
-    // move focus w/ tab. TODO: make the code elegant
-		this.addEventListener("keydown", function(ev) {
-      let idx = Number(document.activeElement.getAttribute("__index"))
-      const nodes = this.querySelectorAll("ewc-icon-button")
-
-			if(ev.key=="ArrowLeft" || ev.key=="ArrowUp") {
-        idx-=1
-        if(idx<0) {idx=nodes.length-1}
-        if(nodes[idx].getAttribute("tabindex")=="-1") {
-          idx-=1
-          if(idx<0) {idx=nodes.length-1}
+  #installArrowKeyEventHandler(nodes) {
+    // move focus, considering state (jump over disabled and pressed buttons).
+    // it should behave like tab/shift-tab but additionally, wrap.
+    this.addEventListener("keydown", function(ev) {
+      if(!["ArrowLeft","ArrowUp","ArrowRight","ArrowDown"].includes(ev.key)) {return}
+
+      const startIdx = Number(document.activeElement.getAttribute("__index"))   // note: currently focused, not currently selected/pressed
+      const direction = ev.key=="ArrowLeft" || ev.key=="ArrowUp" ? -1 : 1
+
+      function findNextFocusableButtonIndex(nodes, startIdx, direction) {
+        var currentIdx = startIdx + direction
+        var globalCounter = 0
+        const l = nodes.length
+        while(currentIdx!=startIdx && startIdx>-1) {
+          currentIdx = currentIdx % l
+          if(currentIdx<0) {currentIdx=l-1}
+          if(nodes[currentIdx].getAttribute("tabindex")!="-1") {return currentIdx}
+          currentIdx += direction
+          if(++globalCounter>l-1) {
+            // we're not supposed to get in here, but it happens under as of yet unknown circumstances.
+            // once the issue is clear and fixed, this can be removed.
+            console.error("ewc-icon-button-group: endless-loop guard intervention")
+            break
+          }
         }
-        nodes[idx].focus()
+        return -1
       }
-      if(ev.key=="ArrowRight" || ev.key=="ArrowDown") {
-        idx+=1
-        if(idx>nodes.length-1) {idx=0}
-        if(nodes[idx].getAttribute("tabindex")=="-1") {
-          idx+=1
-          if(idx>nodes.length-1) {idx=0}
-        }
+
+      const idx = findNextFocusableButtonIndex(nodes,startIdx,direction)
+      if(idx>-1) {
         nodes[idx].focus()
       }
     }.bind(this))
-	}
+  }
 
-  getCurrentlySelectedIndex() {
-    return this.#buttonGroup.getCurrentIndex()
+  // assign 0-based ordinal number to each button
+  // TODO: remove and replace w/ loops
+  #setIndexOnNodes(nodes) {
+    for(let i=0;i<nodes.length;i++) {
+      nodes[i].setAttribute("__index", i)
+    }
   }
 
-  getCurrentlySelectedElement() {
-    return this.#buttonGroup.getCurrentElement()
+  #installEventHandlers(nodes) {
+    this.#installActionEventHandler(nodes)
+    this.#installArrowKeyEventHandler(nodes)
   }
+
 }
 
 

package/usage-example/vanilla/index.html

@@ -28,43 +28,151 @@
       <p style="margin-bottom: 50px;">Buttons available, on light and dark background</p>
 
       <div style="margin:20px; padding:20px;">
-        <ewc-icon-button-group style="width:600px;" selectedIndex="0" breakpoint="800px" id="one">
-          <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
-          <ewc-icon-button icon="barchart"  use-config="grp-barchart" label="Bar chart"   btn-aria-label="Bar chart"></ewc-icon-button>
-          <ewc-icon-button icon="dotplot"   use-config="grp-dotplot" label="Dot plot"     btn-aria-label="Dot plot"></ewc-icon-button>
-          <ewc-icon-button icon="table"     use-config="grp-table"   label="Table"        btn-aria-label="Table"></ewc-icon-button>
+        <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800px" id="lightEnabled">
+          <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" ></ewc-icon-button>
+          <ewc-icon-button icon="barchart"  use-config="grp-barchart" label="Bar chart"   btn-aria-label="Bar chart"  ></ewc-icon-button>
+          <ewc-icon-button icon="dotplot"   use-config="grp-dotplot" label="Dot plot"     btn-aria-label="Dot plot"   ></ewc-icon-button>
+          <ewc-icon-button icon="table"     use-config="grp-table"   label="Table"        btn-aria-label="Table"      ></ewc-icon-button>
         </ewc-icon-button-group>
       </div>
 
+      <div style="margin:20px; padding:20px;">
+        <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800px" id="lightDisabled">
+          <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" state="disabled"></ewc-icon-button>
+          <ewc-icon-button icon="barchart"  use-config="grp-barchart" label="Bar chart"   btn-aria-label="Bar chart"  state="disabled"></ewc-icon-button>
+          <ewc-icon-button icon="dotplot"   use-config="grp-dotplot" label="Dot plot"     btn-aria-label="Dot plot"   state="disabled"></ewc-icon-button>
+          <ewc-icon-button icon="table"     use-config="grp-table"   label="Table"        btn-aria-label="Table"      state="disabled"></ewc-icon-button>
+        </ewc-icon-button-group>
+      </div>
+
+
       <div style="margin:20px; padding:20px; background: darkblue;">
-        <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="two">
-          <ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
+        <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkEnabled">
+          <ewc-icon-button icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
           <ewc-icon-button icon="barchart"  background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
           <ewc-icon-button icon="dotplot"   background="dark" use-config="grp-dotplot"  btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
           <ewc-icon-button icon="table"     background="dark" use-config="grp-table"    btn-aria-label="Table" label="Table"></ewc-icon-button>
         </ewc-icon-button-group>
       </div>
-    </div>
 
-    <script>
-      window.addEventListener('DOMContentLoaded',function () {
-        // catch events of all buttons at once
-        document.getElementById("one").addEventListener("action",(e)=>{
-          document.getElementById("one").setAttribute("selectedIndex",e.detail)
-          const el = document.getElementById("one").getCurrentlySelectedElement()
-          console.log("button clicked or selected w/ kdb: ", e.detail, el)
-        })
-      })
-
-      window.addEventListener('DOMContentLoaded',function () {
-        // catch events of all buttons at once
-        document.getElementById("two").addEventListener("action",(e)=>{
-          document.getElementById("two").setAttribute("selectedIndex",e.detail)
-          const el = document.getElementById("two").getCurrentlySelectedElement()
-          console.log("button clicked or selected w/ kdb: ", e.detail, el)
+      <div style="margin:20px; padding:20px; background: darkblue;">
+        <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkDisabled">
+          <ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
+          <ewc-icon-button state="disabled" icon="barchart"  background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
+          <ewc-icon-button state="disabled" icon="dotplot"   background="dark" use-config="grp-dotplot"  btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
+          <ewc-icon-button state="disabled" icon="table"     background="dark" use-config="grp-table"    btn-aria-label="Table" label="Table"></ewc-icon-button>
+        </ewc-icon-button-group>
+      </div>
+
+
+      <script>
+        window.addEventListener('DOMContentLoaded',function () {
+
+          // catch events of all buttons at once
+          document.getElementById("lightEnabled").addEventListener("action",(e)=>{
+            document.getElementById("lightEnabled").setAttribute("selectedIndex",e.detail.index)
+            const el = document.getElementById("lightEnabled").selectedElement
+            console.log("button clicked or selected w/ kdb: ", e.detail, el)
+          })
+
+          document.getElementById("darkEnabled").addEventListener("action",(e)=>{
+            document.getElementById("darkEnabled").setAttribute("selectedIndex",e.detail.index)
+            const el = document.getElementById("darkEnabled").selectedElement
+            console.log("button clicked or selected w/ kdb: ", e.detail, el)
+          })
+
         })
-      })
-    </script>
+      </script>
+
+
+
+
+      <details>
+        <summary>Click to see more detailled information intended for developers</summary>
+
+        <p>
+          This section demonstrates the "feel" part of look & feel.
+          <br>
+          It takes into consideration the many cases that emerge by having a group of tri-state buttons.
+          <br>
+          For instance, what happens when a currently pressed button gets disabled. Or when all buttons get disabled and enabled again.
+          <br>
+          The component is flexible enough to be able to leave the answer to those questions to the developer who uses the component.
+        </p>
+
+        <div style="margin:20px; padding:20px;">
+          <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedId="grp1-table" breakpoint="800px" id="ForDevelopers">
+            <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" id="grp1-line"></ewc-icon-button>
+            <ewc-icon-button icon="barchart"  use-config="grp-barchart" label="Bar chart"   btn-aria-label="Bar chart"  id="grp1-bar"></ewc-icon-button>
+            <ewc-icon-button icon="dotplot"   use-config="grp-dotplot" label="Dot plot"     btn-aria-label="Dot plot"   id="grp1-dot"></ewc-icon-button>
+            <ewc-icon-button icon="table"     use-config="grp-table"   label="Table"        btn-aria-label="Table"      id="grp1-table"></ewc-icon-button>
+          </ewc-icon-button-group>
+          <div style="padding-top:10px;">
+            <button id="toggleOne">Toggle linechart disabled</button>
+            <button id="toggleAll">Toggle all disabled</button>
+          </div>
+        </div>
+
+
+        <script>
+          window.addEventListener('DOMContentLoaded',function () {
+
+            document.getElementById("ForDevelopers").addEventListener("action",(e)=>{
+              document.getElementById("ForDevelopers").setAttribute("selectedIndex",e.detail.index)
+              const el = document.getElementById("ForDevelopers").selectedElement
+              console.log("button clicked or selected w/ kdb: ", e.detail, el)
+            })
+
+            // handle a single button being toggled (disabled/re-enabled)
+            document.getElementById("toggleOne").addEventListener("click", ()=>{
+              const button = document.querySelector("#ForDevelopers > ewc-icon-button[icon='linechart']")
+              const buttonNext = document.querySelector("#ForDevelopers > ewc-icon-button[icon='barchart']")
+              const group = document.getElementById("ForDevelopers")
+              
+              if(button.state=="disabled") {
+                group.setEnabledByIndex(0, "true")
+                group.selectedIndex = 0
+              } else {
+                // note that it's the component user's responsability to define what happens when currently pressed button gets disabled
+
+                if(group.selectedIndex===0) {
+                  if(buttonNext.state == "disabled") {
+                    console.log("Do nothing")
+                    group.selectedIndex = -1
+                  } else {
+                    group.selectedIndex = 1
+                  }
+                }
+                group.setEnabledByIndex(0, false)
+
+              }
+            })
+            
+
+            // handle all buttons being disabled at once
+            document.getElementById("toggleAll").addEventListener("click", ()=>{
+              const group = document.getElementById("ForDevelopers")
+              // doesnt have to be the last, any button will do, really
+              const lastButton = document.querySelector("#ForDevelopers > ewc-icon-button[icon='table']")
+              const toSet = lastButton.state=="disabled" ? true : false
+              
+              group.setEnabledByIndex(0, toSet)
+              group.setEnabledByIndex(1, toSet)
+              group.setEnabledById("grp1-dot", toSet)
+              group.setEnabledById("grp1-table", toSet)
+              
+              // note that it's the component user's responsability 
+              // to define what happens when ALL button get disabled and re-enabled again.
+              // it's important to set the current index to -1 when all buttons are disabled/deselected.
+              group.selectedIndex = toSet ? 0 : -1
+            })
+
+          })
+        </script>
+
+      </details>
+
+    </div>
 
   </body>
 

package/usage-example/webpack/index.html

@@ -16,7 +16,7 @@
           outline:2px solid darkblue; 
           outline-offset: 5px;
         }
-        </style>
+    </style>
   </head>
 
   <body>
@@ -25,22 +25,71 @@
       <p style="margin-bottom: 50px;">Buttons available, on light and dark background</p>
 
       <div style="margin:20px; padding:20px;">
-        <ewc-icon-button-group style="width:600px;" selectedIndex="0" breakpoint="800px" id="one">
-          <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
-          <ewc-icon-button icon="barchart"  use-config="grp-barchart" label="Bar chart"   btn-aria-label="Bar chart"></ewc-icon-button>
-          <ewc-icon-button icon="dotplot"   use-config="grp-dotplot" label="Dot plot"     btn-aria-label="Dot plot"></ewc-icon-button>
-          <ewc-icon-button icon="table"     use-config="grp-table"   label="Table"        btn-aria-label="Table"></ewc-icon-button>
+        <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800px" id="lightEnabled">
+          <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" ></ewc-icon-button>
+          <ewc-icon-button icon="barchart"  use-config="grp-barchart" label="Bar chart"   btn-aria-label="Bar chart"  ></ewc-icon-button>
+          <ewc-icon-button icon="dotplot"   use-config="grp-dotplot" label="Dot plot"     btn-aria-label="Dot plot"   ></ewc-icon-button>
+          <ewc-icon-button icon="table"     use-config="grp-table"   label="Table"        btn-aria-label="Table"      ></ewc-icon-button>
         </ewc-icon-button-group>
       </div>
 
+      <div style="margin:20px; padding:20px;">
+        <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800px" id="lightDisabled">
+          <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" state="disabled"></ewc-icon-button>
+          <ewc-icon-button icon="barchart"  use-config="grp-barchart" label="Bar chart"   btn-aria-label="Bar chart"  state="disabled"></ewc-icon-button>
+          <ewc-icon-button icon="dotplot"   use-config="grp-dotplot" label="Dot plot"     btn-aria-label="Dot plot"   state="disabled"></ewc-icon-button>
+          <ewc-icon-button icon="table"     use-config="grp-table"   label="Table"        btn-aria-label="Table"      state="disabled"></ewc-icon-button>
+        </ewc-icon-button-group>
+      </div>
+
+
       <div style="margin:20px; padding:20px; background: darkblue;">
-        <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="two">
-          <ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
+        <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkEnabled">
+          <ewc-icon-button icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
           <ewc-icon-button icon="barchart"  background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
           <ewc-icon-button icon="dotplot"   background="dark" use-config="grp-dotplot"  btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
           <ewc-icon-button icon="table"     background="dark" use-config="grp-table"    btn-aria-label="Table" label="Table"></ewc-icon-button>
         </ewc-icon-button-group>
       </div>
+
+      <div style="margin:20px; padding:20px; background: darkblue;">
+        <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkDisabled">
+          <ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
+          <ewc-icon-button state="disabled" icon="barchart"  background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
+          <ewc-icon-button state="disabled" icon="dotplot"   background="dark" use-config="grp-dotplot"  btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
+          <ewc-icon-button state="disabled" icon="table"     background="dark" use-config="grp-table"    btn-aria-label="Table" label="Table"></ewc-icon-button>
+        </ewc-icon-button-group>
+      </div>
+
+
+      <details>
+        <summary>Click to see more detailled information intended for developers</summary>
+
+        <p>
+          This section demonstrates the "feel" part of look & feel.
+          <br>
+          It takes into consideration the many cases that emerge by having a group of tri-state buttons.
+          <br>
+          For instance, what happens when a currently pressed button gets disabled. Or when all buttons get disabled and enabled again.
+          <br>
+          The component is flexible enough to be able to leave the answer to those questions to the developer who uses the component.
+        </p>
+
+        <div style="margin:20px; padding:20px;">
+          <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedId="grp1-table" breakpoint="800px" id="ForDevelopers">
+            <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" id="grp1-line"></ewc-icon-button>
+            <ewc-icon-button icon="barchart"  use-config="grp-barchart" label="Bar chart"   btn-aria-label="Bar chart"  id="grp1-bar"></ewc-icon-button>
+            <ewc-icon-button icon="dotplot"   use-config="grp-dotplot" label="Dot plot"     btn-aria-label="Dot plot"   id="grp1-dot"></ewc-icon-button>
+            <ewc-icon-button icon="table"     use-config="grp-table"   label="Table"        btn-aria-label="Table"      id="grp1-table"></ewc-icon-button>
+          </ewc-icon-button-group>
+          <div style="padding-top:10px;">
+            <button id="toggleOne">Toggle linechart disabled</button>
+            <button id="toggleAll">Toggle all disabled</button>
+          </div>
+        </div>
+
+      </details>
+
     </div>
 
   </body>

package/usage-example/webpack/main.js

@@ -2,20 +2,75 @@ import "@ewc-lib/ewc-css-common/custom-props.css"
 import "@ewc-lib/ewc-icon-button"
 import "@ewc-lib/ewc-icon-button-group"
 
+
 window.addEventListener('DOMContentLoaded',function () {
+
   // catch events of all buttons at once
-  document.getElementById("one").addEventListener("action",(e)=>{
-    document.getElementById("one").setAttribute("selectedIndex",e.detail)
-    const el = document.getElementById("one").getCurrentlySelectedElement()
+  document.getElementById("lightEnabled").addEventListener("action",(e)=>{
+    document.getElementById("lightEnabled").setAttribute("selectedIndex",e.detail.index)
+    const el = document.getElementById("lightEnabled").selectedElement
+    console.log("button clicked or selected w/ kdb: ", e.detail, el)
+  })
+
+  document.getElementById("darkEnabled").addEventListener("action",(e)=>{
+    document.getElementById("darkEnabled").setAttribute("selectedIndex",e.detail.index)
+    const el = document.getElementById("darkEnabled").selectedElement
     console.log("button clicked or selected w/ kdb: ", e.detail, el)
   })
+
 })
 
+
 window.addEventListener('DOMContentLoaded',function () {
-  // catch events of all buttons at once
-  document.getElementById("two").addEventListener("action",(e)=>{
-    document.getElementById("two").setAttribute("selectedIndex",e.detail)
-    const el = document.getElementById("two").getCurrentlySelectedElement()
+
+  document.getElementById("ForDevelopers").addEventListener("action",(e)=>{
+    document.getElementById("ForDevelopers").setAttribute("selectedIndex",e.detail.index)
+    const el = document.getElementById("ForDevelopers").selectedElement
     console.log("button clicked or selected w/ kdb: ", e.detail, el)
   })
+
+  // handle a single button being toggled (disabled/re-enabled)
+  document.getElementById("toggleOne").addEventListener("click", ()=>{
+    const button = document.querySelector("#ForDevelopers > ewc-icon-button[icon='linechart']")
+    const buttonNext = document.querySelector("#ForDevelopers > ewc-icon-button[icon='barchart']")
+    const group = document.getElementById("ForDevelopers")
+    
+    if(button.state=="disabled") {
+      group.setEnabledByIndex(0, "true")
+      group.selectedIndex = 0
+    } else {
+      // note that it's the component user's responsability to define what happens when currently pressed button gets disabled
+
+      if(group.selectedIndex===0) {
+        if(buttonNext.state == "disabled") {
+          console.log("Do nothing")
+          group.selectedIndex = -1
+        } else {
+          group.selectedIndex = 1
+        }
+      }
+      group.setEnabledByIndex(0, false)
+
+    }
+  })
+  
+
+  // handle all buttons being disabled at once
+  document.getElementById("toggleAll").addEventListener("click", ()=>{
+    const group = document.getElementById("ForDevelopers")
+    // doesnt have to be the last, any button will do, really
+    const lastButton = document.querySelector("#ForDevelopers > ewc-icon-button[icon='table']")
+    const toSet = lastButton.state=="disabled" ? true : false
+    
+    group.setEnabledByIndex(0, toSet)
+    group.setEnabledByIndex(1, toSet)
+    group.setEnabledById("grp1-dot", toSet)
+    group.setEnabledById("grp1-table", toSet)
+    
+    // note that it's the component user's responsability 
+    // to define what happens when ALL button get disabled and re-enabled again.
+    // it's important to set the current index to -1 when all buttons are disabled/deselected.
+    group.selectedIndex = toSet ? 0 : -1
+  })
+
 })

package/usage-example/webpack/package.json

@@ -17,7 +17,7 @@
     "@ewc-lib/ewc-css-common": "0.1.0"
   },
   "dependencies": {
-    "@ewc-lib/ewc-icon-button": "2.0.0-alpha",
+    "@ewc-lib/ewc-icon-button": "latest",
     "@ewc-lib/ewc-icon-button-group": "file:../../"
   },
   "devDependencies": {

package/notes.txt

@@ -1,90 +0,0 @@
-width: 125px;
-height: 45px;
-/* UI Properties */
-background: #FFFFFF 0% 0% no-repeat padding-box;
-border: 1px solid #0D40B7;
-border-radius: 0px 200px 200px 0px;
-opacity: 1;
-
-
-<ewc-icon-button-group id="g">
-  <ewc-icon-button icon="linechart" label="Line chart"></ewc-icon-button>
-  <ewc-icon-button icon="barchart" label="Bar chart"></ewc-icon-button>
-  <ewc-icon-button icon="table" label="Table"></ewc-icon-button>
-</ewc-icon-button-group>
-
-<ewc-icon-button-group id="g" buttons="linechart,barchart,table"></ewc-icon-button-group>
-
-
-
-
-allow to pass an array with objects holding id, text and icon name per item (order to be preserved)
-should be possible to preselect one item
-callback event for clicked item
-it should be possible to change the selection programmatically
-needs to be "responsive"
-with smaller screens (or even based on available container width) it should remove the text and only keep the icon
-@JAURENA Marc (ESTAT-EXT): please check with Federico, if the pill should reduce the width of the pill based on the text (and reduce it if text is removed)
-needs to follow basic a11y requirements => The group should be one "tabbable" element and selection could be done via left-right, space => as with radio button groups
-
-
-
-semantic HTML or not?
-
-WCAG / APG says:
-
-"Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA."
-https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio-activedescendant/
-
-semantic would be:
-
-<form method="get">
-  <fieldset>
-
-but in our situation, it's not applicable - there is nothing to submit - hence form is inappropriate and fieldset makes only sense within form.
-
-
-<div role="radiogroup"
-     aria-labelledby="group_label_1"
-     id="rg1">
-  <h3 id="group_label_1">
-    Pizza Crust
-  </h3>
-  <div role="radio"
-       aria-checked="false"
-       tabindex="0">
-    Regular crust
-  </div>
-  <div role="radio"
-       aria-checked="false"
-       tabindex="-1">
-    Deep dish
-  </div>
-  <div role="radio"
-       aria-checked="false"
-       tabindex="-1">
-    Thin crust
-  </div>
-</div>
-<div role="radiogroup"
-     aria-labelledby="group_label_2"
-     id="rg2">
-  <h3 id="group_label_2">
-    Pizza Delivery
-  </h3>
-  <div role="radio"
-       aria-checked="false"
-       tabindex="0">
-    Pickup
-  </div>
-  <div role="radio"
-       aria-checked="false"
-       tabindex="-1">
-    Home Delivery
-  </div>
-  <div role="radio"
-       aria-checked="false"
-       tabindex="-1">
-    Dine in
-  </div>
-</div>