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
251 lines (233 loc) • 11 kB
JavaScript
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, HostBinding, 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-divider-horizontal {
display: flex;
width: 100%;
position: relative;
align-items: center;
margin: ${dt('divider.horizontal.margin')};
padding: ${dt('divider.horizontal.padding')};
}
.p-divider-horizontal:before {
position: absolute;
display: block;
inset-block-start: 50%;
inset-inline-start: 0;
width: 100%;
content: "";
border-block-start: 1px solid ${dt('divider.border.color')};
}
.p-divider-horizontal .p-divider-content {
padding: ${dt('divider.horizontal.content.padding')};
}
.p-divider-vertical {
min-height: 100%;
display: flex;
position: relative;
justify-content: center;
margin: ${dt('divider.vertical.margin')};
padding: ${dt('divider.vertical.padding')};
}
.p-divider-vertical:before {
position: absolute;
display: block;
inset-block-start: 0;
inset-inline-start: 50%;
height: 100%;
content: "";
border-inline-start: 1px solid ${dt('divider.border.color')};
}
.p-divider.p-divider-vertical .p-divider-content {
padding: ${dt('divider.vertical.content.padding')};
}
.p-divider-content {
z-index: 1;
background: ${dt('divider.content.background')};
color: ${dt('divider.content.color')};
}
.p-divider-solid.p-divider-horizontal:before {
border-block-start-style: solid;
}
.p-divider-solid.p-divider-vertical:before {
border-inline-start-style: solid;
}
.p-divider-dashed.p-divider-horizontal:before {
border-block-start-style: dashed;
}
.p-divider-dashed.p-divider-vertical:before {
border-inline-start-style: dashed;
}
.p-divider-dotted.p-divider-horizontal:before {
border-block-start-style: dotted;
}
.p-divider-dotted.p-divider-vertical:before {
border-inline-start-style: dotted;
}
.p-divider-left:dir(rtl),
.p-divider-right:dir(rtl) {
flex-direction: row-reverse;
}
`;
/* Position */
const inlineStyles = {
root: ({ props }) => ({
justifyContent: props.layout === 'horizontal' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : null) : null,
alignItems: props.layout === 'vertical' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'top' ? 'flex-start' : props.align === 'bottom' ? 'flex-end' : null) : null
})
};
const classes = {
root: ({ props }) => [
'p-divider p-component',
'p-divider-' + props.layout,
'p-divider-' + props.type,
{ 'p-divider-left': props.layout === 'horizontal' && (!props.align || props.align === 'left') },
{ 'p-divider-center': props.layout === 'horizontal' && props.align === 'center' },
{ 'p-divider-right': props.layout === 'horizontal' && props.align === 'right' },
{ 'p-divider-top': props.layout === 'vertical' && props.align === 'top' },
{ 'p-divider-center': props.layout === 'vertical' && (!props.align || props.align === 'center') },
{ 'p-divider-bottom': props.layout === 'vertical' && props.align === 'bottom' }
],
content: 'p-divider-content'
};
class DividerStyle extends BaseStyle {
name = 'divider';
theme = theme;
classes = classes;
inlineStyles = inlineStyles;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DividerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DividerStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DividerStyle, decorators: [{
type: Injectable
}] });
/**
*
* Divider is used to separate contents.
*
* [Live Demo](https://primeng.org/divider)
*
* @module dividerstyle
*
*/
var DividerClasses;
(function (DividerClasses) {
/**
* Class name of the root element
*/
DividerClasses["root"] = "p-divider";
/**
* Class name of the content element
*/
DividerClasses["content"] = "p-divider-content";
})(DividerClasses || (DividerClasses = {}));
/**
* Divider is used to separate contents.
* @group Components
*/
class Divider extends BaseComponent {
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @group Props
*/
styleClass;
/**
* Specifies the orientation.
* @group Props
*/
layout = 'horizontal';
/**
* Border style type.
* @group Props
*/
type = 'solid';
/**
* Alignment of the content.
* @group Props
*/
align;
_componentStyle = inject(DividerStyle);
get hostClass() {
return this.styleClass;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Divider, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: Divider, isStandalone: true, selector: "p-divider", inputs: { style: "style", styleClass: "styleClass", layout: "layout", type: "type", align: "align" }, host: { properties: { "class.p-divider": "true", "class.p-component": "true", "class.p-divider-horizontal": "layout === \"horizontal\"", "class.p-divider-vertical": "layout === \"vertical\"", "class.p-divider-solid": "type === \"solid\"", "class.p-divider-dashed": "type === \"dashed\"", "class.p-divider-dotted": "type === \"dotted\"", "class.p-divider-left": "layout === \"horizontal\" && (!align || align === \"left\")", "class.p-divider-center": "(layout === \"horizontal\" && align === \"center\") || (layout === \"vertical\" && (!align || align === \"center\"))", "class.p-divider-right": "layout === \"horizontal\" && align === \"right\"", "class.p-divider-top": "layout === \"vertical\" && align === \"top\"", "class.p-divider-bottom": "layout === \"vertical\" && align === \"bottom\"", "attr.aria-orientation": "layout", "attr.data-pc-name": "'divider'", "attr.role": "\"separator\"", "style.justifyContent": "layout === \"horizontal\" ? (align === \"center\" || align === undefined ? \"center\" : (align === \"left\" ? \"flex-start\" : (align === \"right\" ? \"flex-end\" : null))) : null", "style.alignItems": "layout === \"vertical\" ? (align === \"center\" || align === undefined ? \"center\" : (align === \"top\" ? \"flex-start\" : (align === \"bottom\" ? \"flex-end\" : null))) : null", "class": "this.hostClass" } }, providers: [DividerStyle], usesInheritance: true, ngImport: i0, template: `
<div class="p-divider-content">
<ng-content></ng-content>
</div>
`, 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.2", ngImport: i0, type: Divider, decorators: [{
type: Component,
args: [{
selector: 'p-divider',
standalone: true,
imports: [CommonModule, SharedModule],
template: `
<div class="p-divider-content">
<ng-content></ng-content>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class.p-divider]': 'true',
'[class.p-component]': 'true',
'[class.p-divider-horizontal]': 'layout === "horizontal"',
'[class.p-divider-vertical]': 'layout === "vertical"',
'[class.p-divider-solid]': 'type === "solid"',
'[class.p-divider-dashed]': 'type === "dashed"',
'[class.p-divider-dotted]': 'type === "dotted"',
'[class.p-divider-left]': 'layout === "horizontal" && (!align || align === "left")',
'[class.p-divider-center]': '(layout === "horizontal" && align === "center") || (layout === "vertical" && (!align || align === "center"))',
'[class.p-divider-right]': 'layout === "horizontal" && align === "right"',
'[class.p-divider-top]': 'layout === "vertical" && align === "top"',
'[class.p-divider-bottom]': 'layout === "vertical" && align === "bottom"',
'[attr.aria-orientation]': 'layout',
'[attr.data-pc-name]': "'divider'",
'[attr.role]': '"separator"',
'[style.justifyContent]': 'layout === "horizontal" ? (align === "center" || align === undefined ? "center" : (align === "left" ? "flex-start" : (align === "right" ? "flex-end" : null))) : null',
'[style.alignItems]': 'layout === "vertical" ? (align === "center" || align === undefined ? "center" : (align === "top" ? "flex-start" : (align === "bottom" ? "flex-end" : null))) : null'
},
providers: [DividerStyle]
}]
}], propDecorators: { style: [{
type: Input
}], styleClass: [{
type: Input
}], layout: [{
type: Input
}], type: [{
type: Input
}], align: [{
type: Input
}], hostClass: [{
type: HostBinding,
args: ['class']
}] } });
class DividerModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: DividerModule, imports: [Divider], exports: [Divider] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DividerModule, imports: [Divider] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DividerModule, decorators: [{
type: NgModule,
args: [{
imports: [Divider],
exports: [Divider]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Divider, DividerClasses, DividerModule, DividerStyle };
//# sourceMappingURL=primeng-divider.mjs.map