primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
191 lines (176 loc) • 7.93 kB
JavaScript
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-floatlabel {
display: block;
position: relative;
}
.p-floatlabel label {
position: absolute;
pointer-events: none;
top: 50%;
transform: translateY(-50%);
transition-property: all;
transition-timing-function: ease;
line-height: 1;
font-weight: ${dt('floatlabel.font.weight')};
inset-inline-start: ${dt('floatlabel.position.x')};
color: ${dt('floatlabel.color')};
transition-duration: ${dt('floatlabel.transition.duration')};
}
.p-floatlabel:has(.p-textarea) label {
top: ${dt('floatlabel.position.y')};
transform: translateY(0);
}
.p-floatlabel:has(.p-inputicon:first-child) label {
inset-inline-start: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
}
.p-floatlabel:has(.ng-invalid.ng-dirty) label {
color: ${dt('floatlabel.invalid.color')};
}
.p-floatlabel:has(input:focus) label,
.p-floatlabel:has(input.p-filled) label,
.p-floatlabel:has(input:-webkit-autofill) label,
.p-floatlabel:has(textarea:focus) label,
.p-floatlabel:has(textarea.p-filled) label,
.p-floatlabel:has(.p-inputwrapper-focus) label,
.p-floatlabel:has(.p-inputwrapper-filled) label {
top: ${dt('floatlabel.over.active.top')};
transform: translateY(0);
font-size: ${dt('floatlabel.active.font.size')};
font-weight: ${dt('floatlabel.label.active.font.weight')};
}
.p-floatlabel:has(input.p-filled) label,
.p-floatlabel:has(textarea.p-filled) label,
.p-floatlabel:has(.p-inputwrapper-filled) label {
color: ${dt('floatlabel.active.color')};
}
.p-floatlabel:has(input:focus) label,
.p-floatlabel:has(input:-webkit-autofill) label,
.p-floatlabel:has(textarea:focus) label,
.p-floatlabel:has(.p-inputwrapper-focus) label {
color: ${dt('floatlabel.focus.color')};
}
.p-floatlabel-in .p-inputtext,
.p-floatlabel-in .p-textarea,
.p-floatlabel-in .p-select-label,
.p-floatlabel-in .p-multiselect-label-container,
.p-floatlabel-in .p-autocomplete-input-multiple,
.p-floatlabel-in .p-cascadeselect-label,
.p-floatlabel-in .p-treeselect-label {
padding-top: ${dt('floatlabel.in.input.padding.top')};
}
.p-floatlabel-in:has(input:focus) label,
.p-floatlabel-in:has(input.p-filled) label,
.p-floatlabel-in:has(input:-webkit-autofill) label,
.p-floatlabel-in:has(textarea:focus) label,
.p-floatlabel-in:has(textarea.p-filled) label,
.p-floatlabel-in:has(.p-inputwrapper-focus) label,
.p-floatlabel-in:has(.p-inputwrapper-filled) label {
top: ${dt('floatlabel.in.active.top')};
}
.p-floatlabel-on:has(input:focus) label,
.p-floatlabel-on:has(input.p-filled) label,
.p-floatlabel-on:has(input:-webkit-autofill) label,
.p-floatlabel-on:has(textarea:focus) label,
.p-floatlabel-on:has(textarea.p-filled) label,
.p-floatlabel-on:has(.p-inputwrapper-focus) label,
.p-floatlabel-on:has(.p-inputwrapper-filled) label {
top: 0;
transform: translateY(-50%);
border-radius: ${dt('floatlabel.on.border.radius')};
background: ${dt('floatlabel.on.active.background')};
padding: ${dt('floatlabel.on.active.padding')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-floatlabel',
{
'p-floatlabel-over': props.variant === 'over',
'p-floatlabel-on': props.variant === 'on',
'p-floatlabel-in': props.variant === 'in'
}
]
};
class FloatLabelStyle extends BaseStyle {
name = 'floatlabel';
theme = theme;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FloatLabelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FloatLabelStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FloatLabelStyle, decorators: [{
type: Injectable
}] });
/**
*
* FloatLabel visually integrates a label with its form element.
*
* [Live Demo](https://www.primeng.org/floatlabel/)
*
* @module floatlabelstyle
*
*/
var FloatLabelClasses;
(function (FloatLabelClasses) {
/**
* Class name of the root element
*/
FloatLabelClasses["root"] = "p-floatlabel";
})(FloatLabelClasses || (FloatLabelClasses = {}));
/**
* FloatLabel appears on top of the input field when focused.
* @group Components
*/
class FloatLabel extends BaseComponent {
_componentStyle = inject(FloatLabelStyle);
/**
* Defines the positioning of the label relative to the input.
* @group Props
*/
variant = 'over';
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FloatLabel, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: FloatLabel, isStandalone: true, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: { variant: "variant" }, host: { properties: { "class.p-floatlabel": "true", "class.p-floatlabel-over": "variant === 'over'", "class.p-floatlabel-on": "variant === 'on'", "class.p-floatlabel-in": "variant === 'in'" } }, providers: [FloatLabelStyle], usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FloatLabel, decorators: [{
type: Component,
args: [{
selector: 'p-floatlabel, p-floatLabel, p-float-label',
standalone: true,
imports: [CommonModule, SharedModule],
template: ` <ng-content></ng-content> `,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [FloatLabelStyle],
host: {
'[class.p-floatlabel]': 'true',
'[class.p-floatlabel-over]': "variant === 'over'",
'[class.p-floatlabel-on]': "variant === 'on'",
'[class.p-floatlabel-in]': "variant === 'in'"
}
}]
}], propDecorators: { variant: [{
type: Input
}] } });
class FloatLabelModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FloatLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: FloatLabelModule, imports: [FloatLabel, SharedModule], exports: [FloatLabel, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FloatLabelModule, imports: [FloatLabel, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FloatLabelModule, decorators: [{
type: NgModule,
args: [{
imports: [FloatLabel, SharedModule],
exports: [FloatLabel, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { FloatLabel, FloatLabelClasses, FloatLabelModule, FloatLabelStyle };
//# sourceMappingURL=primeng-floatlabel.mjs.map