mdui 1.0.2 → 2.0.0

package/components/segmented-button/segmented-button-group.js

@@ -0,0 +1,383 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { map } from 'lit/directives/map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { when } from 'lit/directives/when.js';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.js';
+import { isString } from '@mdui/jq/shared/helper.js';
+import { FormController, formResets } from '@mdui/shared/controllers/form.js';
+import { defaultValue } from '@mdui/shared/decorators/default-value.js';
+import { watch } from '@mdui/shared/decorators/watch.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { emit } from '@mdui/shared/helpers/event.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { segmentedButtonGroupStyle } from './segmented-button-group-style.js';
+/**
+ * @summary 分段按钮组件。需与 `<mdui-segmented-button>` 组件配合使用
+ *
+ * ```html
+ * <mdui-segmented-button-group>
+ * ..<mdui-segmented-button>Day</mdui-segmented-button>
+ * ..<mdui-segmented-button>Week</mdui-segmented-button>
+ * ..<mdui-segmented-button>Month</mdui-segmented-button>
+ * </mdui-segmented-button-group>
+ * ```
+ *
+ * @event change - 选中的值变更时触发
+ * @event invalid - 表单字段验证未通过时触发
+ *
+ * @slot - `<mdui-segmented-button>` 组件
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否填满父元素宽度
+         */
+        this.fullWidth = false;
+        /**
+         * 是否为禁用状态
+         */
+        this.disabled = false;
+        /**
+         * 提交表单时，是否必须选中
+         */
+        this.required = false;
+        /**
+         * 提交表单时的名称，将与表单数据一起提交
+         */
+        this.name = '';
+        /**
+         * 当前选中的 `<mdui-segmented-button>` 的值
+         *
+         * Note:
+         * 该属性的 HTML 属性始终为字符串，且仅在 `selects="single"` 时可以通过 HTML 属性设置初始值
+         * 该属性的 JavaScript 属性值在 `selects="single"` 时为字符串，在 `selects="multiple"` 时为字符串数组。
+         * 所以，在 `selects="multiple"` 时，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+         */
+        this.value = '';
+        /**
+         * 默认选中的值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
+         */
+        this.defaultValue = '';
+        // 因为 segmented-button 的 value 可能会重复，所以在每个 segmented-button 元素上都加了一个唯一的 key 属性，通过 selectedKeys 来记录选中状态的 key
+        this.selectedKeys = [];
+        /**
+         * 是否验证未通过
+         */
+        this.invalid = false;
+        // 是否已完成初始 value 的设置。首次设置初始值时，不触发 change 事件
+        this.hasSetDefaultValue = false;
+        this.inputRef = createRef();
+        this.formController = new FormController(this);
+    }
+    /**
+     * 表单验证状态对象
+     */
+    get validity() {
+        return this.inputRef.value.validity;
+    }
+    /**
+     * 表单验证的错误提示信息
+     */
+    get validationMessage() {
+        return this.inputRef.value.validationMessage;
+    }
+    // 所有的子项元素
+    get items() {
+        return $(this)
+            .find('mdui-segmented-button')
+            .get();
+    }
+    // 所有的子项元素（不包含已禁用的）
+    get itemsEnabled() {
+        return $(this)
+            .find('mdui-segmented-button:not([disabled])')
+            .get();
+    }
+    // 是否为单选
+    get isSingle() {
+        return this.selects === 'single';
+    }
+    // 是否为多选
+    get isMultiple() {
+        return this.selects === 'multiple';
+    }
+    // 是否可选择
+    get isSelectable() {
+        return this.isSingle || this.isMultiple;
+    }
+    onSelectsChange() {
+        if (!this.isSelectable && this.selectedKeys.length) {
+            this.selectedKeys = [];
+            this.onSelectedKeysChange();
+            this.onValueChange();
+        }
+        if (this.isSingle && this.selectedKeys.length > 1) {
+            this.selectedKeys = this.selectedKeys.slice(0, 1);
+            this.onSelectedKeysChange();
+            this.onValueChange();
+        }
+    }
+    onSelectedKeysChange() {
+        // 根据 selectedKeys 读取出对应 segmented-button 的 value
+        const values = this.itemsEnabled
+            .filter((item) => this.selectedKeys.includes(item.key))
+            .map((item) => item.value);
+        this.value = this.isMultiple ? values : values[0] || '';
+        if (this.hasSetDefaultValue) {
+            emit(this, 'change');
+        }
+        else {
+            this.hasSetDefaultValue = true;
+        }
+    }
+    async onValueChange() {
+        const hasUpdated = this.hasUpdated;
+        if (!hasUpdated) {
+            await this.updateComplete;
+        }
+        // 根据 value 找出对应的 segmented-button，并把这些元素的 key 赋值给 selectedKeys
+        if (!this.isSelectable) {
+            this.updateSelected(hasUpdated);
+            return;
+        }
+        const values = (this.isSingle
+            ? [this.value]
+            : // 多选时，传入的值可能是字符串（通过 attribute 属性设置）；或字符串数组（通过 property 属性设置）
+                isString(this.value)
+                    ? [this.value]
+                    : this.value).filter((i) => i);
+        if (!values.length) {
+            this.selectedKeys = [];
+        }
+        else if (this.isSingle) {
+            const firstItem = this.itemsEnabled.find((item) => item.value === values[0]);
+            this.selectedKeys = firstItem ? [firstItem.key] : [];
+        }
+        else if (this.isMultiple) {
+            this.selectedKeys = this.itemsEnabled
+                .filter((item) => values.includes(item.value))
+                .map((item) => item.key);
+        }
+        this.updateSelected(hasUpdated);
+    }
+    onInvalidChange() {
+        this.itemsEnabled.forEach((item) => (item.invalid = this.invalid));
+    }
+    onDisabledChange() {
+        this.items.forEach((item) => (item.groupDisabled = this.disabled));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.value =
+            this.isMultiple && isString(this.value)
+                ? this.value
+                    ? [this.value]
+                    : []
+                : this.value;
+        this.defaultValue = this.selects === 'multiple' ? [] : '';
+    }
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     */
+    checkValidity() {
+        const valid = this.inputRef.value.checkValidity();
+        if (!valid) {
+            emit(this, 'invalid', {
+                bubbles: false,
+                cancelable: true,
+                composed: false,
+            });
+        }
+        return valid;
+    }
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     *
+     * 验证未通过时，还将在组件上显示未通过的提示。
+     */
+    reportValidity() {
+        this.invalid = !this.inputRef.value.reportValidity();
+        if (this.invalid) {
+            const requestInvalid = emit(this, 'invalid', {
+                bubbles: false,
+                cancelable: true,
+                composed: false,
+            });
+            // 调用了 preventDefault() 时，隐藏默认的表单错误提示
+            if (requestInvalid.defaultPrevented) {
+                this.inputRef.value.blur();
+                this.inputRef.value.focus();
+            }
+        }
+        return !this.invalid;
+    }
+    /**
+     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     *
+     * @param message 自定义的提示文本
+     */
+    setCustomValidity(message) {
+        this.inputRef.value.setCustomValidity(message);
+        this.invalid = !this.inputRef.value.checkValidity();
+    }
+    render() {
+        return html `${when(this.isSelectable && this.isSingle, () => html `<input ${ref(this.inputRef)} type="radio" name="${ifDefined(this.name)}" value="1" .disabled="${this.disabled}" .required="${this.required}" .checked="${!!this.value}" tabindex="-1" @keydown="${this.onInputKeyDown}">`)}${when(this.isSelectable && this.isMultiple, () => html `<select ${ref(this.inputRef)} name="${ifDefined(this.name)}" .disabled="${this.disabled}" .required="${this.required}" multiple="multiple" tabindex="-1" @keydown="${this.onInputKeyDown}">${map(this.value, (value) => html `<option selected="selected" value="${value}"></option>`)}</select>`)}<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`;
+    }
+    async updateSelected(hasUpdated) {
+        var _a;
+        this.items.forEach((item) => (item.selected = this.selectedKeys.includes(item.key)));
+        if (hasUpdated) {
+            await this.updateComplete;
+            // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
+            const form = this.formController.getForm();
+            if (form && ((_a = formResets.get(form)) === null || _a === void 0 ? void 0 : _a.has(this))) {
+                this.invalid = false;
+                formResets.get(form).delete(this);
+            }
+            else {
+                this.invalid = !this.inputRef.value.checkValidity();
+            }
+        }
+    }
+    // 切换一个元素的选中状态
+    selectOne(item) {
+        if (this.isMultiple) {
+            // 直接修改 this.selectedKeys 无法被 watch 监听到，需要先克隆一份 this.selectedKeys
+            const selectedKeys = [...this.selectedKeys];
+            if (selectedKeys.includes(item.key)) {
+                selectedKeys.splice(selectedKeys.indexOf(item.key), 1);
+            }
+            else {
+                selectedKeys.push(item.key);
+            }
+            this.selectedKeys = selectedKeys;
+        }
+        if (this.isSingle) {
+            if (this.selectedKeys.includes(item.key)) {
+                this.selectedKeys = [];
+            }
+            else {
+                this.selectedKeys = [item.key];
+            }
+        }
+        this.updateSelected(this.hasUpdated);
+    }
+    onClick(event) {
+        // event.button 为 0 时，为鼠标左键点击。忽略鼠标中间和右键
+        if (event.button) {
+            return;
+        }
+        const target = event.target;
+        const item = target.closest('mdui-segmented-button');
+        if (item.disabled) {
+            return;
+        }
+        if (this.isSelectable && item.value) {
+            this.selectOne(item);
+        }
+    }
+    /**
+     * 在隐藏的 `<input>` 或 `<select>` 上按下按键时，切换选中状态
+     */
+    onInputKeyDown(event) {
+        if (!['Enter', ' '].includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        if (this.isSingle) {
+            const input = event.target;
+            input.checked = !input.checked;
+            this.selectOne(this.itemsEnabled[0]);
+            this.itemsEnabled[0].focus();
+        }
+        if (this.isMultiple) {
+            this.selectOne(this.itemsEnabled[0]);
+            this.itemsEnabled[0].focus();
+        }
+    }
+    onSlotChange() {
+        const items = this.items;
+        items.forEach((item, index) => {
+            item.classList.toggle('mdui-segmented-button-first', index === 0);
+            item.classList.toggle('mdui-segmented-button-last', index === items.length - 1);
+        });
+    }
+};
+SegmentedButtonGroup.styles = [
+    componentStyle,
+    segmentedButtonGroupStyle,
+];
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'full-width',
+    })
+], SegmentedButtonGroup.prototype, "fullWidth", void 0);
+__decorate([
+    property({ reflect: true })
+    // eslint-disable-next-line prettier/prettier
+], SegmentedButtonGroup.prototype, "selects", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], SegmentedButtonGroup.prototype, "disabled", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], SegmentedButtonGroup.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true })
+], SegmentedButtonGroup.prototype, "form", void 0);
+__decorate([
+    property({ reflect: true })
+], SegmentedButtonGroup.prototype, "name", void 0);
+__decorate([
+    property()
+], SegmentedButtonGroup.prototype, "value", void 0);
+__decorate([
+    defaultValue()
+], SegmentedButtonGroup.prototype, "defaultValue", void 0);
+__decorate([
+    state()
+], SegmentedButtonGroup.prototype, "selectedKeys", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], SegmentedButtonGroup.prototype, "invalid", void 0);
+__decorate([
+    watch('selects')
+], SegmentedButtonGroup.prototype, "onSelectsChange", null);
+__decorate([
+    watch('selectedKeys', true)
+], SegmentedButtonGroup.prototype, "onSelectedKeysChange", null);
+__decorate([
+    watch('value')
+], SegmentedButtonGroup.prototype, "onValueChange", null);
+__decorate([
+    watch('invalid')
+], SegmentedButtonGroup.prototype, "onInvalidChange", null);
+__decorate([
+    watch('disabled')
+], SegmentedButtonGroup.prototype, "onDisabledChange", null);
+SegmentedButtonGroup = __decorate([
+    customElement('mdui-segmented-button-group')
+], SegmentedButtonGroup);

