@cas-smartdesign/radio-button-group 4.0.1 → 4.0.3

package/dist/radio-button-group.mjs

@@ -2,19 +2,19 @@ import { LitElement as b, css as g, unsafeCSS as v, html as f } from "lit";
 import { property as n } from "lit/decorators/property.js";
 import { ifDefined as x } from "lit/directives/if-defined.js";
 import { ValidationLevel as k } from "@cas-smartdesign/field-validation-message";
-const y = ":host{display:block}:host,.label,.checkbox{outline:none}:host([disabled]){pointer-events:none}:host([disabled]) .root{opacity:.6;cursor:default;filter:grayscale(100%)}:host(:not([disabled])[focused]) .highlight{display:block!important}:host([checked]) circle.inner{display:block!important}:host([checked]) circle.outer{stroke:var(--sd-radio-button-checked-color, #1467ba)!important}.root{display:inline-flex;align-items:center;vertical-align:middle;width:100%;padding-top:6px;padding-bottom:6px}.root .radio-button-container{position:relative;display:inline-block;width:28px;height:28px;box-sizing:border-box;cursor:pointer;margin-right:5px;flex-shrink:0}.root .radio-button-container input{position:absolute;top:0;left:0;opacity:0}.root .radio-button-container circle.highlight{stroke:var(--sd-radio-button-highlight-color, rgba(20, 103, 186, .3))}.root .radio-button-container circle.inner{fill:var(--sd-radio-button-checked-color, #1467ba)}.root .radio-button-container circle.outer{stroke:var(--sd-radio-button-unchecked-color, #767676)}.root .label{font-family:Segoe UI,Lucida Sans,Arial,sans-serif;text-overflow:ellipsis;overflow-x:hidden;-webkit-user-select:none;user-select:none;cursor:pointer;padding-top:2px;padding-bottom:2px}";
+const y = ":host{display:block}:host,.label,.checkbox{outline:none}:host([disabled]){pointer-events:none}:host([disabled]) .root{opacity:.6;cursor:default;filter:grayscale(100%)}:host(:not([disabled])[focused]) .highlight{display:block!important}:host([checked]) circle.inner{display:block!important}:host([checked]) circle.outer{stroke:var(--sd-radio-button-checked-color, #1467ba)!important}:host([oneline]) .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.root{display:inline-flex;align-items:center;vertical-align:middle;width:100%;padding-top:6px;padding-bottom:6px}.root .radio-button-container{position:relative;display:inline-block;width:28px;height:28px;box-sizing:border-box;cursor:pointer;margin-right:5px;flex-shrink:0}.root .radio-button-container input{position:absolute;top:0;left:0;opacity:0}.root .radio-button-container circle.highlight{stroke:var(--sd-radio-button-highlight-color, rgba(20, 103, 186, .3))}.root .radio-button-container circle.inner{fill:var(--sd-radio-button-checked-color, #1467ba)}.root .radio-button-container circle.outer{stroke:var(--sd-radio-button-unchecked-color, #767676)}.root .label{font-family:Segoe UI,Lucida Sans,Arial,sans-serif;text-overflow:ellipsis;overflow-x:hidden;-webkit-user-select:none;user-select:none;cursor:pointer;padding-top:2px;padding-bottom:2px}";
 var I = Object.defineProperty, m = Object.getOwnPropertyDescriptor, p = (o, t, e, s) => {
   for (var i = s > 1 ? void 0 : s ? m(t, e) : t, c = o.length - 1, d; c >= 0; c--)
     (d = o[c]) && (i = (s ? d(t, e, i) : d(i)) || i);
   return s && i && I(t, e, i), i;
 };
 let w = 0;
