@dso-toolkit/core 62.12.1 → 62.14.0

package/dist/collection/components/advanced-select/advanced-select.css

@@ -0,0 +1,206 @@
+:host {
+  display: block;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.active-option {
+  display: flex;
+  inline-size: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0;
+  border: 1px solid #275937;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: #fff;
+  line-height: inherit;
+  font-family: inherit;
+  font-size: inherit;
+}
+.active-option.open {
+  border-radius: 4px 4px 0 0;
+}
+.active-option dso-icon {
+  color: #275937;
+}
+
+.active-option-label {
+  padding: 4px 16px;
+  overflow: hidden;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */
+  white-space: nowrap;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */
+  text-overflow: ellipsis;
+}
+
+.active-option-aside {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+}
+
+.badges {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+}
+
+.groups-container {
+  position: relative;
+}
+
+.groups {
+  position: absolute;
+  inset-block-start: -1px;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  max-block-size: 500px;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  background-color: #fff;
+  border: 1px solid #275937;
+  border-radius: 0 0 4px 4px;
+}
+.groups li::marker {
+  display: none;
+}
+
+.group {
+  border-bottom: 1px solid #ccc;
+}
+.group:last-child {
+  border-bottom: none;
+}
+.group .option {
+  padding-left: 37px;
+}
+.group .option-label::before {
+  content: "";
+  position: absolute;
+  display: block;
+  block-size: 10px;
+  inline-size: 10px;
+  inset: 4px auto auto -20px;
+  border-radius: 50%;
+  background-color: #ccc;
+  border-color: #ccc;
+  color: #191919;
+}
+
+.group-label {
+  margin: 0;
+  padding: 4px 16px;
+  color: #666;
+  font-size: 14px;
+  font-weight: 500;
+  border-bottom: 1px solid #ccc;
+}
+
+.group-link {
+  display: block;
+  padding: 8px 4px;
+  text-align: end;
+  color: #000;
+  text-decoration: none;
+}
+.group-link:hover {
+  text-decoration: underline;
+}
+.group-link dso-icon {
+  color: #39870c;
+}
+
+.group-info .option-label::before {
+  background-color: #6ca4d9;
+  border-color: #6ca4d9;
+  color: #191919;
+}
+
+.group-primary .option-label::before {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+
+.group-success .option-label::before {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+
+.group-warning .option-label::before {
+  background-color: #dcd400;
+  border-color: #dcd400;
+  color: #191919;
+}
+
+.group-danger .option-label::before {
+  background-color: #ce3f51;
+  border-color: #ce3f51;
+  color: #fff;
+}
+
+.group-error .option-label::before {
+  background-color: #ce3f51;
+  border-color: #ce3f51;
+  color: #fff;
+}
+
+.group-attention .option-label::before {
+  background-color: #8b4a6a;
+  border-color: #8b4a6a;
+  color: #fff;
+}
+
+.options {
+  margin: 0;
+  padding: 0;
+}
+
+.option {
+  display: block;
+  inline-size: 100%;
+  padding: 8px 16px;
+  cursor: pointer;
+  line-height: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  border: none;
+  text-align: left;
+  background-color: #fff;
+}
+.option:hover {
+  background-color: #ebf3e6;
+}
+.option:hover .option-label {
+  color: #39870c;
+  font-weight: bold;
+}
+
+.option.option-active .option-label {
+  color: #39870c;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.option-label {
+  position: relative;
+  color: #000;
+  font-size: Asap, sans-serif;
+  font-weight: 400;
+}
+
+.option-hint {
+  padding-left: 5px;
+  color: #39870c;
+  font-size: Asap, sans-serif;
+  font-weight: bold;
+}

package/dist/collection/components/advanced-select/advanced-select.js

@@ -0,0 +1,220 @@
+import { h, Fragment, } from "@stencil/core";
+import clsx from "clsx";
+import { createFocusTrap } from "focus-trap";
+import { tabbable } from "tabbable";
+import { isModifiedEvent } from "../../utils/is-modified-event";
+export class AdvancedSelect {
+  constructor() {
+    this.toggleOpen = () => {
+      this.open = !this.open;
+    };
+    this.handleOptionClick = (event, option) => {
+      this.dsoChange.emit({ originalEvent: event, option });
+      this.open = false;
+    };
+    this.handleRedirectClick = (event, redirect) => {
+      this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });
+      this.open = false;
+    };
+    this.options = [];
+    this.active = undefined;
+    this.activeHint = undefined;
+    this.open = false;
+  }
+  keyDownListener(event) {
+    if (this.open && event.key === "ArrowUp") {
+      event.preventDefault();
+      this.handleTab(-1);
+    }
+    else if (this.open && event.key === "ArrowDown") {
+      event.preventDefault();
+      this.handleTab(1);
+    }
+  }
+  componentDidRender() {
+    if (this.open && !this.trap) {
+      this.createTrap();
+    }
+    else if (!this.open && this.trap) {
+      this.removeTrap();
+    }
+  }
+  createTrap() {
+    this.trap = createFocusTrap(this.host, {
+      clickOutsideDeactivates: true,
+      escapeDeactivates: true,
+      setReturnFocus: this.toggleButtonElementRef,
+      tabbableOptions: {
+        getShadowRoot: true,
+      },
+      onDeactivate: () => {
+        this.open = false;
+      },
+    }).activate();
+  }
+  removeTrap() {
+    var _a;
+    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+    delete this.trap;
+  }
+  handleTab(direction) {
+    var _a;
+    const elements = tabbable(this.host, { getShadowRoot: true });
+    const currentIndex = elements.findIndex((e) => { var _a; return e === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement); });
+    let nextIndex = currentIndex + direction;
+    if (nextIndex >= elements.length) {
+      nextIndex = 0;
+    }
+    else if (nextIndex < 0) {
+      nextIndex = elements.length - 1;
+    }
+    (_a = elements[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  render() {
+    var _a, _b;
+    return (h(Fragment, null, h("button", { "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h("span", { class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), h("span", { class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (h("span", { class: "badges" }, this.options
+      .filter((option) => "options" in option && "summaryCounter" in option && !!(option === null || option === void 0 ? void 0 : option.summaryCounter))
+      .map((group) => {
+      var _a;
+      return h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length);
+    }))), h("dso-icon", { icon: "caret-down" }))), this.open && (h("div", { class: "groups-container" }, h("ul", { class: "groups" }, this.options.map((optionOrGroup) => "options" in optionOrGroup ? (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, optionOrGroup.label && h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h(OptionElement, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))), optionOrGroup.redirect && (h("a", { class: "group-link", href: optionOrGroup.redirect.href, onClick: (e) => optionOrGroup.redirect && this.handleRedirectClick(e, optionOrGroup.redirect) }, optionOrGroup.redirect.label, h("dso-icon", { icon: "chevron-right" }))))) : (h(OptionElement, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))))));
+  }
+  static get is() { return "dso-advanced-select"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["advanced-select.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["advanced-select.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "AdvancedSelectOptionOrGroup<never>[]",
+          "resolved": "AdvancedSelectOptionOrGroup<never>[]",
+          "references": {
+            "AdvancedSelectOptionOrGroup": {
+              "location": "import",
+              "path": "./advanced-select.models",
+              "id": "src/components/advanced-select/advanced-select.models.ts::AdvancedSelectOptionOrGroup"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The options to display in the select."
+        },
+        "defaultValue": "[]"
+      },
+      "active": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "AdvancedSelectOption<never>",
+          "resolved": "AdvancedSelectOption<never> | undefined",
+          "references": {
+            "AdvancedSelectOption": {
+              "location": "import",
+              "path": "./advanced-select.models",
+              "id": "src/components/advanced-select/advanced-select.models.ts::AdvancedSelectOption"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The active option. By object reference."
+        }
+      },
+      "activeHint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "An extra text for the active option. Only visible in the list of options."
+        },
+        "attribute": "active-hint",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoChange",
+        "name": "dsoChange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when user selects an option"
+        },
+        "complexType": {
+          "original": "AdvancedSelectChangeEvent<never>",
+          "resolved": "AdvancedSelectChangeEvent<never>",
+          "references": {
+            "AdvancedSelectChangeEvent": {
+              "location": "import",
+              "path": "./advanced-select.models",
+              "id": "src/components/advanced-select/advanced-select.models.ts::AdvancedSelectChangeEvent"
+            }
+          }
+        }
+      }, {
+        "method": "dsoRedirect",
+        "name": "dsoRedirect",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when user activates a group redirect link."
+        },
+        "complexType": {
+          "original": "AdvancedSelectRedirectEvent",
+          "resolved": "AdvancedSelectRedirectEvent",
+          "references": {
+            "AdvancedSelectRedirectEvent": {
+              "location": "import",
+              "path": "./advanced-select.models",
+              "id": "src/components/advanced-select/advanced-select.models.ts::AdvancedSelectRedirectEvent"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "keyDownListener",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+const OptionElement = ({ option, active, activeHint, callback }) => (h("li", null, h("button", { class: clsx(["option", { "option-active": active === option }]), type: "button", onClick: (e) => callback(e, option) }, h("span", { class: "option-label" }, option.label), !!activeHint && active === option && h("span", { class: "option-hint" }, "(", activeHint, ")"))));
+//# sourceMappingURL=advanced-select.js.map

package/dist/collection/components/advanced-select/advanced-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-select.js","sourceRoot":"","sources":["../../../../src/components/advanced-select/advanced-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  h,\r\n  FunctionalComponent,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Fragment,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.models\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = tabbable(this.host, { getShadowRoot: true });\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => {\r\n                    return <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>;\r\n                  })}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map((optionOrGroup) =>\r\n                \"options\" in optionOrGroup ? (\r\n                  <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                    {optionOrGroup.label && <p class=\"group-label\">{optionOrGroup.label}</p>}\r\n                    <ul class=\"options\">\r\n                      {optionOrGroup.options.map((option) => (\r\n                        <OptionElement\r\n                          option={option}\r\n                          active={this.active}\r\n                          activeHint={this.activeHint}\r\n                          callback={this.handleOptionClick}\r\n                        />\r\n                      ))}\r\n                    </ul>\r\n                    {optionOrGroup.redirect && (\r\n                      <a\r\n                        class=\"group-link\"\r\n                        href={optionOrGroup.redirect.href}\r\n                        onClick={(e) => optionOrGroup.redirect && this.handleRedirectClick(e, optionOrGroup.redirect)}\r\n                      >\r\n                        {optionOrGroup.redirect.label}\r\n                        <dso-icon icon=\"chevron-right\"></dso-icon>\r\n                      </a>\r\n                    )}\r\n                  </li>\r\n                ) : (\r\n                  <OptionElement\r\n                    option={optionOrGroup}\r\n                    active={this.active}\r\n                    activeHint={this.activeHint}\r\n                    callback={this.handleOptionClick}\r\n                  />\r\n                ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nconst OptionElement: FunctionalComponent<{\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}> = ({ option, active, activeHint, callback }) => (\r\n  <li>\r\n    <button\r\n      class={clsx([\"option\", { \"option-active\": active === option }])}\r\n      type=\"button\"\r\n      onClick={(e) => callback(e, option)}\r\n    >\r\n      <span class=\"option-label\">{option.label}</span>\r\n      {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n    </button>\r\n  </li>\r\n);\r\n"]}

