feat(table): initial commit (#118)

* feat(table): initial commit
Basic table

src/api/docs/components/table.html

@@ -0,0 +1,28 @@
+<!-- Do not edit this file because it is automatically generated. -->
+<h1 id="table">Table</h1>
+<p>The <code class="ttm ttx">ly-table</code> provides a Material Design styled data table that is used to represent data arranged in rows and columns.</p>
+<h2 id="basic-use-of-c1c">Basic use of <code class="ttm ttx"><span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>table</span>&nbsp;<span class="tt18 ttbx">ly-table</span><span class="tt18 ttae">></span></span></code></h2>
+<demo-view path="table-basic-example">
+  <aui-table-basic-example></aui-table-basic-example>
+</demo-view>
+<h2 id="styling-columns">Styling columns</h2>
+<demo-view path="table-column-styling-example">
+  <aui-table-column-styling-example></aui-table-column-styling-example>
+</demo-view>
+<h2 id="basic-use-of-c2c-uses-display-flex">Basic use of <code class="ttm ttx"><span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-table</span><span class="tt18 ttae">></span></span></code> (uses display flex)</h2>
+<demo-view path="table-flex-basic-example">
+  <aui-table-flex-basic-example></aui-table-flex-basic-example>
+</demo-view>
+<h2 id="footer-row-table">Footer row table</h2>
+<demo-view path="table-footer-row-example">
+  <aui-table-footer-row-example></aui-table-footer-row-example>
+</demo-view>
+<h2 id="table-with-sticky-columns">Table with sticky columns</h2>
+<demo-view path="table-sticky-columns-example">
+  <aui-table-sticky-columns-example></aui-table-sticky-columns-example>
+</demo-view>
+<h2 id="table-using-ngfor">Table using ngFor</h2>
+<p>Table with columns defined using ngFor instead of statically written in the template.</p>
+<demo-view path="table-using-ng-for-example">
+  <aui-table-using-ng-for-example></aui-table-using-ng-for-example>
+</demo-view>

src/api/docs/customization/color.html

@@ -5,24 +5,24 @@ <h1 id="color">Color</h1>
 <h2 id="supported-values">Supported values</h2>
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._f3qyf93r{background:rgb(255,255,0);opacity:1}._f3qyf93r *{color: #202020 !important}</style><span class="_f3qyf93r"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>  <span class="tt18 tt3o">// rgb</span>
-<span class="tt18 tt1j">const</span> Black  <span class="tt18 ttb0">=</span> <style>._6907r4gs{background:rgb(0,0,0);opacity:1}._6907r4gs *{color: white !important}</style><span class="_6907r4gs"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>            <span class="tt18 tt3o">// number</span>
-<span class="tt18 tt1j">const</span> White  <span class="tt18 ttb0">=</span> <style>._11bqwtv9{background:rgb(255,255,255);opacity:1}._11bqwtv9 *{color: #202020 !important}</style><span class="_11bqwtv9"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>     <span class="tt18 tt3o">// hex</span>
-<span class="tt18 tt1j">const</span> Text   <span class="tt18 ttb0">=</span> <style>._ihxet42i{background:rgba(0,0,0,0.87);opacity:0.87}._ihxet42i *{color: white !important}</style><span class="_ihxet42i"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
+<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._k8ue4wky{background:rgb(255,255,0);opacity:1}._k8ue4wky *{color: #202020 !important}</style><span class="_k8ue4wky"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>  <span class="tt18 tt3o">// rgb</span>
+<span class="tt18 tt1j">const</span> Black  <span class="tt18 ttb0">=</span> <style>._8a78elxl{background:rgb(0,0,0);opacity:1}._8a78elxl *{color: white !important}</style><span class="_8a78elxl"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>            <span class="tt18 tt3o">// number</span>
+<span class="tt18 tt1j">const</span> White  <span class="tt18 ttb0">=</span> <style>._bffjuynv{background:rgb(255,255,255);opacity:1}._bffjuynv *{color: #202020 !important}</style><span class="_bffjuynv"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>     <span class="tt18 tt3o">// hex</span>
+<span class="tt18 tt1j">const</span> Text   <span class="tt18 ttb0">=</span> <style>._963mureo{background:rgba(0,0,0,0.87);opacity:0.87}._963mureo *{color: white !important}</style><span class="_963mureo"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
 </code></pre>
 <p>Note that a 6-digit hexadecimal is different from a 3-digit hexadecimal.</p>
-<pre class="ttb"><code prsm class="ttm"><style>._535678zt{background:rgb(255,255,255);opacity:1}._535678zt *{color: #202020 !important}</style><span class="_535678zt"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._96wrlmny{background:rgb(0,15,255);opacity:1}._96wrlmny *{color: white !important}</style><span class="_96wrlmny"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
+<pre class="ttb"><code prsm class="ttm"><style>._cu8kmwhh{background:rgb(255,255,255);opacity:1}._cu8kmwhh *{color: #202020 !important}</style><span class="_cu8kmwhh"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._awepzpek{background:rgb(0,15,255);opacity:1}._awepzpek *{color: white !important}</style><span class="_awepzpek"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
 </code></pre>
 <h2 id="how-to-use-color">How to use <code class="ttm ttx">color</code></h2>
 <p><code class="ttm ttx">color</code> and the previously mentioned methods returns an immutable <code class="ttm ttx">Color</code>.</p>
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._k33adsix{background:rgb(255,255,0);opacity:1}._k33adsix *{color: #202020 !important}</style><span class="_k33adsix"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._bkk3hwzh{background:rgb(255,255,0);opacity:1}._bkk3hwzh *{color: #202020 !important}</style><span class="_bkk3hwzh"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
 </code></pre>
 <p>Using methods:</p>
-<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._7o730n20{background:rgb(255,255,0);opacity:1}._7o730n20 *{color: #202020 !important}</style><span class="_7o730n20"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
+<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._7gw2oo0i{background:rgb(255,255,0);opacity:1}._7gw2oo0i *{color: #202020 !important}</style><span class="_7gw2oo0i"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
 Yellow<span class="tt18 ttae">.</span><span class="tt18 tta3">darken</span><span class="tt18 ttae">(</span><span class="tt18 ttap">2</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">alpha</span><span class="tt18 ttae">(</span><span class="tt18 ttap">.94</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgba(145,156,0,0.94)</span>
 </code></pre>
-<pre class="ttb"><code prsm class="ttm"><style>._5jo8jwba{background:rgb(255,255,255);opacity:1}._5jo8jwba *{color: #202020 !important}</style><span class="_5jo8jwba"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
-<style>._gzn2x7ja{background:rgb(255,255,255);opacity:1}._gzn2x7ja *{color: #202020 !important}</style><span class="_gzn2x7ja"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
+<pre class="ttb"><code prsm class="ttm"><style>._dmkv0pq2{background:rgb(255,255,255);opacity:1}._dmkv0pq2 *{color: #202020 !important}</style><span class="_dmkv0pq2"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
+<style>._ccami5nk{background:rgb(255,255,255);opacity:1}._ccami5nk *{color: #202020 !important}</style><span class="_ccami5nk"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
 </code></pre>