Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LF 18.2 #2998

Merged
merged 84 commits into from
Aug 22, 2024
Merged

LF 18.2 #2998

Changes from 1 commit
Commits
Show all changes
84 commits
Select commit Hold shift + click to select a range
c0b6fb7
Merge pull request #2873 from LuccaSA/18.1-update-rc
jeremie-lucca Jun 19, 2024
49f1781
feat(numberFormat): models, functions, pipe, directive, formField for…
guillerot Jun 6, 2024
a0204c5
feat(numberFormat): handle single minusSign in directive input event
guillerot Jun 6, 2024
22bf42c
feat(numberFormat): cleanup input event listener
guillerot Jun 6, 2024
0ca63e9
feat(numberFormat): based on "Intl number input" library
guillerot Jun 7, 2024
66cc943
feat(numberFormat): based on "Intl number input" library
guillerot Jun 10, 2024
50d83b1
feat(numberFormat): remove autoDecimalDigits & AutoDecimalDigitsNumbe…
guillerot Jun 10, 2024
92eaafe
feat(numberFormat): refacto number-format models, directive and input…
guillerot Jun 11, 2024
e2714f1
feat(numberFormat): fix build
guillerot Jun 11, 2024
1ede444
feat(numberFormat): add min/max
guillerot Jun 12, 2024
3f028b5
feat(numberFormat): add stories for currency/unit/percent
guillerot Jun 12, 2024
c2bf34f
feat(numberFormat): fix division on percent value
guillerot Jun 12, 2024
7279bab
feat(numberFormat): refacto
guillerot Jun 12, 2024
8c20080
test(numberFormat): parse
guillerot Jun 12, 2024
4361fdb
test(numberFormat): suffix and prefix
guillerot Jun 12, 2024
f4856a1
feat(numberFormat): auto suffix and prefix are not used by default
guillerot Jun 16, 2024
1290c88
test(numberFormat): test focus and blur format
guillerot Jun 16, 2024
e337f51
Merge pull request #2899 from LuccaSA/update.rc.18.1.1
jeremie-lucca Jun 28, 2024
c207399
fix(numberFormat): min max behave differently for percent values
guillerot Jun 28, 2024
2d3e789
Story settings
jeremie-lucca Jun 28, 2024
dfddda8
fix(numberFormat): should use minus sign instead of hyphen for negati…
guillerot Jun 28, 2024
9f4a405
Merge remote-tracking branch 'origin/feat/number-format-field' into f…
guillerot Jun 28, 2024
aa32410
Merge pull request #2847 from LuccaSA/feat/number-format-field
guillerot Jun 28, 2024
329079c
feat: move all translations to Lokalise
GuillaumeNury Jul 8, 2024
fe89ba3
ref(ng): use wider LuTranslation type and deprecate ILuTranslation
GuillaumeNury Jul 9, 2024
80e251b
ref(ng): remove formatDay as it is not translatable
GuillaumeNury Jul 9, 2024
41cbb70
chore(ng): update translations
GuillaumeNury Jul 9, 2024
86ed668
chore(ng): update translations
GuillaumeNury Jul 9, 2024
a030f3d
fix(ng): wrong post-i18n prettify
GuillaumeNury Jul 9, 2024
61983e0
rem(ng): unused translation file
GuillaumeNury Jul 9, 2024
d2dd556
fix(ng): missing translation token exports
GuillaumeNury Jul 9, 2024
9c7ec8c
fix(ng): wrong LuTranslation import
GuillaumeNury Jul 9, 2024
d1b64e1
ref(ng): remove useless fr-CH overrides
GuillaumeNury Jul 9, 2024
4c6d57e
feat(storybook): setup LOCALE_ID with browser language
GuillaumeNury Jul 9, 2024
183d953
Merge pull request #2919 from LuccaSA/feat/lokalise
GuillaumeNury Jul 9, 2024
9e9cce5
feat(time-picker): AM/PM support (#2888)
Supamiu Jul 12, 2024
9c8aa69
Back button for page header (#2948)
vvalentin-lucca Jul 15, 2024
97ce9cc
fix(date): date adapter format should not be overriden
GuillaumeNury Jul 19, 2024
95a17ae
Merge pull request #2971 from LuccaSA/fix/formatDate
GuillaumeNury Jul 19, 2024
d8d98a1
chore(ng): update translations
GuillaumeNury Jul 19, 2024
dc39b87
Merge pull request #2973 from LuccaSA/chore/lokalise
GuillaumeNury Jul 22, 2024
7f4c5e3
[Icons] Add medical + arrow line (#2975)
vvalentin-lucca Jul 22, 2024
a5097a8
Merge remote-tracking branch 'origin/rc' into 18.1.2.master
GuillaumeNury Jul 23, 2024
2b11958
Merge pull request #2978 from LuccaSA/18.1.2.master
jeremie-lucca Jul 23, 2024
35dea92
Update icons (#2979)
jeremie-lucca Jul 23, 2024
5307f3d
[Status badge] Fix vertical alignement in tables (#2986)
jeremie-lucca Jul 25, 2024
409a44e
Add option luTooltipOnlyForDisplay for tooltips (#2974)
vvalentin-lucca Jul 25, 2024
5391fd3
Replace title with heading (#2946)
vvalentin-lucca Jul 25, 2024
6e94cc9
Merge pull request #2987 from LuccaSA/18.1.3-master2rc
GuillaumeNury Jul 25, 2024
56ba4c3
feat(popover2): hover+focus trigger mode (#2895)
Supamiu Jul 25, 2024
69d12b5
columnSticky is deprecated (#2928)
vvalentin-lucca Jul 25, 2024
811c317
feat(plgPush): add new component and all stories (#2911)
nbrun-lucca Jul 26, 2024
2b1075d
feat(schematics): add empty-state-heading migration (#2955)
GuillaumeNury Jul 29, 2024
c817fbe
Fix footer on dialogs with Safari (#2933)
vvalentin-lucca Jul 29, 2024
dd76138
Deprecated for black and white – Add neutral 0 (#2921)
vvalentin-lucca Jul 29, 2024
b597257
Remove tooltip generated by Safari desktop (#2958)
vvalentin-lucca Jul 30, 2024
91dd6e7
Show index table link (#2838)
vvalentin-lucca Jul 30, 2024
9ecaa3f
Change disabled colors (#2966)
vvalentin-lucca Jul 30, 2024
4c9fc3b
docs(radio-input): add base usage docs (#2922)
Supamiu Jul 31, 2024
2ff08cb
Toast position when footer is present (#2916)
vvalentin-lucca Aug 1, 2024
46366e9
New component: viewTabs (#2498)
vvalentin-lucca Aug 1, 2024
a9a49d9
fix(core-select): fix former employees param for users core select
lukah Aug 2, 2024
38f6606
Merge pull request #2997 from LuccaSA/fix/core.select.users.former.em…
lukah Aug 2, 2024
94f185d
feat(popover2): handled popover2 resize after content changed (#2991)
obraud Aug 5, 2024
da0438e
fix(story): dialog story not opening with focus set to first-input (#…
Supamiu Aug 6, 2024
dd35ab1
Merge branch 'rc' into 18.1.4-master2rc
jeremie-lucca Aug 6, 2024
b257dec
Merge pull request #3008 from LuccaSA/18.1.4-master2rc
jeremie-lucca Aug 6, 2024
dda17e2
[Page header] Component padding (#3012)
jeremie-lucca Aug 7, 2024
1766f0a
feat(dialog-routing): Open dialog through routes (#2901)
guillerot Aug 8, 2024
0b0e564
i18n-text-input (#2890)
vvalentin-lucca Aug 16, 2024
9b618b3
[Divider] Fix margins & icon color (#3018)
jeremie-lucca Aug 19, 2024
a69b1c8
indexTable sortable (#2858)
vvalentin-lucca Aug 19, 2024
22716b6
[User tile] Move NG style in CSS package (#2940)
jeremie-lucca Aug 20, 2024
dc0da55
[Avatar] Move style in SCSS (#3015)
jeremie-lucca Aug 20, 2024
626dcc0
fix(lu-form-field): aria-labelledby sometimes filling with label id a…
Supamiu Aug 20, 2024
57253b7
[Popover2] Add option to remove keyboard close button (#3027)
jeremie-lucca Aug 20, 2024
013a21c
[DurationPicker] Fix legend (#3026)
vvalentin-lucca Aug 20, 2024
2fc526b
Replace absolute position with grid (#2935)
vvalentin-lucca Aug 20, 2024
8aeaf0c
ref(core-select)!: optionKey is mandatory on ApiDirectives (#2950)
GuillaumeNury Aug 21, 2024
5b72579
feat(forms): new phone number input component (#3022)
Supamiu Aug 21, 2024
cb9663a
InlineMessage with PortalContent (#2947)
vvalentin-lucca Aug 21, 2024
5e1fe38
Fix indexTable, checkbox-radio, tableSortable (#3028)
vvalentin-lucca Aug 22, 2024
4464154
fix conflicts
jeremie-lucca Aug 22, 2024
27b7da2
Merge pull request #3029 from LuccaSA/18.2fixconflits
jeremie-lucca Aug 22, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
i18n-text-input (#2890)
* i18n-text-input

* feat(i18n-text-input): add model manipulation and CVA

* chore(i18n-text-input): better Intl implementation

* chore(i18n-text-input): remove cultureName from story

* chore(i18n-text-input): performance improvements

* rename component

* feat(multilanguage-input): new validator and check functions

* feat(multilanguage-input): support disabled state

* fix conflict

* chore(multilanguage-input): migrate structure to localize and add tooltip on button

* chore(multilanguage-input): put tooltip on button not icon

* fix optional classes

* fix lint error

* fix lint error

* remove size applied by default

* Icon size with mod-S

* Update docs/dialog.md

Co-authored-by: Fabien Basmaison <144820795+fbasmaison-lucca@users.noreply.github.com>

* Update packages/ng/forms/multilanguage-input/multilanguage-input.component.scss

Co-authored-by: Fabien Basmaison <144820795+fbasmaison-lucca@users.noreply.github.com>

---------

Co-authored-by: Flavien Normand <contact@flavien-normand.fr>
Co-authored-by: Jérémie Biron <jbiron@luccasoftware.com>
Co-authored-by: Fabien Basmaison <144820795+fbasmaison-lucca@users.noreply.github.com>
  • Loading branch information
4 people authored Aug 16, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 0b0e56471dfad77ef720793251d290fdd8f67c6c
4 changes: 2 additions & 2 deletions docs/dialog.md
Original file line number Diff line number Diff line change
@@ -177,14 +177,14 @@ la dialog box a accès à tout ce que le composant expose au template, fonctions

## Utilisation des formulaires

Dans le cas où vous souhaitez utiliser un formulaire au sein d’une dialog box, il vous suffit de placer la balise `form` avec une classe `dialog-formOptionnal` autour du contenu de votre dialog, que celle-ci soit template-driven ou non:
Dans le cas où vous souhaitez utiliser un formulaire au sein d’une [dialog box](https://prisme.lucca.io/94310e217/p/841b0b-dialogs), il vous suffit de placer la balise `form` avec une classe `dialog-formOptional` autour du contenu de votre dialog, que celle-ci soit template-driven ou non :

```html
<lu-dialog>
<!--form = new FormGroup({
example: new FormControl('', Validators.required)
})-->
<form [formControl]="form" class="dialog-formOptionnal">
<form [formGroup]="form" class="dialog-formOptional">
<lu-dialog-header>Header with Form inside</lu-dialog-header>

<lu-dialog-content>
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export interface MultilanguageTranslation {
cultureCode: string;
value: string;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<div class="textField">
<div class="textField-input">
<input
luInput
type="text"
class="textField-input-value"
[placeholder]="placeholder()"
[(ngModel)]="invariant().value"
(ngModelChange)="valueChange()"
(blur)="onTouched?.()"
[disabled]="disabledInternal()"
#inputElement
/>
<div class="textField-input-affix">
<button
[luPopover2]="popoverMultilanguage"
[customPositions]="popoverPositions"
[luTooltip]="intl.toggleMultilanguage"
type="button"
class="button mod-onlyIcon mod-text textField-input-affix-toggle"
>
<span aria-hidden="true" class="lucca-icon icon-signTranslation"></span>
</button>
<ng-template #popoverMultilanguage>
<div class="popover-contentOptional" [style.width.px]="inputElement.clientWidth + 16">
<div class="u-displayFlex u-gapXS u-flexDirectionColumn">
@for (row of panelInputs(); track row.cultureCode) {
<lu-form-field [label]="intl.translateTo | intlParams: {lang: getLocaleDisplayName(row.cultureCode)}" hiddenLabel>
<lu-text-input
[suffix]="{content: row.cultureCode, ariaLabel: ''}"
[(ngModel)]="row.value"
(ngModelChange)="valueChange()"
[disabled]="disabledInternal()"
></lu-text-input>
</lu-form-field>
}
</div>
</div>
</ng-template>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@use '@lucca-front/scss/src/commons/utils/a11y';

.popover-contentOptional {
padding: var(--pr-t-spacings-100) !important;
max-height: 20rem;
overflow: auto;

&:focus-visible {
@include a11y.focusVisible;

border-radius: var(--commons-borderRadius-L);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
import { ConnectionPositionPair } from '@angular/cdk/overlay';
import { NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, LOCALE_ID, signal, ViewEncapsulation, WritableSignal } from '@angular/core';
import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { getIntl, IntlParamsPipe } from '@lucca-front/ng/core';
import { FormFieldComponent, InputDirective } from '@lucca-front/ng/form-field';
import { PopoverDirective } from '@lucca-front/ng/popover2';
import { FormFieldIdDirective } from '../form-field-id.directive';
import { TextInputComponent } from '../text-input/text-input.component';
import { LU_MULTILANGUAGE_INPUT_TRANSLATIONS } from './multilanguage-input.translate';
import { MultilanguageTranslation } from './model/multilanguage-translation';
import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';

@Component({
selector: 'lu-multilanguage-input',
standalone: true,
imports: [
FormFieldComponent,
ReactiveFormsModule,
FormFieldIdDirective,
NgTemplateOutlet,
PopoverDirective,
TextInputComponent,
FormFieldComponent,
FormsModule,
InputDirective,
IntlParamsPipe,
LuTooltipTriggerDirective,
],
templateUrl: './multilanguage-input.component.html',
styleUrl: './multilanguage-input.component.scss',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MultilanguageInputComponent),
multi: true,
},
],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MultilanguageInputComponent implements ControlValueAccessor {
#localeId = inject(LOCALE_ID);

#intlDisplay = new Intl.DisplayNames([this.#localeId], { type: 'language' });

intl = getIntl(LU_MULTILANGUAGE_INPUT_TRANSLATIONS);

protected onTouched = () => {};

protected onChange = (_value: MultilanguageTranslation[]) => {};

placeholder = input('');

// Suffixed with Internal to avoid conflict with NgModel's disabled attribute
disabledInternal = signal(false);

model: WritableSignal<MultilanguageTranslation[]> = signal([] as MultilanguageTranslation[]);

invariant = computed(() => {
return this.model().find((row) => row.cultureCode === 'invariant') || { value: '' };
});

panelInputs = computed(() => {
return this.model().filter((row) => row.cultureCode !== 'invariant');
});

popoverPositions: ConnectionPositionPair[] = [
new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' }, 16, 6),
new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }, 16, -6),
];

getLocaleDisplayName(locale: string): string {
return this.#intlDisplay.of(locale);
}

writeValue(value: MultilanguageTranslation[]): void {
if (!value) {
value = [];
}
if (value.length > 0) {
if (!value.some((row) => row.cultureCode === 'invariant')) {
throw new Error('Please provide an invariant translation in translation array');
}
this.model.set(value);
}
}

registerOnChange(fn: (value: MultilanguageTranslation[]) => void): void {
this.onChange = fn;
}

registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}

setDisabledState?(isDisabled: boolean): void {
this.disabledInternal.set(isDisabled);
}

valueChange(): void {
this.onChange?.(this.model());
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { InjectionToken } from '@angular/core';
import { LuTranslation } from '@lucca-front/ng/core';
import { Translations } from './translations';

export interface LuMultilanguageInputTranslations {
clear: string;
toggleMultilanguage: string;
translateTo: string;
}

export const LU_MULTILANGUAGE_INPUT_TRANSLATIONS = new InjectionToken('LuMultilanguageInputTranslations', {
factory: () => Translations as LuTranslation<LuMultilanguageInputTranslations>,
});
12 changes: 12 additions & 0 deletions packages/ng/forms/multilanguage-input/translations.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export const Translations = {
en: {
clear: 'Empty this field',
toggleMultilanguage: 'Show translations',
translateTo: 'Translate to {{lang}}',
},
fr: {
clear: 'Vider ce champ',
toggleMultilanguage: 'Afficher les traductions',
translateTo: 'Traduire en {{lang}}',
},
};
10 changes: 10 additions & 0 deletions packages/ng/forms/multilanguage-input/validators.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { MultilanguageTranslation } from './model/multilanguage-translation';
import { AbstractControl, ValidatorFn } from '@angular/forms';

export function areAllLanguagesFilled(model: MultilanguageTranslation[]): boolean {
return model.every((row) => row.value?.length > 0);
}

export const MultiLanguageInputValidators: Record<string, ValidatorFn> = {
allLanguagesFilled: (control: AbstractControl<MultilanguageTranslation[]>) => (areAllLanguagesFilled(control.value) ? null : { missingLang: true }),
};
13 changes: 8 additions & 5 deletions packages/ng/forms/public-api.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
export * from './noop-value-accessor.directive';
export * from './inject-ng-control';
export * from './form-field-id.directive';
export * from './inject-ng-control';
export * from './noop-value-accessor.directive';

export * from './text-input/text-input.component';
export * from './number-format-input/number-format-input.component';
export * from './number-input/number-input.component';
export * from './checkbox-input/checkbox-input.component';
export * from './switch-input/switch-input.component';
export * from './multilanguage-input/multilanguage-input.component';
export * from './multilanguage-input/model/multilanguage-translation';
export * from './multilanguage-input/validators';
export * from './number-input/number-input.component';
export * from './radio-group-input/radio-group-input.component';
export * from './radio-group-input/radio/radio.component';
export * from './switch-input/switch-input.component';
export * from './text-input/text-input.component';
export * from './textarea-input/textarea-input.component';

export * from './number-input/number-input.translate';
3 changes: 2 additions & 1 deletion packages/ng/forms/text-input/text-input.component.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<div class="textField" [class.mod-valueAlignRight]="valueAlignRight">
<ng-template #textfieldAddon let-addon="addon" let-type="type">
<span class="textField-{{type}}" luFormFieldId="{{type}}" *ngIf="addon.content">
<span class="textField-label-{{type}}-item" [attr.aria-label]="addon.ariaLabel">{{ addon.content }}</span>
<span class="textField-label-{{type}}-item" aria-hidden="true">{{ addon.content }}</span>
<span class="u-mask">{{ addon.ariaLabel }}</span>
</span>
<span class="textField-{{type}}" luFormFieldId="{{type}}" *ngIf="addon.icon">
<span class="textField-label-{{type}}-item" [attr.aria-label]="addon.ariaLabel"
2 changes: 1 addition & 1 deletion packages/scss/src/components/dialog/component.scss
Original file line number Diff line number Diff line change
@@ -63,7 +63,7 @@

@at-root ($atRoot) {
// .dialog-form is deprecated
.dialog-formOptionnal,
.dialog-formOptional,
.dialog-form,
.dialog-inside {
display: flex;
15 changes: 15 additions & 0 deletions packages/scss/src/components/popover/component.scss
Original file line number Diff line number Diff line change
@@ -13,7 +13,22 @@

// need of a higher specificity
.popover-close {
@include button.outlined;
@include button.XS;
@include button.onlyIconXS;

--components-button-padding: var(--pr-t-spacings-50);

padding: 0;
border-radius: 50%;
position: absolute;
left: calc(var(--pr-t-spacings-100) * -1);
top: calc(var(--pr-t-spacings-100) * -1);
z-index: 2;

&:not(:focus-visible) {
@include a11y.mask;
}
}

@at-root {
17 changes: 9 additions & 8 deletions packages/scss/src/components/textField/component.scss
Original file line number Diff line number Diff line change
@@ -14,6 +14,13 @@
@include a11y.focusVisible($offset: 3px);
}

.textField-input-affix-toggle {
pointer-events: auto;
width: var(--component-textField-affix-size);
height: var(--component-textField-affix-size);
color: var(--palettes-neutral-600);
}

@at-root ($atRoot) {
.textField-input {
display: flex;
@@ -31,7 +38,7 @@
--component-textField-affix-padding: 2.5rem;
}

&:has(.textField-input-affix-passwordToggle) {
&:has(.textField-input-affix-toggle) {
--component-textField-affix-padding: 3rem;
}

@@ -42,7 +49,7 @@
--component-textField-affix-padding: 4rem;
}

&:has(.textField-input-affix-passwordToggle) {
&:has(.textField-input-affix-toggle) {
--component-textField-affix-padding: 4.5rem;
}
}
@@ -92,12 +99,6 @@
pointer-events: auto;
}

.textField-input-affix-passwordToggle {
pointer-events: auto;
width: 1.75rem;
height: 1.75rem;
}

.textField-prefix {
display: flex;
padding-left: var(--component-textField-padding);
5 changes: 5 additions & 0 deletions packages/scss/src/components/textField/mods.scss
Original file line number Diff line number Diff line change
@@ -5,6 +5,11 @@
--component-textField-fontSize: var(--sizes-S-fontSize);
--component-textField-lineHeight: var(--sizes-S-lineHeight);
--component-textField-padding: var(--pr-t-spacings-75);
--component-textField-affix-size: 1.5rem;

.textField-input-affix-toggle {
@include icon.S;
}

.textField-input-affix-clear {
@include clear.S;
1 change: 1 addition & 0 deletions packages/scss/src/components/textField/vars.scss
Original file line number Diff line number Diff line change
@@ -8,4 +8,5 @@
--component-textField-prefix-color: var(--palettes-neutral-600);
--component-textField-padding: var(--pr-t-spacings-100);
--component-textField-affix-padding: var(--component-textField-padding);
--component-textField-affix-size: 1.75rem;
}
Loading