The Accordion control is a container used to show content within collapsible panels. Each accordion segment has a labeled header that when clicked expands or collapses the corresponding panel within the available space.
\\r\\n\\r\\nTo use an accordion, simpy require the accordion component within your HTML template with the following: <require from=\\\"components/accordion/accordion\\\"></require>. You may then add as many accordions as you would like within the template. See the HTML below for an example of the accordion control markup.
An accordion may contain any HTML content. You may place any valid HTML within the <accordion> </accordion> tags. By default, an accordion's content does not contain any padding that would space itself from the outer edge of the control, so you may want to add padding via CSS to the parent element of the any content that's added to achieve your desired layout objectives.
The content of the accordion control can be styled to match the needs of the screen being developed. Any custom CSS for these styles should reside within the views associated CSS file. Do not add screen specific styles to accordion.css.
\\r\\n <accordion label=\\\"Accordion A Title\\\" name=\\\"accordionGroupName\\\">\\r\\n <section>\\r\\n Accordion \\\"A\\\" Content...\\r\\n </section>\\r\\n </accordion>\\r\\n \\r\\n These buttons will allow for most use cases within the app and should be used in favor of building custom buttons. If you need a button style that isn't listed here please consult with Darran or Scott.
\\r\\n\\r\\nImport button styles within your view's css file with the following @import 'buttons/buttons.css';.
Most buttons inherit styles from others via the composes feature. For example: .btn--flat composes it's main styles from: .btn. When using composes all styles will be inherited from the composed CSS class, this includes any styles allready composed from within the class you are composing from.
Remember to add the `title` tag to each button within our app title=\\\"button title here\\\"
.btn\\r\\n \\r\\n class=\\\"btn\\\"\\r\\n \\r\\n .btn--flat\\r\\n Composes styles from: .btn\\r\\n \\r\\n class=\\\"btn--flat\\\"\\r\\n \\r\\n .btn--submit\\r\\n Composes styles from: .btn\\r\\n \\r\\n class=\\\"btn--submit\\\"\\r\\n \\r\\n .btn--delete\\r\\n Composes styles from: .btn\\r\\n \\r\\n class=\\\"btn--delete\\\"\\r\\n \\r\\n .btn--link\\r\\n Composes styles from: .btn\\r\\n \\r\\n class=\\\"btn--link\\\"\\r\\n \\r\\n Cards are a core part of the structure of our screens. They act as containers for most of our content as well as\\r\\n building blocks for some of our components.\\r\\n\\r\\n
This is an emerging guide that will grow over time…
\\r\\nglobal-variables.css without first consulting with Scott Criswell or Darran Courtney. It is essential that these variables stay consistent throughout the app. This is one example of :root or global styles that we need to keep within the app for shared styles.buttons.css, cards.css, input-controls.css, ia-tab.css, ia-tab-vertical.css, or ia-table.css without first consulting with Scott Criswell or Darran Courtney..css file exists within src/components its best to ask first before altering it, especially if its any of the files listed above ^^.button.css (also don’t do that, see above ^^) and can instead compose the styles from button.css within the .css file of your custom control..ts file. Any other method will cause the CSS Modules to fail and cause code bleed (global CSS) within our app. Future versions of Aurelia (coming soon(ish)…) may remove this requirement. Your component CSS file may @import additional styles as needed to support the component feature requirements.\\r\\n import styles from './component-name.css';\\r\\n\\r\\n export class componentName {\\r\\n public styles = styles;\\r\\n }\\r\\n \\r\\n Most buttons inherit styles from others via the composes feature. For example: .btn--flat composes it's main styles from: .btn. When using composes all styles will be inherited from the composed CSS class, this includes any styles allready composed from within the class you are composing from.
Remember to add the `title` tag to each button within our app title=\\\"button title here\\\"
While we compile to pure CSS and we use the .css file type during development we are writing PostCSS code within our project. In practice this code looks like CSS or Sass and accepts all parts of the CSS standard. PostCSS allows for code transformation of CSS via JavaScript. As mentioned this code is delivered as pure standards based CSS but with some strong development enhancements including the ability to use emerging features of CSS that are not yet fully supported by todays browsers, and most importantly we have the ability to give our “CSS” scope and encapsulation, allowing us to prevent CSS code bleed throughout our project with the use of CSS Modules. We can also use features like code composition of css selectors. The main goals at the outset were to have scoped, modular, and reusable CSS. Apart from a few edge cases that we are in the process of correcting we have accomplished this goal with the combination of PostCSS and CSS Modules within this project.
package.json):Additional plugins may be added to further enhance our development experience once vetted and approved. Note: Be careful when adding plugins to the project, some plugins prevent others from working correctly or have dependencies that we may not want to support at this time. Available PostCSS plugins can be searched here: https://www.postcss.parts/
\\\"postcss-advanced-variables\\\": \\\"^3.0.1\\\",\\\"postcss-assets\\\": \\\"^5.0.0\\\",\\\"postcss-color-mod-function\\\": \\\"^3.0.3\\\",\\\"postcss-custom-media\\\": \\\"^7.0.8\\\",\\\"postcss-custom-properties\\\": \\\"^9.1.1\\\",\\\"postcss-extend\\\": \\\"^1.0.5\\\",\\\"postcss-global-import\\\": \\\"^1.0.6\\\",\\\"postcss-hexrgba\\\": \\\"^2.0.0\\\",\\\"postcss-import\\\": \\\"^12.0.1\\\",\\\"postcss-loader\\\": \\\"^3.0.0\\\",\\\"postcss-modules\\\": \\\"^1.4.1\\\",\\\"postcss-nested\\\": \\\"^4.2.1\\\",\\\"postcss-normalize\\\": \\\"^8.0.1\\\",\\\"postcss-partial-import\\\": \\\"^4.1.0\\\",\\\"postcss-preset-env\\\": \\\"^6.7.0\\\",\\\"precss\\\": \\\"^4.0.0\\\",\\r\\n As the name implies our Empty State component is used to show when a section within our app contains no content. This control is generally reserved for top level notifications of an empty section of the app for example when a client has no policies. This component can and should be customized with a unique message and icon for each section that it is placed within, the steps required to add this customization are detailed here.\\r\\n
\\r\\n\\r\\n\\r\\n Remember to require the component at the top of the HTML template to allow access to empty-state.\\r\\n
\\r\\n This component contains an attribute to add a custom icon. Label this attribute to match your screen. For example, if you are working on the 'Policies' screen you would add icon=\\\"policies\\\" as the icon attribute.\\r\\n
\\r\\n Remember to add a conditional check within empty-state to determine when the component should be displayed (i.e. when the screen is empty).\\r\\n That check is in the form of an if.bind=\\\"\\\" binding. In this case it checks for empty state as follows: if.bind=\\\"showEmptyState\\\" by referencing \\\"showEmptyState\\\" within the related policies.ts file.\\r\\n
\\r\\n <template>\\r\\n <require from=\\\"components/empty-state/empty-state.html\\\"></require>\\r\\n\\r\\n <empty-state icon=\\\"policies\\\" if.bind=\\\"showEmptyState\\\">\\r\\n <span slot=\\\"heading\\\" t=\\\"emptyState.clientPolicies.heading\\\"></span>\\r\\n </empty-state>\\r\\n </template>\\r\\n \\r\\n\\r\\n \\r\\n Open empty-state.css. Add the class for your custom icon as follows. This class name should match the icon=\\\"icon-name\\\" attribute within the emty-state component you placed in the HTML template.\\r\\n
\\r\\n
\\r\\n For the creation of a new icon see Darran or Scott.\\r\\n
\\r\\n\\r\\n .policies {\\r\\n background-image: url('~img/client-nav--policies-active.svg');\\r\\n }\\r\\n \\r\\n\\r\\n \\r\\n Open translation.json. Add your tailored message within the \\\"emptyState\\\": {} node, and structure as follows.\\r\\n
\\r\\n \\\"emptyState\\\": {\\r\\n \\\"clientPolicies\\\": {\\r\\n \\\"heading\\\": \\\"There are no policies for this client\\\"\\r\\n },\\r\\n }\\r\\n \\r\\n\\r\\n Form components exist to make working with styled form elements easier and more streamlined in the application.
\\r\\n\\r\\nImport input styles within your view's css file with the following @import 'forms/input-controls/input-controls.css';.
${inputExample1}\\r\\n ${inputExample2}\\r\\n ${inputExample3}\\r\\n ${inputExample4}\\r\\n ${inputExampleSelected}\\r\\n ${inputExample6}\\r\\n ${inputExample7}\\r\\n ${inputExample5}\\r\\n ${inputExample8}\\r\\n ${inputExample9}\\r\\n ${inputExample10}\\r\\n ${inputExample10}\\r\\n ${checkboxExample1}\\r\\n ${checkboxExample2}\\r\\n ${checkboxExample3}\\r\\n ${checkboxExample4}\\r\\n ${radioExample1a}
${radioExample1b}\\r\\n ${radioExample2a}
${radioExample2b}\\r\\n ${selectExample1}\\r\\n The variables listed below represent the global variables that are free to use within the app. While the global-variables.css file contains some additional variables only the variables documented here should be used in general development without consulting Darran or Scott
Import global variables within your view's css file with the following @import 'global-variables.css';.
In practice importing global-variables.css shouldn't be required but our current build process requires it in some cases. Do not import global varables within a new view unless you note build errors relating to missing global variables.
\\r\\n var(--color-brand);\\r\\n \\r\\n\\r\\n \\r\\n Main brand color with a darker hue\\r\\n \\r\\n var(--color-brand--dark);\\r\\n \\r\\n\\r\\n \\r\\n Main brand color with a more vibrant hue\\r\\n \\r\\n var(--color-brand--vibrant);\\r\\n \\r\\n\\r\\n \\r\\n Main brand color with a brighter hue\\r\\n \\r\\n var(--color-brand--bright);\\r\\n \\r\\n\\r\\n \\r\\n Main brand color with a lighter hue\\r\\n \\r\\n var(--color-brand--light);\\r\\n \\r\\n\\r\\n \\r\\n Main brand color with an extra light hue\\r\\n \\r\\n var(--color-brand--extra-light);\\r\\n \\r\\n\\r\\n \\r\\n Secondary brand color - used as an accent color, can be used more frequently than --color-brand\\r\\n \\r\\n var(--color-secondary);\\r\\n \\r\\n\\r\\n \\r\\n Secondary brand color with a darker hue\\r\\n \\r\\n var(--color-secondary--dark);\\r\\n \\r\\n\\r\\n \\r\\n Secondary brand color with an extra dark hue\\r\\n \\r\\n var(--color-secondary--extra-dark);\\r\\n \\r\\n\\r\\n \\r\\n Secondary brand color with a light hue\\r\\n \\r\\n var(--color-secondary--light);\\r\\n \\r\\n\\r\\n \\r\\n Secondary brand color with an extra light hue - Nearly white\\r\\n \\r\\n var(--color-secondary--extra-light);\\r\\n \\r\\n --color-black it is a foundational colour in design\\r\\n \\r\\n var(--color-white);\\r\\n \\r\\n\\r\\n \\r\\n Black - The darkest color. Like --color-white it is a foundational colour in design\\r\\n \\r\\n var(--color-black);\\r\\n \\r\\n\\r\\n \\r\\n Used to define the main background color of the application\\r\\n \\r\\n var(--color-grey--light);\\r\\n \\r\\n\\r\\n \\r\\n Used to define the main background color of the application\\r\\n \\r\\n var(--color-body-background);\\r\\n \\r\\n\\r\\n \\r\\n Used to define the main background color of the application\\r\\n \\r\\n var(--color-text-body);\\r\\n \\r\\n\\r\\n \\r\\n Used to highlight elements of the UI, for example: used for subtle highlights\\r\\n \\r\\n var(--color-highlight);\\r\\n \\r\\n\\r\\n \\r\\n Used to highlight elements of the UI, for example: hover interactions\\r\\n \\r\\n var(--color-highlight--bright);\\r\\n \\r\\n\\r\\n \\r\\n Used to highlight elements of the UI, for example: primary interactions\\r\\n \\r\\n var(--color-highlight--extra-bright);\\r\\n \\r\\n\\r\\n \\r\\n Used to get the users attention, for example: delete buttons and errors\\r\\n \\r\\n var(--color-alert);\\r\\n \\r\\n\\r\\n \\r\\n Alert color with a brighter hue, used as an accent for --color-alert\\r\\n \\r\\n var(--color-alert--bright);\\r\\n \\r\\n\\r\\n \\r\\n Alert color with a more muted hue, used as an accent for --color-alert\\r\\n \\r\\n var(--color-alert--medium);\\r\\n \\r\\n\\r\\n \\r\\n Alert color with a lighter hue, used as an accent for --color-alert\\r\\n \\r\\n var(--color-alert--light);\\r\\n \\r\\n\\r\\n \\r\\n When things are good and you need to show it, this is the color for you! ;)\\r\\n \\r\\n var(--color-success);\\r\\n \\r\\n\\r\\n \\r\\n Use this color to get the attention of the user within the UI\\r\\n \\r\\n var(--color-warning);\\r\\n \\r\\n\\r\\n \\r\\n Used when you want to highlight a prospect within the UI\\r\\n \\r\\n var(--color-prospect);\\r\\n \\r\\n \\r\\n This page exercises Froala features that map to our TinyMCE usage: templates,\\r\\n editable/non-editable content sections, and Word paste handling.\\r\\n
\\r\\n\\r\\n Use the Templates button in the toolbar to insert a predefined block.\\r\\n
\\r\\n${froalaTemplateContent}\\r\\n \\r\\n Use the PDF Preview toolbar button. It should be disabled when empty (except client advice),\\r\\n and the icon should match TinyMCE.\\r\\n
\\r\\n${froalaPdfPreviewContent}\\r\\n \\r\\n Use the Page Break button to insert a <div class=\\\"pageBreak\\\"> marker\\r\\n compatible with our existing document styles.\\r\\n
${froalaPageBreakContent}\\r\\n \\r\\n Sections marked contenteditable=\\\"false\\\" should remain locked while the rest\\r\\n stays editable. Try selecting text inside the locked block.\\r\\n
${froalaEditableSectionsContent}\\r\\n \\r\\n Copy content from Word (or Google Docs) and paste here to validate the Word Paste flow.\\r\\n
\\r\\n${froalaWordPasteContent}\\r\\n \\r\\n This page mirrors the Froala tests so we can compare templates,\\r\\n editable/non-editable content sections, and Word paste handling.\\r\\n
\\r\\n\\r\\n Use the Template button to insert a predefined block.\\r\\n
\\r\\n${tinyTemplateContent}\\r\\n \\r\\n Use the PDF Preview toolbar button. It should be disabled when empty (except client advice),\\r\\n and should open the preview in a new tab.\\r\\n
\\r\\n${tinyPdfPreviewContent}\\r\\n \\r\\n Use the Page Break toolbar button to insert our configured page break separator.\\r\\n
\\r\\n${tinyPageBreakContent}\\r\\n \\r\\n Sections marked contenteditable=\\\"false\\\" should remain locked while the rest\\r\\n stays editable. Try selecting text inside the locked block.\\r\\n
${tinyEditableSectionsContent}\\r\\n \\r\\n Copy content from Word (or Google Docs) and paste here to validate PowerPaste.\\r\\n
\\r\\n${tinyWordPasteContent}\\r\\n ia-tab.css
The CSS for layout can be found within ia-tab.css
\\r\\n <\\r\\n \\r\\n\\r\\n ia-table.css contains the custom styles for the tables within our application. Each table within our application should use these styles.
Please follow the code example below to best utilize the HTML/CSS for tables.
The CSS for layout can be found within ia-table.css
\\r\\n <table class=\\\"table\\\">\\r\\n <thead class=\\\"table-header\\\">\\r\\n <tr class=\\\"table-heading-row\\\">\\r\\n <th>Column Heading 1</th>\\r\\n <th>Column Heading 2</th>\\r\\n <th>Column Heading 3</th>\\r\\n <th>Column Heading 4</th>\\r\\n </tr>\\r\\n </thead>\\r\\n\\r\\n <tbody class=\\\"table-body\\\">\\r\\n <tr class=\\\"table-result-row\\\">\\r\\n <td>...</td>\\r\\n <td>...</td>\\r\\n <td>...</td>\\r\\n <td>...</td>\\r\\n </tr>\\r\\n <tr class=\\\"table-result-row\\\">\\r\\n <td>...</td>\\r\\n <td>...</td>\\r\\n <td>...</td>\\r\\n <td>...</td>\\r\\n </tr>\\r\\n <tr class=\\\"table-result-row\\\">\\r\\n <td>...</td>\\r\\n <td>...</td>\\r\\n <td>...</td>\\r\\n <td>...</td>\\r\\n </tr>\\r\\n </tbody>\\r\\n </table>\\r\\n \\r\\n\\r\\n | Column Heading 1 | \\r\\nColumn Heading 2 | \\r\\nColumn Heading 3 | \\r\\nColumn Heading 4 | \\r\\n
|---|---|---|---|
| ... | \\r\\n... | \\r\\n... | \\r\\n... | \\r\\n
| ... | \\r\\n... | \\r\\n... | \\r\\n... | \\r\\n
| ... | \\r\\n... | \\r\\n... | \\r\\n... | \\r\\n
These icon buttons will allow for most use cases within the app and should be used in favor of building custom icon buttons. If you need an icon button style/type that isn't listed here please consult with Darran or Scott.
\\r\\nMany icon buttons have alternates without a border for the initial UI state (btn--icon-name-alt). These are used primarily when nested within other controls.
Import button styles within your view's css file with the following @import 'buttons/buttons.css';
Remember to add the `title` tag to each button within our app title=\\\"button title here\\\"
.btn--icon-add\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-add\\\"\\r\\n \\r\\n .btn--icon-close\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-close\\\"\\r\\n \\r\\n .btn--icon-delete\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-delete\\\"\\r\\n \\r\\n .btn--icon-download\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-download\\\"\\r\\n \\r\\n .btn--icon-edit\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-edit\\\"\\r\\n \\r\\n .btn--icon-email\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-email\\\"\\r\\n \\r\\n .btn--icon-eye\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-eye\\\"\\r\\n \\r\\n .btn--icon-eye-slash\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-eye-slash\\\"\\r\\n \\r\\n .btn--icon-folder\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-folder\\\"\\r\\n \\r\\n .btn--icon-folder-locked\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-folder-locked\\\"\\r\\n \\r\\n .btn--icon-folder-locked-active\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-folder-locked-active\\\"\\r\\n \\r\\n .btn--icon-history\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-history\\\"\\r\\n \\r\\n .btn--icon-info\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-info\\\"\\r\\n \\r\\n .btn--icon-link\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-link\\\"\\r\\n \\r\\n .btn--icon-unlink\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-unlink\\\"\\r\\n \\r\\n .btn--icon-map\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-map\\\"\\r\\n \\r\\n .btn--icon-more\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-more\\\"\\r\\n \\r\\n .btn--icon-open-in-new-window\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-open-in-new-window\\\"\\r\\n \\r\\n .btn--icon-preview\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-preview\\\"\\r\\n \\r\\n .btn--icon-print\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-print\\\"\\r\\n \\r\\n .btn--icon-save\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-save\\\"\\r\\n \\r\\n .btn--icon-settings\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-settings\\\"\\r\\n \\r\\n .btn--icon-show-details\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-show-details\\\"\\r\\n \\r\\n .btn--icon-tag\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-tag\\\"\\r\\n \\r\\n .btn--icon-toggle-collapse\\r\\n Composes styles from: .btn--icon .btn--icon-no-border\\r\\n \\r\\n class=\\\"btn--icon-toggle-collapse\\\"\\r\\n \\r\\n .btn--icon-undo\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-undo\\\"\\r\\n \\r\\n .btn--icon-attachment\\r\\n Composes styles from: .btn--icon\\r\\n \\r\\n class=\\\"btn--icon-attachment\\\"\\r\\n \\r\\n This guide will review how we use CSS and related HTML markup within our application. This is a living document that will be updated and revised as needed and as our application continues to mature.
\\r\\n\\r\\nTable of contents are to the left. Enjoy the CSS documentation goodness (\\\"goodness\\\" being loosely defined of course)...
\\r\\nThe current state of our CSS in development is in reasonably good shape. We have a reliable codebase with very few exceptions. That said code can always be improved, and we have a list of items we would like to clean up and refactor. The code has grown and expanded in scope quite a bit since beginning the design phase of the project several years ago. This growth has seen some accrued code debt that we will be addressing as time and resources allow. Listed below are some notable areas where we would like to review our current CSS, and related implementation.
\\r\\n\\r\\ncompose: class-name from “./style.css” syntax which allows composition of the exact class we need while not needing @import entire CSS files. We currently rely too heavily on using the more general @import method of including items we want to compose from. This is causing unneeded code bloat as we are bringing in entire stylesheets when we only need to reference a few specific classes. These refinements will help with the efficiency enhancements already mentionedAll graphics and icons within our app should be in the SVG vector format. This graphics format will allow for optimal image scalling for various screen types and resolution densities. Do not add additional graphics or icons without consulting Darran or Scott.
To add an image reference it with the following ~img/image-name.svg within your CSS file (preferably), or alternatively via an <img> tag within your HTML template. You may also reference images within a .ts file if required to accomplish specific development goals.
Currently, we have some inconsistencies with image naming conventions. We will be working to refactor and correct this in future builds.
\\r\\nUse the Templates button to insert predefined content blocks.
\r\n `.trim();\r\n\r\n public froalaTemplateSettings = {\r\n height: 320,\r\n templates: [\r\n { title: 'Please select...', description: '', content: '' },\r\n {\r\n title: 'Opening Paragraph',\r\n description: 'Basic intro',\r\n content: `Thank you for meeting with us. This document outlines your cover and recommendations.
`,\r\n },\r\n {\r\n title: 'Fee Disclosure',\r\n description: 'Compliance section',\r\n content: `\r\nOur advice fee for this engagement is $1,250 (incl. GST).
\r\nKind regards,
\r\n\\${adviserName}
Insurance Adviser
Client: Jane Doe
\r\nPolicy: Business Expense Cover
\r\nEditable narrative: add adviser notes, recommendations, and next steps here.
\r\nThis section should remain unedited.
\r\nPaste content from Word here to test cleanup, formatting, and lists.
\r\nClick PDF Preview to generate a PDF for this HTML.
\r\nInsert a page break below:
\r\nPage 1 content...
\r\nPage 2 content...
\r\n `.trim();\r\n\r\n public froalaPageBreakSettings = {\r\n height: 320,\r\n };\r\n\r\n public tinyTemplateContent = `\r\nUse the Template button to insert predefined content blocks.
\r\n `.trim();\r\n\r\n public tinyTemplateSettings = {\r\n height: 320,\r\n templates: [\r\n { title: 'Please select...', description: '', content: '' },\r\n {\r\n title: 'Opening Paragraph',\r\n description: 'Basic intro',\r\n content: `Thank you for meeting with us. This document outlines your cover and recommendations.
`,\r\n },\r\n {\r\n title: 'Fee Disclosure',\r\n description: 'Compliance section',\r\n content: `\r\nOur advice fee for this engagement is $1,250 (incl. GST).
\r\nKind regards,
\r\n\\${adviserName}
Insurance Adviser
Client: Jane Doe
\r\nPolicy: Business Expense Cover
\r\nEditable narrative: add adviser notes, recommendations, and next steps here.
\r\nThis section should remain unedited.
\r\nPaste content from Word here to test cleanup, formatting, and lists.
\r\nClick PDF Preview to generate a PDF for this HTML.
\r\nInsert a page break below:
\r\nPage 1 content...
\r\nPage 2 content...
\r\n `.trim();\r\n\r\n public tinyPageBreakSettings = {\r\n height: 320,\r\n };\r\n}\r\n"],"names":["___HTML_LOADER_IMPORT_0___","URL","___HTML_LOADER_IMPORT_1___","___HTML_LOADER_IMPORT_2___","___HTML_LOADER_IMPORT_3___","___HTML_LOADER_IMPORT_4___","___HTML_LOADER_IMPORT_5___","___HTML_LOADER_IMPORT_6___","___HTML_LOADER_IMPORT_7___","___HTML_LOADER_IMPORT_8___","___HTML_LOADER_IMPORT_9___","___HTML_LOADER_IMPORT_10___","___HTML_LOADER_IMPORT_11___","___HTML_LOADER_IMPORT_12___","___HTML_LOADER_IMPORT_13___","___HTML_LOADER_IMPORT_14___","___HTML_LOADER_IMPORT_15___","___HTML_LOADER_IMPORT_16___","___HTML_LOADER_IMPORT_17___","___HTML_LOADER_IMPORT_18___","___HTML_LOADER_IMPORT_19___","___HTML_LOADER_IMPORT_20___","___HTML_LOADER_IMPORT_21___","___HTML_LOADER_IMPORT_22___","___HTML_LOADER_IMPORT_23___","___HTML_LOADER_IMPORT_24___","___HTML_LOADER_IMPORT_25___","___HTML_LOADER_IMPORT_26___","___HTML_LOADER_IMPORT_27___","___HTML_LOADER_IMPORT_28___","___HTML_LOADER_IMPORT_29___","___HTML_LOADER_IMPORT_30___","___HTML_LOADER_IMPORT_31___","___HTML_LOADER_IMPORT_32___","___HTML_LOADER_IMPORT_33___","___HTML_LOADER_IMPORT_34___","___HTML_LOADER_IMPORT_35___","___HTML_LOADER_IMPORT_36___","___HTML_LOADER_IMPORT_37___","___HTML_LOADER_IMPORT_38___","___HTML_LOADER_IMPORT_39___","___HTML_LOADER_IMPORT_40___","___HTML_LOADER_IMPORT_41___","___HTML_LOADER_IMPORT_42___","___HTML_LOADER_IMPORT_43___","___HTML_LOADER_IMPORT_44___","___HTML_LOADER_IMPORT_45___","___HTML_LOADER_IMPORT_46___","___HTML_LOADER_IMPORT_47___","___HTML_LOADER_IMPORT_48___","___HTML_LOADER_IMPORT_49___","___HTML_LOADER_IMPORT_50___","___HTML_LOADER_IMPORT_51___","___HTML_LOADER_IMPORT_52___","___HTML_LOADER_IMPORT_53___","___HTML_LOADER_IMPORT_54___","___HTML_LOADER_IMPORT_55___","___HTML_LOADER_IMPORT_56___","___HTML_LOADER_IMPORT_57___","___HTML_LOADER_IMPORT_58___","___HTML_LOADER_IMPORT_59___","___HTML_LOADER_IMPORT_60___","___HTML_LOADER_IMPORT_61___","___HTML_LOADER_IMPORT_62___","___HTML_LOADER_IMPORT_63___","___HTML_LOADER_IMPORT_64___","___HTML_LOADER_IMPORT_65___","___HTML_LOADER_IMPORT_66___","___HTML_LOADER_IMPORT_67___","___HTML_LOADER_IMPORT_68___","___HTML_LOADER_IMPORT_69___","___HTML_LOADER_IMPORT_70___","___HTML_LOADER_IMPORT_71___","___HTML_LOADER_IMPORT_72___","___HTML_LOADER_IMPORT_73___","___HTML_LOADER_IMPORT_74___","___HTML_LOADER_IMPORT_75___","___HTML_LOADER_IMPORT_76___","___HTML_LOADER_IMPORT_77___","___HTML_LOADER_IMPORT_78___","___HTML_LOADER_IMPORT_79___","___HTML_LOADER_IMPORT_80___","___HTML_LOADER_IMPORT_81___","___HTML_LOADER_IMPORT_82___","___HTML_LOADER_IMPORT_83___","___HTML_LOADER_IMPORT_84___","___HTML_LOADER_IMPORT_85___","___HTML_LOADER_IMPORT_86___","___HTML_LOADER_IMPORT_87___","___HTML_LOADER_IMPORT_88___","___HTML_LOADER_IMPORT_89___","___HTML_LOADER_IMPORT_90___","___HTML_LOADER_IMPORT_91___","___HTML_LOADER_IMPORT_92___","___HTML_LOADER_IMPORT_93___","___HTML_LOADER_IMPORT_94___","___HTML_LOADER_IMPORT_95___","___HTML_LOADER_IMPORT_96___","___HTML_LOADER_IMPORT_97___","___HTML_LOADER_IMPORT_98___","___HTML_LOADER_IMPORT_99___","___HTML_LOADER_IMPORT_100___","___HTML_LOADER_IMPORT_101___","___HTML_LOADER_IMPORT_102___","___HTML_LOADER_IMPORT_103___","___HTML_LOADER_IMPORT_104___","___HTML_LOADER_IMPORT_105___","___HTML_LOADER_IMPORT_106___","___HTML_LOADER_IMPORT_107___","___HTML_LOADER_IMPORT_108___","___HTML_LOADER_IMPORT_109___","___HTML_LOADER_IMPORT_110___","___HTML_LOADER_IMPORT_111___","___HTML_LOADER_IMPORT_112___","___HTML_LOADER_IMPORT_113___","___HTML_LOADER_IMPORT_114___","___HTML_LOADER_IMPORT_115___","___HTML_LOADER_IMPORT_116___","___HTML_LOADER_IMPORT_117___","___HTML_LOADER_IMPORT_118___","___HTML_LOADER_IMPORT_119___","___HTML_LOADER_IMPORT_120___","___HTML_LOADER_IMPORT_121___","___HTML_LOADER_IMPORT_122___","___HTML_LOADER_IMPORT_123___","___HTML_LOADER_IMPORT_124___","___HTML_LOADER_IMPORT_125___","___HTML_LOADER_IMPORT_126___","___HTML_LOADER_IMPORT_127___","___HTML_LOADER_IMPORT_128___","___HTML_LOADER_IMPORT_129___","___HTML_LOADER_IMPORT_130___","___HTML_LOADER_IMPORT_131___","___HTML_LOADER_IMPORT_132___","___HTML_LOADER_IMPORT_133___","___HTML_LOADER_IMPORT_134___","___HTML_LOADER_IMPORT_135___","___HTML_LOADER_IMPORT_136___","___HTML_LOADER_IMPORT_137___","___HTML_LOADER_IMPORT_138___","___HTML_LOADER_IMPORT_139___","___HTML_LOADER_IMPORT_140___","___HTML_LOADER_IMPORT_141___","___HTML_LOADER_IMPORT_142___","___HTML_LOADER_IMPORT_143___","___HTML_LOADER_IMPORT_144___","___HTML_LOADER_IMPORT_145___","___HTML_LOADER_IMPORT_146___","___HTML_LOADER_IMPORT_147___","___HTML_LOADER_IMPORT_148___","___HTML_LOADER_IMPORT_149___","___HTML_LOADER_IMPORT_150___","___HTML_LOADER_IMPORT_151___","___HTML_LOADER_IMPORT_152___","___HTML_LOADER_IMPORT_153___","___HTML_LOADER_IMPORT_154___","___HTML_LOADER_IMPORT_155___","___HTML_LOADER_IMPORT_156___","___HTML_LOADER_IMPORT_157___","___HTML_LOADER_IMPORT_158___","___HTML_LOADER_IMPORT_159___","___HTML_LOADER_IMPORT_160___","___HTML_LOADER_IMPORT_161___","___HTML_LOADER_IMPORT_162___","___HTML_LOADER_IMPORT_163___","___HTML_LOADER_IMPORT_164___","___HTML_LOADER_IMPORT_165___","___HTML_LOADER_IMPORT_166___","code","styles","view","froalaTemplateContent","trim","froalaTemplateSettings","height","templates","title","description","content","froalaEditableSectionsContent","froalaEditableSectionsSettings","allowStylingOnNonEditable","htmlAllowedAttrs","froalaWordPasteContent","froalaWordPasteSettings","wordPasteModal","wordPasteKeepFormatting","froalaPdfPreviewContent","froalaPdfPreviewSettings","froalaPageBreakContent","froalaPageBreakSettings","tinyTemplateContent","tinyTemplateSettings","tinyEditableSectionsContent","tinyEditableSectionsSettings","tinyWordPasteContent","tinyWordPasteSettings","powerpaste_word_import","powerpaste_allow_local_images","tinyPdfPreviewContent","tinyPdfPreviewSettings","tinyPageBreakContent","tinyPageBreakSettings"],"sourceRoot":""}