@aquera/nile-elements 0.0.6-10 → 0.0.6-12

package/package.json

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

package/src/index.ts

@@ -29,6 +29,8 @@ export { NileErrorMessage } from './nile-error-message';
 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 { NileLink} from './nile-link';
+export { NileButtonToggleGroup } from './nile-button-toggle-group';
+export { NileButtonToggle } from './nile-button-toggle';
 export { NileSwitcher } from './nile-switcher';
 export { NileContentEditor } from './nile-content-editor';

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

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

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

@@ -0,0 +1,58 @@
+/**
+ * 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';
+
+/**
+ * ButtonToggle CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .nile-button-toggle {
+    display: flex;
+    padding: 12px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    border-radius: 4px;
+    color: #000;
+    text-align: center;
+    font-family: Colfax-regular;
+    font-size: 14px;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .nile-button-toggle__initial {
+    border-radius: 4px 0 0 4px;
+  }
+
+  .nile-button-toggle__end {
+    border-radius: 0 4px 4px 0;
+  }
+
+  .nile-button-toggle__middle {
+    border-width: 1px 0px;
+    border-style: solid;
+    border-color: #ccc;
+    border-radius: 0;
+  }
+
+  .nile-button-toggle__active {
+    background-color: #c7ced4;
+  }
+
+  .nile-button-toggle__disabled {
+    cursor: not-allowed;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,106 @@
+/**
+ * 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 } from 'lit/decorators.js';
+import {styles} from './nile-button-toggle.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-button-toggle
+ *
+ */
+@customElement('nile-button-toggle')
+export class NileButtonToggle extends NileElement {
+
+	/**
+	 * The styles for ButtonToggle
+	 * @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];
+	}
+
+  @property({ type: Boolean, reflect: true })
+  active = false;
+
+  @property({ type: Boolean, reflect: true })
+  initial = false;
+
+  @property({ type: Boolean, reflect: true })
+  middle = false;
+
+  @property({ type: Boolean, reflect: true })
+  end = false;
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  @property({ type: String })
+  value = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.toggle);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this.toggle);
+    super.disconnectedCallback();
+  }
+
+  toggle() {
+    if (this.disabled) return;
+    this.active = true;
+    const eventData = { active: this.active, value: this.value };
+    this.dispatchEvent(new CustomEvent('nile-toggle-changed', { detail: eventData, bubbles: true }));
+  }
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+  public render(): TemplateResult {
+    let classes = ['nile-button-toggle'];
+    if (this.active) {
+      classes.push('nile-button-toggle__active');
+    }
+    if (this.initial) {
+      classes.push('nile-button-toggle__initial');
+    }
+    if (this.middle) {
+      classes.push('nile-button-toggle__middle');
+    }
+    if (this.end) {
+      classes.push('nile-button-toggle__end');
+    }
+    if (this.disabled) {
+      classes.push('nile-button-toggle__disabled');
+    }
+
+    const classString = classes.join(' ');
+
+    return html`
+      <div class="${classString}">
+        <slot name="prefix"></slot>
+        <slot> </slot>
+      </div>
+    `;
+  }
+
+	/* #endregion */
+}
+
+export default NileButtonToggle;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-button-toggle': NileButtonToggle;
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+/**
+* 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';
+
+/**
+ * ButtonToggleGroup CSS
+ */
+export const styles = css`
+	:host {
+    display: inline-flex;
+	}
+`;
+
+export default [styles];

package/src/nile-button-toggle-group/nile-button-toggle-group.ts