-var a;
-const u = (a = class extends b {
+var l;
+const u = (l = class extends b {
   constructor() {
     super(), this.checked = !1, this.value = "", this.disabled = !1, this.label = "", this.handleClick = (t) => {
       t.preventDefault();
-    }, this.a11yID = a.ID + "_" + w++;
+    }, this.a11yID = l.ID + "_" + w++;
   }
   static get styles() {
     return [
@@ -51,9 +51,9 @@ const u = (a = class extends b {
             </div>
         `;
   }
-}, a.ID = "sd-radio-button", a.ensureDefined = () => {
-  customElements.get(a.ID) || customElements.define(a.ID, a);
-}, a);
+}, l.ID = "sd-radio-button", l.ensureDefined = () => {
+  customElements.get(l.ID) || customElements.define(l.ID, l);
+}, l);
 p([
   n({ type: Boolean, reflect: !0, attribute: !0 })
 ], u.prototype, "checked", 2);
@@ -72,8 +72,8 @@ var C = Object.defineProperty, D = Object.getOwnPropertyDescriptor, h = (o, t, e
   for (var i = s > 1 ? void 0 : s ? D(t, e) : t, c = o.length - 1, d; c >= 0; c--)
     (d = o[c]) && (i = (s ? d(t, e, i) : d(i)) || i);
   return s && i && C(t, e, i), i;
-}, l;
-const r = (l = class extends b {
+}, a;
+const r = (a = class extends b {
   constructor() {
     super(...arguments), this.layout = "horizontal", this.value = "", this.uncheckAllowed = !1, this.disabled = !1, this._focusIndex = -1, this._checkedButton = null, this.handleSlotChange = () => {
       this._buttons = this.buttonsSlot.assignedElements(), this._buttons.forEach((t) => {
@@ -233,9 +233,9 @@ const r = (l = class extends b {
   get selectedIndex() {
     return this._buttons.indexOf(this._checkedButton);
   }
-}, l.ID = "sd-radio-button-group", l.ensureDefined = () => {
-  B.ensureDefined(), customElements.get(l.ID) || customElements.define(l.ID, l);
-}, l);
+}, a.ID = "sd-radio-button-group", a.ensureDefined = () => {
+  B.ensureDefined(), customElements.get(a.ID) || customElements.define(a.ID, a);
+}, a);
 h([
   n({ type: String, reflect: !0, attribute: !0 })
 ], r.prototype, "layout", 2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cas-smartdesign/radio-button-group",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "description": "Radio button and radio button group elements with SmartDesign look & feel",
   "main": "dist/radio-button-group-with-externals.js",
   "module": "dist/radio-button-group.mjs",
@@ -8,8 +8,8 @@
   "types": "dist/radio-button-group.d.ts",
   "dependencies": {
     "lit": "^2.8.0",
-    "@cas-smartdesign/field-validation-message": "^5.0.1",
-    "@cas-smartdesign/styles": "^3.6.1"
+    "@cas-smartdesign/field-validation-message": "^5.0.2",
+    "@cas-smartdesign/styles": "^3.6.2"
   },
   "files": [
     "dist",
@@ -20,9 +20,9 @@
     "access": "public"
   },
   "devDependencies": {
-    "@cas-smartdesign/button": "^5.0.1",
-    "@cas-smartdesign/element-preview": "^0.2.1",
-    "@cas-smartdesign/license-generator": "^1.6.1"
+    "@cas-smartdesign/button": "^5.0.2",
+    "@cas-smartdesign/element-preview": "^0.2.2",
+    "@cas-smartdesign/license-generator": "^1.6.3"
   },
   "scripts": {
     "version": "pnpm version",

package/readme.md

@@ -48,10 +48,12 @@ The element could show validation messages via an `sd-field-validation-message`
   - Defines whether if the interaction with the button is disabled
 - `label`
   - Defines the text of the label
+- `oneline`: boolean
+  - The label of the button may wrap into multiple lines without this option.
 
 ### Properties
 
-- `checked`, `value`, `focused`, `disabled`, `label`
+- `checked`, `value`, `focused`, `disabled`, `label`, `oneline`
   - Reflects the corresponding attribute
 
 ### CSS Custom Properties
@@ -62,5 +64,3 @@ The element could show validation messages via an `sd-field-validation-message`
   - Defines the color of the circle which is only visible when the button is focused
 - `--sd-radio-button-unchecked-color`
   - Defines the color of the outer circle and the inner circle when the button is unchecked
-
-## Examples