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

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.js

@@ -0,0 +1,99 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html, property } 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
+ *
+ */
+let NileButtonToggleGroup = class NileButtonToggleGroup extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        /* #endregion */
+    }
+    /**
+     * The styles for ButtonToggleGroup
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    firstUpdated() {
+        this.defaultSlot.addEventListener('slotchange', () => this.updateTogglePositions());
+        this.addEventListener('nile-toggle-changed', this.handleToggle);
+        this.updateTogglePositions();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.updateDisabledState();
+        }
+    }
+    updateDisabledState() {
+        const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });
+        const toggles = assignedNodes.filter(node => node instanceof 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);
+        toggles.forEach((toggle, index) => {
+            toggle.initial = index === 0;
+            toggle.middle = index > 0 && index < toggles.length - 1;
+            toggle.end = index === toggles.length - 1;
+        });
+    }
+    handleToggle(event) {
+        if (this.disabled)
+            return;
+        const toggles = this.querySelectorAll('nile-button-toggle');
+        if (toggles && event.detail.active) {
+            toggles.forEach((toggle) => {
+                if (toggle !== event.target) {
+                    toggle.active = false;
+                }
+            });
+            this.emit('nile-change', { value: event.detail.value });
+        }
+    }
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html ` <slot> </slot> `;
+    }
+};
+__decorate([
+    queryAll('nile-button-toggle')
+], NileButtonToggleGroup.prototype, "toggles", void 0);
+__decorate([
+    query('slot:not([name])')
+], NileButtonToggleGroup.prototype, "defaultSlot", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButtonToggleGroup.prototype, "disabled", void 0);
+NileButtonToggleGroup = __decorate([
+    customElement('nile-button-toggle-group')
+], NileButtonToggleGroup);
+export { NileButtonToggleGroup };
+export default NileButtonToggleGroup;
+//# sourceMappingURL=nile-button-toggle-group.js.map

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-button-toggle-group.js","sourceRoot":"","sources":["../../../src/nile-button-toggle-group/nile-button-toggle-group.ts"],"names":[],"mappings":"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","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 {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement, query, queryAll } from 'lit/decorators.js';\nimport {styles} from './nile-button-toggle-group.css';\nimport NileButtonToggle from '../nile-button-toggle/nile-button-toggle';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile icon component.\n *\n * @tag nile-button-toggle-group\n *\n */\n@customElement('nile-button-toggle-group')\nexport class NileButtonToggleGroup extends NileElement {\n  /**\n   * The styles for ButtonToggleGroup\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @queryAll('nile-button-toggle')\n  private toggles!: NodeListOf<NileButtonToggle>;\n\n  @query('slot:not([name])')\n  private defaultSlot!: HTMLSlotElement;\n\n  @property({ type: Boolean, reflect: true })\n  public disabled: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  firstUpdated() {\n    this.defaultSlot.addEventListener('slotchange', () =>\n      this.updateTogglePositions()\n    );\n    this.addEventListener('nile-toggle-changed', this.handleToggle);\n    this.updateTogglePositions();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('disabled')) {\n      this.updateDisabledState();\n    }\n  }\n\n  private updateDisabledState() {\n    const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });\n    const toggles = assignedNodes.filter(\n      node => node instanceof NileButtonToggle\n    ) as NileButtonToggle[];\n\n    toggles.forEach(toggle => {\n      if (!toggle.disabled) {\n        toggle.disabled = this.disabled;\n      }\n    });\n  }\n\n  updateTogglePositions() {\n    const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });\n    const toggles = assignedNodes.filter(\n      node => node instanceof NileButtonToggle\n    ) as NileButtonToggle[];\n\n    toggles.forEach((toggle, index) => {\n      toggle.initial = index === 0;\n      toggle.middle = index > 0 && index < toggles.length - 1;\n      toggle.end = index === toggles.length - 1;\n    });\n  }\n\n  handleToggle(event: CustomEvent) {\n    if (this.disabled) return;\n    const toggles = this.querySelectorAll('nile-button-toggle');\n\n    if (toggles && event.detail.active) {\n      toggles.forEach((toggle: any) => {\n        if (toggle !== event.target) {\n          toggle.active = false;\n        }\n      });\n\n      this.emit('nile-change', { value: event.detail.value });\n    }\n  }\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html` <slot> </slot> `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileButtonToggleGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-button-toggle-group': NileButtonToggleGroup;\n  }\n}\n"]}