@allsorter/ui-components 0.0.367 → 0.0.370

package/lib/styles/new-typography.scss

@@ -0,0 +1,202 @@
+/* Google Fonts import suggestion left to consumer's index.html or global styles. */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+
+// SCSS Variables
+$primary-text-color: #4B4F62;
+
+// Mixins
+@mixin typography-base($size, $line-height, $letter-spacing, $weight: 400) {
+  font-size: $size;
+  line-height: $line-height;
+  letter-spacing: $letter-spacing;
+  font-weight: $weight;
+  color: $primary-text-color;
+}
+
+/* Weight utilities */
+.weight-light {
+  font-weight: 300;
+}
+
+.weight-regular {
+  font-weight: 400;
+}
+
+.weight-medium {
+  font-weight: 500;
+}
+
+.weight-semibold {
+  font-weight: 600;
+}
+
+.weight-bold {
+  font-weight: 700;
+}
+
+/* Line height utilities */
+.line-height-none {
+  line-height: 1 !important;
+}
+
+.line-height-tight {
+  line-height: 1.2 !important;
+}
+
+.line-height-normal {
+  line-height: 1.4 !important;
+}
+
+/* Letter spacing utilities */
+.letter-spacing-normal {
+  letter-spacing: 0 !important;
+}
+
+.letter-spacing-wide {
+  letter-spacing: 0.1em !important;
+}
+
+.letter-spacing-wider {
+  letter-spacing: 0.2em !important;
+}
+
+/* Text decoration utilities */
+.text-decoration-none {
+  text-decoration: none !important;
+  font-style: normal !important;
+}
+
+.text-decoration-underline {
+  text-decoration: underline !important;
+  font-style: normal !important;
+}
+
+.text-decoration-italic {
+  text-decoration: none !important;
+  font-style: italic !important;
+}
+
+.text-decoration-strike {
+  text-decoration: line-through !important;
+  font-style: normal !important;
+}
+
+/* Typography Scale - Based on the design system */
+
+/* Text 5XL */
+.font-text-5xl {
+  @include typography-base(2rem, 1.2, -0.1px, 400);
+}
+
+.font-text-5xl-medium {
+  @include typography-base(2rem, 1.2, -0.1px, 500);
+}
+
+.font-text-5xl-bold {
+  @include typography-base(2rem, 1.2, -0.1px, 700);
+}
+
+/* Text 4XL */
+.font-text-4xl {
+  @include typography-base(1.75rem, 1.2, -0.1px, 400);
+}
+
+.font-text-4xl-medium {
+  @include typography-base(1.75rem, 1.2, -0.1px, 500);
+}
+
+.font-text-4xl-bold {
+  @include typography-base(1.75rem, 1.2, -0.1px, 700);
+}
+
+/* Text 3XL */
+.font-text-3xl {
+  @include typography-base(1.5rem, 1.2, -0.1px, 400);
+}
+
+.font-text-3xl-medium {
+  @include typography-base(1.5rem, 1.2, -0.1px, 500);
+}
+
+.font-text-3xl-bold {
+  @include typography-base(1.5rem, 1.2, -0.1px, 700);
+}
+
+/* Text 2XL */
+.font-text-2xl {
+  @include typography-base(1.375rem, 1.2, -0.1px, 400);
+}
+
+.font-text-2xl-medium {
+  @include typography-base(1.375rem, 1.2, -0.1px, 500);
+}
+
+.font-text-2xl-bold {
+  @include typography-base(1.375rem, 1.2, -0.1px, 700);
+}
+
+/* Text XL */
+.font-text-xl {
+  @include typography-base(1.25rem, 1.2, -0.1px, 400);
+}
+
+.font-text-xl-medium {
+  @include typography-base(1.25rem, 1.2, -0.1px, 500);
+}
+
+.font-text-xl-bold {
+  @include typography-base(1.25rem, 1.2, -0.1px, 700);
+}
+
+/* Text LG */
+.font-text-lg {
+  @include typography-base(1rem, 1.4, 0.25px, 400);
+}
+
+.font-text-lg-medium {
+  @include typography-base(1rem, 1.4, 0.25px, 500);
+}
+
+.font-text-lg-bold {
+  @include typography-base(1rem, 1.4, 0.25px, 700);
+}
+
+/* Text Base */
+.font-text-base {
+  @include typography-base(0.875rem, 1.4, 0.25px, 400);
+}
+
+.font-text-base-medium {
+  @include typography-base(0.875rem, 1.4, 0.25px, 500);
+}
+
+.font-text-base-bold {
+  @include typography-base(0.875rem, 1.4, 0.25px, 700);
+}
+
+/* Text SM */
+.font-text-sm {
+  @include typography-base(0.75rem, 1.4, 0.5px, 400);
+}
+
+.font-text-sm-medium {
+  @include typography-base(0.75rem, 1.4, 0.5px, 500);
+}
+
+.font-text-sm-bold {
+  @include typography-base(0.75rem, 1.4, 0.5px, 700);
+}
+
+/* Text XS */
+.font-text-xs {
+  @include typography-base(0.625rem, 1.4, 0.5px, 400);
+}
+
+.font-text-xs-medium {
+  @include typography-base(0.625rem, 1.4, 0.5px, 500);
+}
+
+.font-text-xs-bold {
+  @include typography-base(0.625rem, 1.4, 0.5px, 700);
+}

