Replacement for `@angular/flex-layout`

flex.ts

import { Directive, HostBinding, Input, NgModule } from "@angular/core";

export type BsFlexDirectionType = "row" | "row-reverse" | "column" | "column-reverse";

export type BsFlexWrapType = "nowrap" | "wrap" | "wrap-reverse";

export type BsFlexDirectionWrapType = "" | `${BsFlexDirectionType}` | `${BsFlexDirectionType} ${BsFlexWrapType}`;

export type BsFlexJustifyContentType =
  | ""
  | "flex-start"
  | "flex-end"
  | "center"
  | "space-between"
  | "space-around"
  | "space-evenly"
  | "start"
  | "end"
  | "left"
  | "right";

export type BsFlexAlignItemsType =
  | "stretch"
  | "flex-start"
  | "flex-end"
  | "center"
  | "baseline"
  | "first baseline"
  | "last baseline"
  | "start"
  | "end"
  | "self-start"
  | "self-end";

export type BsFlexAlignJustifyContentAlignItemsType =
  | `${BsFlexJustifyContentType}`
  | `${BsFlexJustifyContentType} | ${BsFlexAlignItemsType}`;

export type BsFlexAlignContentType =
  | ""
  | "flex-start"
  | "flex-end"
  | "center"
  | "space-between"
  | "space-around"
  | "space-evenly"
  | "stretch"
  | "start"
  | "end"
  | "baseline"
  | "first baseline"
  | "last baseline";

export type BsFlexAlignSelfType = "" | "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";

@Directive({
  standalone: true,
  selector: "[bsFlexLayout]",
})
export class BsFlexLayoutDirective {
  @Input() set bsFlexLayout(flexDirectionWrap: BsFlexDirectionWrapType) {
    let flexDirection: BsFlexDirectionType | "" = "";
    let flexWrap: BsFlexWrapType | "" = "";

    const spaceIndex = flexDirectionWrap.indexOf(" ");
    if (spaceIndex < 0) {
      flexDirection = flexDirectionWrap.trim() as BsFlexDirectionType;
    } else {
      flexDirection = flexDirectionWrap.substring(0, spaceIndex).trim() as BsFlexDirectionType;
      flexWrap = flexDirectionWrap.substring(spaceIndex + 1).trim() as BsFlexWrapType;
    }

    this.flexDirection = flexDirection;
    this.flexWrap = flexWrap;
  }

  @Input() set bsFlexLayoutAlign(justifyContentAlignItems: BsFlexAlignJustifyContentAlignItemsType) {
    let justifyContent: BsFlexJustifyContentType = "";
    let alignItems: BsFlexAlignItemsType | "" = "";

    const pipeIndex = justifyContentAlignItems.indexOf("|");
    if (pipeIndex < 0) {
      justifyContent = justifyContentAlignItems.trim() as BsFlexJustifyContentType;
    } else {
      justifyContent = justifyContentAlignItems.substring(0, pipeIndex).trim() as BsFlexJustifyContentType;
      alignItems = justifyContentAlignItems.substring(pipeIndex + 1).trim() as BsFlexAlignItemsType;
    }

    this.justifyContent = justifyContent;
    this.alignItems = alignItems;
  }

  @Input() set bsFlexLayoutAlignContent(alignContent: BsFlexAlignContentType) {
    this.alignContent = alignContent;
  }

  @Input() set bsFlexLayoutGap(gap: string) {
    this.gap = gap;
  }

  @HostBinding("style.display") display = "flex";
  @HostBinding("style.flex-direction") flexDirection: BsFlexDirectionType | "" = "";
  @HostBinding("style.flex-wrap") flexWrap: BsFlexWrapType | "" = "";
  @HostBinding("style.justify-content") justifyContent: BsFlexJustifyContentType = "";
  @HostBinding("style.align-items") alignItems: BsFlexAlignItemsType | "" = "";
  @HostBinding("style.align-content") alignContent: BsFlexAlignContentType = "";
  @HostBinding("style.gap") gap = "";
}

@Directive({
  standalone: true,
  selector: "[bsFlex]",
})
export class BsFlexDirective {
  @Input() set bsFlex(flex: string) {
    this.flex = flex.trim();
  }

