Various fixes

package.json

@@ -45,6 +45,7 @@
     "@storybook/blocks": "^8.0.9",
     "@storybook/test": "^8.0.9",
     "@types/jasmine": "~5.1.0",
+    "@types/node": "^20.12.13",
     "@typescript-eslint/eslint-plugin": "7.2.0",
     "@typescript-eslint/parser": "7.2.0",
     "eslint": "^8.57.0",

projects/layout-components/src/lib/column/column.component.scss

@@ -1,3 +1,115 @@
 :host {
   display: block;
+  flex: 0 0 var(--column-width);
+}
+
+:host([width="1/2"]),
+:host([width="2/4"]),
+:host([width="3/6"]),
+:host([width="4/8"]),
+:host([width="5/10"]),
+:host([width="6/12"]) {
+  --column-width: calc(1 / 2 * 100%);
+}
+
+:host([width="1/3"]),
+:host([width="2/6"]),
+:host([width="4/12"]) {
+  --column-width: calc(1 / 3 * 100%);
+}
+
+:host([width="2/3"]),
+:host([width="4/6"]),
+:host([width="8/12"]) {
+  --column-width: calc(2 / 3 * 100%);
+}
+
+:host([width="1/4"]),
+:host([width="2/8"]),
+:host([width="3/12"]) {
+  --column-width: calc(1 / 4 * 100%);
+}
+
+:host([width="3/4"]),
+:host([width="6/8"]),
+:host([width="9/12"]) {
+  --column-width: calc(3 / 4 * 100%);
+}
+
+:host([width="1/5"]),
+:host([width="2/10"]) {
+  --column-width: calc(1 / 5 * 100%);
+}
+
+:host([width="2/5"]),
+:host([width="4/10"]) {
+  --column-width: calc(2 / 5 * 100%);
+}
+
+:host([width="3/5"]),
+:host([width="6/10"]) {
+  --column-width: calc(3 / 5 * 100%);
+}
+
+:host([width="4/5"]),
+:host([width="8/10"]) {
+  --column-width: calc(4 / 5 * 100%);
+}
+
+:host([width="1/6"]),
+:host([width="2/12"]) {
+  --column-width: calc(1 / 6 * 100%);
+}
+
+:host([width="5/6"]),
+:host([width="10/12"]) {
+  --column-width: calc(5 / 6 * 100%);
+}
+
+:host([width="1/8"]) {
+  --column-width: calc(1 / 8 * 100%);
+}
+
+:host([width="3/8"]) {
+  --column-width: calc(3 / 8 * 100%);
+}
+
+:host([width="5/8"]) {
+  --column-width: calc(5 / 8 * 100%);
+}
+
+:host([width="7/8"]) {
+  --column-width: calc(7 / 8 * 100%);
+}
+
+:host([width="1/10"]) {
+  --column-width: calc(1 / 10 * 100%);
+}
+
+:host([width="3/10"]) {
+  --column-width: calc(3 / 10 * 100%);
+}
+
+:host([width="7/10"]) {
+  --column-width: calc(7 / 10 * 100%);
+}
+
+:host([width="9/10"]) {
+  --column-width: calc(9 / 10 * 100%);
+}
+
+:host([width="1/12"]) {
+  --column-width: calc(1 / 12 * 100%);
+}
+
+:host([width="5/12"]) {
+  --column-width: calc(5 / 12 * 100%);
+}
+
+:host([width="7/12"]) {
+  --column-width: calc(7 / 12 * 100%);
+}
+
+:host([width="11/12"]) {
+  --column-width: calc(11 / 12 * 100%);
 }

projects/layout-components/src/lib/column/column.component.ts

@@ -1,13 +1,17 @@
 import { Component, HostBinding, Input } from '@angular/core';
+import { ColumnFractionWidth } from '../common';
 
 @Component({
   selector: 'column',
   standalone: true,
   imports: [],
   template: `<ng-content></ng-content>`,
-  styleUrl: './column.component.scss'
+  styleUrl: './column.component.scss',
 })
 export class ColumnComponent {
-  @HostBinding('style.width') @Input() width: string | undefined;
+  @HostBinding('style.width') @Input() width:
+    | string
+    | ColumnFractionWidth
+    | undefined;
   @HostBinding('style.flex-grow') @Input() flexGrow: string | undefined;
 }

projects/layout-components/src/lib/common.ts

@@ -34,3 +34,53 @@ export type JustifyContent =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+
+export type ColumnFractionWidth =
+  | '1/2'
+  | '1/3'
+  | '2/3'
+  | '1/4'
+  | '2/4'
+  | '3/4'
+  | '1/5'
+  | '2/5'
+  | '3/5'
+  | '4/5'
+  | '1/6'
+  | '2/6'
+  | '3/6'
+  | '4/6'
+  | '5/6'
+  | '1/7'
+  | '2/7'
+  | '3/7'
+  | '4/7'
+  | '5/7'
+  | '6/7'
+  | '1/8'
+  | '2/8'
+  | '3/8'
+  | '4/8'
+  | '5/8'
+  | '6/8'
+  | '7/8'
+  | '1/10'
+  | '2/10'
+  | '3/10'
+  | '4/10'
+  | '5/10'
+  | '6/10'
+  | '7/10'
+  | '8/10'
+  | '9/10'
+  | '1/12'
+  | '2/12'
+  | '3/12'
+  | '4/12'
+  | '5/12'
+  | '6/12'
+  | '7/12'
+  | '8/12'
+  | '9/12'
+  | '10/12'
+  | '11/12';