package/dist/collection/components/advanced-select/advanced-select.models.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=advanced-select.models.js.map

package/dist/collection/components/advanced-select/advanced-select.models.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-select.models.js","sourceRoot":"","sources":["../../../../src/components/advanced-select/advanced-select.models.ts"],"names":[],"mappings":"","sourcesContent":["export type AdvancedSelectVariant = \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"attention\";\r\n\r\nexport interface AdvancedSelectOption<T> {\r\n  label: string;\r\n  value?: T;\r\n}\r\n\r\nexport interface AdvancedSelectGroupRedirect {\r\n  label: string;\r\n  href: string;\r\n}\r\n\r\nexport interface AdvancedSelectGroup<T> {\r\n  label: string;\r\n  summaryCounter?: boolean;\r\n  redirect?: AdvancedSelectGroupRedirect;\r\n  options: AdvancedSelectOption<T>[];\r\n  variant?: AdvancedSelectVariant;\r\n}\r\n\r\nexport type AdvancedSelectOptionOrGroup<T> = AdvancedSelectOption<T> | AdvancedSelectGroup<T>;\r\n\r\nexport interface AdvancedSelectChangeEvent<T> {\r\n  originalEvent: MouseEvent;\r\n  option: AdvancedSelectOption<T>;\r\n}\r\n\r\nexport interface AdvancedSelectRedirectEvent {\r\n  originalEvent: MouseEvent;\r\n  isModifiedEvent: boolean;\r\n  redirect: AdvancedSelectGroupRedirect;\r\n}\r\n"]}

