freshcutdevelopment

import {HttpClient} from 'aurelia-fetch-client';
import {bindable} from 'aurelia-framework';

export class CountryPicker{

    @bindable country;

    constructor(){  
        this.selected = {"name" : 'Australia', "code" : 'AU'};
        this.templateUrl = 'templates/country-template.html';

freshcutdevelopment

<template>
    <require from="../attributes/ux-selectize"></require>
    <require from="selectize/dist/css/selectize.default.css"></require>
    <require from="flag-icon-css/flag-icon.css"></require>

    <label for="options">Select country</label>

    <select id="select-country" if.bind="selected"
        ux-selectize="httpQuery.bind: getCountries; selected.bind: selected; templateUrl.bind:templateUrl; valueField: code; labelField:name; searchField:name; " 
        class="demo-default" 

freshcutdevelopment

import selectize from "selectize";
import {
  inject,
  bindable,
  Container,
  ViewEngine,
  bindingMode,
  dynamicOptions
} from "aurelia-framework";
import { DOM } from "aurelia-pal";

freshcutdevelopment

import gulp from 'gulp';
import {CLIOptions, build as buildCLI} from 'aurelia-cli';
import transpile from './transpile';
import processMarkup from './process-markup';
import processCSS from './process-css';
import copyFiles from './copy-files';
import watch from './watch';
import project from '../aurelia.json';
import copyFlags from './copy-flags';

freshcutdevelopment

import gulp from 'gulp';
import project from '../aurelia.json';

export default function copyFlags() {
  console.log("copying flags");
  return gulp.src(project.paths.flagsInput)
    .pipe(gulp.dest(project.paths.flagsOutput));
}

freshcutdevelopment

 ... 
 "jquery",
    "text",
    {  
      "name": "selectize",
      "main": "dist/js/standalone/selectize.js",
      "path": "../node_modules/selectize",
      "deps": [
        "jquery"
      ],

freshcutdevelopment

<template>
  <require from="style.css"></require>
  <section>
    <h1>${message}</h1>
    <hr/>
    
    <div class="form-inline">
      
    <div class="input-group input-group mb-2 mr-sm-2 mb-sm-0">
        <input class="form-control mb-2 mr-sm-2 mb-sm-0" 

freshcutdevelopment

<template>
  <require from="style.css"></require>
  <require from="list-group"></require>
  <require from="pokemon.html"></require>
  
  <section>
    <h1>${message}</h1>
    
    <hr/>
    <h3>custom template</h3>

freshcutdevelopment

<template bindable="model">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 ${model.color}">${model.name}</h5>
      <small>${model.category}</small>
    </div>
    <hr/>
    <div class="d-flex w-100 justify-content-between">
      <img src="${model.imageSource}"/> 
      <p class="mb-1">
        ${model.description}

freshcutdevelopment

<template>
  <ul class="list-group">
    <li repeat.for="item of itemsSource" class="list-group-item">
      <template replaceable part="item-template">${defaultValue(item)}</template>
    </li>
  </ul>
</template>