How to use metal-state - 10 common examples

createState_(component, data) {
		const state = new State(
			component.getInitialConfig(),
			component,
			component
		); // eslint-disable-line
		state.setKeysBlacklist(BLACKLIST);
		state.configState(
			object.mixin({}, data, State.getStateStatic(component.constructor))
		);
		this.getManagerData(component).state_ = state;
	}

createState_(component, data) {
		const state = new State(
			component.getInitialConfig(),
			component,
			component
		); // eslint-disable-line
		state.setKeysBlacklist(BLACKLIST);
		state.configState(
			object.mixin({}, data, State.getStateStatic(component.constructor))
		);
		this.getManagerData(component).state_ = state;
	}

this.checked = !this.checked;
    this.emit('check', e);
  }
}

/**
 * State definition.
 * @static
 * @type {!Object}
 */
Checkbox.STATE = {
  /**
   * The checked status of the input element.
   * @type {!Bool}
   */
  checked: Config.bool(),

  /**
   * The name and ID of the input element.
   * @type {!String}
   */
  id: Config.string(),

  /**
   * The label of the input element.
   * @type {!String}
   */
  label: Config.string(),

  /**
   * The value of the input element.
   * @type {!String}

* Additional CSS classes to be added
   * @type {!String}
   * @default undefined
   */
  style: Config.string(),

  /**
   * Defines how the logo should look like
   * @type {?Object|undefined}
   * @default undefined
   */
  logo: Config.shapeOf({
    href: Config.string(),
    icon: Config.string(),
    image: Config.string(),
    text: Config.string(),
  }),

  /**
   * The list of menu items
   * @type {?Array|undefined}
   * @default undefined
   */
  items: Config.arrayOf(
    Config.shapeOf({
      href: Config.string(),
      label: Config.string(),
      selected: Config.bool(),
      target: Config.string(),
      type: Config.string(),
      variant: Config.string(),
    })

* @default undefined
   * @type {?string}
   */
  format: Config.oneOf(['squared', 'rounded']),

  /**
   * @default undefined
   * @type {?(string|undefined)}
   */
  href: Config.string(),

  /**
   * @default undefined
   * @type {?(string|undefined)}
   */
  icon: Config.string(),

  /**
   * @default left
   * @type {?string}
   */
  iconAlignment: Config.oneOf(['left', 'right']).value('left'),

  /**
   * @default undefined
   * @type {?(string|undefined)}
   */
  id: Config.string(),

  /**
   * @default undefined
   * @type {?(html|string|undefined)}

const timezone = moment.tz.guess();
        this.title = moment(timestamp)
          .tz(timezone)
          .format('MMM DD YYYY, h:mma (UTCZ)');
      }
    }
  }
}

/**
 * State definition.
 * @static
 * @type {!Object}
 */
Timestamp.STATE = {
  childElementClasses: Config.string().value(''),
  elementClasses: Config.string().value(''),
  hasTitle: Config.bool().value(false),
  label: Config.string()
    .internal(true)
    .value(''),
  time: Config.number().value(0),
  title: Config.string()
    .internal(true)
    .value(undefined),
  type: Config.oneOf(['timestamp', 'duration'])
    .value('timestamp'),
};

Soy.register(Timestamp, templates);

export {Timestamp};

* State definition.
 * @static
 * @type {!Object}
 */
Checkbox.STATE = {
  /**
   * The checked status of the input element.
   * @type {!Bool}
   */
  checked: Config.bool(),

  /**
   * The name and ID of the input element.
   * @type {!String}
   */
  id: Config.string(),

  /**
   * The label of the input element.
   * @type {!String}
   */
  label: Config.string(),

  /**
   * The value of the input element.
   * @type {!String}
   */
  value: Config.string()
};

Soy.register(Checkbox, templates);

icon: Config.string(),
    image: Config.string(),
    text: Config.string(),
  }),

  /**
   * The list of menu items
   * @type {?Array|undefined}
   * @default undefined
   */
  items: Config.arrayOf(
    Config.shapeOf({
      href: Config.string(),
      label: Config.string(),
      selected: Config.bool(),
      target: Config.string(),
      type: Config.string(),
      variant: Config.string(),
    })
  ).value([]),
};

Soy.register(Topbar, templates);

export {Topbar};
export default Topbar;

*/
  items: Config.arrayOf(
    Config.shapeOf({
      id: Config.string(),
      checked: Config.bool(),
      label: Config.string(),
      value: Config.string(),
    })
  ).required(),

  /**
   * The name param used on each radio
   * @type {?String}
   * @default undefined
   */
  name: Config.string().required(),

  /**
   * The style of the radio group
   * @type {!String}
   * @default radio-group
   */
  style: Config.oneOf([
    'radio-group',
    'radio-group radio-group-inline'
  ]).value('radio-group'),
};

Soy.register(RadioGroup, templates);

export {RadioGroup};
export default RadioGroup;

class RadioGroup extends Component {}

/**
 * State definition.
 * @static
 * @type {!Object}
 */
RadioGroup.STATE = {
  /**
   * The list of radio items
   * @type {?Array|undefined}
   * @default undefined
   */
  items: Config.arrayOf(
    Config.shapeOf({
      id: Config.string(),
      checked: Config.bool(),
      label: Config.string(),
      value: Config.string(),
    })
  ).required(),

  /**
   * The name param used on each radio
   * @type {?String}
   * @default undefined
   */
  name: Config.string().required(),

  /**
   * The style of the radio group
   * @type {!String}