@aquera/nile-elements 1.6.1 → 1.6.3

package/dist/src/nile-checkbox-group/nile-checkbox-group.js

@@ -0,0 +1,355 @@
+import { __decorate } from "tslib";
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { HasSlotController } from '../internal/slot';
+import { html } from 'lit';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import { styles } from './nile-checkbox-group.css';
+import { Nile_Events } from '../internal/enum';
+/**
+ * @summary Checkbox groups manage multiple [checkboxes](/components/checkbox) so they function as a multi-select form control.
+ * Supports two association modes: slotted children or property-based remote association via `for`/`group`.
+ *
+ * @slot - The default slot where `<nile-checkbox>` elements are placed (slotted mode).
+ * @slot label - The checkbox group's label. Required for proper accessibility. Alternatively, use the `label` attribute.
+ *
+ * @event change - Emitted when the checkbox group's selected values change.
+ * @event input - Emitted when the checkbox group receives user input.
+ *
+ * @csspart form-control - The fieldset wrapper.
+ * @csspart form-control-label - The group label.
+ * @csspart form-control-input - The wrapper around the checkbox options.
+ * @csspart options-base - The container for the checkbox options.
+ */
+let NileCheckboxGroup = class NileCheckboxGroup extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.hasSlotController = new HasSlotController(this, 'help-text', 'label');
+        this.boundDocumentListener = null;
+        this.defaultValue = [];
+        /** The checkbox group's label. Required for proper accessibility. */
+        this.label = '';
+        /** The name of the checkbox group, submitted as a name/value pair with form data. */
+        this.name = '';
+        /** The current selected values, as an array of checkbox value strings. */
+        this.value = [];
+        /**
+         * Group name for property-based association. When set, the group discovers
+         * checkboxes anywhere in the DOM that have a matching `group` attribute
+         * instead of relying on slotted children.
+         */
+        this.for = '';
+        /**
+         * Associates the group with a `<form>` element by its `id`. The form must
+         * be in the same document or shadow root.
+         */
+        this.form = '';
+        /** At least one checkbox must be checked before the form can submit. */
+        this.required = false;
+        /** Layout direction of the checkboxes. */
+        this.orientation = 'vertical';
+        /** Display checkboxes in an inline (horizontal) layout. Alias for orientation="horizontal". */
+        this.labelInline = false;
+        /** Disables all associated checkboxes. */
+        this.disabled = false;
+        this.helpText = '';
+        this.errorMessage = '';
+        /** Shows a visible border around the fieldset wrapper. */
+        this.bordered = false;
+        /** Legend text displayed at the top of the fieldset when bordered is enabled. */
+        this.legend = '';
+    }
+    get isHorizontal() {
+        return this.orientation === 'horizontal' || this.labelInline;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.defaultValue = [...this.value];
+        this.setupDocumentListener();
+        this.emit(Nile_Events.NILE_INIT);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.teardownDocumentListener();
+        this.emit(Nile_Events.NILE_DESTROY);
+    }
+    setupDocumentListener() {
+        if (this.for) {
+            this.boundDocumentListener = (event) => {
+                const target = event.target;
+                if (target.tagName?.toLowerCase() === 'nile-checkbox' &&
+                    target.group === this.for) {
+                    this.handleCheckboxChange(target);
+                }
+            };
+            document.addEventListener(Nile_Events.NILE_CHANGE, this.boundDocumentListener);
+        }
+    }
+    teardownDocumentListener() {
+        if (this.boundDocumentListener) {
+            document.removeEventListener(Nile_Events.NILE_CHANGE, this.boundDocumentListener);
+            this.boundDocumentListener = null;
+        }
+    }
+    handleForChange() {
+        this.teardownDocumentListener();
+        this.setupDocumentListener();
+        this.syncCheckboxStates();
+        this.enforceMaxDisabled();
+    }
+    getAllCheckboxes() {
+        if (this.for) {
+            const root = this.getRootNode();
+            return [...root.querySelectorAll(`nile-checkbox[group="${this.for}"]`)];
+        }
+        return [...this.querySelectorAll('nile-checkbox')];
+    }
+    handleCheckboxClick(event) {
+        const target = event.target.closest('nile-checkbox');
+        if (!target)
+            return;
+        this.handleCheckboxChange(target);
+    }
+    handleChildInput(event) {
+        event.stopPropagation();
+    }
+    handleCheckboxChange(target) {
+        if (target.disabled || this.disabled)
+            return;
+        const checkboxes = this.getAllCheckboxes();
+        const checkedCount = checkboxes.filter(cb => cb.checked).length;
+        if (this.max !== undefined && checkedCount > this.max) {
+            target.checked = false;
+            return;
+        }
+        const newValue = checkboxes
+            .filter(cb => cb.checked)
+            .map(cb => String(cb.value));
+        const oldValue = this.value;
+        this.value = newValue;
+        this.enforceMaxDisabled();
+        if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
+            this.emit(Nile_Events.NILE_CHANGE, { value: this.value });
+        }
+    }
+    enforceMaxDisabled() {
+        if (this.max === undefined)
+            return;
+        const checkboxes = this.getAllCheckboxes();
+        const checkedCount = checkboxes.filter(cb => cb.checked).length;
+        const atLimit = checkedCount >= this.max;
+        checkboxes.forEach(cb => {
+            if (!cb.checked && !this.disabled) {
+                cb.disabled = atLimit;
+            }
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('max')) {
+            this.enforceMaxDisabled();
+        }
+    }
+    handleDisabledChange() {
+        if (this.disabled) {
+            this.getAllCheckboxes().forEach(cb => {
+                cb.disabled = true;
+            });
+        }
+        else {
+            this.getAllCheckboxes().forEach(cb => {
+                cb.disabled = cb.hasAttribute('disabled');
+            });
+            this.enforceMaxDisabled();
+        }
+    }
+    handleInitialDisabledState() {
+        if (this.disabled) {
+            this.getAllCheckboxes().forEach(cb => {
+                cb.disabled = true;
+            });
+        }
+        else {
+            this.getAllCheckboxes().forEach(cb => {
+                cb.disabled = cb.hasAttribute('disabled') ? true : false;
+            });
+        }
+    }
+    handleLabelClick() {
+        if (this.disabled)
+            return;
+        const checkboxes = this.getAllCheckboxes();
+        const first = checkboxes[0];
+        if (first) {
+            first.focus();
+        }
+    }
+    handleSlotChange() {
+        const checkboxes = this.getAllCheckboxes();
+        checkboxes.forEach(cb => {
+            cb.checked = this.value.includes(String(cb.value));
+        });
+        this.handleInitialDisabledState();
+        this.enforceMaxDisabled();
+    }
+    syncCheckboxStates() {
+        const checkboxes = this.getAllCheckboxes();
+        checkboxes.forEach(cb => {
+            cb.checked = this.value.includes(String(cb.value));
+        });
+    }
+    handleValueChange() {
+        if (this.hasUpdated) {
+            if (this.max !== undefined && this.value.length > this.max) {
+                this.value = this.value.slice(0, this.max);
+            }
+            this.syncCheckboxStates();
+            this.enforceMaxDisabled();
+        }
+    }
+    render() {
+        const hasLabelSlot = this.hasSlotController.test('label');
+        const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
+        const hasLabel = this.label ? true : !!hasLabelSlot;
+        const hasHelpText = this.helpText ? true : false;
+        const hasErrorMessage = this.errorMessage ? true : false;
+        const defaultSlot = html `
+      <slot
+        @click=${this.handleCheckboxClick}
+        @input=${this.handleChildInput}
+        @slotchange=${this.handleSlotChange}
+        role="presentation"
+      ></slot>
+    `;
+        return html `
+      <fieldset
+        part="form-control"
+        class=${classMap({
+            'form-control': true,
+            'form-control--medium': true,
+            'form-control--checkbox-group': true,
+            'form-control--has-label': hasLabel,
+            'form-control--has-help-text': hasHelpText,
+            'form-control--bordered': this.bordered,
+        })}
+        role="group"
+        aria-labelledby="label"
+        aria-describedby="help-text"
+        aria-errormessage="error-message"
+      >
+        ${this.legend
+            ? html `<legend part="legend legend-label" class="form-control__legend">${this.legend}</legend>`
+            : ``}
+
+        <label
+          part="form-control-label"
+          id="label"
+          class="form-control__label"
+          aria-hidden=${hasLabel ? 'false' : 'true'}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        ${hasLabelSuffixSlot ? html ` <slot name="label-suffix"></slot> ` : ``}
+
+        <div part="form-control-input" class="form-control-input" >
+          <div class="visually-hidden" part="validation-hidden">
+            <label class="checkbox-group__validation" part="validation-label" >
+              <input
+                type="text"
+                class="checkbox-group__validation-input"
+                part="validation-input"
+                ?required=${this.required}
+                tabindex="-1"
+                hidden
+              />
+            </label>
+          </div>
+
+          <div part="options-base" class="${this.isHorizontal ? `form-control--inline-checkbox` : ``}">
+            ${defaultSlot}
+          </div>
+        </div>
+
+        ${hasHelpText
+            ? html ` <nile-form-help-text id="help-text">${this.helpText}</nile-form-help-text> `
+            : ``}
+
+${hasErrorMessage
+            ? html `
+      <nile-form-error-message id="error-message">${this.errorMessage}</nile-form-error-message>
+            `
+            : ``}
+      </fieldset>
+    `;
+    }
+};
+NileCheckboxGroup.styles = styles;
+__decorate([
+    query('slot:not([name])')
+], NileCheckboxGroup.prototype, "defaultSlot", void 0);
+__decorate([
+    state()
+], NileCheckboxGroup.prototype, "defaultValue", void 0);
+__decorate([
+    property()
+], NileCheckboxGroup.prototype, "label", void 0);
+__decorate([
+    property()
+], NileCheckboxGroup.prototype, "name", void 0);
+__decorate([
+    property({ type: Array })
+], NileCheckboxGroup.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true, attribute: true })
+], NileCheckboxGroup.prototype, "for", void 0);
+__decorate([
+    property({ reflect: true })
+], NileCheckboxGroup.prototype, "form", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileCheckboxGroup.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true })
+], NileCheckboxGroup.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileCheckboxGroup.prototype, "labelInline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileCheckboxGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: true, reflect: true })
+], NileCheckboxGroup.prototype, "helpText", void 0);
+__decorate([
+    property({ attribute: true, reflect: true })
+], NileCheckboxGroup.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NileCheckboxGroup.prototype, "max", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NileCheckboxGroup.prototype, "min", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileCheckboxGroup.prototype, "bordered", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileCheckboxGroup.prototype, "legend", void 0);
+__decorate([
+    watch('for')
+], NileCheckboxGroup.prototype, "handleForChange", null);
+__decorate([
+    watch('disabled', { waitUntilFirstUpdate: true })
+], NileCheckboxGroup.prototype, "handleDisabledChange", null);
+__decorate([
+    watch('value')
+], NileCheckboxGroup.prototype, "handleValueChange", null);
+NileCheckboxGroup = __decorate([
+    customElement('nile-checkbox-group')
+], NileCheckboxGroup);
+export { NileCheckboxGroup };
+export default NileCheckboxGroup;
+//# sourceMappingURL=nile-checkbox-group.js.map

