Skip to content

Commit

Permalink
deep-worktype-menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@leomendoza123
leomendoza123 committed Jan 3, 2025
1 parent 3bebd3b commit c59ba1a
Show file tree
Hide file tree
Showing 8 changed files with 491 additions and 97 deletions.
150 changes: 116 additions & 34 deletions src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,132 @@
<div class="menu-container">
<div class="menu-container" [formGroup]="formgroup">
<mat-form-field
appearance="outline"
class="mat-form-field-min input-container"
(click)="clickHoverMenuTrigger.openMenu()"

>
<input
#clickHoverMenuTrigger="matMenuTrigger"
type="text"
[value]="selectedItem?.label || 'Select Item'"
readonly
#clickHoverMenuTrigger="matMenuTrigger"
[matMenuTriggerFor]="matMenu"
(keydown)="onSpaceBar($event)"
readonly
matInput
[errorStateMatcher]="getMatcher()"
[attr.placeholder]="selectItemLabel"
formControlName="formControl"
[value]="selectedItem?.label"
/>
<mat-error *ngIf="invalid" i18n="@@works.selectAWorkType">
Select a work type
</mat-error>
</mat-form-field>
<mat-menu #matMenu="matMenu" class="this-class">
<ng-container *ngFor="let item of menu">
<label *ngIf="item.isNotSelectableLabel"> a simple label</label>
<button
mat-menu-item
*ngIf="!item.isNotSelectableLabel && !item.content"
(click)="onItemSelect(item)"
>
{{ item.label }}
</button>
<button
mat-menu-item
*ngIf="!item.isNotSelectableLabel && item.content"
[matMenuTriggerFor]="test"
>
<div class="parentContainer">
<strong>

<mat-menu #matMenu="matMenu" class="this-class" (closed)="onMenuClose()">
<div class="menu-wrapper">
<ng-container *ngFor="let item of menu">
<ng-container *ngIf="!item.divider">
<label class="orc-font-body strong" *ngIf="item.isNotSelectableLabel">
{{ item.label }}</label
>
<button
mat-menu-item
*ngIf="!item.isNotSelectableLabel && !item.content"
(click)="onItemSelect(item)"
class="orc-font-body-small"
>
{{ item.label }}
</strong>
<p>
{{ item.description }}
</p>
</div>
</button>
<!-- Create a mat menu using the label as an identifier -->
<mat-menu #test="matMenu">
<ng-container *ngFor="let subItem of item.content">
<button mat-menu-item (click)="onItemSelect(subItem)">
{{ subItem.label }}
</button>
<!-- DESKTOP VERSION USES SUBMENUS -->
<ng-container *ngIf="!isMobile">
<div class="sub-menu-container" *ngIf="item.content?.length">
<button
mat-menu-item
*ngIf="!item.isNotSelectableLabel"
[matMenuTriggerFor]="subMenuRef"
class="mat-button-wrap-text"
>
<div class="parentContainer">
<strong class="orc-font-body">
{{ item.label }}
</strong>
<p class="orc-font-small-print">
{{ item.description }}
</p>
</div>
</button>
<!-- Create a mat menu using the label as an identifier -->
<mat-menu #subMenuRef="matMenu">
<ng-container *ngFor="let subItem of item.content">
<ng-container *ngIf="!subItem.divider">
<button
mat-menu-item
(click)="onItemSelect(subItem)"
[ngClass]="subItem.secondaryItem ? 'secondaryItem' : ''"
class="mat-button-wrap-text"
>
{{ subItem.label }}

<p
class="orc-font-small-print"
*ngIf="subItem.description"
>
{{ subItem.description }}
</p>
</button>
</ng-container>
<ng-container *ngIf="subItem.divider">
<mat-divider></mat-divider>
</ng-container>
</ng-container>
</mat-menu>
</div>
</ng-container>

<!-- MOBILE VERSIONS DISPLAY ALL ITEMS -->
<ng-container *ngIf="isMobile">
<div class="sub-menu-container mobile" *ngIf="item.content?.length">
<mat-divider></mat-divider>
<div
*ngIf="!item.isNotSelectableLabel"
class="not-selectable-label"
>
<div class="parentContainer">
<strong class="orc-font-body">
{{ item.label }}
</strong>
<p class="orc-font-small-print">
{{ item.description }}
</p>
</div>
</div>
<!-- Create a mat menu using the label as an identifier -->
<ng-container *ngFor="let subItem of item.content">
<ng-container *ngIf="!subItem.divider">
<button
mat-menu-item
(click)="onItemSelect(subItem)"
[ngClass]="subItem.secondaryItem ? 'secondaryItem' : ''"
class="mobile mat-button-wrap-text"
>
{{ subItem.label }}

<p class="orc-font-small-print" *ngIf="subItem.description">
{{ subItem.description }}
</p>
</button>
</ng-container>
</ng-container>
</div>
</ng-container>
<ng-container *ngIf="item.divider">
<mat-divider></mat-divider>
</ng-container>
</ng-container>
<ng-container *ngIf="item.divider">
<mat-divider></mat-divider>
</ng-container>
</mat-menu>
</ng-container>
</ng-container>
</div>
</mat-menu>
</div>
100 changes: 92 additions & 8 deletions src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,99 @@ input {
width: 100%;
}

.parentContainer {
display: flex;
flex-direction: column;
gap: 0;
line-height: 1;
gap: 4px;
white-space: normal;
strong,
.strong {
font-weight: 700;
}
.menu-wrapper {
button {
padding: 16px;
line-height: 1;
max-width: 400px;
}

label {
padding-left: 16px;
height: 48px;
display: flex;
align-items: center;
}
align-items: center;
}

.sub-menu-container {
button {
height: 100%;
width: 100%;
padding: 16px !important;
.parentContainer {
display: flex;
flex-direction: column;
gap: 0;
line-height: 1;
gap: 4px;
white-space: normal;
strong,
p {
margin: 0;
}
strong {
padding-top: 16px;
padding-bottom: 4px;
}
p {
padding-bottom: 16px;
}
padding-right: 24px;
}
}
div {
height: 100%;
.parentContainer {
display: flex;
flex-direction: column;
gap: 0;
line-height: 1;
gap: 4px;
white-space: normal;
strong,
p {
margin: 0;
}
strong {
padding-top: 16px;
padding-bottom: 4px;
}
p {
padding-bottom: 16px;
}
padding-right: 24px;
}
}
}

button.mat-button-wrap-text.secondaryItem {
font-style: italic;
height: 100%;
padding: 16px 16px !important;
p {
margin: 0;
padding-top: 4px;
}
.orc-font-small-print {
font-style: normal;
}
}

.orc-font-small-print {
line-height: 18px;
}


button.mat-button-wrap-text:not(.mobile):not(.secondaryItem) {
padding: 0px 16px !important;
}


.not-selectable-label {
padding: 0 16px;
}
Loading

0 comments on commit c59ba1a

Please sign in to comment.