@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/radio-button/radio-button.js

@@ -1,111 +1,19 @@
-import { css as p, LitElement as f, html as a, nothing as n } from "lit";
-import { property as r, state as h, customElement as v } from "lit/decorators.js";
-import { SbbConnectedAbortController as m, SbbLanguageController as g, SbbSlotStateController as y } from "../core/controllers.js";
-import { hostAttributes as x } from "../core/decorators.js";
-import { setOrRemoveAttribute as k } from "../core/dom.js";
-import { EventEmitter as u, HandlerRepository as w, formElementHandlerAspect as _ } from "../core/eventing.js";
-import { i18nExpanded as S, i18nCollapsed as z } from "../core/i18n.js";
-import { SbbUpdateSchedulerMixin as C } from "../core/mixins.js";
-const E = p`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-label-color: var(--sbb-color-charcoal);--sbb-radio-button-background-color: var(--sbb-color-white);--sbb-radio-button-inner-circle-color: var(--sbb-color-white);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-color-smoke);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-suffix-color: var(--sbb-color-charcoal);--sbb-radio-button-subtext-color: var(--sbb-color-granite);--sbb-radio-button-cursor: pointer;--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 );display:block;outline:none!important}@media (forced-colors: active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host(:focus-visible[data-is-selection-panel-input]){outline:none!important}:host(:focus-visible[data-is-selection-panel-input]) .sbb-radio-button:after{content:"";position:absolute;display:block;inset-block:calc(var(--sbb-spacing-responsive-xs) * -1 + var(--sbb-focus-outline-width) - var(--sbb-focus-outline-offset) * 2);inset-inline:calc(var(--sbb-spacing-responsive-xxs) * -1 + var(--sbb-focus-outline-width) - var(--sbb-focus-outline-offset) * 2);border:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) + var(--sbb-focus-outline-offset))}:host([checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-red);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media (forced-colors: active){:host([checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host([disabled]){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-background-color: var(--sbb-color-milk);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal);--sbb-radio-button-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}.sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch],[data-is-selection-panel-input])) .sbb-radio-button{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}slot[name=suffix]{color:var(--sbb-radio-button-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-radio-button-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media (forced-colors: active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var B = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (t, o, l, b) => {
-  for (var i = b > 1 ? void 0 : b ? q(o, l) : o, d = t.length - 1, c; d >= 0; d--)
-    (c = t[d]) && (i = (b ? c(o, l, i) : c(i)) || i);
-  return b && i && B(o, l, i), i;
+import { css as a, LitElement as l, html as u, nothing as d } from "lit";
+import { customElement as c } from "lit/decorators.js";
+import { SbbSlotStateController as f } from "../core/controllers.js";
+import { SbbRadioButtonCommonElementMixin as m, radioButtonCommonStyle as p } from "./common.js";
+const h = a`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}.sbb-radio-button{display:block}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-radio-button{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`;
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, x = (b, t, r, e) => {
+  for (var o = e > 1 ? void 0 : e ? _(t, r) : t, i = b.length - 1, n; i >= 0; i--)
+    (n = b[i]) && (o = (e ? n(t, r, o) : n(o)) || o);
+  return e && o && v(t, r, o), o;
 };
-let e = class extends C(f) {
+let s = class extends m(l) {
   constructor() {
-    super(), this.d = !1, this.e = !1, this.f = !1, this.g = null, this.h = !1, this.i = "m", this.c = !1, this.a = null, this.n = new m(this), this.j = new g(this), this.k = new u(
-      this,
-      e.events.stateChange,
-      { bubbles: !0 }
-    ), this.o = new u(
-      this,
-      e.events.radioButtonLoaded,
-      { bubbles: !0 }
-    ), this.l = new w(this, _), new y(this);
-  }
-  set allowEmptySelection(t) {
-    this.d = !!t;
-  }
-  get allowEmptySelection() {
-    var t;
-    return this.d || (((t = this.group) == null ? void 0 : t.allowEmptySelection) ?? !1);
-  }
-  set disabled(t) {
-    this.e = !!t;
-  }
-  get disabled() {
-    var t;
-    return this.e || (((t = this.group) == null ? void 0 : t.disabled) ?? !1);
-  }
-  set required(t) {
-    this.f = !!t;
-  }
-  get required() {
-    var t;
-    return this.f || (((t = this.group) == null ? void 0 : t.required) ?? !1);
-  }
-  /**
-   * Reference to the connected radio button group.
-   */
-  get group() {
-    return this.g;
-  }
-  set checked(t) {
-    this.h = !!t;
-  }
-  get checked() {
-    return this.h;
-  }
-  set size(t) {
-    this.i = t;
-  }
-  get size() {
-    var t;
-    return ((t = this.group) == null ? void 0 : t.size) ?? this.i;
-  }
-  /**
-   * Whether the input is the main input of a selection panel.
-   * @internal
-   */
-  get isSelectionPanelInput() {
-    return this.c;
-  }
-  p(t) {
-    t.preventDefault(), this.select();
-  }
-  select() {
-    this.disabled || (this.allowEmptySelection ? this.checked = !this.checked : this.checked || (this.checked = !0));
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.g = this.closest("sbb-radio-button-group"), this.a = this.closest("sbb-selection-panel"), this.c = !!this.a && !this.closest('sbb-selection-panel [slot="content"]'), this.toggleAttribute("data-is-selection-panel-input", this.c);
-    const t = this.n.signal;
-    this.addEventListener("click", (o) => this.p(o), { signal: t }), this.addEventListener("keydown", (o) => this.q(o), { signal: t }), this.l.connect(), this.o.emit(), ["disabled", "required", "size"].forEach((o) => this.requestUpdate(o));
-  }
-  willUpdate(t) {
-    super.willUpdate(t), t.has("checked") && (this.setAttribute("aria-checked", `${this.checked}`), this.checked !== t.get("checked") && (this.k.emit({ type: "checked", checked: this.checked }), this.isSelectionPanelInput && this.m())), t.has("disabled") && (k(this, "aria-disabled", this.disabled ? "true" : null), this.disabled !== t.get("disabled") && this.k.emit({ type: "disabled", disabled: this.disabled })), t.has("required") && this.setAttribute("aria-required", `${this.required}`);
-  }
-  firstUpdated(t) {
-    super.firstUpdated(t), this.startUpdate(), setTimeout(() => {
-      this.isSelectionPanelInput && this.m(), this.completeUpdate();
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.l.disconnect();
-  }
-  q(t) {
-    t.code === "Space" && this.select();
-  }
-  m() {
-    var t;
-    if (!((t = this.a) != null && t.hasContent)) {
-      this.b = "";
-      return;
-    }
-    this.b = this.checked ? ", " + S[this.j.current] : ", " + z[this.j.current];
+    super(), new f(this);
   }
   render() {
-    return a`
+    return u`
       <label class="sbb-radio-button">
         <input
           type="radio"
@@ -114,54 +22,23 @@ let e = class extends C(f) {
           ?disabled=${this.disabled}
           ?required=${this.required}
           ?checked=${this.checked}
-          value=${this.value || n}
+          value=${this.value || d}
           class="sbb-screen-reader-only"
         />
         <span class="sbb-radio-button__label-slot">
           <slot></slot>
-          ${this.a ? a`<slot name="suffix"></slot>` : n}
         </span>
-        ${this.a ? a`<slot name="subtext"></slot>` : n}
-        ${this.isSelectionPanelInput && this.b ? a`<span class="sbb-screen-reader-only"> ${this.b} </span>` : n}
       </label>
     `;
   }
 };
