From fc1b66697dc97934823c64b393498fb4ab7acd13 Mon Sep 17 00:00:00 2001 From: Brian Kimball Date: Mon, 1 Aug 2022 12:46:11 -0400 Subject: [PATCH] feat(QueryBuilder): New QueryBuilder component for dynamically generating queries (#1328) * Select is intercepting clicks to the ng-content area * adding circle icon shape * not closing overlay if clicking in nested overlay * add shape attr to color option as well * Set GlobalSearch on setInitialSortFilter * clear global search * feat(lib): SearchBox now has keepOpen flag * updating search box styling and functionality * updating search box styling * adding event emitter for applying search * add options for advanced filtering to getTableResults * advanced filtering on Interfaces an setInitialSortFilter * refactor(): some remaining prep work for the upcoming typescript 4 upgrade * adding value getters to some table cells * Revert "refactor(): "REVERT: some refactor work in preparation for typescript 4.0.8 upgrade (#1266)" (#1271)" This reverts commit 5be03083b087818c084f5c198c884da0a8f73b2d. * upping ts version to 4.0.8 * Revert "refactor(): "REVERT: some refactor work in preparation for typescript 4.0.8 upgrade (#1266)" (#1271)" This reverts commit 5be03083b087818c084f5c198c884da0a8f73b2d. * adding dep * update to angular 11 * updated typedoc to .22 * update to angular 12 * fixing typing issue caused by https://github.com/microsoft/TypeScript/issues/35865 * addressing deprecation warnings * updating angular/cdk to 12.2.13 * angular 13 update * updating @angular/cdk to 13.3.1 * commented a lot of things out to get build to pass, will have to find fixes * upgrading to jest 27 * modifying schematics to get build to pass, may have broken some things * refactoring overlay components to use FlexibleConnectedPositionStrategy * updating compilation mode, disabling some tests, and re-enabling a lot more * removing console log * fixing dragula import * initial fix for cke mock * adding autoposition to extra large tooltip example * adding bounce * !: Upgrading to Angular 13 * chore(release): 7.0.0-next.0 * fix(Stepper): Remove circular reference caused by unused code * fix(DataTable): Removed circular dependencies * fix(Breadcrumb): No more circular deps fix(EntityPickerResults): No more circular deps * chore(release): 7.0.1-next.0 * fixing broken unit test * chore(release): 7.1.0-next.0 * fix for function not found error * chore(release): 7.1.1-next.0 * fixing bug with simple table component * formatting * chore(release): 7.1.2-next.0 * increasing toolstip offset to eliminate cursor juddering * enabling auto tooltip positioning by default * fix(NovoFileInputElement): Allow for same file delete/upload, allow file list clear from patchValue(). (#1300) * 1183 & 1184: Correct FileInput upload issues. * Code review fixes * Added clear file list button for testing * Updated novo-design-tokens version * Updgraded htmlhint to remove async security vulnerability Co-authored-by: Kurt Mcgallion * chore(release): 7.2.0-next.0 * feat(QueryBuilder): Added a search criteria builder (#1302) * style(Chips): remove max-width from novo-picker if a row chips picker (#1299) * chore(release): 6.2.1 * feat(QueryBuilder): Added WIP Query Builder * fix(QueryBuilder): Removed to much unused code * fix(QB): minor tweeks to presentation and remove check on DataSpecialization * linting * reverting changes to select sizing because it made it too tall Co-authored-by: Michael Dill Co-authored-by: Bump And Release Co-authored-by: Dan Voegelin * fix(imports): fix a few utils imports to correct issues with debugging locally (#1303) * chore(release): 7.2.1-next.0 * fix(Schematic): Missing schematics and documentation * chore(release): 7.2.2-next.0 * fix(import): fix a utils import to correct issues with debugging locally (#1305) * making 'or' configurable, adding default criteria row * adding configurable label for translating * field padding and red trash can * fixing input box padding * remove entity picker in field select * adjusting calendar icon spacing * removing unused files * Added fixes and styling updates for novo-accordion * adding mockup of boolean field def * BH-75889 - Use correct comparison for dates in time picker input (#1304) Co-authored-by: kristian.robe * chore(release): 7.2.3-next.0 * updates to boolean def and adding dummy address def * wip: Got custom field defs working * refactor(QueryBuilder): Renamed all the tokens,directives and subclasses * some minor fixes for string def * adding Double field type * Fixed definition field label and date-between input * adding/removing default picker defs * temporary workaround for scalar field needing select def not picker * adding another def * fixing variable name * updating field def logic * updating some console logs * updating console log * fixing custom def in demo * chore(release): 7.2.4-next.0 * simplifying field def logic * adding label fallback to entity picker result name * adding display labels for BillingProfile and InvoiceTerm results * add optional backdrop input option to search component * Styling updates for selects and picker in query builder * Fix build issues * removing max-width from novo-search's input * Delete button fix, input value width fixes, individual chip deletion fix * BH-75391 : fix grouped multi picker list item width. (#1312) * style(picker): Added data-automation-id to picker results (#1317) * chore(release): 7.2.5-next.0 * Fixed text field persistence issue. * fixing some build issues that popped up from rebase * reverting changes to package-lock * updates to support where clauses * Removed comments, fixed date inoput example, clear date field on operator change. * Added picker overlay to trigger on input field * Fixed booleaninput import * Small style fix * adding ellipsis attribute and fixing text transitions * Fixed border style * update bullhorn icons version * Close date picker on select * fixing default search box input cont size * removed some unnecessary styling * adding ability to pre-populate and clear query builder form * Fix field name identifier * rebase * feat(CKEditor): Do not encode special characters by default (#1320) * chore(workflow): updating node version for release workflows * chore(workflow): updating NPM_TOKEN for release workflow * poackage-lock updates and fixing unit tests * fix for form prepopulation bug in the demo * temporarily reverting fieldName change and adding labels to prepopulated fields * fixing a few things * feat(QueryBuilder): Updated QueryBuilder styles, added ConditionGroups and service to support pre-population fix(Field): PickerToggle should support triggerOnFocus now. feat(Common): *New* Visible directive to control visiblity * updating where property from string to object * style(QueryBuilder): borders are now round * style(QueryBuilder): Labels now ash * linting * reverting fieldName change * Update field selection and clear value and operator on field change * re-enabling form prepopulation * updating date format for range picker to work with prepopulation * refactoring query builder to use NovoLabelService everywhere * ux and styling tweaks * Added automation id for add condition and bolded clear all * updating icon size attributes to better scale with base icon 1.2em font-size * hiding tooltip when parent overlay closes * removing obsolete advancedFilter properties and replacing some with where * fixing unit test * Fixed date overlay issue * making tooltip directive show/hide functions public * adding data-control-type to novo-field * adding prop to allow event propagation * trying out adding control id * adding highlight pipe and refactoring templates to use it * fixing bug with nested overlays closing on click events * feat(Autocomplete): Autocomplete now works with ChipList (#1326) * deprecating highlight fns * Updated Search Data * fix(Chips): update the ux for disabled chips (#1331) -darken the opacity to improve readability -update text color of disabled chips to look non-selectable -remove the X icon to further confer that this chip is read-only Co-authored-by: Michael Dill * feat(NonIdealState): Non Ideal Loading (#1334) * Expanding non-ideal-state for use case with novo-loading * Expanding non-ideal-state for use case with novo-loading * Minor structure cleanup * Changed message on example * chore(ci): updating tokens * chore(ci): Other Tokens Updated * feat(Description): add ability for control description to handle html (#1333) * feat(Description): add ability for control description to handle html * feat(Description) cleaning up example for description containing HTML * feat(Description) adding new example for new FieldInteractionAPI functionality * regeneratinv package-lock as v1 and fixing minor type Co-authored-by: Fayranne Lipton Co-authored-by: John Sullivan Co-authored-by: Dan Voegelin * feat(Docs): new docs, and bump release * fixing chiplist issue and clearing queryform operator/value on field change * feat(Bump): Needs a bump for semantic release * code review changes Co-authored-by: Michael Dill Co-authored-by: Dan Voegelin Co-authored-by: Haris Iqbal Co-authored-by: Bump And Release Co-authored-by: Kurt Mcgallion Co-authored-by: Kurt Mcgallion Co-authored-by: Kristian Robe Co-authored-by: kristian.robe Co-authored-by: Jordan Brownfield <106606534+jordanbullhorn@users.noreply.github.com> Co-authored-by: kiri-um-bh <79481150+kiri-um-bh@users.noreply.github.com> Co-authored-by: Kurt Mcgallion Co-authored-by: antonyw89 <73492464+antonyw89@users.noreply.github.com> Co-authored-by: Michael Dill Co-authored-by: Fayranne Lipton Co-authored-by: Fayranne Lipton Co-authored-by: John Sullivan --- package-lock.json | 54 ++-- .../src/elements/chips/ChipList.ts | 10 - .../autocomplete/autocomplete.component.ts | 1 - projects/novo-examples/src/examples.routes.ts | 299 +++++++++++------- 4 files changed, 218 insertions(+), 146 deletions(-) diff --git a/package-lock.json b/package-lock.json index cc7f24436d..6dbb18d8fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4899,7 +4899,7 @@ "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", "dev": true }, "sprintf-js": { @@ -16623,7 +16623,7 @@ "sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", - "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", + "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", "dev": true }, "ssri": { @@ -16850,13 +16850,13 @@ "strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", - "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", + "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==", "dev": true }, "strip-bom-string": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz", - "integrity": "sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=", + "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==", "dev": true }, "strip-final-newline": { @@ -16877,13 +16877,13 @@ "strip-json-comments": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", - "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", + "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==", "dev": true }, "style-search": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", - "integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=", + "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==", "dev": true }, "stylelint": { @@ -17341,7 +17341,7 @@ "svg-tags": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", - "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=", + "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", "dev": true }, "symbol-observable": { @@ -17541,17 +17541,17 @@ "text-mask-addons": { "version": "3.8.0", "resolved": "https://registry.npmjs.org/text-mask-addons/-/text-mask-addons-3.8.0.tgz", - "integrity": "sha1-F7Ye9mWk82gR8uofAaIjtL5hqyY=" + "integrity": "sha512-VSZSdc/tKn4zGxgpJ+uNBzoW1t472AoAFIlbw1K7hSNXz0DfSBYDJNRxLqgxOfWw1BY2z6DQpm7g0sYZn5qLpg==" }, "text-mask-core": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/text-mask-core/-/text-mask-core-5.1.2.tgz", - "integrity": "sha1-gN1evgSCV1fkZhnmkUB6n4s8G28=" + "integrity": "sha512-VfkCMdmRRZqXgQZFlDMiavm3hzsMzBM23CxHZsaeAYg66ZhXCNJWrFmnJwNy8KF9f74YvAUAuQenxsMCfuvhUw==" }, "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", - "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", + "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, "throat": { @@ -17563,7 +17563,7 @@ "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", - "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", + "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==", "dev": true }, "through2": { @@ -17584,7 +17584,7 @@ "ticky": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/ticky/-/ticky-1.0.1.tgz", - "integrity": "sha1-t8+nHnaPHJAAxJe5FRswlHxQ5G0=" + "integrity": "sha512-RX35iq/D+lrsqhcPWIazM9ELkjOe30MSeoBHQHSsRwd1YuhJO5ui1K1/R0r7N3mFvbLBs33idw+eR6j+w6i/DA==" }, "timezone-support": { "version": "2.0.2", @@ -17612,7 +17612,7 @@ "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", "dev": true }, "to-readable-stream": { @@ -17696,7 +17696,7 @@ "trim": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", - "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=", + "integrity": "sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ==", "dev": true }, "trim-newlines": { @@ -17851,7 +17851,7 @@ "type-check": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", - "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=", + "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==", "dev": true, "requires": { "prelude-ls": "~1.1.2" @@ -17888,7 +17888,7 @@ "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", - "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", + "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==", "dev": true }, "typedarray-to-buffer": { @@ -18131,7 +18131,7 @@ "unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", - "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=", + "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==", "dev": true }, "update-notifier": { @@ -18234,13 +18234,13 @@ "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, "utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", - "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=", + "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==", "dev": true }, "uuid": { @@ -18285,7 +18285,7 @@ "validate-npm-package-name": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz", - "integrity": "sha1-X6kS2B630MdK/BQN5zF/DKffQ34=", + "integrity": "sha512-M6w37eVCMMouJ9V/sdPGnC5H4uDr73/+xdq0FBLO3TFFX1+7wiUY6Es328NN+y43tmY+doUdN9g9J21vqB7iLw==", "dev": true, "requires": { "builtins": "^1.0.3" @@ -18294,7 +18294,7 @@ "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", - "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=", + "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", "dev": true }, "vfile": { @@ -18403,7 +18403,7 @@ "wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", - "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=", + "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==", "dev": true, "requires": { "defaults": "^1.0.3" @@ -18716,7 +18716,7 @@ "wordwrap": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", - "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=", + "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==", "dev": true }, "wrap-ansi": { @@ -18759,7 +18759,7 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, "write": { @@ -18803,7 +18803,7 @@ "x-is-string": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz", - "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=", + "integrity": "sha512-GojqklwG8gpzOVEVki5KudKNoq7MbbjYZCbyWzEz7tyPA7eleiE0+ePwOWQQRb5fm86rD3S8Tc0tSFf3AOv50w==", "dev": true }, "xdg-basedir": { @@ -18820,7 +18820,7 @@ "xml": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz", - "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=", + "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==", "dev": true }, "xml-name-validator": { @@ -18898,7 +18898,7 @@ "yauzl": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz", - "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=", + "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==", "dev": true, "requires": { "buffer-crc32": "~0.2.3", diff --git a/projects/novo-elements/src/elements/chips/ChipList.ts b/projects/novo-elements/src/elements/chips/ChipList.ts index a85adeb957..53531fef30 100644 --- a/projects/novo-elements/src/elements/chips/ChipList.ts +++ b/projects/novo-elements/src/elements/chips/ChipList.ts @@ -402,7 +402,6 @@ export class NovoChipList } this._resetChips(); - // Check to see if we need to update our tab index this._updateTabIndex(); @@ -480,15 +479,6 @@ export class NovoChipList } } - addValue(value: any): void { - this.value = [...this.value, value]; - this._chipInput.clearValue(); - } - - removeValue(value: any): void { - this.value = this.value.filter((it) => !this.compareWith(it, value)); - } - // Implemented as part of ControlValueAccessor. registerOnChange(fn: (value: any) => void): void { this._onChange = fn; diff --git a/projects/novo-elements/src/elements/field/autocomplete/autocomplete.component.ts b/projects/novo-elements/src/elements/field/autocomplete/autocomplete.component.ts index c10d984347..954ddfda84 100644 --- a/projects/novo-elements/src/elements/field/autocomplete/autocomplete.component.ts +++ b/projects/novo-elements/src/elements/field/autocomplete/autocomplete.component.ts @@ -185,7 +185,6 @@ export class NovoAutocompleteElement checkPanel() { const isTriggered = this.triggerOn(this._formField._control); - console.log('checking', isTriggered); if (isTriggered && this.element) { this.openPanel(); } diff --git a/projects/novo-examples/src/examples.routes.ts b/projects/novo-examples/src/examples.routes.ts index d6bb8618b1..707c001d7c 100644 --- a/projects/novo-examples/src/examples.routes.ts +++ b/projects/novo-examples/src/examples.routes.ts @@ -5777,81 +5777,7 @@ export class TemplatesPage { @Component({ - selector: 'august-2022-page', - template: `

📢 August 2022 (version 7.3.x)

-

Announcement: New features and improvements!

-

Bullhorn is continually seeking to update and innovate our products, and leverage the latest features in the frameworks we use. In support of that mission, we are updating our Novo UI and its supporting novo-elements library to Angular 13. This update allows us to continue offering a streamlined and consistent experience across Bullhorn’s complete product portfolio. This update includes both an Angular upgrade, as well as supporting the latest Typescript updates. You can find more details in the Technical Release Notes section below.

-

Release Timeline

-

Bullhorn has released a Release Candidate v7.3.x of Novo-elements. Bullhorn will update Novo to use Novo-Elements v7.3.x in the 2022.8 release

-
npm install novo-elements@next
-# or
-npm install novo-elements@7.3.x
-
-

Notable changes #

-
    -
  • #1331 - Chips: updated disabled chip styles for better readability
    • -
  • #1326 - Autocomplete: Autocomplete now works with ChipList
    • -
  • #1334 - NonIdealState: New loading pattern for Non Ideal State
    • -
  • #1333 - Forms: field hints now support html text w/ FieldInteractionApi support
    • -
-

New Features#

-

Chips: updated disabled chip styles for better #

-
    -
  • darken the opacity to improve readability
    • -
  • update text color of disabled chips to look non-selectable
    • -
  • remove the X icon to further confer that this chip is read-only
    • -
-

previous state was 40% opacity: -chips-before

-

After updates:

-

chips-after

-

example with disabled and non disabled chips

-

after-example-both

-
-

Autocomplete #

-

Autocomplete now works with the NovoChipList when used in a NovoFormField. The manual events are no longer necessary to utilize the autocomplete functionality. Now basic functionality can be supported with a limited specification.

-
<novo-field>
-  <novo-label>Favorite Fruits</novo-label>
-  <novo-chip-list #chipList [formControl]="fieldCtrl">
-    <novo-chip *ngFor="let fruit of chipList.value" [value]="fruit">
-      <novo-text>fruit</novo-text>
-      <novo-icon novoChipRemove>close</novo-icon>
-    </novo-chip>
-    <input #chipInput novoChipInput placeholder="New fruit..." autocomplete="off" [formControl]="searchCtrl" />
-  </novo-chip-list>
-  <novo-autocomplete (optionSelected)="selected($event)" multiple>
-    <novo-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
-      fruit
-    </novo-option>
-  </novo-autocomplete>
-</novo-field>
-
-

doqFeEqHOa

-
-

Loading Pattern for Non Ideal State #

-

Adding a message next to the novo-loading component is not a known pattern. This could be used to display a message while loading with the flag controlled at implementation. This can be used for a loading message displaying all the time for a loading screen, or having a timer flipping the flag to show a message during a long long loading screen.

-
Screenshots
-

image -image

-
-

New HTML Form Field Hints #

-

Added the ability to set the description (aka hint text) on form controls to display HTML

-

image

-

Also added the ability for the FieldInteractionAPI to update the description of a field (potentially adding in HTML):

-
API.setDescription('description', '<span><b>BOLD</b> description with a <a target="_blank" href="https://www.google.com">Google</a> Link</span>');
-
-

field-interaction-description

-

Check out the demo!

-`, - host: { class: 'markdown-page' } -}) -export class August2022Page { - public params: any = {}; -} - - -@Component({ - selector: 'february-2022-page', + selector: '2022-02-01-page', template: `

🚀 February 2022 (version 6 - Golden)

Release v6.0.0: This release contains several component updates and additional new components. Initial refactoring of component architecture to support future efforts to improve the design systems consistency along with improvements to the developer experience.

Note: This update is a major release which includes changes that require updates to your code. When updating to Novo Elements V6 from prior versions, the following commands are required:

@@ -6217,39 +6143,13 @@ export class August2022Page { `, host: { class: 'markdown-page' } }) -export class February2022Page { +export class 20220201Page { public params: any = {}; } @Component({ - selector: 'june-2022-page', - template: `

📢 June 2022 (version 7.2.x)

-

New Feature: Query Builder: We have added a new component to help with building complex and modern interfaces. At Bullhorn we have to enable our users to create advanced and dynamic searches against there data. We have built many iterations of a query builder in the past but we think this one is our best and most re-usable.

-

Bullhorn is continually seeking to update and innovate our products, and leverage the latest features in the frameworks we use. In support of that mission, we are updating our Novo UI and its supporting novo-elements library to Angular 13. This update allows us to continue offering a streamlined and consistent experience across Bullhorn’s complete product portfolio. This update includes both an Angular upgrade, as well as supporting the latest Typescript updates. You can find more details in the Technical Release Notes section below.

-

Release Timeline

-

Bullhorn has released a Release Candidate v7 of Novo-elements. Bullhorn will update Novo to use Novo-Elements v7 in the 2022.6 release

-
npm install novo-elements@next
-# or
-npm install novo-elements@7.2.0-next.0
-
-

How to get it!

-
-
Note: First follow the steps to update your angular app to Version 13 if you haven't already.
-
-
npm install --save novo-elements@7.x.x
-ng update novo-elements --migrate-only --from=0.0.0 --to=7.0.0 --force --allow-dirty  
-
-`, - host: { class: 'markdown-page' } -}) -export class June2022Page { - public params: any = {}; -} - - -@Component({ - selector: 'may-2022-page', + selector: '2022-05-01-page', template: `

📢 May 2022 (version 7)

Announcement: Novo Elements is being updated to Angular 13

Bullhorn is continually seeking to update and innovate our products, and leverage the latest features in the frameworks we use. In support of that mission, we are updating our Novo UI and its supporting novo-elements library to Angular 13. This update allows us to continue offering a streamlined and consistent experience across Bullhorn’s complete product portfolio. This update includes both an Angular upgrade, as well as supporting the latest Typescript updates. You can find more details in the Technical Release Notes section below.

@@ -6288,7 +6188,181 @@ npm install novo-elements@7.2.0-next.0 `, host: { class: 'markdown-page' } }) -export class May2022Page { +export class 20220501Page { + public params: any = {}; +} + + +@Component({ + selector: '2022-08-01-page', + template: `

📢 August 2022 (version 7.3.x)

+

Announcement: New features and improvements!

+

Bullhorn is continually seeking to update and innovate our products, and leverage the latest features in the frameworks we use. In support of that mission, we are updating our Novo UI and its supporting novo-elements library to Angular 13. This update allows us to continue offering a streamlined and consistent experience across Bullhorn’s complete product portfolio. This update includes both an Angular upgrade, as well as supporting the latest Typescript updates. You can find more details in the Technical Release Notes section below.

+

Release Timeline

+

Bullhorn has released a Release Candidate v7.3.x of Novo-elements. Bullhorn will update Novo to use Novo-Elements v7.3.x in the 2022.8 release

+
npm install novo-elements@next
+# or
+npm install novo-elements@7.3.x
+
+

Notable changes #

+
    +
  • #1331 - Chips: updated disabled chip styles for better readability
    • +
  • #1326 - Autocomplete: Autocomplete now works with ChipList
    • +
  • #1334 - NonIdealState: New loading pattern for Non Ideal State
    • +
  • #1333 - Forms: field hints now support html text w/ FieldInteractionApi support
    • +
+

New Features#

+

Chips: updated disabled chip styles for better #

+
    +
  • darken the opacity to improve readability
    • +
  • update text color of disabled chips to look non-selectable
    • +
  • remove the X icon to further confer that this chip is read-only
    • +
+

previous state was 40% opacity: +chips-before

+

After updates:

+

chips-after

+

example with disabled and non disabled chips

+

after-example-both

+
+

Autocomplete #

+

Autocomplete now works with the NovoChipList when used in a NovoFormField. The manual events are no longer necessary to utilize the autocomplete functionality. Now basic functionality can be supported with a limited specification.

+
<novo-field>
+  <novo-label>Favorite Fruits</novo-label>
+  <novo-chip-list #chipList [formControl]="fieldCtrl">
+    <novo-chip *ngFor="let fruit of chipList.value" [value]="fruit">
+      <novo-text>{{fruit}}</novo-text>
+      <novo-icon novoChipRemove>close</novo-icon>
+    </novo-chip>
+    <input #chipInput novoChipInput placeholder="New fruit..." autocomplete="off" [formControl]="searchCtrl" />
+  </novo-chip-list>
+  <novo-autocomplete (optionSelected)="selected($event)" multiple>
+    <novo-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
+      {{fruit}}
+    </novo-option>
+  </novo-autocomplete>
+</novo-field>
+
+

doqFeEqHOa

+
+

Loading Pattern for Non Ideal State #

+

Adding a message next to the novo-loading component is not a known pattern. This could be used to display a message while loading with the flag controlled at implementation. This can be used for a loading message displaying all the time for a loading screen, or having a timer flipping the flag to show a message during a long long loading screen.

+
Screenshots
+

image +image

+
+

New HTML Form Field Hints #

+

Added the ability to set the description (aka hint text) on form controls to display HTML

+

image

+

Also added the ability for the FieldInteractionAPI to update the description of a field (potentially adding in HTML):

+
API.setDescription('description', '<span><b>BOLD</b> description with a <a target="_blank" href="https://www.google.com">Google</a> Link</span>');
+
+

field-interaction-description

+

Check out the demo!

+`, + host: { class: 'markdown-page' } +}) +export class 20220801Page { + public params: any = {}; +} + + +@Component({ + selector: 'august-2022-page', + template: `

📢 August 2022 (version 7.3.x)

+

Announcement: New features and improvements!

+

Bullhorn is continually seeking to update and innovate our products, and leverage the latest features in the frameworks we use. In support of that mission, we are updating our Novo UI and its supporting novo-elements library to Angular 13. This update allows us to continue offering a streamlined and consistent experience across Bullhorn’s complete product portfolio. This update includes both an Angular upgrade, as well as supporting the latest Typescript updates. You can find more details in the Technical Release Notes section below.

+

Release Timeline

+

Bullhorn has released a Release Candidate v7.3.x of Novo-elements. Bullhorn will update Novo to use Novo-Elements v7.3.x in the 2022.8 release

+
npm install novo-elements@next
+# or
+npm install novo-elements@7.3.x
+
+

Notable changes #

+
    +
  • #1331 - Chips: updated disabled chip styles for better readability
    • +
  • #1326 - Autocomplete: Autocomplete now works with ChipList
    • +
  • #1334 - NonIdealState: New loading pattern for Non Ideal State
    • +
  • #1333 - Forms: field hints now support html text w/ FieldInteractionApi support
    • +
+

New Features#

+

Chips: updated disabled chip styles for better #

+
    +
  • darken the opacity to improve readability
    • +
  • update text color of disabled chips to look non-selectable
    • +
  • remove the X icon to further confer that this chip is read-only
    • +
+

previous state was 40% opacity: +chips-before

+

After updates:

+

chips-after

+

example with disabled and non disabled chips

+

after-example-both

+
+

Autocomplete #

+

Autocomplete now works with the NovoChipList when used in a NovoFormField. The manual events are no longer necessary to utilize the autocomplete functionality. Now basic functionality can be supported with a limited specification.

+
<novo-field>
+  <novo-label>Favorite Fruits</novo-label>
+  <novo-chip-list #chipList [formControl]="fieldCtrl">
+    <novo-chip *ngFor="let fruit of chipList.value" [value]="fruit">
+      <novo-text>fruit</novo-text>
+      <novo-icon novoChipRemove>close</novo-icon>
+    </novo-chip>
+    <input #chipInput novoChipInput placeholder="New fruit..." autocomplete="off" [formControl]="searchCtrl" />
+  </novo-chip-list>
+  <novo-autocomplete (optionSelected)="selected($event)" multiple>
+    <novo-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
+      fruit
+    </novo-option>
+  </novo-autocomplete>
+</novo-field>
+
+

doqFeEqHOa

+
+

Loading Pattern for Non Ideal State #

+

Adding a message next to the novo-loading component is not a known pattern. This could be used to display a message while loading with the flag controlled at implementation. This can be used for a loading message displaying all the time for a loading screen, or having a timer flipping the flag to show a message during a long long loading screen.

+
Screenshots
+

image +image

+
+

New HTML Form Field Hints #

+

Added the ability to set the description (aka hint text) on form controls to display HTML

+

image

+

Also added the ability for the FieldInteractionAPI to update the description of a field (potentially adding in HTML):

+
API.setDescription('description', '<span><b>BOLD</b> description with a <a target="_blank" href="https://www.google.com">Google</a> Link</span>');
+
+

field-interaction-description

+

Check out the demo!

+`, + host: { class: 'markdown-page' } +}) +export class August2022Page { + public params: any = {}; +} + + +@Component({ + selector: 'june-2022-page', + template: `

📢 June 2022 (version 7.2.x)

+

New Feature: Query Builder: We have added a new component to help with building complex and modern interfaces. At Bullhorn we have to enable our users to create advanced and dynamic searches against there data. We have built many iterations of a query builder in the past but we think this one is our best and most re-usable.

+

Bullhorn is continually seeking to update and innovate our products, and leverage the latest features in the frameworks we use. In support of that mission, we are updating our Novo UI and its supporting novo-elements library to Angular 13. This update allows us to continue offering a streamlined and consistent experience across Bullhorn’s complete product portfolio. This update includes both an Angular upgrade, as well as supporting the latest Typescript updates. You can find more details in the Technical Release Notes section below.

+

Release Timeline

+

Bullhorn has released a Release Candidate v7 of Novo-elements. Bullhorn will update Novo to use Novo-Elements v7 in the 2022.6 release

+
npm install novo-elements@next
+# or
+npm install novo-elements@7.2.0-next.0
+
+

How to get it!

+
+
Note: First follow the steps to update your angular app to Version 13 if you haven't already.
+
+
npm install --save novo-elements@7.x.x
+ng update novo-elements --migrate-only --from=0.0.0 --to=7.0.0 --force --allow-dirty  
+
+`, + host: { class: 'markdown-page' } +}) +export class June2022Page { public params: any = {}; } @@ -6758,16 +6832,25 @@ const routes: Routes = [ { path: '', redirectTo: '/patterns/patterns/test', pathMatch: 'full' }, ] }, - { path: 'updates/v7dot3', component: August2022Page, data: { title: 'August 2022', section: 'updates', tag: 'new' } }, - { path: 'updates/v6', component: February2022Page, data: { title: 'February 2022', section: 'updates' } }, + { path: 'updates/v6', component: 20220201Page, data: { title: 'February 2022', section: 'updates' } }, + { path: 'updates/v7-announce', component: 20220501Page, data: { title: 'May 2022', section: 'updates' } }, + { + path: 'updates/v7dot3', + component: TabsLayout, + data: { title: 'v7dot3', section: 'updates', pages: [{ title: 'August 2022', route: './august-2022'},{ title: 'August 2022', route: './august-2022'}], description: null, tag: 'new' }, + children: [ + { path: 'august-2022', component: 20220801Page }, + { path: 'august-2022', component: August2022Page }, + { path: '', redirectTo: '/updates/v7dot3/august-2022', pathMatch: 'full' }, + ] + }, { path: 'updates/v7-query-builder', component: June2022Page, data: { title: 'June 2022', section: 'updates', tag: 'new' } }, - { path: 'updates/v7-announce', component: May2022Page, data: { title: 'May 2022', section: 'updates' } }, // Catch All { path: '**', redirectTo: '/home', data: {} }, ]; export const PAGE_LIST = [ - AceEditorPage,AgendaDesignPage,AgendaDevelopPage,AgendaExamplesPage,AsideDesignPage,AsideDevelopPage,AsideExamplesPage,AutocompleteDesignPage,AutocompleteDevelopPage,AutocompleteExamplesPage,AvatarDesignPage,AvatarDevelopPage,AvatarExamplesPage,BreadcrumbDesignPage,BreadcrumbDevelopPage,BreadcrumbExamplesPage,ButtonDesignPage,ButtonDevelopPage,ButtonExamplesPage,CalendarDesignPage,CalendarDevelopPage,CalendarExamplesPage,ComponentsPage,DataTablePage,DropdownDesignPage,DropdownDevelopPage,DropdownExamplesPage,FieldDesignPage,FieldDevelopPage,FieldExamplesPage,IconDesignPage,IconDevelopPage,IconExamplesPage,LoadingDesignPage,LoadingDevelopPage,LoadingExamplesPage,MenuDesignPage,MenuDevelopPage,MenuExamplesPage,ModalDesignPage,ModalDevelopPage,ModalExamplesPage,NonIdealStateDesignPage,NonIdealStateDevelopPage,NonIdealStateExamplesPage,PopoverDesignPage,PopoverDevelopPage,PopoverExamplesPage,ProgressDesignPage,ProgressDevelopPage,ProgressExamplesPage,ProgressUsagePage,QueryBuilderDesignPage,QueryBuilderDevelopPage,QueryBuilderExamplesPage,QuickNotePage,SearchPage,SlidesPage,SwitchPage,TabbedGroupPickerPage,TablePage,TipWellDesignPage,TipWellDevelopPage,TipWellExamplesPage,ToasterDesignPage,ToasterDevelopPage,ToasterExamplesPage,ToolbarDesignPage,ToolbarDevelopPage,ToolbarExamplesPage,TooltipDesignPage,TooltipDevelopPage,TooltipExamplesPage,ColorsPage,CompositionPage,DesignPage,IconographyPage,SpacingPage,TypographyPage,ChipsDesignPage,ChipsDevelopPage,ChipsExamplesPage,ColorPickerPage,DatePickerDesignPage,DatePickerDevelopPage,DatePickerExamplesPage,DateTimePickerDesignPage,DateTimePickerDevelopPage,DateTimePickerExamplesPage,EditorPage,FormControlsPage,FormGroupsPage,FormPage,MultiPickerPage,PickerPage,RadioButtonsPage,SelectPage,TilesPage,TimePickerDesignPage,TimePickerDevelopPage,TimePickerExamplesPage,ValuePage,HomePage,CardDescriptionPage,CardDesignPage,CardDevelopPage,CardExamplesPage,ExpansionPage,HeaderPage,LayoutsPage,ListPage,SidenavPage,StepperPage,TabsDesignPage,TabsDevelopPage,TabsExamplesPage,PatternsNativeFormsPage,PatternsTestPage,PatternsPage,TemplatesPage,August2022Page,February2022Page,June2022Page,May2022Page,FieldInteractionsPage,PipesPage,SecurityPage + AceEditorPage,AgendaDesignPage,AgendaDevelopPage,AgendaExamplesPage,AsideDesignPage,AsideDevelopPage,AsideExamplesPage,AutocompleteDesignPage,AutocompleteDevelopPage,AutocompleteExamplesPage,AvatarDesignPage,AvatarDevelopPage,AvatarExamplesPage,BreadcrumbDesignPage,BreadcrumbDevelopPage,BreadcrumbExamplesPage,ButtonDesignPage,ButtonDevelopPage,ButtonExamplesPage,CalendarDesignPage,CalendarDevelopPage,CalendarExamplesPage,ComponentsPage,DataTablePage,DropdownDesignPage,DropdownDevelopPage,DropdownExamplesPage,FieldDesignPage,FieldDevelopPage,FieldExamplesPage,IconDesignPage,IconDevelopPage,IconExamplesPage,LoadingDesignPage,LoadingDevelopPage,LoadingExamplesPage,MenuDesignPage,MenuDevelopPage,MenuExamplesPage,ModalDesignPage,ModalDevelopPage,ModalExamplesPage,NonIdealStateDesignPage,NonIdealStateDevelopPage,NonIdealStateExamplesPage,PopoverDesignPage,PopoverDevelopPage,PopoverExamplesPage,ProgressDesignPage,ProgressDevelopPage,ProgressExamplesPage,ProgressUsagePage,QueryBuilderDesignPage,QueryBuilderDevelopPage,QueryBuilderExamplesPage,QuickNotePage,SearchPage,SlidesPage,SwitchPage,TabbedGroupPickerPage,TablePage,TipWellDesignPage,TipWellDevelopPage,TipWellExamplesPage,ToasterDesignPage,ToasterDevelopPage,ToasterExamplesPage,ToolbarDesignPage,ToolbarDevelopPage,ToolbarExamplesPage,TooltipDesignPage,TooltipDevelopPage,TooltipExamplesPage,ColorsPage,CompositionPage,DesignPage,IconographyPage,SpacingPage,TypographyPage,ChipsDesignPage,ChipsDevelopPage,ChipsExamplesPage,ColorPickerPage,DatePickerDesignPage,DatePickerDevelopPage,DatePickerExamplesPage,DateTimePickerDesignPage,DateTimePickerDevelopPage,DateTimePickerExamplesPage,EditorPage,FormControlsPage,FormGroupsPage,FormPage,MultiPickerPage,PickerPage,RadioButtonsPage,SelectPage,TilesPage,TimePickerDesignPage,TimePickerDevelopPage,TimePickerExamplesPage,ValuePage,HomePage,CardDescriptionPage,CardDesignPage,CardDevelopPage,CardExamplesPage,ExpansionPage,HeaderPage,LayoutsPage,ListPage,SidenavPage,StepperPage,TabsDesignPage,TabsDevelopPage,TabsExamplesPage,PatternsNativeFormsPage,PatternsTestPage,PatternsPage,TemplatesPage,20220201Page,20220501Page,20220801Page,August2022Page,June2022Page,FieldInteractionsPage,PipesPage,SecurityPage ]; @NgModule({