import 'package:dom_builder/dom_builder.dart';

void main() {

  var div = $divHTML('<div class="container"><span>Builder</span></div>')
      .insertAt( 0, $span( id: 's1', content: 'The ' ) )
      .insertAfter( '#s1' , $span( id: 's2', content: 'DOM ', style: 'font-weight: bold' ) )
  ;

  print( div.buildHTML( withIdent: true ) ) ;

  ////////////
  // Output //
  ////////////
  // <div class="container">
  //   <span id="s1">The </span>
  //   <span id="s2" style="font-weight: bold">DOM </span>
  //   <span>Builder</span>
  // </div>


  div.select('#s1').remove() ;
  print( div.buildHTML( withIdent: true ) ) ;

  ////////////
  // Output //
  ////////////
  // <div class="container">
  //   <span id="s2" style="font-weight: bold">DOM </span>
  //   <span>Builder</span>
  // </div>

}

import 'dart:html' ;
import 'package:dom_builder/dom_builder.dart';

class BootstrapNavbarToggler {

  static DOMGenerator domGenerator = DOMGenerator.dartHTML() ;

  Element render() {
    var button = $button( type: 'button', classes: 'navbar-toggler', attributes: {'data-toggle': "collapse", 'data-target': "#navbarCollapse", 'aria-controls': "navbarCollapse", 'aria-expanded':"false", 'aria-label':"Toggle navigation"} ,
        content: $span( classes: 'navbar-toggler-icon')
    );

    return button.buildDOM(domGenerator) ;
  }

}

import 'dart:html' ;
import 'package:dom_builder/dom_builder_html.dart';

class TitleComponent {

  static DOMGenerator domGenerator = DOMGenerator.dartHTML() ;

  Element render() {
    var div = $divHTML('<div class="container"><span>The </span></div>') ;

    div.add( SpanElement()..text = 'DOM Builder' ) ;

    return div.buildDOM(domGenerator) ;
  }

}

import 'dart:html' ;
import 'package:dom_builder/dom_builder_html.dart';

void main() {

  var button = $dsx('''
    <button onclick="${_btnClick.dsx()}">CLICK ME!</button>
  ''');
  
}

void _btnClick() {
  print('Button Clicked!');
}

import 'dart:html' ;
import 'package:dom_builder/dom_builder_html.dart';

Element generateBSCards() {
  // ...

  var tableHeads = ['User', 'E-Mail'];
  var usersEntries = [ ['Joe', 'joe@mail.com'], ['Smith', 'smith@mail.com']];

  var content = $div(content: [
    $div(classes: 'card', content: [
      $div(classes: 'card-header', content: 'Activity Timeline:'),
      $div(id: 'timeline-chart')
    ]),

    $hr(),

    $div(classes: 'card', content: [
      $div(classes: 'card-header', content: "Users:"),
      $div(classes: 'card-body', content:
      $table(classes: 'table text-truncate', head: tableHeads, body: usersEntries)
        ..applyWhere('td , th', classes: 'd-inline text-truncate', style: 'max-width: 50vw')
      )
    ]),

  ]);

  // ...

  if (timelineChartSeries != null) {
    content.select('#timeline-chart').add(
            (parent) {
          // render Chart inside element parent...
        }
    );
  }
  else {
    content.select('#timeline-chart').add('No Timeline Data.');
  }

  // ...

  var domGenerator = DOMGenerator.dartHTML();
  return content.buildDOM(domGenerator);
}