-e.styles = E;
-e.events = {
-  stateChange: "stateChange",
-  radioButtonLoaded: "radioButtonLoaded"
+s.styles = [p, h];
+s.events = {
+  stateChange: "stateChange"
 };
-s([
-  r({ attribute: "allow-empty-selection", type: Boolean })
-], e.prototype, "allowEmptySelection", 1);
-s([
-  r()
-], e.prototype, "value", 2);
-s([
-  r({ reflect: !0, type: Boolean })
-], e.prototype, "disabled", 1);
-s([
-  r({ reflect: !0, type: Boolean })
-], e.prototype, "required", 1);
-s([
-  r({ reflect: !0, type: Boolean })
-], e.prototype, "checked", 1);
-s([
-  r({ reflect: !0 })
-], e.prototype, "size", 1);
-s([
-  h()
-], e.prototype, "c", 2);
-s([
-  h()
-], e.prototype, "b", 2);
-e = s([
-  v("sbb-radio-button"),
-  x({
-    role: "radio"
-  })
-], e);
+s = x([
+  c("sbb-radio-button")
+], s);
 export {
-  e as SbbRadioButtonElement
+  s as SbbRadioButtonElement
 };

package/radio-button.d.ts

@@ -1,3 +1,5 @@
 export * from './radio-button/radio-button.js';
 export * from './radio-button/radio-button-group.js';
+export * from './radio-button/radio-button-panel.js';
+export * from './radio-button/common.js';
 //# sourceMappingURL=radio-button.d.ts.map

package/radio-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../src/elements/radio-button.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sCAAsC,CAAC"}
+{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../src/elements/radio-button.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,0BAA0B,CAAC"}

package/radio-button.js

@@ -1,2 +1,4 @@
 export * from "./radio-button/radio-button.js";
 export * from "./radio-button/radio-button-group.js";
+export * from "./radio-button/radio-button-panel.js";
+export * from "./radio-button/common.js";