@momentum-design/components 0.104.5 → 0.104.6

package/dist/components/slider/index.d.ts

@@ -0,0 +1,7 @@
+import Slider from './slider.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-slider']: Slider;
+    }
+}
+export default Slider;

package/dist/components/slider/index.js

@@ -0,0 +1,4 @@
+import Slider from './slider.component';
+import { TAG_NAME } from './slider.constants';
+Slider.register(TAG_NAME);
+export default Slider;

package/dist/components/slider/slider.component.d.ts

@@ -0,0 +1,120 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+/**
+ * slider component, which ...
+ *
+ * @tagname mdc-slider
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @cssproperty --custom-property-name - Description of the CSS custom property
+ */
+declare class Slider extends Component {
+    /**
+     * Whether or not to show a value range. When false, the slider displays a slide-able handle for the value property; when true, it displays slide-able handles for the valueStart and valueEnd properties.
+     */
+    range: boolean;
+    /**
+     * Whether the slider is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Acts similar to disabled, but component is focusable and tooltip is shown on focus.
+     */
+    softDisabled?: boolean;
+    /**
+     * Icon that represents the minimum value; ex: muted speaker.
+     */
+    leadingIcon?: string;
+    /**
+     * Icon that represents the maximum value; ex: speaker with full volume.
+     */
+    trailingIcon?: string;
+    /**
+     * The slider minimum value.
+     */
+    min: number;
+    /**
+     * The slider maximum value.
+     */
+    max: number;
+    /**
+     * The slider value displayed when range is false.
+     */
+    value?: number;
+    /**
+     * The slider start value displayed when range is true.
+     */
+    valueStart?: number;
+    /**
+     * The slider end value displayed when range is true.
+     */
+    valueEnd?: number;
+    /**
+     * The step between values. This will show tick marks and the stepper will snap to the nearest tick mark.
+     */
+    step: number;
+    /**
+     * It represents the label for slider component.
+     */
+    label?: string;
+    /**
+     * The label text is shown below the slider (on leading side) representing the minimum starting value of the slider.
+     */
+    labelStart?: string;
+    /**
+     * The label text is shown below the slider (on trailing side) representing the maximum starting value of the slider.
+     */
+    labelEnd?: string;
+    /**
+     * An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.
+     */
+    valueLabel: string;
+    /**
+     * An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.
+     */
+    valueLabelStart: string;
+    /**
+     * An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.
+     */
+    valueLabelEnd: string;
+    /**
+     * Aria label for the slider's start handle displayed when range is true.
+     */
+    ariaLabelStart: string;
+    /**
+     * Aria value text for the slider's start value displayed when range is true.
+     */
+    ariaValuetextStart: string;
+    /**
+     * Aria label for the slider's end handle displayed when range is true.
+     */
+    ariaLabelEnd: string;
+    /**
+     * Aria value text for the slider's end value displayed when range is true.
+     */
+    ariaValuetextEnd: string;
+    /**
+     * Name attribute for the slider (single value).
+     */
+    name?: string;
+    /**
+     * Name attribute for the slider's start handle (range).
+     */
+    nameStart?: string;
+    /**
+     * Name attribute for the slider's end handle (range).
+     */
+    nameEnd?: string;
+    /**
+     * Aria value text for the slider's value displayed when range is false.
+     */
+    dataAriaValuetext: string;
+    /**
+     * Aria label for the slider's handle displayed when range is false.
+     */
+    dataAriaLabel: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Slider;

package/dist/components/slider/slider.component.js

@@ -0,0 +1,189 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+import styles from './slider.styles';
+/**
+ * slider component, which ...
+ *
+ * @tagname mdc-slider
+ *
+ * @slot default - This is a default/unnamed slot
+ *
+ * @cssproperty --custom-property-name - Description of the CSS custom property
+ */
+class Slider extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether or not to show a value range. When false, the slider displays a slide-able handle for the value property; when true, it displays slide-able handles for the valueStart and valueEnd properties.
+         */
+        this.range = false;
+        /**
+         * The slider minimum value.
+         */
+        this.min = 0;
+        /**
+         * The slider maximum value.
+         */
+        this.max = 100;
+        /**
+         * The step between values. This will show tick marks and the stepper will snap to the nearest tick mark.
+         */
+        this.step = 1;
+        /**
+         * An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.
+         */
+        this.valueLabel = '';
+        /**
+         * An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.
+         */
+        this.valueLabelStart = '';
+        /**
+         * An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.
+         */
+        this.valueLabelEnd = '';
+        /**
+         * Aria label for the slider's start handle displayed when range is true.
+         */
+        this.ariaLabelStart = '';
+        /**
+         * Aria value text for the slider's start value displayed when range is true.
+         */
+        this.ariaValuetextStart = '';
+        /**
+         * Aria label for the slider's end handle displayed when range is true.
+         */
+        this.ariaLabelEnd = '';
+        /**
+         * Aria value text for the slider's end value displayed when range is true.
+         */
+        this.ariaValuetextEnd = '';
+        /**
+         * Aria value text for the slider's value displayed when range is false.
+         */
+        this.dataAriaValuetext = '';
+        /**
+         * Aria label for the slider's handle displayed when range is false.
+         */
+        this.dataAriaLabel = '';
+    }
+    render() {
+        return html `<p>This is a dummy slider component!</p>
+      <slot></slot>`;
+    }
+}
+Slider.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Slider.prototype, "range", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], Slider.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'soft-disabled' }),
+    __metadata("design:type", Boolean)
+], Slider.prototype, "softDisabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'leading-icon' }),
+    __metadata("design:type", String)
+], Slider.prototype, "leadingIcon", void 0);
+__decorate([
+    property({ type: String, attribute: 'trailing-icon' }),
+    __metadata("design:type", String)
+], Slider.prototype, "trailingIcon", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], Slider.prototype, "min", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], Slider.prototype, "max", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Slider.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, attribute: 'value-start' }),
+    __metadata("design:type", Number)
+], Slider.prototype, "valueStart", void 0);
+__decorate([
+    property({ type: Number, attribute: 'value-end' }),
+    __metadata("design:type", Number)
+], Slider.prototype, "valueEnd", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], Slider.prototype, "step", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Slider.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-start' }),
+    __metadata("design:type", String)
+], Slider.prototype, "labelStart", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-end' }),
+    __metadata("design:type", String)
+], Slider.prototype, "labelEnd", void 0);
+__decorate([
+    property({ type: String, attribute: 'value-label' }),
+    __metadata("design:type", String)
+], Slider.prototype, "valueLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'value-label-start' }),
+    __metadata("design:type", String)
+], Slider.prototype, "valueLabelStart", void 0);
+__decorate([
+    property({ type: String, attribute: 'value-label-end' }),
+    __metadata("design:type", String)
+], Slider.prototype, "valueLabelEnd", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label-start' }),
+    __metadata("design:type", String)
+], Slider.prototype, "ariaLabelStart", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-valuetext-start' }),
+    __metadata("design:type", String)
+], Slider.prototype, "ariaValuetextStart", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label-end' }),
+    __metadata("design:type", String)
+], Slider.prototype, "ariaLabelEnd", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-valuetext-end' }),
+    __metadata("design:type", String)
+], Slider.prototype, "ariaValuetextEnd", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Slider.prototype, "name", void 0);
+__decorate([
+    property({ type: String, attribute: 'name-start' }),
+    __metadata("design:type", String)
+], Slider.prototype, "nameStart", void 0);
+__decorate([
+    property({ type: String, attribute: 'name-end' }),
+    __metadata("design:type", String)
+], Slider.prototype, "nameEnd", void 0);
+__decorate([
+    property({ type: String, attribute: 'data-aria-valuetext' }),
+    __metadata("design:type", String)
+], Slider.prototype, "dataAriaValuetext", void 0);
+__decorate([
+    property({ type: String, attribute: 'data-aria-label' }),
+    __metadata("design:type", String)
+], Slider.prototype, "dataAriaLabel", void 0);
+export default Slider;

package/dist/components/slider/slider.constants.d.ts

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-slider";
+export { TAG_NAME };

package/dist/components/slider/slider.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('slider');
+export { TAG_NAME };

package/dist/components/slider/slider.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/slider/slider.styles.js

@@ -0,0 +1,7 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    display: block;
+  }
+`;
+export default [styles];

package/dist/components/slider/slider.types.d.ts

@@ -0,0 +1,3 @@
+interface Events {
+}
+export type { Events };

package/dist/components/slider/slider.types.js

@@ -0,0 +1,2 @@
+// import type { ValueOf } from '../../utils/types';
+export {};