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

package/dist/collection/components/six-picto/six-picto.js

@@ -0,0 +1,50 @@
+import { Component, Host, h, Element, Prop } from '@stencil/core';
+/**
+ * @since 1.1
+ * @status stable
+ *
+ * @part icon - The component's icon wrapper.
+ */
+export class SixPicto {
+  constructor() {
+    /**
+     * Defines the size of the icon.
+     */
+    this.size = 'medium';
+  }
+  render() {
+    var _a;
+    const iconName = (_a = this.host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
+    return (h(Host, null,
+      h("div", { part: "icon", class: { [`is-size-${this.size}`]: !!this.size, [`${iconName}`]: true } })));
+  }
+  static get is() { return "six-picto"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-picto.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-picto.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl'",
+        "resolved": "\"4xl\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the size of the icon."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/six-progress-bar/six-progress-bar.css

@@ -0,0 +1,60 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * @prop --height: The progress bar's height.
+ * @prop --track-color: The track color.
+ * @prop --indicator-color: The indicator color.
+ * @prop --label-color: The label color.
+ */
+: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%;
+  }
+}

package/dist/collection/components/six-progress-bar/six-progress-bar.js

@@ -0,0 +1,77 @@
+import { Component, h, Prop } from '@stencil/core';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - A label to show inside the indicator.
+ *
+ * @part base - The component's base wrapper.
+ * @part indicator - The progress bar indicator.
+ * @part label - The progress bar label.
+ */
+export class SixProgressBar {
+  constructor() {
+    /** 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 (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 },
+      h("div", { part: "indicator", class: "progress-bar__indicator", style: {
+          width: `${this.percentage}%`,
+        } }, !this.indeterminate && (h("span", { part: "label", class: "progress-bar__label" },
+        h("slot", null))))));
+  }
+  static get is() { return "six-progress-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-progress-bar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-progress-bar.css"]
+  }; }
+  static get properties() { return {
+    "percentage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The progress bar's percentage, 0 to 100."
+      },
+      "attribute": "percentage",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state."
+      },
+      "attribute": "indeterminate",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/six-progress-ring/six-progress-ring.css

@@ -0,0 +1,52 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * @prop --track-color: The track color.
+ * @prop --indicator-color: The indicator color.
+ */
+: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);
+}

package/dist/collection/components/six-progress-ring/six-progress-ring.js

@@ -0,0 +1,111 @@
+import { Component, h, Prop, Watch } from '@stencil/core';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - A label to show inside the ring.
+ *
+ * @part base - The component's base wrapper.
+ * @part label - The progress ring label.
+ */
+export class SixProgressRing {
+  constructor() {
+    /** 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 (h("div", { part: "base", class: "progress-ring" },
+      h("svg", { class: "progress-ring__image", width: this.size, height: this.size },
+        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 }),
+        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 })),
+      h("span", { part: "label", class: "progress-ring__label" },
+        h("slot", null))));
+  }
+  static get is() { return "six-progress-ring"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-progress-ring.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-progress-ring.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the progress ring in pixels."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "128"
+    },
+    "strokeWidth": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The stroke width of the progress ring in pixels."
+      },
+      "attribute": "stroke-width",
+      "reflect": false,
+      "defaultValue": "4"
+    },
+    "percentage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current progress percentage, 0 - 100."
+      },
+      "attribute": "percentage",
+      "reflect": false
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "percentage",
+      "methodName": "handlePercentageChange"
+    }]; }
+}

package/dist/collection/components/six-radio/six-radio.css

@@ -0,0 +1,84 @@
+: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;
+}