package/components/segmented-button/segmented-button-style.d.ts

@@ -0,0 +1 @@
+export declare const segmentedButtonStyle: import("lit").CSSResult;

package/components/segmented-button/segmented-button-style.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const segmentedButtonStyle = css `:host{position:relative;display:inline-flex;flex-grow:1;flex-shrink:0;float:left;height:100%;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;border:.0625rem solid rgb(var(--mdui-color-outline))}.button{width:100%;padding:0 .75rem}:host([invalid]){color:rgb(var(--mdui-color-error));border-color:rgb(var(--mdui-color-error))}:host([invalid]) .button{background-color:rgb(var(--mdui-color-error-container))}:host([selected]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
+      --mdui-color-on-secondary-container
+    )}:host([disabled]),:host([group-disabled]){cursor:default;pointer-events:none;color:rgba(var(--mdui-color-on-surface),38%);border-color:rgba(var(--mdui-color-on-surface),12%)}:host([loading]){cursor:default;pointer-events:none}:host(:not(.mdui-segmented-button-first)){margin-left:-.0625rem}:host(.mdui-segmented-button-first){border-radius:var(--shape-corner) 0 0 var(--shape-corner)}:host(.mdui-segmented-button-last){border-radius:0 var(--shape-corner) var(--shape-corner) 0}.end-icon,.icon,.selected-icon{display:inline-flex;font-size:1.28571429em}.end-icon .i,.icon .i,.selected-icon .i,::slotted([slot=end-icon]),::slotted([slot=icon]),::slotted([slot=selected-icon]){font-size:inherit}mdui-circular-progress{width:1.125rem;height:1.125rem}:host([disabled]) mdui-circular-progress{opacity:.38}.label{display:inline-flex}.has-icon .label{padding-left:.5rem}.has-end-icon .label{padding-right:.5rem}`;