package/lib/styles/spacing.scss

@@ -0,0 +1,39 @@
+// ============================================
+// SPACING SCALE
+// ============================================
+
+// Spacing Scale - Modular spacing system
+$space-2: 2px;    // Use for small, compact components
+$space-4: 4px;    // Use for small, compact components
+$space-6: 6px;    // Use for small, compact components
+$space-8: 8px;    // Use for small, compact components
+$space-10: 10px;  // Use for small, compact components
+$space-12: 12px;  // Use for medium, less dense components
+$space-16: 16px;  // Use for larger components or dense layouts
+$space-20: 20px;  // Use for larger pieces of UI, patterns, or dense layouts
+$space-24: 24px;  // Use for larger pieces of UI, patterns, or layouts
+$space-32: 32px;  // Use for patterns or layouts
+$space-40: 40px;  // Use for patterns or layouts
+$space-48: 48px;  // Use for patterns or layouts with increased spacing
+$space-64: 64px;  // Use for layouts with increased spacing
+$space-80: 80px;  // Use for layouts with increased spacing
+
+// ============================================
+// CSS CUSTOM PROPERTIES
+// ============================================
+
+:root {
+  // Spacing Scale
+  --space-2: #{$space-2};
+  --space-4: #{$space-4};
+  --space-8: #{$space-8};
+  --space-12: #{$space-12};
+  --space-16: #{$space-16};
+  --space-20: #{$space-20};
+  --space-24: #{$space-24};
+  --space-32: #{$space-32};
+  --space-40: #{$space-40};
+  --space-48: #{$space-48};
+  --space-64: #{$space-64};
+  --space-80: #{$space-80};
+}

package/lib/styles/typography-classes.scss

