@dso-toolkit/core 45.0.1 → 45.1.0

package/dist/collection/components/info/info.js

@@ -4,6 +4,7 @@ export class Info {
     return (h(Fragment, null,
       h("slot", null),
       !this.fixed && (h("button", { type: "button", onClick: e => this.dsoClose.emit(e) },
+        h("dso-icon", { icon: "times" }),
         h("span", { class: "sr-only" }, "Sluiten")))));
   }
   static get is() { return "dso-info"; }

package/dist/collection/components/info-button/info-button.css

@@ -1,9 +1,5 @@
 :host {
   display: inline-block;
-  --di-info: url("data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
-  --di-info-active: url("data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
-  --di-info-secondary: url("data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
-  --di-info-active-secondary: url("data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
 }
 
 *,
@@ -24,23 +20,18 @@
 }
 
 button {
-  background: var(--dso-icon, var(--di-info)) no-repeat;
-  background-position: center;
-  background-size: cover;
-  height: 24px;
-  vertical-align: top;
-  width: 24px;
-  border: 1px solid transparent;
+  background-color: transparent;
+  color: #39870c;
+  border: 0;
   margin-left: 8px;
   padding: 0;
   cursor: pointer;
-}
-button.dso-open, button:hover, button:active {
-  --dso-icon: var(--di-info-active);
+  vertical-align: top;
 }
 button.dso-info-secondary {
-  --dso-icon: var(--di-info-secondary);
+  color: #666;
 }
-button.dso-info-secondary.dso-open, button.dso-info-secondary:hover, button.dso-info-secondary:active {
-  --dso-icon: var(--di-info-active-secondary);
+
+dso-icon {
+  display: block;
 }

package/dist/collection/components/info-button/info-button.js

@@ -1,7 +1,8 @@
-import { h, Component, Event, Prop, Method } from '@stencil/core';
+import { h, Component, Event, Prop, Method, Host, State } from '@stencil/core';
 import clsx from 'clsx';
 export class InfoButton {
   constructor() {
+    this.hover = false;
     this.label = 'Toelichting bij optie';
   }
   async setFocus() {
@@ -13,8 +14,10 @@ export class InfoButton {
     this.dsoToggle.emit({ originalEvent: e, active: this.active });
   }
   render() {
-    return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active, 'dso-info-secondary': !!this.secondary }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e), ref: element => (this.button = element) },
-      h("span", { class: "sr-only" }, this.label)));
+    return (h(Host, { onMouseenter: () => this.hover = true, onMouseleave: () => this.hover = false },
+      h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active, 'dso-info-secondary': !!this.secondary }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e), ref: element => (this.button = element) },
+        h("dso-icon", { icon: this.active || this.hover ? 'info-active' : 'info' }),
+        h("span", { class: "sr-only" }, this.label))));
   }
   static get is() { return "dso-info-button"; }
   static get encapsulation() { return "shadow"; }
@@ -78,6 +81,9 @@ export class InfoButton {
       "defaultValue": "'Toelichting bij optie'"
     }
   }; }
+  static get states() { return {
+    "hover": {}
+  }; }
   static get events() { return [{
       "method": "dsoToggle",
       "name": "dsoToggle",