@aquera/nile-elements 0.0.4-8 → 0.0.4-9

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.4-8",
+  "version": "0.0.4-9",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -30,3 +30,5 @@ export { NileFormErrorMessage } from './nile-form-error-message';
 export { NileFormHelpText } from './nile-form-help-text';
 export { NileCalendar } from './nile-calendar';
 export { NileLink} from './nile-link';
+export { NileRadioButton } from './nile-radio-button';
+export { NileRadioButtonGroup } from './nile-radio-button-group';

package/src/nile-link/nile-link.css.ts

@@ -25,6 +25,7 @@ export const styles = css`
     gap: 8px;
     height: 38px;
     box-sizing: border-box;
+    cursor: pointer
   }
 
   .link__label {
@@ -42,6 +43,7 @@ export const styles = css`
     color: rgba(0, 94, 166, 0.5);
     cursor: not-allowed;
     opacity: 0.6;
+    pointer-events:none;
   }
 
   .link:not(.link--disabled):not(.link__button):hover {

package/src/nile-radio-button/index.ts

@@ -0,0 +1 @@
+export { NileRadioButton } from './nile-radio-button';

package/src/nile-radio-button/nile-radio-button.css.ts

@@ -0,0 +1,175 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * RadioButton CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    color: var(--color-text-default, #000);
+    text-align: center;
+    border-radius: 4px;
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px; /* 100% */
+    letter-spacing: 0.2px;
+    text-decoration: none;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: 12px;
+    cursor: pointer;
+    gap: 10px;
+  }
+
+  .button::-moz-focus-inner {
+    border: 0;
+  }
+
+  .button:focus {
+    outline: none;
+  }
+
+  .button:focus-visible {
+    outline: var(--nile-focus-ring);
+    outline-offset: var(--nile-focus-ring-offset);
+  }
+
+  .button--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* When disabled, prevent mouse events from bubbling up from children */
+  .button--disabled * {
+    pointer-events: none;
+  }
+
+  .button__prefix,
+  .button__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  .button__label {
+    display: inline-block;
+  }
+
+  .button__label::slotted(nile-icon) {
+    vertical-align: -2px;
+  }
+
+  /* Default */
+  .button--default {
+    border: 1px solid #c7ced4;
+    background: #fff;
+    color: black;
+  }
+
+  .button--default:hover:not(.button--disabled) {
+    border: 1px solid #c7ced4;
+    background: #e5e9eb;
+  }
+
+  .button--default:active:not(.button--disabled) {
+    border: 1px solid #c7ced4;
+    background: #e5e9eb;
+  }
+
+  .button--checked {
+    border: 1px solid #c7ced4;
+    background: #e5e9eb;
+  }
+
+  .button--has-label.button--medium .button__label {
+    padding: 0 var(--nile-spacing-medium);
+  }
+
+  .button--has-prefix.button--medium {
+    padding-inline-start: var(--nile-spacing-small);
+  }
+
+  .button--has-prefix.button--medium .button__label {
+    padding-inline-start: var(--nile-spacing-small);
+  }
+
+  .button--has-suffix.button--medium,
+  .button--caret.button--medium {
+    padding-inline-end: var(--nile-spacing-small);
+  }
+
+  .button--has-suffix.button--medium .button__label,
+  .button--caret.button--medium .button__label {
+    padding-inline-end: var(--nile-spacing-small);
+  }
+
+  .nile-radio-button--first {
+    background-color: red;
+  }
+
+  :host(.nile-radio-button--first:not(.nile-radio-button--last)) .button {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host(.nile-group-button--inner) .button {
+    border-radius: 0;
+  }
+
+  :host(.nile-radio-button--last:not(.nile-radio-button--first)) .button {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  /* All except the first */
+  :host(.nile-radio-button__button:not(.nile-radio-button__button--first)) {
+    margin-inline-start: calc(-1 * var(--nile-input-border-width));
+  }
+
+  :host(.nile-radio-button--inner) .button {
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+
+  .button__prefix,
+  .button__suffix,
+  .button__label {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+  }
+
+  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
+    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
+  .hidden-input {
+    all: unset;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    outline: dotted 1px red;
+    opacity: 0;
+    z-index: -1;
+  }
+`;
+
+export default [styles];

package/src/nile-radio-button/nile-radio-button.ts

@@ -0,0 +1,151 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
+import { customElement, query, state } from 'lit/decorators.js';
+import { styles } from './nile-radio-button.css';
+import NileElement from '../internal/nile-element';
+import { HasSlotController } from '../slot';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../internal/watch';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-radio-button
+ *
+ */
+@customElement('nile-radio-button')
+export class NileRadioButton extends NileElement {
+  /**
+   * The styles for RadioButton
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+  private readonly hasSlotController = new HasSlotController(
+    this,
+    '[default]',
+    'prefix',
+    'suffix'
+  );
+
+  @query('.button') input: HTMLInputElement;
+  @query('.hidden-input') hiddenInput: HTMLInputElement;
+
+  @state() protected hasFocus = false;
+
+  /**
+   * @internal The radio button's checked state. This is exposed as an "internal" attribute so we can reflect it, making
+   * it easier to style in button groups.
+   */
+  @property({ type: Boolean, reflect: true }) checked = false;
+
+  /** The radio's value. When selected, the radio group will receive this value. */
+  @property() value: string;
+
+  /** Disables the radio button. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
+   * this attribute can typically be omitted.
+   */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** Draws a pill-style radio button with rounded edges. */
+  @property({ type: Boolean, reflect: true }) pill = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'presentation');
+  }
+
+  private handleBlur() {
+    this.hasFocus = false;
+    this.emit('nile-blur');
+  }
+
+  private handleClick(e: MouseEvent) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    this.checked = true;
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+    this.emit('nile-focus');
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  /** Sets focus on the radio button. */
+  focus(options?: FocusOptions) {
+    this.input.focus(options);
+  }
+
+  /** Removes focus from the radio button. */
+  blur() {
+    this.input.blur();
+  }
+
+  render() {
+    return html`
+      <div part="base" role="presentation">
+        <button
+          part="${`button${this.checked ? ' button--checked' : ''}`}"
+          role="radio"
+          aria-checked="${this.checked}"
+          class=${classMap({
+            button: true,
+            'button--default': true,
+            'button--checked': this.checked,
+            'button--disabled': this.disabled,
+            'button--focused': this.hasFocus,
+            'button--has-label': this.hasSlotController.test('[default]'),
+            'button--has-prefix': this.hasSlotController.test('prefix'),
+            'button--has-suffix': this.hasSlotController.test('suffix'),
+          })}
+          aria-disabled=${this.disabled}
+          type="button"
+          value=${ifDefined(this.value)}
+          tabindex="${this.checked ? '0' : '-1'}"
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+        >
+          <slot name="prefix" part="prefix" class="button__prefix"></slot>
+          <slot part="label" class="button__label"></slot>
+          <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        </button>
+      </div>
+    `;
+  }
+}
+
+export default NileRadioButton;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-radio-button': NileRadioButton;
+  }
+}

package/src/nile-radio-button-group/index.ts

@@ -0,0 +1 @@
+export { NileRadioButtonGroup } from './nile-radio-button-group';

package/src/nile-radio-button-group/nile-radio-button-group.css.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * RadioButtonGroup CSS
+ */
+export const styles = css`
+  :host {
+    display: block;
+  }
+
+  .form-control {
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .form-control__label {
+    padding: 0;
+    font-size: 14px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  .radio-group--required .radio-group__label::after {
+    content: '*';
+    margin-inline-start: -2px;
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .form-control-input {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  .form-control--has-label .form-control__label {
+    display: inline-block;
+    color: inherit;
+    margin-bottom: 12px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+`;
+
+export default [styles];