@@ -0,0 +1,203 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+/* Import new typography classes globally so font-text-5xl etc. are available in all components */
+@import './new-typography.scss';
+@import './colors.scss';
+
+.font-display-large {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 57px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 64px;
+  /* 112.281% */
+  letter-spacing: -0.25px;
+}
+
+.font-display-medium {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 45px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 52px;
+  /* 115.556% */
+}
+
+.font-display-small {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 44px;
+  /* 122.222% */
+}
+
+.font-headline-large {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 40px;
+  /* 125% */
+}
+
+.font-headline-medium {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 36px;
+  /* 128.571% */
+}
+
+.font-headline-small {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px;
+  /* 133.333% */
+}
+
+.font-title-large {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  /* 127.273% */
+}
+
+.font-title-medium {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  /* 150% */
+  letter-spacing: 0.15px;
+}
+
+.font-title-small {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  /* 142.857% */
+  letter-spacing: 0.1px;
+}
+
+.font-label-large {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  /* 142.857% */
+  letter-spacing: 0.1px;
+}
+
+.font-label-medium {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 12px;
+  /* 100% */
+  letter-spacing: 0.5px;
+}
+
+.font-label-small {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 10px;
+  /* 100% */
+  letter-spacing: 0.5px;
+}
+
+.font-body-large {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  /* 150% */
+  letter-spacing: 0.5px;
+}
+
+.font-body-medium {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  /* 142.857% */
+  letter-spacing: 0.25px;
+}
+
+.font-body-small {
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  /* 133.333% */
+  letter-spacing: 0.4px;
+}
+
+/*
+  Utility classes requested by Certification Section and others.
+  Placed here so they are globally available, including in the
+  New Typography pages and all components that import this file.
+*/
+.typo-medium-700 {
+  color: var(--Greys-700, #4B4F62);
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 140%;
+  letter-spacing: 0.035px;
+}
+
+.typo-description {
+  color: var(--Greys-700, #4B4F62);
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.035px;
+}
+
+/* Simple color utility for grey-500 */
+.text-grey-500 {
+  color: $color-grey-500 !important;
+}
+
+/* Location text style - italic grey-600 */
+.font-location-text {
+  color: $color-grey-600;
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 16px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 140%;
+  /* 22.4px */
+  letter-spacing: 0.04px;
+}
+
+/* Job title / Course name style - bold grey-600 */
+.font-title-text {
+  color: $color-grey-600;
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 140%;
+  /* 22.4px */
+  letter-spacing: 0.04px;
+}

package/lib/utils/icon-utils.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Utility functions for handling Material Icons, including fallback logic
+ * for icons that don't have outlined versions and icons with different names
+ * for their outlined versions.
+ */
+/**
+ * Gets the effective icon name to use, considering outlined mappings.
+ * Some icons have different names for their outlined versions.
+ *
+ * @param iconName - The name of the Material Icon
+ * @param iconOutlined - Whether the outlined version is requested
+ * @returns The effective icon name to use
+ *
+ * @example
+ * getEffectiveIconName('favorite', true) // Returns 'favorite_border'
+ * getEffectiveIconName('favorite', false) // Returns 'favorite'
+ * getEffectiveIconName('star', true) // Returns 'star_border'
+ * getEffectiveIconName('visibility', true) // Returns 'visibility'
+ */
+export declare function getEffectiveIconName(iconName: string, iconOutlined: boolean): string;
+/**
+ * Determines the effective font set to use for a Material Icon.
+ *
+ * @param iconName - The name of the Material Icon
+ * @param iconOutlined - Whether the outlined version is requested
+ * @returns The font set to use: 'material-icons-outlined', 'material-icons', or 'material-symbols-outlined'
+ *
+ * @example
+ * getEffectiveFontSet('add', true) // Returns 'material-icons' (add has no outlined version)
+ * getEffectiveFontSet('visibility', true) // Returns 'material-icons-outlined' (if available)
+ * getEffectiveFontSet('favorite', true) // Returns 'material-icons' (uses favorite_border in material-icons)
+ * getEffectiveFontSet('network_node', false) // Returns 'material-symbols-outlined' (Material Symbols icon)
+ * getEffectiveFontSet('add', false) // Returns 'material-icons'
+ */
+export declare function getEffectiveFontSet(iconName: string, iconOutlined: boolean): string;
+/**
+ * Checks if an icon is known to have an outlined version available.
+ *
+ * @param iconName - The name of the Material Icon
+ * @returns true if the icon has an outlined version, false otherwise
+ */
+export declare function hasOutlinedVersion(iconName: string): boolean;
+/**
+ * Gets the effective iconOutlined value, considering whether the icon
+ * actually supports outlined versions.
+ *
+ * @param iconName - The name of the Material Icon
+ * @param iconOutlined - Whether the outlined version is requested
+ * @returns The effective iconOutlined value (may be false even if requested true)
+ */
+export declare function getEffectiveIconOutlined(iconName: string, iconOutlined: boolean): boolean;

package/lib/utils/image-utils.d.ts

@@ -0,0 +1,54 @@
+export declare const TABLE_ICONS: {
+    table: string;
+    'add-table': string;
+    'delete-table': string;
+    'column-left': string;
+    'column-right': string;
+    'row-top': string;
+    'row-bottom': string;
+    'delete-column': string;
+    'delete-row': string;
+};
+export declare const LEFT_AND_RIGHT_ICON_CONSTANTS: {
+    subrole: string;
+    subrole_active: string;
+    hide_section: string;
+    unhide_section: string;
+    edit_icon: string;
+    year_month_icon: string;
+    year_only_icon: string;
+    'delete-icon': string;
+    handle: string;
+    search: string;
+    'multi-drag-drop': string;
+    'subrole-icon-grey': string;
+};
+export declare const Candidate_Section_ICON: {
+    candidate_name: string;
+    candidate_gender: string;
+    candidate_phonenumber: string;
+    candidate_email: string;
+    candidate_linkedin: string;
+    candidate_address: string;
+    candidate_experience: string;
+    candidate_most_recent: string;
+};
+export declare const NewResume_Header_Component_ICON: {
+    'add-right_icon_section': string;
+    'add_left-icon_section': string;
+    font_case_icon: string;
+    retry_AI_icon: string;
+    ordering_icon: string;
+    collapse_icon: string;
+};
+/**
+ * Gets an icon from Candidate_Section_ICON and converts it to a data URL format
+ * that can be used with the field-placeholder component.
+ *
+ * @param iconKey - The key from Candidate_Section_ICON (e.g., 'candidate_name', 'candidate_email')
+ * @returns A data URL string for the SVG icon, or undefined if the key doesn't exist
+ *
+ * @example
+ * getIconCandidateSection('candidate_name') // Returns 'data:image/svg+xml;charset=utf-8,...'
+ */
+export declare function getIconCandidateSection(iconKey: keyof typeof Candidate_Section_ICON): string | undefined;

package/package.json

@@ -1,14 +1,26 @@
 {
   "name": "@allsorter/ui-components",
-  "version": "0.0.367",
+  "version": "0.0.370",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
-    "@angular/core": "^18.0.0"
+    "@angular/core": "^18.0.0",
+    "@angular/material": "^18.0.0",
+    "@angular/cdk": "^18.0.0"
   },
   "dependencies": {
-    "tslib": "^2.3.0"
+    "tslib": "^2.7.0"
   },
   "sideEffects": false,
+  "files": [
+    "fesm2022",
+    "lib",
+    "images",
+    "src",
+    "index.d.ts",
+    "public-api.d.ts",
+    "README.md",
+    "package.json"
+  ],
   "module": "fesm2022/allsorter-ui-components.mjs",
   "typings": "index.d.ts",
   "exports": {

package/public-api.d.ts

@@ -4,8 +4,6 @@ export * from './lib/button/button.component';
 export * from './lib/button/button.module';
 export * from './lib/input/input.component';
 export * from './lib/input/input.module';
-export * from './lib/resume-header/resume-header.component';
-export * from './lib/resume-header/resume-header.module';
 export * from './lib/newresumeheader/newresumeheader.component';
 export * from './lib/newresumeheader/newresumeheader.module';
 export * from './lib/loader/loader.component';
@@ -21,7 +19,6 @@ export * from './lib/toggle-buttons/toggle-buttons.module';
 export * from './lib/slide-toggle/slide-toggle.component';
 export * from './lib/slide-toggle/slide-toggle.module';
 export * from './lib/ai-apply-bar/ai-apply-bar.component';
-export * from './lib/action-bar-wrapper/action-bar-wrapper.component';
 export * from './lib/responsive-layout/responsive-layout.component';
 export * from './lib/responsive-layout/responsive-layout.module';
 export * from './lib/custom-editor/custom-editor.component';
@@ -37,6 +34,7 @@ export * from './lib/shared-popup-modal/shared-popup-modal.module';
 export * from './lib/tooltip/tooltip.component';
 export * from './lib/tooltip/tooltip.module';
 export * from './lib/new-typography/new-typography.component';
+export * from './lib/editable-form-wrapper/editable-form-wrapper.component';
 export * from './lib/field-placeholder/field-placeholder.component';
 export * from './lib/field-placeholder/field-placeholder.module';
 export * from './lib/responsive-columns/responsive-columns.component';
@@ -51,3 +49,5 @@ export * from './lib/app-toolbar/app-toolbar.component';
 export * from './lib/app-toolbar/app-toolbar.module';
 export * from './lib/app-toolbar-right/app-toolbar-right.component';
 export * from './lib/app-toolbar-right/app-toolbar-right.module';
+export * from './lib/side-action-bar-wrapper/side-action-bar-wrapper.component';
+export * from './lib/side-action-bar-wrapper/side-action-bar-wrapper.module';

package/src/lib/ai-apply-bar/ai-apply-bar.component.html

@@ -0,0 +1,43 @@
+<div class="ai-apply-wrap" [attr.data-test-id]="dataTestId">
+  <div class="ai-apply-rail">
+    <div class="ai-apply-row">
+      <div class="ai-apply-input">
+        <al-input 
+          [labelText]="''"
+          [placeholder]="placeholder" 
+          [value]="value" 
+          [type]="'text'" 
+          [disabled]="disabled" 
+          [helperText]="false"
+          [leftIcon]="''" 
+          [rightIcon]="'expand_more'" 
+          [hasDropDown]="true" 
+          [searchfilter]="true"
+          [multipleSelect]="false"
+          [options]="options" 
+          [size]="'base'"
+          [types]="'plain'" 
+          (change)="onValueChange($event)">
+        </al-input>
+      </div>
+
+      <div class="ai-apply-button">
+        <al-button [label]="applyLabel" [buttonType]="'icon-label'" [category]="'gradient'" [size]="'base'"
+          [state]="applyDisabled ? 'disabled' : 'default'" (onClick)="applyClick.emit()">
+        </al-button>
+        <al-icon-button *ngIf="showChevronButton" icon="chevron_right" [iconOutlined]="true" [customColour]="'#ffffff'"
+          [size]="'xl'" [disabled]="applyDisabled" (onClick)="chevronClick.emit()"
+          [dataTestId]="'icon-btn_Uwofs4q_3kWU'"></al-icon-button>
+      </div>
+    </div>
+
+    <div class="ai-apply-helper" *ngIf="showHelperText">
+      {{ helperText }}
+    </div>
+  </div>
+  <div class="ai-apply-close" *ngIf="showClose">
+    <al-button [iconOnly]="true" [buttonType]="'icon-circle'" [leftIcon]="'close'" [category]="'grey'" [size]="'base'"
+      (onClick)="closeClick.emit()">
+    </al-button>
+  </div>
+</div>