  @Input() set bsFlexAlign(alignSelf: BsFlexAlignSelfType) {
    this.alignSelf = alignSelf;
  }

  @Input() set bsFlexOrder(order: number) {
    this.order = order;
  }

  @HostBinding("style.flex") flex = "0 1 auto";
  @HostBinding("style.align-self") alignSelf: BsFlexAlignSelfType = "";
  @HostBinding("style.order") order: number | null = null;
}

export const BS_FLEX_LAYOUT_DIRECTIVES = [BsFlexDirective, BsFlexLayoutDirective];

@NgModule({
  imports: [BS_FLEX_LAYOUT_DIRECTIVES],
  exports: [BS_FLEX_LAYOUT_DIRECTIVES],
})
export class BsFlexLayoutModule {}

grid.ts

import { Directive, HostBinding, Input, NgModule } from "@angular/core";

export type BsGridAlignItemsType = "start" | "end" | "center" | "stretch";
export type BsGridJustifyItemsType = "start" | "end" | "center" | "stretch";
export type BsGridPlaceItemsType = `${BsGridAlignItemsType}` | `${BsGridAlignItemsType} ${BsGridJustifyItemsType}`;

export type BsGridJustifyContentType = "start" | "end" | "center" | "stretch" | "space-around" | "space-between" | "space-evenly";
export type BsGridAlignContentType = "start" | "end" | "center" | "stretch" | "space-around" | "space-between" | "space-evenly";
export type BsGridJustifyAlignContentType = `${BsGridJustifyContentType}` | `${BsGridJustifyContentType} ${BsGridAlignContentType}`;

export type BsGridAlignSelfType = "start" | "end" | "center" | "stretch";
export type BsGridJustifySelfType = "start" | "end" | "center" | "stretch";

export type BsGridPlaceSelfType = `${BsGridAlignSelfType}` | `${BsGridAlignSelfType} ${BsGridJustifySelfType}`;

@Directive({
  standalone: true,
  selector: "[bsGridColumns]",
})
export class BsGridColumnsDirective {
  @Input() set bsGridColumns(columns: string) {
    this.columns = columns;
  }

  @Input() set bsGridRows(rows: string) {
    this.rows = rows;
  }

  @Input() set bsGridAlignItems(alignItems: BsGridAlignItemsType | "") {
    this.alignItems = alignItems;
  }

  @Input() set bsGridJustifyItems(justifyItems: BsGridJustifyItemsType | "") {
    this.justifyItems = justifyItems;
  }

  @Input() set bsGridPlaceItems(placeItems: BsGridPlaceItemsType | "") {
    let alignItems: BsGridAlignItemsType | "" = "";
    let justifyItems: BsGridJustifyItemsType | "" = "";

    if (placeItems !== "") {
      const spaceIndex = placeItems.indexOf(" ");
      if (spaceIndex < 0) {
        alignItems = placeItems.trim() as BsGridJustifyItemsType;
        justifyItems = alignItems;
      } else {
        alignItems = placeItems.substring(0, spaceIndex).trim() as BsGridJustifyItemsType;
        justifyItems = placeItems.substring(spaceIndex + 1).trim() as BsGridAlignItemsType;
      }
    }

    this.alignItems = alignItems;
    this.justifyItems = justifyItems;
  }

  @Input() set bsGridAlignContent(alignContent: BsGridAlignContentType | "") {
    this.alignContent = alignContent;
  }

  @Input() set bsGridJustifyContent(justifyContent: BsGridJustifyContentType | "") {
    this.justifyContent = justifyContent;
  }

  @Input() set bsGridPlaceContent(placeContent: BsGridJustifyAlignContentType | "") {
    let alignContent: BsGridAlignContentType | "" = "";
    let justifyContent: BsGridJustifyContentType | "" = "";

    if (placeContent !== "") {
      const spaceIndex = placeContent.indexOf(" ");
      if (spaceIndex < 0) {
        alignContent = placeContent.trim() as BsGridJustifyContentType;
        justifyContent = alignContent;
      } else {
        alignContent = placeContent.substring(0, spaceIndex).trim() as BsGridJustifyContentType;
        justifyContent = placeContent.substring(spaceIndex + 1).trim() as BsGridAlignContentType;
      }
    }

    this.alignContent = alignContent;
    this.justifyContent = justifyContent;
  }

