@momentum-design/components 0.74.4 → 0.75.0

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

@@ -0,0 +1,53 @@
+import { CSSResult, PropertyValues } from 'lit';
+import { Component } from '../../models';
+import type { ButtonGroupOrientation, ButtonGroupSize, ButtonGroupVariant } from './buttongroup.types';
+/**
+ * buttongroup component, is a styled wrapper for multiple buttons.
+ * It can support icon buttons, combination of icon and pill buttons, and text buttons.
+ * They are available in horizontal and vertical orientation.
+ *
+ * @tagname mdc-buttongroup
+ *
+ * @slot default - This is a default/unnamed slot, which contains the buttons
+ *
+ * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup
+ * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup
+ * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup
+ */
+declare class ButtonGroup extends Component {
+    /**
+     * Orientation of the buttongroup.
+     * @default 'horizontal'
+     */
+    orientation: ButtonGroupOrientation;
+    /**
+     * Variant of the buttons within the buttongroup.
+     * @default 'primary'
+     */
+    variant: ButtonGroupVariant;
+    /**
+     * Size of the buttons within the buttongroup.
+     * @default '28'
+     */
+    size: ButtonGroupSize;
+    /**
+     * When this is true, the buttons within the buttongroup will be compact.
+     * i.e. Irrespective of the size of the buttons, they will have a height of 24px.
+     * @default false
+     */
+    compact: boolean;
+    /**
+     * List of buttons passed into the slot
+     * @internal
+     */
+    private buttons;
+    /**
+     * Handles the slotchange event, setting the size and variant of the buttons
+     * @internal
+     */
+    private handleSlotChange;
+    updated(changedProperties: PropertyValues<ButtonGroup>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default ButtonGroup;

package/dist/components/buttongroup/buttongroup.component.js

@@ -0,0 +1,94 @@
+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, queryAssignedElements } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { DEFAULTS } from './buttongroup.constants';
+import styles from './buttongroup.styles';
+/**
+ * buttongroup component, is a styled wrapper for multiple buttons.
+ * It can support icon buttons, combination of icon and pill buttons, and text buttons.
+ * They are available in horizontal and vertical orientation.
+ *
+ * @tagname mdc-buttongroup
+ *
+ * @slot default - This is a default/unnamed slot, which contains the buttons
+ *
+ * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup
+ * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup
+ * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup
+ */
+class ButtonGroup extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Orientation of the buttongroup.
+         * @default 'horizontal'
+         */
+        this.orientation = DEFAULTS.ORIENTATION;
+        /**
+         * Variant of the buttons within the buttongroup.
+         * @default 'primary'
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * Size of the buttons within the buttongroup.
+         * @default '28'
+         */
+        this.size = DEFAULTS.SIZE;
+        /**
+         * When this is true, the buttons within the buttongroup will be compact.
+         * i.e. Irrespective of the size of the buttons, they will have a height of 24px.
+         * @default false
+         */
+        this.compact = false;
+    }
+    /**
+     * Handles the slotchange event, setting the size and variant of the buttons
+     * @internal
+     */
+    handleSlotChange() {
+        this.buttons.forEach((button) => {
+            button.setAttribute('size', this.size.toString());
+            button.setAttribute('variant', this.variant);
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('size') || changedProperties.has('variant')) {
+            this.handleSlotChange();
+        }
+    }
+    render() {
+        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
+    }
+}
+ButtonGroup.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ButtonGroup.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ButtonGroup.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], ButtonGroup.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], ButtonGroup.prototype, "compact", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'mdc-button' }),
+    __metadata("design:type", Array)
+], ButtonGroup.prototype, "buttons", void 0);
+export default ButtonGroup;

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

@@ -0,0 +1,21 @@
+declare const TAG_NAME: "mdc-buttongroup";
+declare const BUTTON_GROUP_SIZE: {
+    readonly 40: 40;
+    readonly 32: 32;
+    readonly 28: 28;
+    readonly 24: 24;
+};
+declare const BUTTON_GROUP_ORIENTATION: {
+    readonly HORIZONTAL: "horizontal";
+    readonly VERTICAL: "vertical";
+};
+declare const BUTTON_GROUP_VARIANT: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+};
+declare const DEFAULTS: {
+    SIZE: 28;
+    VARIANT: "primary";
+    ORIENTATION: "horizontal";
+};
+export { TAG_NAME, DEFAULTS, BUTTON_GROUP_SIZE, BUTTON_GROUP_ORIENTATION, BUTTON_GROUP_VARIANT };

package/dist/components/buttongroup/buttongroup.constants.js

