UNPKG

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

1,418 lines (1,388 loc) 46.6 kB
import * as i1 from '@angular/common'; import { isPlatformServer, CommonModule } from '@angular/common'; import * as i0 from '@angular/core'; import { Injectable, forwardRef, EventEmitter, inject, afterNextRender, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { findSingle } from '@primeuix/utils'; import { SharedModule, Header, PrimeTemplate } from 'primeng/api'; import { BaseComponent } from 'primeng/basecomponent'; import { BaseStyle } from 'primeng/base'; const theme = ({ dt }) => ` /*! * Quill Editor v1.3.3 * https://quilljs.com/ * Copyright (c) 2014, Jason Chen * Copyright (c) 2013, salesforce.com */ .ql-container { box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 13px; height: 100%; margin: 0; position: relative; } .ql-container.ql-disabled .ql-tooltip { visibility: hidden; } .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before { pointer-events: none; } .ql-clipboard { inset-inline-start: -100000px; height: 1px; overflow-y: hidden; position: absolute; top: 50%; } .ql-clipboard p { margin: 0; padding: 0; } .ql-editor { box-sizing: border-box; line-height: 1.42; height: 100%; outline: none; overflow-y: auto; padding: 12px 15px; tab-size: 4; -moz-tab-size: 4; text-align: start; white-space: pre-wrap; word-wrap: break-word; } .ql-editor > * { cursor: text; } .ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 { margin: 0; padding: 0; counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .ql-editor ol, .ql-editor ul { padding-inline-start: 1.5rem; } .ql-editor ol > li, .ql-editor ul > li { list-style-type: none; } .ql-editor ul > li::before { content: '\\2022'; } .ql-editor ul[data-checked='true'], .ql-editor ul[data-checked='false'] { pointer-events: none; } .ql-editor ul[data-checked='true'] > li *, .ql-editor ul[data-checked='false'] > li * { pointer-events: all; } .ql-editor ul[data-checked='true'] > li::before, .ql-editor ul[data-checked='false'] > li::before { color: #777; cursor: pointer; pointer-events: all; } .ql-editor ul[data-checked='true'] > li::before { content: '\\2611'; } .ql-editor ul[data-checked='false'] > li::before { content: '\\2610'; } .ql-editor li::before { display: inline-block; white-space: nowrap; width: 1.2rem; } .ql-editor li:not(.ql-direction-rtl)::before { margin-inline-start: -1.5rem; margin-inline-end: 0.3rem; text-align: end; } .ql-editor li.ql-direction-rtl::before { margin-inline-start: 0.3rem; margin-inline-end: -1.5rem; } .ql-editor ol li:not(.ql-direction-rtl), .ql-editor ul li:not(.ql-direction-rtl) { padding-inline-start: 1.5rem; } .ql-editor ol li.ql-direction-rtl, .ql-editor ul li.ql-direction-rtl { padding-inline-end: 1.5rem; } .ql-editor ol li { counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; counter-increment: list-0; } .ql-editor ol li:before { content: counter(list-0, decimal) '. '; } .ql-editor ol li.ql-indent-1 { counter-increment: list-1; } .ql-editor ol li.ql-indent-1:before { content: counter(list-1, lower-alpha) '. '; } .ql-editor ol li.ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-2 { counter-increment: list-2; } .ql-editor ol li.ql-indent-2:before { content: counter(list-2, lower-roman) '. '; } .ql-editor ol li.ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-3 { counter-increment: list-3; } .ql-editor ol li.ql-indent-3:before { content: counter(list-3, decimal) '. '; } .ql-editor ol li.ql-indent-3 { counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-4 { counter-increment: list-4; } .ql-editor ol li.ql-indent-4:before { content: counter(list-4, lower-alpha) '. '; } .ql-editor ol li.ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-5 { counter-increment: list-5; } .ql-editor ol li.ql-indent-5:before { content: counter(list-5, lower-roman) '. '; } .ql-editor ol li.ql-indent-5 { counter-reset: list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-6 { counter-increment: list-6; } .ql-editor ol li.ql-indent-6:before { content: counter(list-6, decimal) '. '; } .ql-editor ol li.ql-indent-6 { counter-reset: list-7 list-8 list-9; } .ql-editor ol li.ql-indent-7 { counter-increment: list-7; } .ql-editor ol li.ql-indent-7:before { content: counter(list-7, lower-alpha) '. '; } .ql-editor ol li.ql-indent-7 { counter-reset: list-8 list-9; } .ql-editor ol li.ql-indent-8 { counter-increment: list-8; } .ql-editor ol li.ql-indent-8:before { content: counter(list-8, lower-roman) '. '; } .ql-editor ol li.ql-indent-8 { counter-reset: list-9; } .ql-editor ol li.ql-indent-9 { counter-increment: list-9; } .ql-editor ol li.ql-indent-9:before { content: counter(list-9, decimal) '. '; } .ql-editor .ql-video { display: block; max-width: 100%; } .ql-editor .ql-video.ql-align-center { margin: 0 auto; } .ql-editor .ql-video.ql-align-right { margin: 0 0 0 auto; } .ql-editor .ql-bg-black { background: #000; } .ql-editor .ql-bg-red { background: #e60000; } .ql-editor .ql-bg-orange { background: #f90; } .ql-editor .ql-bg-yellow { background: #ff0; } .ql-editor .ql-bg-green { background: #008a00; } .ql-editor .ql-bg-blue { background: #06c; } .ql-editor .ql-bg-purple { background: #93f; } .ql-editor .ql-color-white { color: #fff; } .ql-editor .ql-color-red { color: #e60000; } .ql-editor .ql-color-orange { color: #f90; } .ql-editor .ql-color-yellow { color: #ff0; } .ql-editor .ql-color-green { color: #008a00; } .ql-editor .ql-color-blue { color: #06c; } .ql-editor .ql-color-purple { color: #93f; } .ql-editor .ql-font-serif { font-family: Georgia, Times New Roman, serif; } .ql-editor .ql-font-monospace { font-family: Monaco, Courier New, monospace; } .ql-editor .ql-size-small { font-size: 0.75rem; } .ql-editor .ql-size-large { font-size: 1.5rem; } .ql-editor .ql-size-huge { font-size: 2.5rem; } .ql-editor .ql-direction-rtl { direction: rtl; text-align: inherit; } .ql-editor .ql-align-center { text-align: center; } .ql-editor .ql-align-justify { text-align: justify; } .ql-editor .ql-align-right { text-align: end; } .ql-editor.ql-blank::before { color: rgba(0, 0, 0, 0.6); content: attr(data-placeholder); font-style: italic; inset-inline-start: 15px; pointer-events: none; position: absolute; inset-inline-end: 15px; } .ql-snow.ql-toolbar:after, .ql-snow .ql-toolbar:after { clear: both; content: ''; display: table; } .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button { background: none; border: none; cursor: pointer; display: inline-block; float: left; height: 24px; padding-block: 3px; padding-inline: 5px; width: 28px; } .ql-snow.ql-toolbar button svg, .ql-snow .ql-toolbar button svg { float: left; height: 100%; } .ql-snow.ql-toolbar button:active:hover, .ql-snow .ql-toolbar button:active:hover { outline: none; } .ql-snow.ql-toolbar input.ql-image[type='file'], .ql-snow .ql-toolbar input.ql-image[type='file'] { display: none; } .ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected { color: #06c; } .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { fill: #06c; } .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { stroke: #06c; } @media (pointer: coarse) { .ql-snow.ql-toolbar button:hover:not(.ql-active), .ql-snow .ql-toolbar button:hover:not(.ql-active) { color: #444; } .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill { fill: #444; } .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter { stroke: #444; } } .ql-snow { box-sizing: border-box; } .ql-snow * { box-sizing: border-box; } .ql-snow .ql-hidden { display: none; } .ql-snow .ql-out-bottom, .ql-snow .ql-out-top { visibility: hidden; } .ql-snow .ql-tooltip { position: absolute; transform: translateY(10px); } .ql-snow .ql-tooltip a { cursor: pointer; text-decoration: none; } .ql-snow .ql-tooltip.ql-flip { transform: translateY(-10px); } .ql-snow .ql-formats { display: inline-block; vertical-align: middle; } .ql-snow .ql-formats:after { clear: both; content: ''; display: table; } .ql-snow .ql-stroke { fill: none; stroke: #444; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .ql-snow .ql-stroke-miter { fill: none; stroke: #444; stroke-miterlimit: 10; stroke-width: 2; } .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: #444; } .ql-snow .ql-empty { fill: none; } .ql-snow .ql-even { fill-rule: evenodd; } .ql-snow .ql-thin, .ql-snow .ql-stroke.ql-thin { stroke-width: 1; } .ql-snow .ql-transparent { opacity: 0.4; } .ql-snow .ql-direction svg:last-child { display: none; } .ql-snow .ql-direction.ql-active svg:last-child { display: inline; } .ql-snow .ql-direction.ql-active svg:first-child { display: none; } .ql-snow .ql-editor h1 { font-size: 2rem; } .ql-snow .ql-editor h2 { font-size: 1.5rem; } .ql-snow .ql-editor h3 { font-size: 1.17rem; } .ql-snow .ql-editor h4 { font-size: 1rem; } .ql-snow .ql-editor h5 { font-size: 0.83rem; } .ql-snow .ql-editor h6 { font-size: 0.67rem; } .ql-snow .ql-editor a { text-decoration: underline; } .ql-snow .ql-editor blockquote { border-inline-start: 4px solid #ccc; margin-block-end: 5px; margin-block-start: 5px; padding-inline-start: 16px; } .ql-snow .ql-editor code, .ql-snow .ql-editor pre { background: #f0f0f0; border-radius: 3px; } .ql-snow .ql-editor pre { white-space: pre-wrap; margin-block-end: 5px; margin-block-start: 5px; padding: 5px 10px; } .ql-snow .ql-editor code { font-size: 85%; padding: 2px 4px; } .ql-snow .ql-editor pre.ql-syntax { background: #23241f; color: #f8f8f2; overflow: visible; } .ql-snow .ql-editor img { max-width: 100%; } .ql-snow .ql-picker { color: #444; display: inline-block; float: left; inset-inline-start: 0; font-size: 14px; font-weight: 500; height: 24px; position: relative; vertical-align: middle; } .ql-snow .ql-picker-label { cursor: pointer; display: inline-block; height: 100%; padding-inline-start: 8px; padding-inline-end: 2px; position: relative; width: 100%; } .ql-snow .ql-picker-label::before { display: inline-block; line-height: 22px; } .ql-snow .ql-picker-options { background: #fff; display: none; min-width: 100%; padding: 4px 8px; position: absolute; white-space: nowrap; } .ql-snow .ql-picker-options .ql-picker-item { cursor: pointer; display: block; padding-block-end: 5px; padding-block-start: 5px; } .ql-snow .ql-picker.ql-expanded .ql-picker-label { color: #ccc; z-index: 2; } .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { fill: #ccc; } .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { stroke: #ccc; } .ql-snow .ql-picker.ql-expanded .ql-picker-options { display: block; margin-block-start: -1px; top: 100%; z-index: 1; } .ql-snow .ql-color-picker, .ql-snow .ql-icon-picker { width: 28px; } .ql-snow .ql-color-picker .ql-picker-label, .ql-snow .ql-icon-picker .ql-picker-label { padding: 2px 4px; } .ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg { inset-inline-end: 4px; } .ql-snow .ql-icon-picker .ql-picker-options { padding: 4px 0; } .ql-snow .ql-icon-picker .ql-picker-item { height: 24px; width: 24px; padding: 2px 4px; } .ql-snow .ql-color-picker .ql-picker-options { padding: 3px 5px; width: 152px; } .ql-snow .ql-color-picker .ql-picker-item { border: 1px solid transparent; float: left; height: 16px; margin: 2px; padding: 0; width: 16px; } .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg { position: absolute; margin-block-start: -9px; inset-inline-end: 0; top: 50%; width: 18px; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before { content: attr(data-label); } .ql-snow .ql-picker.ql-header { width: 98px; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: 'Normal'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before { content: 'Heading 1'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { content: 'Heading 2'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before { content: 'Heading 3'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before { content: 'Heading 4'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before { content: 'Heading 5'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before { content: 'Heading 6'; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before { font-size: 2rem; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { font-size: 1.5rem; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before { font-size: 1.17rem; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before { font-size: 1rem; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before { font-size: 0.83rem; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before { font-size: 0.67rem; } .ql-snow .ql-picker.ql-font { width: 108px; } .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: 'Sans Serif'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { content: 'Serif'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { content: 'Monospace'; } .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { font-family: Georgia, Times New Roman, serif; } .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { font-family: Monaco, Courier New, monospace; } .ql-snow .ql-picker.ql-size { width: 98px; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: 'Normal'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before { content: 'Small'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before { content: 'Large'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before { content: 'Huge'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before { font-size: 10px; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before { font-size: 18px; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before { font-size: 32px; } .ql-snow .ql-color-picker.ql-background .ql-picker-item { background: #fff; } .ql-snow .ql-color-picker.ql-color .ql-picker-item { background: #000; } .ql-toolbar.ql-snow { border: 1px solid #ccc; box-sizing: border-box; font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; padding: 8px; } .ql-toolbar.ql-snow .ql-formats { margin-inline-end: 15px; } .ql-toolbar.ql-snow .ql-picker-label { border: 1px solid transparent; } .ql-toolbar.ql-snow .ql-picker-options { border: 1px solid transparent; box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px; } .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { border-color: #ccc; } .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { border-color: #ccc; } .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover { border-color: #000; } .ql-toolbar.ql-snow + .ql-container.ql-snow { border-block-start: 0; } .ql-snow .ql-tooltip { background: #fff; border: 1px solid #ccc; box-shadow: 0 0 5px #ddd; color: #444; padding: 5px 12px; white-space: nowrap; } .ql-snow .ql-tooltip::before { content: 'Visit URL:'; line-height: 26px; margin-inline-end: 8px; } .ql-snow .ql-tooltip input[type='text'] { display: none; border: 1px solid #ccc; font-size: 13px; height: 26px; margin: 0; padding: 3px 5px; width: 170px; } .ql-snow .ql-tooltip a.ql-preview { display: inline-block; max-width: 200px; overflow-x: hidden; text-overflow: ellipsis; vertical-align: top; } .ql-snow .ql-tooltip a.ql-action::after { border-inline-end: 1px solid #ccc; content: 'Edit'; margin-inline-start: 16px; padding-inline-end: 8px; } .ql-snow .ql-tooltip a.ql-remove::before { content: 'Remove'; margin-inline-start: 8px; } .ql-snow .ql-tooltip a { line-height: 26px; } .ql-snow .ql-tooltip.ql-editing a.ql-preview, .ql-snow .ql-tooltip.ql-editing a.ql-remove { display: none; } .ql-snow .ql-tooltip.ql-editing input[type='text'] { display: inline-block; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-inline-end: 0; content: 'Save'; padding-inline-end: 0; } .ql-snow .ql-tooltip[data-mode='link']::before { content: 'Enter link:'; } .ql-snow .ql-tooltip[data-mode='formula']::before { content: 'Enter formula:'; } .ql-snow .ql-tooltip[data-mode='video']::before { content: 'Enter video:'; } .ql-snow a { color: #06c; } .ql-container.ql-snow { border: 1px solid #ccc; } .p-editor .p-editor-toolbar { background: ${dt('editor.toolbar.background')}; border-start-end-radius: ${dt('editor.toolbar.border.radius')}; border-start-start-radius: ${dt('editor.toolbar.border.radius')}; } .p-editor .p-editor-toolbar.ql-snow { border: 1px solid ${dt('editor.toolbar.border.color')}; } .p-editor .p-editor-toolbar.ql-snow .ql-stroke { stroke: ${dt('editor.toolbar.item.color')}; } .p-editor .p-editor-toolbar.ql-snow .ql-fill { fill: ${dt('editor.toolbar.item.color')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { border: 0 none; color: ${dt('editor.toolbar.item.color')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { color: ${dt('editor.toolbar.item.hover.color')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { stroke: ${dt('editor.toolbar.item.hover.color')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { fill: ${dt('editor.toolbar.item.hover.color')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { color: ${dt('editor.toolbar.item.active.color')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { stroke: ${dt('editor.toolbar.item.active.color')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { fill: ${dt('editor.toolbar.item.active.color')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { background: ${dt('editor.overlay.background')}; border: 1px solid ${dt('editor.overlay.border.color')}; box-shadow: ${dt('editor.overlay.shadow')}; border-radius: ${dt('editor.overlay.border.radius')}; padding: ${dt('editor.overlay.padding')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { color: ${dt('editor.overlay.option.color')}; border-radius: ${dt('editor.overlay.option.border.radius')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { background: ${dt('editor.overlay.option.focus.background')}; color: ${dt('editor.overlay.option.focus.color')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: ${dt('editor.overlay.option.padding')}; } .p-editor .p-editor-content { border-end-end-radius: ${dt('editor.content.border.radius')}; border-end-start-radius: ${dt('editor.content.border.radius')}; } .p-editor .p-editor-content.ql-snow { border: 1px solid ${dt('editor.content.border.color')}; } .p-editor .p-editor-content .ql-editor { background: ${dt('editor.content.background')}; color: ${dt('editor.content.color')}; border-end-end-radius: ${dt('editor.content.border.radius')}; border-end-start-radius: ${dt('editor.content.border.radius')}; } .p-editor .ql-snow.ql-toolbar button:hover, .p-editor .ql-snow.ql-toolbar button:focus { color: ${dt('editor.toolbar.item.hover.color')}; } .p-editor .ql-snow.ql-toolbar button:hover .ql-stroke, .p-editor .ql-snow.ql-toolbar button:focus .ql-stroke { stroke: ${dt('editor.toolbar.item.hover.color')}; } .p-editor .ql-snow.ql-toolbar button:hover .ql-fill, .p-editor .ql-snow.ql-toolbar button:focus .ql-fill { fill: ${dt('editor.toolbar.item.hover.color')}; } .p-editor .ql-snow.ql-toolbar button.ql-active, .p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active, .p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected { color: ${dt('editor.toolbar.item.active.color')}; } .p-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke, .p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { stroke: ${dt('editor.toolbar.item.active.color')}; } .p-editor .ql-snow.ql-toolbar button.ql-active .ql-fill, .p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { fill: ${dt('editor.toolbar.item.active.color')}; } .p-editor .ql-snow.ql-toolbar button.ql-active .ql-picker-label, .p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, .p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { color: ${dt('editor.toolbar.item.active.color')}; } `; const classes = { root: 'p-editor', toolbar: 'p-editor-toolbar', content: 'p-editor-content' }; class EditorStyle extends BaseStyle { name = 'editor'; theme = theme; classes = classes; static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EditorStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EditorStyle }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EditorStyle, decorators: [{ type: Injectable }] }); /** * * Editor groups a collection of contents in tabs. * * [Live Demo](https://www.primeng.org/editor/) * * @module editorstyle * */ var EditorClasses; (function (EditorClasses) { /** * Class name of the root element */ EditorClasses["root"] = "p-editor"; /** * Class name of the toolbar element */ EditorClasses["toolbar"] = "p-editor-toolbar"; /** * Class name of the content element */ EditorClasses["content"] = "p-editor-content"; })(EditorClasses || (EditorClasses = {})); const EDITOR_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Editor), multi: true }; /** * Editor groups a collection of contents in tabs. * @group Components */ class Editor extends BaseComponent { /** * Inline style of the container. * @group Props */ style; /** * Style class of the container. * @group Props */ styleClass; /** * Placeholder text to show when editor is empty. * @group Props */ placeholder; /** * Whitelist of formats to display, see here for available options. * @group Props */ formats; /** * Modules configuration of Editor, see here for available options. * @group Props */ modules; /** * DOM Element or a CSS selector for a DOM Element, within which the editor’s p elements (i.e. tooltips, etc.) should be confined. Currently, it only considers left and right boundaries. * @group Props */ bounds; /** * DOM Element or a CSS selector for a DOM Element, specifying which container has the scrollbars (i.e. overflow-y: auto), if is has been changed from the default ql-editor with custom CSS. Necessary to fix scroll jumping bugs when Quill is set to auto grow its height, and another ancestor container is responsible from the scrolling.. * @group Props */ scrollingContainer; /** * Shortcut for debug. Note debug is a static method and will affect other instances of Quill editors on the page. Only warning and error messages are enabled by default. * @group Props */ debug; /** * Whether to instantiate the editor to read-only mode. * @group Props */ get readonly() { return this._readonly; } set readonly(val) { this._readonly = val; if (this.quill) { if (this._readonly) this.quill.disable(); else this.quill.enable(); } } /** * Callback to invoke when the quill modules are loaded. * @param {EditorInitEvent} event - custom event. * @group Emits */ onInit = new EventEmitter(); /** * Callback to invoke when text of editor changes. * @param {EditorTextChangeEvent} event - custom event. * @group Emits */ onTextChange = new EventEmitter(); /** * Callback to invoke when selection of the text changes. * @param {EditorSelectionChangeEvent} event - custom event. * @group Emits */ onSelectionChange = new EventEmitter(); toolbar; value; delayedCommand = null; _readonly = false; onModelChange = () => { }; onModelTouched = () => { }; quill; dynamicQuill; /** * Custom item template. * @group Templates */ headerTemplate; templates; _headerTemplate; get isAttachedQuillEditorToDOM() { return this.quillElements?.editorElement?.isConnected; } quillElements; _componentStyle = inject(EditorStyle); constructor() { super(); /** * Read or write the DOM once, when initializing non-Angular (Quill) library. */ afterNextRender(() => { this.initQuillElements(); this.initQuillEditor(); }); } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'header': this.headerTemplate = item.template; break; } }); } writeValue(value) { this.value = value; if (this.quill) { if (value) { const command = () => { this.quill.setContents(this.quill.clipboard.convert(this.dynamicQuill.version.startsWith('2') ? { html: this.value } : this.value)); }; if (this.isAttachedQuillEditorToDOM) { command(); } else { this.delayedCommand = command; } } else { const command = () => { this.quill.setText(''); }; if (this.isAttachedQuillEditorToDOM) { command(); } else { this.delayedCommand = command; } } } } registerOnChange(fn) { this.onModelChange = fn; } registerOnTouched(fn) { this.onModelTouched = fn; } getQuill() { return this.quill; } initQuillEditor() { if (isPlatformServer(this.platformId)) { return; } /** * Importing Quill at top level, throws `document is undefined` error during when * building for SSR, so this dynamically loads quill when it's in browser module. */ if (!this.dynamicQuill) { import('quill') .then((quillModule) => { this.dynamicQuill = quillModule.default; this.createQuillEditor(); }) .catch((e) => console.error(e.message)); } else { this.createQuillEditor(); } } createQuillEditor() { this.initQuillElements(); const { toolbarElement, editorElement } = this.quillElements; let defaultModule = { toolbar: toolbarElement }; let modules = this.modules ? { ...defaultModule, ...this.modules } : defaultModule; this.quill = new this.dynamicQuill(editorElement, { modules: modules, placeholder: this.placeholder, readOnly: this.readonly, theme: 'snow', formats: this.formats, bounds: this.bounds, debug: this.debug, scrollingContainer: this.scrollingContainer }); const isQuill2 = this.dynamicQuill.version.startsWith('2'); if (this.value) { this.quill.setContents(this.quill.clipboard.convert(isQuill2 ? { html: this.value } : this.value)); } this.quill.on('text-change', (delta, oldContents, source) => { if (source === 'user') { let html = isQuill2 ? this.quill.getSemanticHTML() : findSingle(editorElement, '.ql-editor').innerHTML; let text = this.quill.getText().trim(); if (html === '<p><br></p>') { html = null; } this.onTextChange.emit({ htmlValue: html, textValue: text, delta: delta, source: source }); this.onModelChange(html); this.onModelTouched(); } }); this.quill.on('selection-change', (range, oldRange, source) => { this.onSelectionChange.emit({ range: range, oldRange: oldRange, source: source }); }); this.onInit.emit({ editor: this.quill }); } initQuillElements() { if (!this.quillElements) { this.quillElements = { editorElement: findSingle(this.el.nativeElement, 'div.p-editor-content'), toolbarElement: findSingle(this.el.nativeElement, 'div.p-editor-toolbar') }; } } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Editor, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: Editor, isStandalone: true, selector: "p-editor", inputs: { style: "style", styleClass: "styleClass", placeholder: "placeholder", formats: "formats", modules: "modules", bounds: "bounds", scrollingContainer: "scrollingContainer", debug: "debug", readonly: "readonly" }, outputs: { onInit: "onInit", onTextChange: "onTextChange", onSelectionChange: "onSelectionChange" }, host: { classAttribute: "p-editor" }, providers: [EDITOR_VALUE_ACCESSOR, EditorStyle], queries: [{ propertyName: "toolbar", first: true, predicate: Header, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: ` <div [ngClass]="'p-editor-container'" [class]="styleClass"> <div class="p-editor-toolbar" *ngIf="toolbar || headerTemplate || _headerTemplate"> <ng-content select="p-header"></ng-content> <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container> </div> <div class="p-editor-toolbar" *ngIf="!toolbar && !headerTemplate && !_headerTemplate"> <span class="ql-formats"> <select class="ql-header"> <option value="1">Heading</option> <option value="2">Subheading</option> <option selected>Normal</option> </select> <select class="ql-font"> <option selected>Sans Serif</option> <option value="serif">Serif</option> <option value="monospace">Monospace</option> </select> </span> <span class="ql-formats"> <button class="ql-bold" aria-label="Bold" type="button"></button> <button class="ql-italic" aria-label="Italic" type="button"></button> <button class="ql-underline" aria-label="Underline" type="button"></button> </span> <span class="ql-formats"> <select class="ql-color"></select> <select class="ql-background"></select> </span> <span class="ql-formats"> <button class="ql-list" value="ordered" aria-label="Ordered List" type="button"></button> <button class="ql-list" value="bullet" aria-label="Unordered List" type="button"></button> <select class="ql-align"> <option selected></option> <option value="center">center</option> <option value="right">right</option> <option value="justify">justify</option> </select> </span> <span class="ql-formats"> <button class="ql-link" aria-label="Insert Link" type="button"></button> <button class="ql-image" aria-label="Insert Image" type="button"></button> <button class="ql-code-block" aria-label="Insert Code Block" type="button"></button> </span> <span class="ql-formats"> <button class="ql-clean" aria-label="Remove Styles" type="button"></button> </span> </div> <div class="p-editor-content" [ngStyle]="style"></div> </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: Editor, decorators: [{ type: Component, args: [{ selector: 'p-editor', standalone: true, imports: [CommonModule, SharedModule], template: ` <div [ngClass]="'p-editor-container'" [class]="styleClass"> <div class="p-editor-toolbar" *ngIf="toolbar || headerTemplate || _headerTemplate"> <ng-content select="p-header"></ng-content> <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container> </div> <div class="p-editor-toolbar" *ngIf="!toolbar && !headerTemplate && !_headerTemplate"> <span class="ql-formats"> <select class="ql-header"> <option value="1">Heading</option> <option value="2">Subheading</option> <option selected>Normal</option> </select> <select class="ql-font"> <option selected>Sans Serif</option> <option value="serif">Serif</option> <option value="monospace">Monospace</option> </select> </span> <span class="ql-formats"> <button class="ql-bold" aria-label="Bold" type="button"></button> <button class="ql-italic" aria-label="Italic" type="button"></button> <button class="ql-underline" aria-label="Underline" type="button"></button> </span> <span class="ql-formats"> <select class="ql-color"></select> <select class="ql-background"></select> </span> <span class="ql-formats"> <button class="ql-list" value="ordered" aria-label="Ordered List" type="button"></button> <button class="ql-list" value="bullet" aria-label="Unordered List" type="button"></button> <select class="ql-align"> <option selected></option> <option value="center">center</option> <option value="right">right</option> <option value="justify">justify</option> </select> </span> <span class="ql-formats"> <button class="ql-link" aria-label="Insert Link" type="button"></button> <button class="ql-image" aria-label="Insert Image" type="button"></button> <button class="ql-code-block" aria-label="Insert Code Block" type="button"></button> </span> <span class="ql-formats"> <button class="ql-clean" aria-label="Remove Styles" type="button"></button> </span> </div> <div class="p-editor-content" [ngStyle]="style"></div> </div> `, providers: [EDITOR_VALUE_ACCESSOR, EditorStyle], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'p-editor' } }] }], ctorParameters: () => [], propDecorators: { style: [{ type: Input }], styleClass: [{ type: Input }], placeholder: [{ type: Input }], formats: [{ type: Input }], modules: [{ type: Input }], bounds: [{ type: Input }], scrollingContainer: [{ type: Input }], debug: [{ type: Input }], readonly: [{ type: Input }], onInit: [{ type: Output }], onTextChange: [{ type: Output }], onSelectionChange: [{ type: Output }], toolbar: [{ type: ContentChild, args: [Header] }], headerTemplate: [{ type: ContentChild, args: ['header', { descendants: false }] }], templates: [{ type: ContentChildren, args: [PrimeTemplate] }] } }); class EditorModule { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: EditorModule, imports: [Editor, SharedModule], exports: [Editor, SharedModule] }); static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EditorModule, imports: [Editor, SharedModule, SharedModule] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EditorModule, decorators: [{ type: NgModule, args: [{ imports: [Editor, SharedModule], exports: [Editor, SharedModule] }] }] }); /** * Generated bundle index. Do not edit. */ export { EDITOR_VALUE_ACCESSOR, Editor, EditorClasses, EditorModule, EditorStyle }; //# sourceMappingURL=primeng-editor.mjs.map