@exmg/exm-radio 1.0.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/index.d.ts

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

package/index.js

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

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@exmg/exm-radio",
+  "version": "1.0.0",
+  "description": "Material style radio element",
+  "contributors": [
+    "Ex Machina"
+  ],
+  "keywords": [
+    "web-components",
+    "lit",
+    "material",
+    "radio",
+    "radio-button"
+  ],
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./exm-radio-item.js": "./src/exm-radio-item.js"
+  },
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "homepage": "https://github.com/exmg/exmachina-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:exmg/exm-web-components.git",
+    "directory": "packages/exm-radio"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@material/web": "^1.3.0",
+    "lit": "3.0.0",
+    "tslib": "^2.6.2"
+  },
+  "devDependencies": {
+    "@exmg/lit-cli": "^2.0.1"
+  },
+  "scripts": {
+    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\"",
+    "tsc": "tsc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0907b55c89325d59902b98a64c352bf6e1fc81ff"
+}

package/src/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 ExmgRadioItem 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': ExmgRadioItem;
+    }
+}

package/src/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 radioStyle from './styles/exm-radio-item-css.js';
+let maskId = 0;
+/**
+ * exm-radio-item
+ * Material 3 radio item
+ */
+let ExmgRadioItem = class ExmgRadioItem 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>
+    `;
+    }
+};
+ExmgRadioItem.styles = [styles, radioStyle];
+__decorate([
+    property({ type: Boolean })
+], ExmgRadioItem.prototype, "radio", void 0);
+ExmgRadioItem = __decorate([
+    customElement('exm-radio-item')
+], ExmgRadioItem);
+export { ExmgRadioItem };
+//# sourceMappingURL=exm-radio-item.js.map

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

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

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

@@ -0,0 +1,4 @@
+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-radius:8px;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}md-ripple{border-radius:unset;width:100%;height:100%}svg{display:none}svg.show-radio{display:block;position:relative;width:20px;height:20px}slot[name=title]{font-size:24px}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}`;
+export default style;
+//# sourceMappingURL=exm-radio-item-css.js.map

package/src/styles/exm-radio-item.scss

@@ -0,0 +1,73 @@
+:host {
+  display: block;
+  background: transparent;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  --md-radio-disabled-icon-color: grey;
+}
+
+.container {
+  border-radius: 8px;
+  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;
+  &.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));
+  }
+  &.checked {
+    border: 2px solid var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));
+    padding: calc(1rem - 1px) 0;
+  }
+}
+
+md-ripple {
+  // Override ripple from MDRadio styles
+  border-radius: unset;
+  width: 100%;
+  height: 100%;
+}
+
+svg {
+  display: none;
+  &.show-radio {
+    display: block;
+    position: relative;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+slot[name='title'] {
+  font-size: 24px;
+}
+
+slot[name='image'] {
+  margin-right: 1rem;
+}
+
+.radio-container {
+  height: 100%;
+}
+
+.image-container {
+  display: flex;
+  > ::slotted(*) {
+    margin-right: 1rem;
+  }
+}
+
+.content-container {
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+}