@momentum-design/components 0.9.11 → 0.10.1

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

@@ -0,0 +1,25 @@
+import type { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { Size } from './bullet.types';
+/**
+ * Bullet component, which is a visual marker
+ * and be used to organize and present items in a list format.
+ *
+ * @tagname mdc-bullet
+ *
+ * @cssproperty --mdc-bullet-background-color - background color of the bullet
+ * @cssproperty --mdc-bullet-size-small - small size value of the bullet
+ * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet
+ * @cssproperty --mdc-bullet-size-large - large size value of the bullet
+*/
+declare class Bullet extends Component {
+    /**
+     * Size of the bullet
+     *
+     * Possible values: 'small', 'medium', 'large'
+     * @default small
+     */
+    size: Size;
+    static styles: Array<CSSResult>;
+}
+export default Bullet;

package/dist/components/bullet/bullet.component.js

@@ -0,0 +1,42 @@
+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 { property } from 'lit/decorators.js';
+import styles from './bullet.styles';
+import { Component } from '../../models';
+import { SIZE } from './bullet.constants';
+/**
+ * Bullet component, which is a visual marker
+ * and be used to organize and present items in a list format.
+ *
+ * @tagname mdc-bullet
+ *
+ * @cssproperty --mdc-bullet-background-color - background color of the bullet
+ * @cssproperty --mdc-bullet-size-small - small size value of the bullet
+ * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet
+ * @cssproperty --mdc-bullet-size-large - large size value of the bullet
+*/
+class Bullet extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Size of the bullet
+         *
+         * Possible values: 'small', 'medium', 'large'
+         * @default small
+         */
+        this.size = SIZE.SMALL;
+    }
+}
+Bullet.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Bullet.prototype, "size", void 0);
+export default Bullet;

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

@@ -0,0 +1,7 @@
+declare const TAG_NAME: "mdc-bullet";
+declare const SIZE: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+export { TAG_NAME, SIZE };

package/dist/components/bullet/bullet.constants.js

@@ -0,0 +1,8 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('bullet');
+const SIZE = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};
+export { TAG_NAME, SIZE };

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

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

package/dist/components/bullet/bullet.styles.js

@@ -0,0 +1,24 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-bullet-background-color: var(--mds-color-theme-outline-secondary-normal);
+    --mdc-bullet-size-small: 0.25rem;
+    --mdc-bullet-size-medium: 0.5rem;
+    --mdc-bullet-size-large: 1rem;
+
+    border-radius: 50%;
+    display: block;
+    aspect-ratio: 1;
+    background-color: var(--mdc-bullet-background-color);
+  }
+  :host([size="small"]) {
+    height: var(--mdc-bullet-size-small);
+  }
+  :host([size="medium"]) {
+    height: var(--mdc-bullet-size-medium);
+  }
+  :host([size="large"]) {
+    height: var(--mdc-bullet-size-large);
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { SIZE } from './bullet.constants';
+type Size = ValueOf<typeof SIZE>;
+export { Size };

package/dist/components/bullet/bullet.types.js

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

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

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

package/dist/components/bullet/index.js

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

package/dist/components/icon/icon.utils.js

@@ -15,6 +15,8 @@ const dynamicSVGImport = async (url, name, fileExtension) => {
         throw new Error('There was a problem while fetching the icon!');
     }
     const iconResponse = await response.text();
-    return new DOMParser().parseFromString(iconResponse, 'text/html').body.children[0];
+    const returnValue = new DOMParser().parseFromString(iconResponse, 'text/html').body.children[0];
+    returnValue.setAttribute('data-name', name);
+    return returnValue;
 };
 export { dynamicSVGImport };

package/dist/custom-elements.json

@@ -375,6 +375,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import Badge from './components/badge';
 import Presence from './components/presence';
 import Text from './components/text';
 import Button from './components/button';
+import Bullet from './components/bullet';
 import type { TextType } from './components/text/text.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, };
 export type { TextType, };

package/dist/index.js

@@ -6,4 +6,5 @@ import Badge from './components/badge';
 import Presence from './components/presence';
 import Text from './components/text';
 import Button from './components/button';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, };
+import Bullet from './components/bullet';
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, };

package/dist/react/bullet/index.d.ts

@@ -0,0 +1,14 @@
+import Component from '../../components/bullet';
+/**
+ * Bullet component, which is a visual marker
+ * and be used to organize and present items in a list format.
+ *
+ * @tagname mdc-bullet
+ *
+ * @cssproperty --mdc-bullet-background-color - background color of the bullet
+ * @cssproperty --mdc-bullet-size-small - small size value of the bullet
+ * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet
+ * @cssproperty --mdc-bullet-size-large - large size value of the bullet
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/bullet/index.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/bullet';
+import { TAG_NAME } from '../../components/bullet/bullet.constants';
+/**
+ * Bullet component, which is a visual marker
+ * and be used to organize and present items in a list format.
+ *
+ * @tagname mdc-bullet
+ *
+ * @cssproperty --mdc-bullet-background-color - background color of the bullet
+ * @cssproperty --mdc-bullet-size-small - small size value of the bullet
+ * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet
+ * @cssproperty --mdc-bullet-size-large - large size value of the bullet
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Bullet',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
+export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';

package/dist/react/index.js

@@ -1,5 +1,6 @@
 export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
+export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';

package/package.json

@@ -35,5 +35,5 @@
     "@momentum-design/tokens": "*",
     "lit": "^3.2.0"
   },
-  "version": "0.9.11"
+  "version": "0.10.1"
 }