@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

package/dist/cjs/six-progress-bar.cjs.entry.js

@@ -6,23 +6,23 @@ const index = require('./index-341df120.js');
 
 const sixProgressBarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--height:16px;--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--label-color:var(--six-progress-label-color);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--sl-border-radius-pill);overflow:hidden}.progress-bar__indicator{height:100%;font-family:var(--six-font-sans);font-size:12px;font-weight:var(--six-font-weight-normal);background-color:var(--indicator-color);color:var(--label-color);text-align:center;line-height:var(--height);white-space:nowrap;overflow:hidden;transition:400ms width, 400ms background-color;user-select:none}.progress-bar--indeterminate .progress-bar__indicator{position:absolute;animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{left:-50%;width:50%}75%,100%{left:100%;width:50%}}";
 
-let SixProgressBar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** The progress bar's percentage, 0 to 100. */
-    this.percentage = 0;
-    /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-    this.indeterminate = false;
-  }
-  render() {
-    return (index.h("div", { part: "base", class: {
-        'progress-bar': true,
-        'progress-bar--indeterminate': this.indeterminate,
-      }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, index.h("div", { part: "indicator", class: "progress-bar__indicator", style: {
-        width: `${this.percentage}%`,
-      } }, !this.indeterminate && (index.h("span", { part: "label", class: "progress-bar__label" }, index.h("slot", null))))));
-  }
-};
+let SixProgressBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** The progress bar's percentage, 0 to 100. */
+    this.percentage = 0;
+    /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+    this.indeterminate = false;
+  }
+  render() {
+    return (index.h("div", { part: "base", class: {
+        'progress-bar': true,
+        'progress-bar--indeterminate': this.indeterminate,
+      }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, index.h("div", { part: "indicator", class: "progress-bar__indicator", style: {
+        width: `${this.percentage}%`,
+      } }, !this.indeterminate && (index.h("span", { part: "label", class: "progress-bar__label" }, index.h("slot", null))))));
+  }
+};
 SixProgressBar.style = sixProgressBarCss;
 
 exports.six_progress_bar = SixProgressBar;

package/dist/cjs/six-progress-ring.cjs.entry.js

@@ -6,37 +6,37 @@ const index = require('./index-341df120.js');
 
 const sixProgressRingCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);display:inline-flex}.progress-ring{display:inline-flex;align-items:center;justify-content:center;position:relative}.progress-ring__image{transform:rotate(-90deg);transform-origin:50% 50%}.progress-ring__track{stroke:var(--track-color)}.progress-ring__indicator{stroke:var(--indicator-color);transition:0.35s stroke-dashoffset, 0.35s stroke}.progress-ring__label{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;user-select:none;font-family:var(--six-font-family)}";
 
