Aurelia Gist TypeScript Sortable Advanced

app.html

<template>
  <ul class="lui-list groups"
    oa-sortable="items.bind: groups; allowed-drag-selector.bind: '.lui-icon--handle'; axis.bind: 'y'">
    <li repeat.for="group of groups"
      oa-sortable-item="item.bind: group; type-flag.bind: group.typeFlag; locked-flag.bind: group.lockedFlag"
      oa-sortable-item.ref="sortableGroupItem"
      draggable="false">
      <span class="lui-list__aside">
        <span class="lui-list__header ${(sortableGroupItem.childSortable.isDisabled || sortableGroupItem.lockedFrom) ? 'lui-disabled' : ''} ${sortableGroupItem.lockedFrom ? 'locked' : ''}">
          <span class="lui-list__aside  lui-icon lui-icon--small lui-icon--handle"></span>
          <span class="lui-list__text">${group.name}</span>
            <span class="lui-list__aside  lui-icon lui-icon--small lui-icon--${sortableGroupItem.lockedFrom ? 'lock' : 'unlock'}" title="From"></span>
        </span>
        <ul class="lui-list group"
          oa-sortable.ref="sortable"
          oa-sortable="items.bind: group.items; type-flag.bind: group.typeFlag; allowed-drag-selector.bind: '.lui-icon--handle'; axis.bind: 'y'">
          <li class="lui-list__item ${(sortable.isDisabled || sortableItem.lockedFrom) ? 'lui-disabled' : ''} ${sortableItem.lockedFrom ? 'locked' : ''}"
            repeat.for="item of group.items"
            oa-sortable-item="item.bind: item; type-flag.bind: item.typeFlag; locked-flag.bind: item.lockedFlag"
            oa-sortable-item.ref="sortableItem"
            draggable="false">
            <span class="lui-list__aside  lui-icon lui-icon--small lui-icon--handle"></span>
            <span class="lui-list__text">${item.name}</span>
            <span class="lui-list__aside">
              <span class="lui-list__aside  lui-icon lui-icon--small lui-icon--${sortableItem.lockedFrom ? 'lock' : 'unlock'}" title="From"></span>
            </span>
          </li>
        </ul>
      </span>
    </li>
  </ul>
</template>

app.ts

export class App {
  public groups = [
    { name: 'Odd', typeFlag: 1, items: [] },
    { name: 'Even', typeFlag: 2, items: [] },
    {
      name: 'Numbers', typeFlag: 3, items: Array.from(Array(11), (_, i) => i).map((i) => {
        return {
          name: i === 0 ? 'π' : i,
          typeFlag: i % 2 === 0 ? 2 : 1,
          lockedFlag: i === 0 ? 3 : 0
        };
      })
    }
  ];
}

config.js

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    'typescript': 'https://unpkg.com/[email protected]/lib/typescript.js',
    'tslib': 'https://unpkg.com/tslib',
    
    'aurelia-binding': 'https://unpkg.com/aurelia-binding/dist/amd/aurelia-binding.js',
    'aurelia-bootstrapper': 'https://unpkg.com/aurelia-bootstrapper/dist/amd/aurelia-bootstrapper.js',
    'aurelia-dependency-injection': 'https://unpkg.com/aurelia-dependency-injection/dist/amd/aurelia-dependency-injection.js',
    'aurelia-event-aggregator': 'https://unpkg.com/aurelia-event-aggregator/dist/amd/aurelia-event-aggregator.js',
    'aurelia-framework': 'https://unpkg.com/aurelia-framework/dist/amd/aurelia-framework.js',
    'aurelia-history': 'https://unpkg.com/aurelia-history/dist/amd/aurelia-history.js',
    'aurelia-history-browser': 'https://unpkg.com/aurelia-history-browser/dist/amd/aurelia-history-browser.js',
    'aurelia-loader': 'https://unpkg.com/aurelia-loader/dist/amd/aurelia-loader.js',
    'aurelia-loader-default': 'https://unpkg.com/aurelia-loader-default/dist/amd/aurelia-loader-default.js',
    'aurelia-logging': 'https://unpkg.com/aurelia-logging/dist/amd/aurelia-logging.js',
    'aurelia-logging-console': 'https://unpkg.com/aurelia-logging-console/dist/amd/aurelia-logging-console.js',
    'aurelia-metadata': 'https://unpkg.com/aurelia-metadata/dist/amd/aurelia-metadata.js',
    'aurelia-pal': 'https://unpkg.com/aurelia-pal/dist/amd/aurelia-pal.js',
    'aurelia-pal-browser': 'https://unpkg.com/aurelia-pal-browser/dist/amd/aurelia-pal-browser.js',
    'aurelia-path': 'https://unpkg.com/aurelia-path/dist/amd/aurelia-path.js',
    'aurelia-polyfills': 'https://unpkg.com/aurelia-polyfills/dist/amd/aurelia-polyfills.js',
    'aurelia-router': 'https://unpkg.com/aurelia-router/dist/amd/aurelia-router.js',
    'aurelia-route-recognizer': 'https://unpkg.com/aurelia-route-recognizer/dist/amd/aurelia-route-recognizer.js',
    'aurelia-task-queue': 'https://unpkg.com/aurelia-task-queue/dist/amd/aurelia-task-queue.js',
    'aurelia-templating': 'https://unpkg.com/aurelia-templating/dist/amd/aurelia-templating.js',
    'aurelia-templating-binding': 'https://unpkg.com/aurelia-templating-binding/dist/amd/aurelia-templating-binding.js',
    'aurelia-templating-resources': 'https://unpkg.com/aurelia-templating-resources/dist/amd',
    'aurelia-templating-router': 'https://unpkg.com/aurelia-templating-router/dist/amd',
    
    'oribella-framework': 'https://unpkg.com/oribella-framework/dist/amd',
    'oribella': 'https://unpkg.com/oribella/dist/amd',
    'oribella-aurelia-sortable': 'https://unpkg.com/oribella-aurelia-sortable/dist/amd'
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    },
    'aurelia-templating-resources': { main: 'aurelia-templating-resources.js' },
    'aurelia-templating-router': { main: 'aurelia-templating-router.js' },
    'oribella-framework': { main: 'oribella-framework.js' },
    'oribella': { main: 'oribella.js' },
    'oribella-aurelia-sortable': { main: 'oribella-aurelia-sortable.js' }
  }
});

