feat(meetings): implement two-column layout for meeting manage page (#229)

* feat(meetings): implement two-column layout for meeting manage page

Redesign the meeting manage stepper to use a two-column layout across all steps:

- Step 1 (Meeting Type): Two-column card selector layout
- Step 2 (Meeting Details): Left column for basic info, right for scheduling
- Step 3 (Platform & Features): Left for platform/recording, right for AI/calendar
- Step 4 (Resources & Links): Left for file uploads, right for links
- Step 5 (Invite Guests): Left for search/committees, right for invitation list

Additional changes:
- Update label styling to use consistent text-neutral-950 pattern
- Move navigation controls above content in card header
- Make guest search form always visible (remove Add Guest button toggle)
- Move Show Meeting Attendees toggle to left column
- Update shared components (calendar, time-picker, card-selector) styling

LFXV2-965

Signed-off-by: Asitha de Silva <asithade@gmail.com>

* fix(meetings): refactor feature toggles and address PR review feedback

- Update lfx-feature-toggle to support ng-content for nested options
- Refactor meeting-platform-features to use feature-toggle component
- Refactor meeting-details recurring toggle to use feature-toggle
- Remove duplicate show_meeting_attendees from meeting-details (belongs in step 5)
- Remove deprecated width input from time-picker component
- Fix Update Meeting button disabled state to match Create Meeting pattern

LFXV2-965

Signed-off-by: Asitha de Silva <asithade@gmail.com>

---------

Signed-off-by: Asitha de Silva <asithade@gmail.com>

Author: asithade

apps/lfx-one/src/app/modules/committees/components/member-form/member-form.component.html

@@ -97,25 +97,13 @@
           <!-- Role Start Date -->
           <div>
             <label for="role-start" class="block text-sm font-medium text-gray-700 mb-1"> Role Start Date </label>
-            <lfx-calendar
-              [form]="form()"
-              control="role_start"
-              placeholder="Select start date"
-              [showButtonBar]="true"
-              appendTo="body"
-              [showIcon]="true"></lfx-calendar>
+            <lfx-calendar [form]="form()" control="role_start" placeholder="Select start date" [showButtonBar]="true" appendTo="body"></lfx-calendar>
           </div>
 
           <!-- Role End Date -->
           <div>
             <label for="role-end" class="block text-sm font-medium text-gray-700 mb-1"> Role End Date </label>
-            <lfx-calendar
-              [form]="form()"
-              control="role_end"
-              placeholder="Select end date"
-              [showButtonBar]="true"
-              appendTo="body"
-              [showIcon]="true"></lfx-calendar>
+            <lfx-calendar [form]="form()" control="role_end" placeholder="Select end date" [showButtonBar]="true" appendTo="body"></lfx-calendar>
           </div>
         </div>
 
@@ -138,25 +126,13 @@
           <!-- Voting Status Start Date -->
           <div>
             <label for="voting-status-start" class="block text-sm font-medium text-gray-700 mb-1"> Voting Status Start Date </label>
-            <lfx-calendar
-              [form]="form()"
-              control="voting_status_start"
-              placeholder="Select start date"
-              [showButtonBar]="true"
-              appendTo="body"
-              [showIcon]="true"></lfx-calendar>
+            <lfx-calendar [form]="form()" control="voting_status_start" placeholder="Select start date" [showButtonBar]="true" appendTo="body"></lfx-calendar>
           </div>
 
           <!-- Voting Status End Date -->
           <div>
             <label for="voting-status-end" class="block text-sm font-medium text-gray-700 mb-1"> Voting Status End Date </label>
-            <lfx-calendar
-              [form]="form()"
-              control="voting_status_end"
-              placeholder="Select end date"
-              [showButtonBar]="true"
-              appendTo="body"
-              [showIcon]="true"></lfx-calendar>
+            <lfx-calendar [form]="form()" control="voting_status_end" placeholder="Select end date" [showButtonBar]="true" appendTo="body"></lfx-calendar>
           </div>
         </div>
       </div>

apps/lfx-one/src/app/modules/meetings/components/meeting-committee-manager/meeting-committee-manager.component.html

@@ -10,7 +10,7 @@
   } @else {
     <!-- Committee Selection -->
     <div class="flex flex-col gap-1">
-      <label class="text-sm font-medium text-gray-700">Select {{ committeeLabel.plural }}</label>
+      <label class="block text-neutral-950 mb-2">Select {{ committeeLabel.plural }}</label>
       <lfx-multi-select
         [form]="committeeForm"
         control="committees"
@@ -34,8 +34,8 @@
     <!-- Voting Status Selection -->
     @if (hasVotingEnabledCommittee()) {
       <div class="flex flex-col gap-1">
-        <div class="flex items-center gap-1">
-          <label class="text-sm font-medium text-gray-700">Voting Status Selection</label>
+        <div class="flex items-center gap-1 mb-2">
+          <label class="block text-neutral-950">Voting Status Selection</label>
           <i
             class="fa-light fa-info-circle text-xs text-gray-500"
             pTooltip="Select which voting statuses committee members must have to participate in this meeting. Only members with the selected voting status(es) will be invited to the meeting."></i>
@@ -68,7 +68,7 @@
     @if (selectedCommitteeIds().length > 0) {
       <div class="flex flex-col gap-2 mt-4">
         <div class="flex items-center justify-between">
-          <h3 class="text-sm font-medium text-gray-700 flex items-center gap-1">
+          <h3 class="text-neutral-950 flex items-center gap-1">
             <span>{{ committeeLabel.singular }} Members</span>
             <i class="fa-light fa-info-circle text-xs text-gray-500" pTooltip="To manage group members, please visit the committee page."></i>
           </h3>