aboutsummaryrefslogtreecommitdiffstats
path: root/public/projects/angular-small-apps/apps/recipes/src/app/components/search/search.component.html
blob: 8854d5d8ba0e5beff31f3fb74911e7125dc7cb2a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form [formGroup]="searchForm" (ngSubmit)="onSubmit()" class="form">
  <fieldset class="form__fieldset">
    <legend class="form__legend">Search a new recipe</legend>
    <div class="form__item">
      <label for="search-by" class="form__label">By</label>
      <select
        id="search-by"
        name="search-by"
        class="form__select"
        formControlName="by"
      >
        <option value="name" selected>Name</option>
        <option value="ingredient">Ingredient</option>
        <option value="category">Category</option>
      </select>
    </div>
    <div class="form__item">
      <label for="search-query" class="form__label">Query</label>
      <input
        type="search"
        name="search-query"
        id="search-query"
        formControlName="query"
        class="form__input"
        placeholder="Keywords..."
      />
    </div>
    <button class="btn" type="submit">Search</button>
  </fieldset>
</form>
modalHeading, modalVisibleFrom, onDeactivate, onToggle, showIconOnModal = false, ...props }, ref ) => { const itemClass = [ styles.item, modalVisibleFrom ? styles[`item--hidden-controller-${modalVisibleFrom}`] : '', className, ].join(' '); const labelRef = useRef<HTMLLabelElement>(null); const checkboxRef = useRef<HTMLInputElement>(null); const deactivateItem: useOnClickOutsideHandler = useCallback( (e) => { const isCheckbox = e.target && checkboxRef.current?.contains(e.target as Node); const isLabel = e.target && labelRef.current?.contains(e.target as Node); if (onDeactivate && !isCheckbox && !isLabel) onDeactivate(); }, [onDeactivate] ); const modalRef = useOnClickOutside<HTMLDivElement>(deactivateItem); return ( <ListItem {...props} className={itemClass} hideMarker ref={ref}> <Checkbox className={styles.checkbox} id={id} isChecked={isActive} name={id} onChange={onToggle} ref={checkboxRef} value={id} /> <Label aria-label={label} className={styles.label} htmlFor={id} ref={labelRef} > {icon === 'hamburger' ? ( <Icon aria-hidden className={styles[`icon--${icon}`]} shape={icon} // eslint-disable-next-line react/jsx-no-literals size="lg" /> ) : ( <Flip aria-hidden className={styles.flip} showBack={isActive}> <FlipSide className={styles.flip__side}> <Icon shape={icon} // eslint-disable-next-line react/jsx-no-literals size="lg" /> </FlipSide> <FlipSide className={styles.flip__side} isBack> <Icon // eslint-disable-next-line react/jsx-no-literals shape="cross" /> </FlipSide> </Flip> )} </Label> <Overlay className={styles.overlay} isVisible={isActive}> <Modal className={styles.modal} heading={ modalHeading ? ( <Heading isFake level={3}> {modalHeading} </Heading> ) : null } icon={showIconOnModal ? <Icon shape={icon} /> : null} ref={modalRef} > {children} </Modal> </Overlay> </ListItem> ); }; export const NavbarItem = forwardRef(NavbarItemWithRef);