Add label propery to FormCotrol

[kstepien3]

Form controls can use label propery.

readonly label = input<string>();
readonly id = input<string>(crypto.randomUUID(), { alias: 'for' }); // `id` or `inputId`? 

It wouldn't work in textarea. It probably needs more extra logic to dynamically render label next to the textarea component

Something like this might be nice:
https://stackoverflow.com/a/45085659

Expected behavior:

<zen-checkbox label="TEXT" />
<zen-input label="TEXT" />
<zen-switch label="TEXT" />
<textarea zen-textarea label="TEXT"></textarea>

[kstepien3]

Short ID codes instead of crypto.randomUUID()

function generateShortId(length = 4) {
  const array = new Uint8Array(length);
  crypto.getRandomValues(array);
  return Array.from(array, b => b.toString(16).padStart(2, '0')).join('');
}

// Przykład wywołania
new Array(10).fill(null).forEach(() => console.log(generateShortId()));

[kstepien3]

Short ID codes instead of crypto.randomUUID()

function generateShortId(length = 4) {
const array = new Uint8Array(length);
crypto.getRandomValues(array);
return Array.from(array, b => b.toString(16).padStart(2, '0')).join('');
}

// Przykład wywołania
new Array(10).fill(null).forEach(() => console.log(generateShortId()));

instead of generateShortId use static method to increase ID

Example:

ng-zen/src/schematics/ui/files/popover/popover.ts

Lines 51 to 58 in b4d80fb

	private static uniqueId = 0;
	/** Content to display inside the popover. Can be a `string` or a `TemplateRef`.*/
	readonly content = input.required<TemplateRef<unknown> | string>({ alias: 'zenPopover' });
	/** Placement of the popover relative to the trigger element. Defaults to `top`.*/
	readonly placement = input<PopoverPlacement>('top', { alias: 'zenPopoverPlacement' });
	/** The HTML id attribute is used to specify a unique id for an HTML element.*/
	readonly id = input<string>(`zen-popover-${ZenPopover.uniqueId++}`);