@@ -0,0 +1,115 @@
+/**
+ * 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, queryAll } from 'lit/decorators.js';
+import {styles} from './nile-button-toggle-group.css';
+import NileButtonToggle from '../nile-button-toggle/nile-button-toggle';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-button-toggle-group
+ *
+ */
+@customElement('nile-button-toggle-group')
+export class NileButtonToggleGroup extends NileElement {
+  /**
+   * The styles for ButtonToggleGroup
+   * @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];
+  }
+
+  @queryAll('nile-button-toggle')
+  private toggles!: NodeListOf<NileButtonToggle>;
+
+  @query('slot:not([name])')
+  private defaultSlot!: HTMLSlotElement;
+
+  @property({ type: Boolean, reflect: true })
+  public disabled: boolean = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  firstUpdated() {
+    this.defaultSlot.addEventListener('slotchange', () =>
+      this.updateTogglePositions()
+    );
+    this.addEventListener('nile-toggle-changed', this.handleToggle);
+    this.updateTogglePositions();
+  }
+
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('disabled')) {
+      this.updateDisabledState();
+    }
+  }
+
+  private updateDisabledState() {
+    const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });
+    const toggles = assignedNodes.filter(
+      node => node instanceof NileButtonToggle
+    ) as NileButtonToggle[];
+
+    toggles.forEach(toggle => {
+      if (!toggle.disabled) {
+        toggle.disabled = this.disabled;
+      }
+    });
+  }
+
+  updateTogglePositions() {
+    const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });
+    const toggles = assignedNodes.filter(
+      node => node instanceof NileButtonToggle
+    ) as NileButtonToggle[];
+
+    toggles.forEach((toggle, index) => {
+      toggle.initial = index === 0;
+      toggle.middle = index > 0 && index < toggles.length - 1;
+      toggle.end = index === toggles.length - 1;
+    });
+  }
+
+  handleToggle(event: CustomEvent) {
+    if (this.disabled) return;
+    const toggles = this.querySelectorAll('nile-button-toggle');
+
+    if (toggles && event.detail.active) {
+      toggles.forEach((toggle: any) => {
+        if (toggle !== event.target) {
+          toggle.active = false;
+        }
+      });
+
+      this.emit('nile-change', { value: event.detail.value });
+    }
+  }
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    return html` <slot> </slot> `;
+  }
+
+  /* #endregion */
+}
+
+export default NileButtonToggleGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-button-toggle-group': NileButtonToggleGroup;
+  }
+}

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio-button/index.d.ts

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

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio-button/index.js

@@ -1,2 +0,0 @@
-export { NileRadioButton } from './nile-radio-button';
-//# sourceMappingURL=index.js.map

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio-button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-radio-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { NileRadioButton } from './nile-radio-button';\n"]}

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio-button/nile-radio-button.css.js

@@ -1,173 +0,0 @@
-/**
- * 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];
-//# sourceMappingURL=nile-radio-button.css.js.map

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio-button/nile-radio-button.css.js.map

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

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio-button/nile-radio-button.d.ts

@@ -1,57 +0,0 @@
-/**
- * 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 { CSSResultArray, TemplateResult } from 'lit-element';
-import NileElement from '../internal/nile-element';
-/**
- * Nile icon component.
- *
- * @tag nile-radio-button
- *
- */
-export declare 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]`
-     */
-    static get styles(): CSSResultArray;
-    private readonly hasSlotController;
-    input: HTMLInputElement;
-    hiddenInput: HTMLInputElement;
-    protected hasFocus: boolean;
-    /**
-     * @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.
-     */
-    checked: boolean;
-    /** The radio's value. When selected, the radio group will receive this value. */
-    value: string;
-    /** Disables the radio button. */
-    disabled: boolean;
-    /**
-     * 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.
-     */
-    size: 'small' | 'medium' | 'large';
-    /** Draws a pill-style radio button with rounded edges. */
-    pill: boolean;
-    connectedCallback(): void;
-    private handleBlur;
-    private handleClick;
-    private handleFocus;
-    handleDisabledChange(): void;
-    /** Sets focus on the radio button. */
-    focus(options?: FocusOptions): void;
-    /** Removes focus from the radio button. */
-    blur(): void;
-    render(): TemplateResult<1>;
-}
-export default NileRadioButton;
-declare global {
-    interface HTMLElementTagNameMap {
-        'nile-radio-button': NileRadioButton;
-    }
-}