index.html

<!doctype html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta charset="utf-8">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta http-equiv="cleartype" content="on">
  <link rel="stylesheet" href="https://unpkg.com/leonardo-ui/dist/leonardo-ui.min.css" type="text/css" />
  <link rel="stylesheet" href="styles.css" type="text/css" />
  <style>
  </style>
</head>

<body aurelia-app="main">
  <script src="https://unpkg.com/[email protected]/dist/system.js"></script>
  <script src="config.js"></script>
  <script>
    function patchDefaultLoader(DefaultLoader) {
      // fix issue where the map function was using `System.map[id] = source`
      // https://github.com/aurelia/loader-default/blob/1.0.0/src/index.js#L222
      DefaultLoader.prototype.map = function(id, source) {
        // System.map[id] = source;                 // <--- original
        System.config({ map: { [id]: source } });   // <--- fix
      };
    }
    
    System.import('aurelia-loader-default')
      .then(({ DefaultLoader }) => patchDefaultLoader(DefaultLoader))
      .then(() => System.import('aurelia-bootstrapper'));
  </script>
</body>

</html>

main.ts

import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';

export function configure(aurelia: Aurelia) {
  aurelia.use
         .standardConfiguration()
         .developmentLogging()
         .plugin(PLATFORM.moduleName('oribella-aurelia-sortable'));
  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

styles.css

@font-face {
  font-family: "LUI icons";
  src: url(https://unpkg.com/[email protected]/dist/lui-icons.woff) format('woff'), url(https://unpkg.com/[email protected]/dist/lui-icons.ttf) format('truetype');
}

@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  color: #595959;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

section {
  margin: 30px 0 0 0;
}

section:first-child {
  margin-top: 0;
}

input,
textarea,
select,
button {
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
}

a:link,
a:active,
a:hover,
a:visited {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  border: none;
}

.header-wrapper {
  background-color: white;
  border-bottom: 1px solid #CCCCCC;
  height: 50px;
  box-sizing: border-box;
}

.header {
  max-width: 960px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.header-links {
  display: flex;
}

.header-logo {
  display: flex;
  padding: 4px;
}

.header-logo img {
  height: 32px;
}

.header-logo span {
  align-self: center;
  padding-left: 5px;
  font-size: 16px;
}

@media (max-width: 380px) {
  .header-logo {
    display:none;
  }
}

.container {
  max-width: 940px;
  margin: 0 auto;
  padding: 4px;
}

.container > div {
  display: flex;
}

@media (max-width: 767px) {
  .sidebar {
    display: none;
  }
}

.content {
  flex: 1 1 auto;
  max-width: 800px;
}

.footer {
  padding: 30px 0;
  min-height: 75px;
  border-top: 1px solid #CCCCCC;
  text-align: center;
}

.footer .footer-title {
  font-size: 18px;
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
}

* {
  user-select: none;
}

.groups {
  width: 248px;
  margin: 0 auto;
}

.group-container {
  padding: 4px 0px;
}

.group {
  width: 100%;
  padding: 4px;
}

.lui-list .lui-list__header.lui-disabled {
  color: rgba(89, 89, 89, .3);
  background-color: transparent;
}

.lui-icon--handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 24px;
  touch-action: none;
}

.locked-text {
  font-size: 10px;
}

li {
  list-style: none;
}

.locked:hover,
.trigger-locked {
  -webkit-animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

@-webkit-keyframes shake {
  10%,
  90% {
    -webkit-transform: translate3d(-1px, 0, 0);
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    -webkit-transform: translate3d(-4px, 0, 0);
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    -webkit-transform: translate3d(4px, 0, 0);
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes shake {
  10%,
  90% {
    -webkit-transform: translate3d(-1px, 0, 0);
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    -webkit-transform: translate3d(-4px, 0, 0);
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    -webkit-transform: translate3d(4px, 0, 0);
    transform: translate3d(4px, 0, 0);
  }
}

.lui-tabset {
  flex: 1;
  justify-content: center;
  overflow: hidden;
  border: 2px solid transparent;

  & .lui-tab:first-child {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
  }
}

table {
  max-width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
}
tr {
  width: 196px;
  border: 1px solid #ccc;
}

td {
  text-align: center;
  line-height: 2rem;
  padding: 8px;

  & img {
    vertical-align: middle;
  }
}

.simple-xy {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-flow: wrap;
}

.simple-xy-item {
  position: relative;
  flex: 1 0 auto;
  box-sizing: border-box;
  max-width: 200px;
  & img {
    width: 184px;
    height: 144px;
  }
  & .lui-icon--handle {
    position: absolute;
    top: 0;
    right: 16px;
    font-size: 30px;
  }
}