@@ -0,0 +1,22 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('buttongroup');
+const BUTTON_GROUP_SIZE = {
+    40: 40,
+    32: 32,
+    28: 28,
+    24: 24,
+};
+const BUTTON_GROUP_ORIENTATION = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};
+const BUTTON_GROUP_VARIANT = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+};
+const DEFAULTS = {
+    SIZE: BUTTON_GROUP_SIZE[28],
+    VARIANT: BUTTON_GROUP_VARIANT.PRIMARY,
+    ORIENTATION: BUTTON_GROUP_ORIENTATION.HORIZONTAL,
+};
+export { TAG_NAME, DEFAULTS, BUTTON_GROUP_SIZE, BUTTON_GROUP_ORIENTATION, BUTTON_GROUP_VARIANT };

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

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

package/dist/components/buttongroup/buttongroup.styles.js

@@ -0,0 +1,81 @@
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
+const styles = css `
+:host{
+  --mdc-buttongroup-border-radius: 1.25rem;
+  --mdc-buttongroup-border-color: var(--mds-color-theme-outline-button-normal);
+  --mdc-buttongroup-divider-color: var(--mds-color-theme-outline-secondary-normal);
+
+  border-radius: var(--mdc-buttongroup-border-radius);
+  border: 1px solid var(--mdc-buttongroup-border-color);
+}
+
+:host([variant='primary']){
+  border: none;
+  background-color: var(--mds-color-theme-outline-primary-normal);
+  gap: 1px;
+}
+
+::slotted(mdc-button){
+  border-radius: 0;
+  border: none;
+  box-sizing: content-box;
+}
+
+:host([orientation="vertical"]){
+  flex-direction: column;
+}
+
+:host([orientation="horizontal"][variant="secondary"]:dir(ltr)) ::slotted(mdc-button:not(:last-child)){
+  border-right: 1px solid var(--mdc-buttongroup-divider-color);
+}
+:host([orientation="horizontal"][variant="secondary"]:dir(rtl)) ::slotted(mdc-button:not(:last-child)){
+  border-left: 1px solid var(--mdc-buttongroup-divider-color);
+}
+:host([orientation="vertical"][variant="secondary"]) ::slotted(mdc-button:not(:last-child)){
+  border-bottom: 1px solid var(--mdc-buttongroup-divider-color);
+}
+
+:host([orientation="vertical"]) ::slotted(mdc-button:first-child){
+  border-top-left-radius: var(--mdc-buttongroup-border-radius);
+  border-top-right-radius: var(--mdc-buttongroup-border-radius);
+}
+:host([orientation="vertical"]) ::slotted(mdc-button:last-child){
+  border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
+  border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
+}
+
+:host([orientation="horizontal"]:dir(ltr)) ::slotted(mdc-button:first-child){
+  border-top-left-radius: var(--mdc-buttongroup-border-radius);
+  border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
+}
+:host([orientation="horizontal"]:dir(rtl)) ::slotted(mdc-button:first-child){
+  border-top-right-radius: var(--mdc-buttongroup-border-radius);
+  border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
+}
+:host([orientation="horizontal"]:dir(ltr)) ::slotted(mdc-button:last-child){
+  border-top-right-radius: var(--mdc-buttongroup-border-radius);
+  border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
+}
+:host([orientation="horizontal"]:dir(rtl)) ::slotted(mdc-button:last-child){
+  border-top-left-radius: var(--mdc-buttongroup-border-radius);
+  border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
+}
+
+:host([compact][orientation="horizontal"]) ::slotted(mdc-button){
+  height: 1.5rem;
+}
+:host([compact][orientation="horizontal"][size="24"]) ::slotted(mdc-button){
+  width: 1.5rem;
+}
+:host([compact][orientation="horizontal"][size="28"]) ::slotted(mdc-button){
+  width: 1.75rem;
+}
+:host([compact][orientation="horizontal"][size="32"]) ::slotted(mdc-button){
+  width: 2rem;
+}
+:host([compact][orientation="horizontal"][size="40"]) ::slotted(mdc-button){
+  width: 2.5rem;
+}
+`;
+export default [hostFitContentStyles, styles];

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

@@ -0,0 +1,6 @@
+import type { ValueOf } from '../../utils/types';
+import { BUTTON_GROUP_ORIENTATION, BUTTON_GROUP_SIZE, BUTTON_GROUP_VARIANT } from './buttongroup.constants';
+type ButtonGroupSize = ValueOf<typeof BUTTON_GROUP_SIZE>;
+type ButtonGroupOrientation = ValueOf<typeof BUTTON_GROUP_ORIENTATION>;
+type ButtonGroupVariant = ValueOf<typeof BUTTON_GROUP_VARIANT>;
+export type { ButtonGroupSize, ButtonGroupOrientation, ButtonGroupVariant };

package/dist/components/buttongroup/buttongroup.types.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/buttongroup/index.js

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