@exmg/exm-radio 0.0.2-alpha.0

package/README.md

@@ -0,0 +1,5 @@
+# `<exm-radio>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-radio-group.svg)](https://www.npmjs.com/package/@exmg/exm-radio)
+
+# @exmg/exm-radio
+
+This package provides radio functionality.

package/dist/exm-radio-item.d.ts

@@ -0,0 +1,16 @@
+import { Radio } from '@material/web/radio/internal/radio.js';
+/**
+ * exm-radio-item
+ * Material 3 radio item
+ */
+export declare class ExmRadioItem extends Radio {
+    private readonly maskIdOverride;
+    static styles: import("lit").CSSResult[];
+    radio: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-radio-item': ExmRadioItem;
+    }
+}

package/dist/exm-radio-item.js

@@ -0,0 +1,67 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Radio } from '@material/web/radio/internal/radio.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from '@material/web/radio/internal/radio-styles.js';
+import { style as radioStyle } from './styles/exm-radio-item-css.js';
+let maskId = 0;
+/**
+ * exm-radio-item
+ * Material 3 radio item
+ */
+let ExmRadioItem = class ExmRadioItem extends Radio {
+    constructor() {
+        super(...arguments);
+        // Unique maskId is required because of a Safari bug that fail to persist
+        // reference to the mask. This should be removed once the bug is fixed.
+        this.maskIdOverride = `cutout${++maskId}`;
+        this.radio = false;
+    }
+    render() {
+        const classes = { checked: this.checked, disabled: this.disabled };
+        const showRadioMap = classMap({ 'show-radio': this.radio });
+        return html `
+      <div class="container ${classMap(classes)}" aria-hidden="true">
+        <md-ripple part="ripple" .control=${this} ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring part="focus-ring" .control=${this}></md-focus-ring>
+        <div class="radio-container ${showRadioMap}">
+          <svg class="icon ${showRadioMap}" viewBox="0 0 20 20">
+            <mask id="${this.maskIdOverride}">
+              <rect width="100%" height="100%" fill="white" />
+              <circle cx="10" cy="10" r="8" fill="black" />
+            </mask>
+            <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#${this.maskIdOverride})" />
+            <circle class="inner circle" cx="10" cy="10" r="5" />
+          </svg>
+        </div>
+        <div class="content-container">
+          <div class="image-container">
+            <slot name="image"></slot>
+          </div>
+          <div class="content">
+            <slot name="title"></slot>
+            <slot name="content"></slot>
+          </div>
+        </div>
+        <input
+          id="input"
+          type="radio"
+          tabindex="-1"
+          .checked=${this.checked}
+          .value=${this.value}
+          ?disabled=${this.disabled}
+        />
+      </div>
+    `;
+    }
+};
+ExmRadioItem.styles = [styles, radioStyle];
+__decorate([
+    property({ type: Boolean })
+], ExmRadioItem.prototype, "radio", void 0);
+ExmRadioItem = __decorate([
+    customElement('exm-radio-item')
+], ExmRadioItem);
+export { ExmRadioItem };
+//# sourceMappingURL=exm-radio-item.js.map

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { ExmRadioItem } from './exm-radio-item.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { ExmRadioItem } from './exm-radio-item.js';
+//# sourceMappingURL=index.js.map

package/dist/styles/exm-radio-item-css.d.ts

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

package/dist/styles/exm-radio-item-css.js

@@ -0,0 +1,100 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    background: rgba(0, 0, 0, 0);
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    --md-radio-disabled-icon-color: grey;
+  }
+
+  .container {
+    border-top-left-radius: var(--exm-radio-table-top-left-radius, var(--exm-surface-border-radius, 16px));
+    border-top-right-radius: var(--exm-radio-table-top-right-radius, var(--exm-surface-border-radius, 16px));
+    border-bottom-left-radius: var(--exm-radio-table-bottom-left-radius, var(--exm-surface-border-radius, 16px));
+    border-bottom-right-radius: var(--exm-radio-table-bottom-right-radius, var(--exm-surface-border-radius, 16px));
+    box-sizing: border-box;
+    border: 1px solid var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
+    display: flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem 1px;
+  }
+
+  .container.disabled {
+    border: 1px solid var(--md-radio-disabled-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
+    color: var(--md-radio-disabled-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
+  }
+
+  .container.checked {
+    border: 2px solid var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));
+    padding: calc(1rem - 1px) 0;
+  }
+
+  :host([left-align]) .container {
+    justify-content: flex-start;
+  }
+
+  :host([right-align]) .container {
+    justify-content: flex-end;
+  }
+
+  md-ripple {
+    border-radius: unset;
+    width: 100%;
+    height: 100%;
+  }
+
+  #input {
+    display: none;
+  }
+
+  svg {
+    display: none;
+  }
+
+  svg.show-radio {
+    display: block;
+    position: relative;
+    width: 20px;
+    height: 20px;
+  }
+
+  slot[name='title'] {
+    font-size: var(--exm-radio-title-font-size, 24px);
+  }
+
+  slot[name='content'] {
+    font-size: var(--exm-radio-content-font-size, 16px);
+  }
+
+  slot[name='image'] {
+    margin-right: 1rem;
+  }
+
+  .radio-container {
+    height: 100%;
+  }
+
+  .image-container {
+    display: flex;
+  }
+
+  .image-container > ::slotted(*) {
+    margin-right: 1rem;
+  }
+
+  .content-container {
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+//# sourceMappingURL=exm-radio-item-css.js.map

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@exmg/exm-radio",
+  "version": "0.0.2-alpha.0+df24e0c",
+  "description": "Material style radio element",
+  "contributors": [
+    "Ex Machina"
+  ],
+  "keywords": [
+    "web-components",
+    "lit",
+    "material",
+    "radio",
+    "radio-button"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./exm-radio-item.js": "./dist/exm-radio-item.js"
+  },
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "homepage": "https://bitbucket.org/exmachina/exm-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@bitbucket.org:exmachina/exm-web-components.git",
+    "directory": "packages/exm-radio"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@material/web": "^2.2.0",
+    "lit": "3.2.1",
+    "tslib": "^2.6.2"
+  },
+  "scripts": {
+    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\"",
+    "tsc": "tsc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "df24e0c74a76a7e1c258f69386036e24e7860256"
+}