Yielded Nested Checkboxes

components.checkbox\.js

import Component from '@glimmer/component';

export default class extends Component {
  isIndeterminate = true;
  
  toggleChildCheckbox(foo) {
    this.toggleCheckbox(foo)
  }
}

components.nested-checkboxes\.js

import Component from '@glimmer/component';

export default class extends Component {
}

components.wrapper\.js

import Component from '@glimmer/component';

export default class extends Component {
  
  toggleCheckbox(itemName) {
  	console.log(itemName)
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Yielded Nested Checkboxes';
}

modifiers.set-indeterminate\.js

import { modifier } from 'ember-modifier';

export default modifier((element, [isIndeterminate]) => {
  element.indeterminate = isIndeterminate;
});

templates.application\.hbs

<h1>{{this.appName}}</h1>
<br>
<br>
<Wrapper />
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.checkbox\.hbs

<li>
  <input
    id={{@name}}
    type="checkbox"
    checked={{@checked}}
    onchange={{fn @toggleCheckbox @name}}
    name={{@name}}
    {{set-indeterminate this.isIndeterminate}}
  >
	<label for={{@name}}>{{@label}}</label>

	{{yield (hash nestedCheckboxes=(component 'nested-checkboxes' toggleCheckbox=this.toggleChildCheckbox))}}
</li>

templates.components.nested-checkboxes\.hbs

<ol>
{{yield (hash checkbox=(component 'checkbox' toggleCheckbox=@toggleCheckbox))}}
</ol>

templates.components.wrapper\.hbs

<NestedCheckboxes @toggleCheckbox={{this.toggleCheckbox}} as |checkboxes|>
	<checkboxes.checkbox
  	@checked={{true}}
    @label="Foo"
    @name="foo"
  />
  <checkboxes.checkbox
  	@checked={{false}}
    @label="Bar"
    @name="bar"
    as |bar|
  >
  	<bar.nestedCheckboxes as |barCheckboxes|>
			<barCheckboxes.checkbox
        @checked={{true}}
        @label="Foobar"
        @name="foobar"
      />
      <barCheckboxes.checkbox
        @checked={{true}}
        @label="BarBaz"
        @name="barbaz"
      />
      <h3>Third</h3>
      <h6>Rob</h6>
      ...
    </bar.nestedCheckboxes>
  </checkboxes.checkbox>
  

  <checkboxes.checkbox
  	@checked={{true}}
    @label="Baz"
    @name="baz"
  />
</NestedCheckboxes>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-modifier": "1.0.3"
  }
}