package/components/segmented-button/segmented-button.d.ts

@@ -0,0 +1,73 @@
+import '@mdui/shared/icons/check.js';
+import { ButtonBase } from '../button/button-base.js';
+import '../icon.js';
+import type { Ripple } from '../ripple/index.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 分段按钮项组件。需与 `<mdui-segmented-button-group>` 组件配合使用
+ *
+ * ```html
+ * <mdui-segmented-button-group>
+ * ..<mdui-segmented-button>Day</mdui-segmented-button>
+ * ..<mdui-segmented-button>Week</mdui-segmented-button>
+ * ..<mdui-segmented-button>Month</mdui-segmented-button>
+ * </mdui-segmented-button-group>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event invalid - 表单字段验证未通过时触发
+ *
+ * @slot - 分段按钮项的文本
+ * @slot icon - 分段按钮项的左侧图标
+ * @slot selected-icon - 选中状态的左侧图标
+ * @slot end-icon - 分段按钮项的右侧图标
+ *
+ * @csspart button - 内部的 button 或 a 元素
+ * @csspart icon - 左侧的图标
+ * @csspart selected-icon - 选中状态的左侧图标
+ * @csspart end-icon - 右侧的图标
+ * @csspart label - 文本内容
+ * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
+ */
+export declare class SegmentedButton extends ButtonBase {
+    static styles: CSSResultGroup;
+    /**
+     * 左侧的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
+     */
+    icon?: string;
+    /**
+     * 右侧的 Material Icons 图标名。也可以通过 `slot="end-icon"` 设置
+     */
+    endIcon?: string;
+    /**
+     * 选中状态的 Material Icons 图标名。也可以通过 `slot="selected-icon"` 设置
+     */
+    selectedIcon?: string;
+    /**
+     * 是否选中该分段按钮项，由 mdui-segmented-button-group 组件控制该参数
+     */
+    protected selected: boolean;
+    /**
+     * 是否验证未通过。由 mdui-segmented-button-group 控制该参数
+     */
+    protected invalid: boolean;
+    protected groupDisabled: boolean;
+    protected readonly key: number;
+    private readonly rippleRef;
+    private readonly hasSlotController;
+    protected get rippleElement(): Ripple;
+    protected get rippleDisabled(): boolean;
+    protected get focusDisabled(): boolean;
+    protected render(): TemplateResult;
+    private isDisabled;
+    private renderIcon;
+    private renderLabel;
+    private renderEndIcon;
+    private renderInner;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-segmented-button': SegmentedButton;
+    }
+}

package/components/segmented-button/segmented-button.js

@@ -0,0 +1,160 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import cc from 'classcat';
+import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { nothingTemplate } from '@mdui/shared/helpers/template.js';
+import { uniqueId } from '@mdui/shared/helpers/uniqueId.js';
+import '@mdui/shared/icons/check.js';
+import { ButtonBase } from '../button/button-base.js';
+import '../icon.js';
+import { segmentedButtonStyle } from './segmented-button-style.js';
+/**
+ * @summary 分段按钮项组件。需与 `<mdui-segmented-button-group>` 组件配合使用
+ *
+ * ```html
+ * <mdui-segmented-button-group>
+ * ..<mdui-segmented-button>Day</mdui-segmented-button>
+ * ..<mdui-segmented-button>Week</mdui-segmented-button>
+ * ..<mdui-segmented-button>Month</mdui-segmented-button>
+ * </mdui-segmented-button-group>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event invalid - 表单字段验证未通过时触发
+ *
+ * @slot - 分段按钮项的文本
+ * @slot icon - 分段按钮项的左侧图标
+ * @slot selected-icon - 选中状态的左侧图标
+ * @slot end-icon - 分段按钮项的右侧图标
+ *
+ * @csspart button - 内部的 button 或 a 元素
+ * @csspart icon - 左侧的图标
+ * @csspart selected-icon - 选中状态的左侧图标
+ * @csspart end-icon - 右侧的图标
+ * @csspart label - 文本内容
+ * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
+ */
+export let SegmentedButton = class SegmentedButton extends ButtonBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否选中该分段按钮项，由 mdui-segmented-button-group 组件控制该参数
+         */
+        this.selected = false;
+        /**
+         * 是否验证未通过。由 mdui-segmented-button-group 控制该参数
+         */
+        this.invalid = false;
+        // 父组件中是否设置了禁用。由 mdui-radio-group 控制该参数
+        this.groupDisabled = false;
+        // 每一个 segmented-button 元素都添加一个唯一的 key
+        this.key = uniqueId();
+        this.rippleRef = createRef();
+        this.hasSlotController = new HasSlotController(this, '[default]', 'icon', 'end-icon');
+    }
+    get rippleElement() {
+        return this.rippleRef.value;
+    }
+    get rippleDisabled() {
+        return this.isDisabled() || this.loading;
+    }
+    get focusDisabled() {
+        return this.isDisabled() || this.loading;
+    }
+    render() {
+        const className = cc({
+            button: true,
+            'has-icon': this.icon ||
+                this.selected ||
+                this.loading ||
+                this.hasSlotController.test('icon'),
+            'has-end-icon': this.endIcon || this.hasSlotController.test('end-icon'),
+        });
+        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.isButton()
+            ? this.renderButton({
+                className,
+                part: 'button',
+                content: this.renderInner(),
+            })
+            : this.isDisabled() || this.loading
+                ? html `<span part="button" class="_a ${className}">${this.renderInner()}</span>`
+                : this.renderAnchor({
+                    className,
+                    part: 'button',
+                    content: this.renderInner(),
+                })}`;
+    }
+    isDisabled() {
+        return this.disabled || this.groupDisabled;
+    }
+    renderIcon() {
+        if (this.loading) {
+            return this.renderLoading();
+        }
+        if (this.selected) {
+            return html `<slot name="selected-icon" part="selected-icon" class="selected-icon">${this.selectedIcon
+                ? html `<mdui-icon name="${this.selectedIcon}" class="i"></mdui-icon>`
+                : html `<mdui-icon-check class="i"></mdui-icon-check>`}</slot>`;
+        }
+        return html `<slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
+            : nothingTemplate}</slot>`;
+    }
+    renderLabel() {
+        const hasLabel = this.hasSlotController.test('[default]');
+        if (!hasLabel) {
+            return nothingTemplate;
+        }
+        return html `<slot part="label" class="label"></slot>`;
+    }
+    renderEndIcon() {
+        return html `<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon
+            ? html `<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>`
+            : nothingTemplate}</slot>`;
+    }
+    renderInner() {
+        return [this.renderIcon(), this.renderLabel(), this.renderEndIcon()];
+    }
+};
+SegmentedButton.styles = [
+    ButtonBase.styles,
+    segmentedButtonStyle,
+];
+__decorate([
+    property({ reflect: true })
+], SegmentedButton.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'end-icon' })
+], SegmentedButton.prototype, "endIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'selected-icon' })
+], SegmentedButton.prototype, "selectedIcon", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], SegmentedButton.prototype, "selected", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], SegmentedButton.prototype, "invalid", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'group-disabled',
+    })
+], SegmentedButton.prototype, "groupDisabled", void 0);
+SegmentedButton = __decorate([
+    customElement('mdui-segmented-button')
+], SegmentedButton);

package/components/segmented-button-group.d.ts

@@ -0,0 +1 @@
+export * from './segmented-button/segmented-button-group.js';

package/components/segmented-button-group.js

@@ -0,0 +1 @@
+export * from './segmented-button/segmented-button-group.js';

package/components/segmented-button.d.ts

@@ -0,0 +1 @@
+export * from './segmented-button/segmented-button.js';

package/components/segmented-button.js

@@ -0,0 +1 @@
+export * from './segmented-button/segmented-button.js';