projects/layout-components/src/lib/stack/stack.component.css

@@ -1,5 +1,4 @@
 :host {
     display: flex;
     flex-direction: column;
-    padding: 12px;
 }

projects/layout-components/src/lib/stack/stack.component.ts

@@ -1,5 +1,4 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { Properties } from 'csstype';
 import { AlignItems, Gap, JustifyContent, Padding } from '../common';
 
 @Component({
@@ -10,15 +9,20 @@ import { AlignItems, Gap, JustifyContent, Padding } from '../common';
   styleUrl: './stack.component.css',
 })
 export class StackComponent {
-  @HostBinding('style.justify-content') @Input() justifyContent: JustifyContent =
-    'flex-start';
+  @HostBinding('style.justify-content')
+  @Input()
+  justifyContent: JustifyContent = 'flex-start';
   @HostBinding('style.align-items')
   @Input()
   alignItems: AlignItems = 'stretch';
+  @HostBinding('style.height')
+  @Input()
+  height?: string;
   @HostBinding('style.gap')
   /**
    * The gap between the children of the stack.
    */
-  @Input() gap: Gap = '0';
+  @Input()
+  gap: Gap = '0';
   @HostBinding('style.padding') @Input() padding: Padding = '0';
 }

projects/layout-components/src/stories/columns.stories.ts

@@ -7,6 +7,7 @@ import {
 import { PlaceholderComponent } from './placeholder/placeholder.component';
 import { ColumnsComponent } from '../lib/columns/columns.component';
 import { ColumnComponent } from '../lib/column/column.component';
+import { StackComponent } from '../public-api';
 
 /**
  * The Columns component creates horizontal layouts that don't wrap. Use the Column component to determine the column size. If not specified, Column fits its content.
@@ -17,20 +18,20 @@ const meta: Meta<typeof ColumnsComponent> = {
   tags: ['autodocs'],
   decorators: [
     moduleMetadata({
-      imports: [PlaceholderComponent, ColumnComponent],
+      imports: [PlaceholderComponent, ColumnComponent, StackComponent],
     }),
   ],
   render: (args) => ({
     props: args,
     template: `<columns ${argsToTemplate(args)}>
       <column width="240px">
-        <placeholder></placeholder>
+        <placeholder />
       </column>
       <column>
-        <placeholder></placeholder>
+        <placeholder />
       </column>
       <column flexGrow="1">
-        <placeholder></placeholder>
+        <placeholder />
       </column>
     </columns>`,
   }),
@@ -44,3 +45,60 @@ export const Basic: Story = {
     gap: '16px',
   },
 };
+
+export const Fractions: Story = {
+  args: {
+    gap: '16px',
+  },
+  render: (args) => ({
+    props: args,
+    template: `<stack gap="32px">
+      <columns ${argsToTemplate(args)}>
+        <column width="2/5">
+          <placeholder>2/5</placeholder>
+        </column>
+        <column width="100%">
+          <placeholder>100%</placeholder>
+        </column>
+      </columns>
+      <columns ${argsToTemplate(args)}>
+        <column width="3/5">
+          <placeholder>3/5</placeholder>
+        </column>
+        <column width="100%">
+          <placeholder>100%</placeholder>
+        </column>
+      </columns>
+      <columns ${argsToTemplate(args)}>
+        <column width="100%">
+          <placeholder>100%</placeholder>
+        </column>
+        <column width="2/3">
+          <placeholder>2/3</placeholder>
+        </column>
+      </columns>
+      <columns ${argsToTemplate(args)}>
+        <column width="1/5">
+          <placeholder>1/5</placeholder>
+        </column>
+        <column width="100%">
+          <placeholder>100%</placeholder>
+        </column>
+        <column width="1/5">
+          <placeholder>1/5</placeholder>
+        </column>
+      </columns>
+      <columns ${argsToTemplate(args)}>
+        <column width="100%">
+          <placeholder>100%</placeholder>
+        </column>
+        <column width="1/6">
+          <placeholder>1/6</placeholder>
+        </column>
+        <column width="100%">
+          <placeholder>100%</placeholder>
+        </column>
+      </columns>
+    </stack>`,
+  }),
+};

projects/layout-components/src/stories/placeholder/placeholder.component.scss

@@ -1,16 +1,20 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
 
 :host {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ECEFF4;
-    color: #364459;
-    font-family: "Poppins", sans-serif;
-    font-weight: 400;
-    padding: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #eceff4;
+  color: #364459;
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  padding: 40px;
 }
 
 p {
-    margin: 0;
-}
+  margin: 0;
+}
+
+p:not(:empty) + p.default {
+  display: none;
+}

projects/layout-components/src/stories/placeholder/placeholder.component.ts

@@ -4,7 +4,10 @@ import { Component, HostBinding, Input } from '@angular/core';
   selector: 'placeholder',
   standalone: true,
   imports: [],
-  template: `<p>Placeholder</p>`,
+  template: `
+    <p><ng-content></ng-content></p>
+    <p class="default">Placeholder</p>
+  `,
   styleUrls: ['./placeholder.component.scss'],
 })
 export class PlaceholderComponent {