semanticpixel

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class extends Component {
  @tracked pos1 = 0;
  @tracked pos2 = 0;
	@tracked pos3 = 0;
	@tracked pos4 = 0;

semanticpixel

import Controller from '@ember/controller';
import { set, action } from '@ember/object';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';

  @action
  onClickParent() {
    console.log('Clicked Parent');
  }

semanticpixel

import Component from '@glimmer/component';
import STEPS from '../steps';

export default class extends Component {
  get destinationElement() {
    return document.getElementById('badge-outlet');
  }
  
  get styles() {
    const newDestinationElement = document.getElementById(`${STEPS[this.args.step]}-2`);

semanticpixel

import Component from '@glimmer/component';

// Need to support auto and 0 as params

function getClassName(type, edge, unit) {
  if (unit === '0') {
  	return '';
  }
  
  return `${type}${edge}-${unit}`;

semanticpixel

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class extends Component {
  @action
  click() {
   	console.log('Clicked: ', this.args.text);
  }
}

semanticpixel

import Component from '@glimmer/component';

export default class extends Component {
  context = {
   	a: 1,
    b:2 
  };
}