package/dist/src/nile-checkbox-group/nile-checkbox-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-checkbox-group.js","sourceRoot":"","sources":["../../../src/nile-checkbox-group/nile-checkbox-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-checkbox-group.css';\nimport { Nile_Events } from '../internal/enum';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport type NileCheckbox from '../nile-checkbox/nile-checkbox';\n\n/**\n * @summary Checkbox groups manage multiple [checkboxes](/components/checkbox) so they function as a multi-select form control.\n * Supports two association modes: slotted children or property-based remote association via `for`/`group`.\n *\n * @slot - The default slot where `<nile-checkbox>` elements are placed (slotted mode).\n * @slot label - The checkbox group's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n *\n * @event change - Emitted when the checkbox group's selected values change.\n * @event input - Emitted when the checkbox group receives user input.\n *\n * @csspart form-control - The fieldset wrapper.\n * @csspart form-control-label - The group label.\n * @csspart form-control-input - The wrapper around the checkbox options.\n * @csspart options-base - The container for the checkbox options.\n */\n@customElement('nile-checkbox-group')\nexport class NileCheckboxGroup extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n  private boundDocumentListener: ((event: Event) => void) | null = null;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  @state() defaultValue: string[] = [];\n\n  /** The checkbox group's label. Required for proper accessibility. */\n  @property() label = '';\n\n  /** The name of the checkbox group, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current selected values, as an array of checkbox value strings. */\n  @property({ type: Array }) value: string[] = [];\n\n  /**\n   * Group name for property-based association. When set, the group discovers\n   * checkboxes anywhere in the DOM that have a matching `group` attribute\n   * instead of relying on slotted children.\n   */\n  @property({ reflect: true, attribute: true}) for = '';\n\n  /**\n   * Associates the group with a `<form>` element by its `id`. The form must\n   * be in the same document or shadow root.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** At least one checkbox must be checked before the form can submit. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Layout direction of the checkboxes. */\n  @property({ reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /** Display checkboxes in an inline (horizontal) layout. Alias for orientation=\"horizontal\". */\n  @property({ type: Boolean, reflect: true }) labelInline = false;\n\n  /** Disables all associated checkboxes. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ attribute: true, reflect: true }) helpText = '';\n\n  @property({ attribute: true, reflect: true }) errorMessage = '';\n\n  /** Maximum number of checkboxes that can be checked. Unchecked boxes are disabled when the limit is reached. */\n  @property({ type: Number, reflect: true }) max: number | undefined;\n\n  /** Minimum selections required for validation. */\n  @property({ type: Number, reflect: true }) min: number | undefined;\n\n  /** Shows a visible border around the fieldset wrapper. */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /** Legend text displayed at the top of the fieldset when bordered is enabled. */\n  @property({ type: String, reflect: true }) legend = '';\n\n  private get isHorizontal(): boolean {\n    return this.orientation === 'horizontal' || this.labelInline;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = [...this.value];\n    this.setupDocumentListener();\n    this.emit(Nile_Events.NILE_INIT);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.teardownDocumentListener();\n    this.emit(Nile_Events.NILE_DESTROY);\n  }\n\n  private setupDocumentListener() {\n    if (this.for) {\n      this.boundDocumentListener = (event: Event) => {\n        const target = event.target as NileCheckbox;\n        if (\n          target.tagName?.toLowerCase() === 'nile-checkbox' &&\n          target.group === this.for\n        ) {\n          this.handleCheckboxChange(target);\n        }\n      };\n      document.addEventListener(Nile_Events.NILE_CHANGE, this.boundDocumentListener);\n    }\n  }\n\n  private teardownDocumentListener() {\n    if (this.boundDocumentListener) {\n      document.removeEventListener(Nile_Events.NILE_CHANGE, this.boundDocumentListener);\n      this.boundDocumentListener = null;\n    }\n  }\n\n  @watch('for')\n  handleForChange() {\n    this.teardownDocumentListener();\n    this.setupDocumentListener();\n    this.syncCheckboxStates();\n    this.enforceMaxDisabled();\n  }\n\n  private getAllCheckboxes(): NileCheckbox[] {\n    if (this.for) {\n      const root = this.getRootNode() as Document | ShadowRoot;\n      return [...root.querySelectorAll<NileCheckbox>(`nile-checkbox[group=\"${this.for}\"]`)];\n    }\n    return [...this.querySelectorAll<NileCheckbox>('nile-checkbox')];\n  }\n\n  private handleCheckboxClick(event: MouseEvent) {\n    const target = (event.target as HTMLElement).closest<NileCheckbox>('nile-checkbox');\n    if (!target) return;\n    this.handleCheckboxChange(target);\n  }\n\n  private handleChildInput(event: Event) {\n    event.stopPropagation();\n  }\n\n  private handleCheckboxChange(target: NileCheckbox) {\n    if (target.disabled || this.disabled) return;\n\n    const checkboxes = this.getAllCheckboxes();\n    const checkedCount = checkboxes.filter(cb => cb.checked).length;\n\n    if (this.max !== undefined && checkedCount > this.max) {\n      target.checked = false;\n      return;\n    }\n\n    const newValue = checkboxes\n      .filter(cb => cb.checked)\n      .map(cb => String(cb.value));\n\n    const oldValue = this.value;\n    this.value = newValue;\n\n    this.enforceMaxDisabled();\n\n    if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {\n      this.emit(Nile_Events.NILE_CHANGE, { value: this.value });\n    }\n  }\n\n  private enforceMaxDisabled() {\n    if (this.max === undefined) return;\n\n    const checkboxes = this.getAllCheckboxes();\n    const checkedCount = checkboxes.filter(cb => cb.checked).length;\n    const atLimit = checkedCount >= this.max;\n\n    checkboxes.forEach(cb => {\n      if (!cb.checked && !this.disabled) {\n        cb.disabled = atLimit;\n      }\n    });\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('max')) {\n      this.enforceMaxDisabled();\n    }\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    if (this.disabled) {\n      this.getAllCheckboxes().forEach(cb => {\n        cb.disabled = true;\n      });\n    } else {\n      this.getAllCheckboxes().forEach(cb => {\n        cb.disabled = cb.hasAttribute('disabled');\n      });\n      this.enforceMaxDisabled();\n    }\n  }\n\n  private handleInitialDisabledState() {\n    if (this.disabled) {\n      this.getAllCheckboxes().forEach(cb => {\n        cb.disabled = true;\n      });\n    } else {\n      this.getAllCheckboxes().forEach(cb => {\n        cb.disabled = cb.hasAttribute('disabled') ? true : false;\n      });\n    }\n  }\n\n  private handleLabelClick() {\n    if (this.disabled) return;\n    const checkboxes = this.getAllCheckboxes();\n    const first = checkboxes[0];\n    if (first) {\n      first.focus();\n    }\n  }\n\n  private handleSlotChange() {\n    const checkboxes = this.getAllCheckboxes();\n\n    checkboxes.forEach(cb => {\n      cb.checked = this.value.includes(String(cb.value));\n    });\n\n    this.handleInitialDisabledState();\n    this.enforceMaxDisabled();\n  }\n\n  private syncCheckboxStates() {\n    const checkboxes = this.getAllCheckboxes();\n    checkboxes.forEach(cb => {\n      cb.checked = this.value.includes(String(cb.value));\n    });\n  }\n\n  @watch('value')\n  handleValueChange() {\n    if (this.hasUpdated) {\n      if (this.max !== undefined && this.value.length > this.max) {\n        this.value = this.value.slice(0, this.max);\n      }\n      this.syncCheckboxStates();\n      this.enforceMaxDisabled();\n    }\n  }\n\n  render() {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    const defaultSlot = html`\n      <slot\n        @click=${this.handleCheckboxClick}\n        @input=${this.handleChildInput}\n        @slotchange=${this.handleSlotChange}\n        role=\"presentation\"\n      ></slot>\n    `;\n\n    return html`\n      <fieldset\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--medium': true,\n          'form-control--checkbox-group': true,\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText,\n          'form-control--bordered': this.bordered,\n        })}\n        role=\"group\"\n        aria-labelledby=\"label\"\n        aria-describedby=\"help-text\"\n        aria-errormessage=\"error-message\"\n      >\n        ${this.legend\n          ? html`<legend part=\"legend legend-label\" class=\"form-control__legend\">${this.legend}</legend>`\n          : ``}\n\n        <label\n          part=\"form-control-label\"\n          id=\"label\"\n          class=\"form-control__label\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n          @click=${this.handleLabelClick}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        ${hasLabelSuffixSlot ? html` <slot name=\"label-suffix\"></slot> ` : ``}\n\n        <div part=\"form-control-input\" class=\"form-control-input\" >\n          <div class=\"visually-hidden\" part=\"validation-hidden\">\n            <label class=\"checkbox-group__validation\" part=\"validation-label\" >\n              <input\n                type=\"text\"\n                class=\"checkbox-group__validation-input\"\n                part=\"validation-input\"\n                ?required=${this.required}\n                tabindex=\"-1\"\n                hidden\n              />\n            </label>\n          </div>\n\n          <div part=\"options-base\" class=\"${this.isHorizontal ? `form-control--inline-checkbox` : ``}\">\n            ${defaultSlot}\n          </div>\n        </div>\n\n        ${hasHelpText\n  ? html` <nile-form-help-text id=\"help-text\">${this.helpText}</nile-form-help-text> `\n  : ``}\n\n${hasErrorMessage\n  ? html`\n      <nile-form-error-message id=\"error-message\">${this.errorMessage}</nile-form-error-message>\n            `\n          : ``}\n      </fieldset>\n    `;\n  }\n}\n\nexport default NileCheckboxGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-checkbox-group': NileCheckboxGroup;\n  }\n}\n"]}

package/dist/src/nile-checkbox-group/nile-checkbox-group.test.d.ts

@@ -0,0 +1,2 @@
+import './nile-checkbox-group';
+import '../nile-checkbox/nile-checkbox';