  @Input() set bsGridGap(gap: string) {
    this.gap = gap;
  }

  @HostBinding("style.display") display = "grid";
  @HostBinding("style.grid-template-columns") columns = "";
  @HostBinding("style.grid-template-rows") rows = "";
  @HostBinding("style.align-items") alignItems: BsGridAlignItemsType | "" = "";
  @HostBinding("style.justify-items") justifyItems: BsGridJustifyItemsType | "" = "";
  @HostBinding("style.align-content") alignContent: BsGridAlignContentType | "" = "";
  @HostBinding("style.justify-content") justifyContent: BsGridJustifyContentType | "" = "";
  @HostBinding("style.gap") gap = "";
}

@Directive({
  standalone: true,
  selector: "[bsGridAreas]",
})
export class BsGridAreasDirective {
  @Input() set bsGridAreas(areas: string | readonly string[]) {
    areas = typeof areas === "string" ? areas.split("|").map(a => a.trim()) : areas;
    this.areas = areas.map(a => `"${a}"`).join(" ");
  }

  @HostBinding("style.grid-template-areas") areas = "";
}

@Directive({
  standalone: true,
  selector: "[bsGridColumn]",
})
export class BsGridColumnDirective {
  @Input() set bsGridColumn(column: string) {
    this.column = column;
  }

  @Input() set bsGridRow(row: string) {
    this.row = row;
  }

  @HostBinding("style.grid-column") column = "";
  @HostBinding("style.grid-row") row = "";
}

@Directive({
  standalone: true,
  selector: "[bsGridArea]",
})
export class BsGridAreaDirective {
  @Input() set bsGridArea(area: string) {
    this.area = area;
  }

  @HostBinding("style.grid-area") area = "";
}

@Directive({
  standalone: true,
  selector: "[bsGridAlignSelf]",
})
export class BsGridAlignSelfDirective {
  @Input() set bsGridAlignSelf(alignSelf: BsGridAlignSelfType | "") {
    this.alignSelf = alignSelf;
  }

  @HostBinding("style.align-self") alignSelf: BsGridAlignSelfType | "" = "";
}

@Directive({
  standalone: true,
  selector: "[bsGridJustifySelf]",
})
export class BsGridJustifySelfDirective {
  @Input() set bsGridJustifySelf(justifySelf: BsGridJustifySelfType | "") {
    this.justifySelf = justifySelf;
  }

  @HostBinding("style.justify-self") justifySelf: BsGridJustifySelfType | "" = "";
}

@Directive({
  standalone: true,
  selector: "[bsGridPlaceSelf]",
})
export class BsGridPlaceSelfDirective {
  @Input() set bsGridPlaceSelf(placeSelf: BsGridPlaceSelfType | "") {
    let alignSelf: BsGridAlignSelfType | "" = "";
    let justifySelf: BsGridJustifySelfType | "" = "";

    if (placeSelf !== "") {
      const spaceIndex = placeSelf.indexOf(" ");
      if (spaceIndex < 0) {
        alignSelf = placeSelf.trim() as BsGridJustifySelfType;
        justifySelf = alignSelf;
      } else {
        alignSelf = placeSelf.substring(0, spaceIndex).trim() as BsGridJustifySelfType;
        justifySelf = placeSelf.substring(spaceIndex + 1).trim() as BsGridAlignSelfType;
      }
    }

    this.alignSelf = alignSelf;
    this.justifySelf = justifySelf;
  }

  @HostBinding("style.align-self") alignSelf: BsGridAlignSelfType | "" = "";
  @HostBinding("style.justify-self") justifySelf: BsGridJustifySelfType | "" = "";
}

export const BS_GRID_LAYOUT_DIRECTIVES = [
  BsGridColumnsDirective,
  BsGridColumnDirective,
  BsGridAreasDirective,
  BsGridAreaDirective,
  BsGridAlignSelfDirective,
  BsGridJustifySelfDirective,
  BsGridPlaceSelfDirective,
];

@NgModule({
  imports: [BS_GRID_LAYOUT_DIRECTIVES],
  exports: [BS_GRID_LAYOUT_DIRECTIVES],
})
export class BsGridLayoutModule {}