Skip to content
Snippets Groups Projects
  • rhenck's avatar
    9550df25
    Rework radio-with-images element · 9550df25
    rhenck authored
    Add new parameter 'itemsPerRow'. This limits the grid columns used, 
    making items move to the next row if overextending.
    
    Also simplify component structure.
    9550df25
    History
    Rework radio-with-images element
    rhenck authored
    Add new parameter 'itemsPerRow'. This limits the grid columns used, 
    making items move to the next row if overextending.
    
    Also simplify component structure.
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
radio-button-group-complex.ts 1.39 KiB
import { Type } from '@angular/core';
import { ElementFactory } from 'common/util/element.factory';
import {
  BasicStyles, InputElement, OptionElement,
  PositionedUIElement, PositionProperties, TextImageLabel
} from 'common/models/elements/element';
import { ElementComponent } from 'common/directives/element-component.directive';
import { RadioGroupImagesComponent } from 'common/components/input-elements/radio-group-images.component';

export class RadioButtonGroupComplexElement extends InputElement implements PositionedUIElement, OptionElement {
  options: TextImageLabel[] = [];
  itemsPerRow: number | null;
  position: PositionProperties;
  styling: BasicStyles;

  constructor(element: Partial<RadioButtonGroupComplexElement>, ...args: unknown[]) {
    super({ height: 100, ...element }, ...args);
    if (element.options) this.options = [...element.options];
    this.itemsPerRow = element.itemsPerRow !== undefined ? element.itemsPerRow : null;
    this.position = ElementFactory.initPositionProps({ marginBottom: 40, ...element.position });
    this.styling = {
      ...ElementFactory.initStylingProps({ backgroundColor: 'transparent', ...element.styling })
    };
  }

  getElementComponent(): Type<ElementComponent> {
    return RadioGroupImagesComponent;
  }

  getNewOptionLabel(optionText: string): TextImageLabel {
    return ElementFactory.createOptionLabel(optionText, true) as TextImageLabel;
  }
}