-let SixProgressRing = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** The size of the progress ring in pixels. */
-    this.size = 128;
-    /** The stroke width of the progress ring in pixels. */
-    this.strokeWidth = 4;
-  }
-  handlePercentageChange() {
-    this.updateProgress();
-  }
-  componentDidLoad() {
-    this.updateProgress();
-  }
-  updateProgress() {
-    if (!this.indicator.r) {
-      return;
-    }
-    const radius = this.indicator.r.baseVal.value;
-    const circumference = radius * 2 * Math.PI;
-    const offset = circumference - (this.percentage / 100) * circumference;
-    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;
-    this.indicator.style.strokeDashoffset = `${offset}`;
-  }
-  render() {
-    return (index.h("div", { part: "base", class: "progress-ring" }, index.h("svg", { class: "progress-ring__image", width: this.size, height: this.size }, index.h("circle", { class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), index.h("circle", { ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), index.h("span", { part: "label", class: "progress-ring__label" }, index.h("slot", null))));
-  }
-  static get watchers() { return {
-    "percentage": ["handlePercentageChange"]
-  }; }
-};
+let SixProgressRing = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** The size of the progress ring in pixels. */
+    this.size = 128;
+    /** The stroke width of the progress ring in pixels. */
+    this.strokeWidth = 4;
+  }
+  handlePercentageChange() {
+    this.updateProgress();
+  }
+  componentDidLoad() {
+    this.updateProgress();
+  }
+  updateProgress() {
+    if (!this.indicator.r) {
+      return;
+    }
+    const radius = this.indicator.r.baseVal.value;
+    const circumference = radius * 2 * Math.PI;
+    const offset = circumference - (this.percentage / 100) * circumference;
+    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;
+    this.indicator.style.strokeDashoffset = `${offset}`;
+  }
+  render() {
+    return (index.h("div", { part: "base", class: "progress-ring" }, index.h("svg", { class: "progress-ring__image", width: this.size, height: this.size }, index.h("circle", { class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), index.h("circle", { ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), index.h("span", { part: "label", class: "progress-ring__label" }, index.h("slot", null))));
+  }
+  static get watchers() { return {
+    "percentage": ["handlePercentageChange"]
+  }; }
+};
 SixProgressRing.style = sixProgressRingCss;
 
 exports.six_progress_ring = SixProgressRing;

package/dist/cjs/six-radio.cjs.entry.js

@@ -6,127 +6,127 @@ const index = require('./index-341df120.js');
 
 const sixRadioCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.radio{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.radio__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.radio__icon svg{width:100%;height:100%}.radio__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:50%;background-color:var(--six-input-background-color);color:transparent;transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.radio__control input[type=radio]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover{border-color:var(--six-input-border-color-hover)}.radio--checked .radio__control{color:var(--six-selection-control-color);border-color:var(--six-selection-control-color)}.radio.radio--checked:not(.radio--disabled) .radio__control:hover{color:var(--six-input-border-color-focus);border-color:var(--six-input-border-color-focus)}.radio--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.radio--disabled .radio__control{border-color:var(--six-input-border-color-disabled)}.radio--disabled.radio--checked .radio__control{color:var(--six-selection-control-color-disabled)}.radio__label{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";
 
-let id = 0;
-let SixRadio = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixBlur = index.createEvent(this, "six-radio-blur", 7);
-    this.sixChange = index.createEvent(this, "six-radio-change", 7);
-    this.sixFocus = index.createEvent(this, "six-radio-focus", 7);
-    this.inputId = `radio-${++id}`;
-    this.labelId = `radio-label-${id}`;
-    this.hasFocus = false;
-    /** Set to true to disable the radio. */
-    this.disabled = false;
-    /** Set to true to draw the radio in a checked state. */
-    this.checked = false;
-    /**
-     * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
-     * provided by the `setCustomValidity` method.
-     */
-    this.invalid = false;
-    /** default state whether the radio button should be checked or not when resetting */
-    this.defaultState = false;
-  }
-  handleCheckedChange() {
-    if (this.checked) {
-      this.getSiblingRadios().map((radio) => (radio.checked = false));
-    }
-    if (this.input) {
-      this.input.checked = this.checked;
-      this.sixChange.emit();
-    }
-  }
-  connectedCallback() {
-    this.handleClick = this.handleClick.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-  }
-  componentWillLoad() {
-    this.defaultState = this.checked;
-  }
-  /** Sets focus on the radio. */
-  async setFocus(options) {
-    this.input.focus(options);
-  }
-  /** Removes focus from the radio. */
-  async removeFocus() {
-    this.input.blur();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    return this.input.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    return this.input.validity.valid;
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    this.input.setCustomValidity(message);
-    this.invalid = !this.input.checkValidity();
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    this.checked = this.defaultState;
-    this.input.setCustomValidity('');
-    this.invalid = false;
-  }
-  getAllRadios() {
-    const form = this.host.closest('six-form, form') || document.body;
-    if (!this.name)
-      return [];
-    return [...form.querySelectorAll('six-radio')].filter((radio) => radio.name === this.name);
-  }
-  getSiblingRadios() {
-    return this.getAllRadios().filter((radio) => radio !== this.host);
-  }
-  handleClick() {
-    this.checked = this.input.checked;
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.sixBlur.emit();
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.sixFocus.emit();
-  }
-  handleKeyDown(event) {
-    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-      const radios = this.getAllRadios().filter((radio) => !radio.disabled);
-      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
-      let index = radios.indexOf(this.host) + incr;
-      if (index < 0)
-        index = radios.length - 1;
-      if (index > radios.length - 1)
-        index = 0;
-      this.getAllRadios().map((radio) => (radio.checked = false));
-      radios[index].setFocus();
-      radios[index].checked = true;
-      event.preventDefault();
-    }
-  }
-  handleMouseDown(event) {
-    // Prevent clicks on the label from briefly blurring the input
-    event.preventDefault();
-    this.input.focus();
-  }
-  render() {
-    return (index.h("label", { part: "base", class: {
-        radio: true,
-        'radio--checked': this.checked,
-        'radio--disabled': this.disabled,
-        'radio--focused': this.hasFocus,
-      }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, index.h("span", { part: "control", class: "radio__control" }, index.h("span", { part: "checked-icon", class: "radio__icon" }, index.h("svg", { viewBox: "0 0 16 16" }, index.h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { fill: "currentColor" }, index.h("circle", { cx: "8", cy: "8", r: "5" }))))), index.h("input", { ref: (el) => (this.input = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), index.h("span", { part: "label", id: this.labelId, class: "radio__label" }, index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "checked": ["handleCheckedChange"]
-  }; }
-};
+let id = 0;
+let SixRadio = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixBlur = index.createEvent(this, "six-radio-blur", 7);
+    this.sixChange = index.createEvent(this, "six-radio-change", 7);
+    this.sixFocus = index.createEvent(this, "six-radio-focus", 7);
+    this.inputId = `radio-${++id}`;
+    this.labelId = `radio-label-${id}`;
+    this.hasFocus = false;
+    /** Set to true to disable the radio. */
+    this.disabled = false;
+    /** Set to true to draw the radio in a checked state. */
+    this.checked = false;
+    /**
+     * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
+     * provided by the `setCustomValidity` method.
+     */
+    this.invalid = false;
+    /** default state whether the radio button should be checked or not when resetting */
+    this.defaultState = false;
+  }
+  handleCheckedChange() {
+    if (this.checked) {
+      this.getSiblingRadios().map((radio) => (radio.checked = false));
+    }
+    if (this.input) {
+      this.input.checked = this.checked;
+      this.sixChange.emit();
+    }
+  }
+  connectedCallback() {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+  componentWillLoad() {
+    this.defaultState = this.checked;
+  }
+  /** Sets focus on the radio. */
+  async setFocus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the radio. */
+  async removeFocus() {
+    this.input.blur();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  async reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Checks for validity. */
+  async checkValidity() {
+    return this.input.validity.valid;
+  }
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  async setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+  /** Resets the formcontrol */
+  async reset() {
+    this.checked = this.defaultState;
+    this.input.setCustomValidity('');
+    this.invalid = false;
+  }
+  getAllRadios() {
+    const form = this.host.closest('six-form, form') || document.body;
+    if (!this.name)
+      return [];
+    return [...form.querySelectorAll('six-radio')].filter((radio) => radio.name === this.name);
+  }
+  getSiblingRadios() {
+    return this.getAllRadios().filter((radio) => radio !== this.host);
+  }
+  handleClick() {
+    this.checked = this.input.checked;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.sixBlur.emit();
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.sixFocus.emit();
+  }
+  handleKeyDown(event) {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
+      let index = radios.indexOf(this.host) + incr;
+      if (index < 0)
+        index = radios.length - 1;
+      if (index > radios.length - 1)
+        index = 0;
+      this.getAllRadios().map((radio) => (radio.checked = false));
+      radios[index].setFocus();
+      radios[index].checked = true;
+      event.preventDefault();
+    }
+  }
+  handleMouseDown(event) {
+    // Prevent clicks on the label from briefly blurring the input
+    event.preventDefault();
+    this.input.focus();
+  }
+  render() {
+    return (index.h("label", { part: "base", class: {
+        radio: true,
+        'radio--checked': this.checked,
+        'radio--disabled': this.disabled,
+        'radio--focused': this.hasFocus,
+      }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, index.h("span", { part: "control", class: "radio__control" }, index.h("span", { part: "checked-icon", class: "radio__icon" }, index.h("svg", { viewBox: "0 0 16 16" }, index.h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { fill: "currentColor" }, index.h("circle", { cx: "8", cy: "8", r: "5" }))))), index.h("input", { ref: (el) => (this.input = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), index.h("span", { part: "label", id: this.labelId, class: "radio__label" }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "checked": ["handleCheckedChange"]
+  }; }
+};
 SixRadio.style = sixRadioCss;
 
 exports.six_radio = SixRadio;