package/dist/collection/components/input-range/input-range.css

@@ -0,0 +1,74 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  inline-size: 100%;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.counter {
+  flex-shrink: 0;
+  min-inline-size: 5ch;
+}
+.counter.min {
+  text-align: end;
+}
+.counter.max {
+  text-align: start;
+}
+
+.input {
+  flex-grow: 1;
+  appearance: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+.input::-webkit-slider-runnable-track {
+  block-size: 0.5rem;
+  background-color: #e5e5e5;
+  border: 1px solid #666;
+  border-radius: 0.5rem;
+}
+.input::-webkit-slider-runnable-track:hover {
+  background-color: #ccc;
+}
+.input::-webkit-slider-thumb {
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+  appearance: none;
+  margin-block-start: -0.55rem;
+  background-color: #39870c;
+  border-radius: 50%;
+}
+.input::-webkit-slider-thumb:hover {
+  background-color: #275937;
+}
+.input::-moz-range-track {
+  box-sizing: border-box;
+  block-size: 0.5rem;
+  background-color: #e5e5e5;
+  border: 1px solid #666;
+  border-radius: 0.5rem;
+}
+.input::-moz-range-track:hover {
+  background-color: #ccc;
+}
+.input::-moz-range-thumb {
+  box-sizing: border-box;
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+  appearance: none;
+  margin-block-start: -0.5rem;
+  background-color: #39870c;
+  border-color: transparent;
+  border-radius: 50%;
+}
+.input::-moz-range-thumb:hover {
+  background-color: #275937;
+}

package/dist/collection/components/input-range/input-range.interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=input-range.interfaces.js.map

package/dist/collection/components/input-range/input-range.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-range.interfaces.js","sourceRoot":"","sources":["../../../../src/components/input-range/input-range.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface InputRangeChangeEvent {\r\n  originalEvent: Event;\r\n  value: number | undefined;\r\n  min: number;\r\n  max: number;\r\n  step: number;\r\n}\r\n"]}