diff --git a/projects/design-angular-kit/src/lib/components/utils/text-transform/text-transform.directive.spec.ts b/projects/design-angular-kit/src/lib/components/utils/text-transform/text-transform.directive.spec.ts new file mode 100644 index 00000000..1bd5bdc4 --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/utils/text-transform/text-transform.directive.spec.ts @@ -0,0 +1,82 @@ +import { Component } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; +import { tb_base } from '../../../../test'; +import { ItTextTransformDirective } from './text-transform.directive'; + +@Component({ + selector: 'it-test-none', + standalone: true, + imports: [ItTextTransformDirective], + template: `
text
`, +}) +class NoneHost {} +@Component({ + selector: 'it-test-cap', + standalone: true, + imports: [ItTextTransformDirective], + template: `text
`, +}) +class CapHost {} +@Component({ + selector: 'it-test-upper', + standalone: true, + imports: [ItTextTransformDirective], + template: `text
`, +}) +class UpperHost {} +@Component({ + selector: 'it-test-lower', + standalone: true, + imports: [ItTextTransformDirective], + template: `text
`, +}) +class LowerHost {} + +describe('ItTextTransformDirective', () => { + it('should apply text-transform: none', () => { + TestBed.configureTestingModule({ ...tb_base, imports: [...(tb_base.imports || []), NoneHost] }); + const fix = TestBed.createComponent(NoneHost); + fix.detectChanges(); + const p = fix.nativeElement.querySelector('p') as HTMLParagraphElement; + expect(p.style.textTransform).toBe('none'); + }); + + it('should apply text-transform: capitalize', () => { + TestBed.configureTestingModule({ ...tb_base, imports: [...(tb_base.imports || []), CapHost] }); + const fix = TestBed.createComponent(CapHost); + fix.detectChanges(); + const p = fix.nativeElement.querySelector('p') as HTMLParagraphElement; + expect(p.style.textTransform).toBe('capitalize'); + }); + + it('should apply text-transform: uppercase', () => { + TestBed.configureTestingModule({ ...tb_base, imports: [...(tb_base.imports || []), UpperHost] }); + const fix = TestBed.createComponent(UpperHost); + fix.detectChanges(); + const p = fix.nativeElement.querySelector('p') as HTMLParagraphElement; + expect(p.style.textTransform).toBe('uppercase'); + }); + + it('should apply text-transform: lowercase', () => { + TestBed.configureTestingModule({ ...tb_base, imports: [...(tb_base.imports || []), LowerHost] }); + const fix = TestBed.createComponent(LowerHost); + fix.detectChanges(); + const p = fix.nativeElement.querySelector('p') as HTMLParagraphElement; + expect(p.style.textTransform).toBe('lowercase'); + }); + + it('should default to none when used without explicit value', () => { + @Component({ + selector: 'it-test-default', + standalone: true, + imports: [ItTextTransformDirective], + template: `text
`, + }) + class DefaultHost {} + TestBed.configureTestingModule({ ...tb_base, imports: [...(tb_base.imports || []), DefaultHost] }); + const fix = TestBed.createComponent(DefaultHost); + fix.detectChanges(); + const p = fix.nativeElement.querySelector('p') as HTMLParagraphElement; + expect(p.style.textTransform).toBe('none'); + }); +}); diff --git a/projects/design-angular-kit/src/lib/components/utils/text-transform/text-transform.directive.ts b/projects/design-angular-kit/src/lib/components/utils/text-transform/text-transform.directive.ts new file mode 100644 index 00000000..8df9dc88 --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/utils/text-transform/text-transform.directive.ts @@ -0,0 +1,28 @@ +import { Directive, HostBinding, Input } from '@angular/core'; + +export type TextTransformValue = 'none' | 'capitalize' | 'uppercase' | 'lowercase' | 'full-width' | 'full-size-kana'; + +/** + * Directive that applies a CSS `text-transform` value to the host element. + * + * Fills the gap where Bootstrap Italia provides `.text-lowercase`, `.text-uppercase`, + * and `.text-capitalize` utility classes but omits `.text-none`. + * + * @example + * ```html + *No transform applied
+ *UPPERCASED TEXT
+ * ``` + */ +@Directive({ + selector: '[itTextTransform]', + standalone: true, +}) +export class ItTextTransformDirective { + @Input('itTextTransform') value: TextTransformValue = 'none'; + + @HostBinding('style.text-transform') + get textTransform(): string { + return this.value || 'none'; + } +} diff --git a/projects/design-angular-kit/src/public_api.ts b/projects/design-angular-kit/src/public_api.ts index 344db7a6..d3e4c3b5 100644 --- a/projects/design-angular-kit/src/public_api.ts +++ b/projects/design-angular-kit/src/public_api.ts @@ -123,6 +123,7 @@ export * from './lib/components/navigation/skiplink/skiplink/skiplink.component' export * from './lib/components/utils/error-page/error-page.component'; export * from './lib/components/utils/icon/icon.component'; export * from './lib/components/utils/language-switcher/language-switcher.component'; +export * from './lib/components/utils/text-transform/text-transform.directive'; // Services export * from './lib/services/notification/notification.service';