{"version":3,"file":"healthcatalyst-cashmere.mjs","sources":["../../../projects/cashmere/src/lib/util.ts","../../../projects/cashmere/src/lib/accordion/accordion.component.ts","../../../projects/cashmere/src/lib/accordion/accordion.component.html","../../../projects/cashmere/src/lib/accordion/accordion-toolbar.component.ts","../../../projects/cashmere/src/lib/accordion/accordion.module.ts","../../../projects/cashmere/src/lib/app-switcher/app-switcher-interfaces.ts","../../../projects/cashmere/src/lib/shared/work-tracker.service.ts","../../../projects/cashmere/src/lib/progress-indicators/progress-spinner.component.ts","../../../projects/cashmere/src/lib/progress-indicators/progress-spinner.component.html","../../../projects/cashmere/src/lib/pipes/ellipsis/ellipsis.pipe.ts","../../../projects/cashmere/src/lib/app-switcher/app-switcher.component.ts","../../../projects/cashmere/src/lib/app-switcher/app-switcher.component.html","../../../projects/cashmere/src/lib/icon/icon.component.ts","../../../projects/cashmere/src/lib/app-switcher/app-switcher-application-link/app-switcher-links.component.ts","../../../projects/cashmere/src/lib/app-switcher/app-switcher-application-link/app-switcher-links.component.html","../../../projects/cashmere/src/lib/pop/popover.animations.ts","../../../projects/cashmere/src/lib/pop/notification.service.ts","../../../projects/cashmere/src/lib/pop/types.ts","../../../projects/cashmere/src/lib/pop/popover.errors.ts","../../../projects/cashmere/src/lib/pop/directives/menu-item.directive.ts","../../../projects/cashmere/src/lib/pop/popover.component.ts","../../../projects/cashmere/src/lib/pop/popover.component.html","../../../projects/cashmere/src/lib/pop/tooltip/tooltip.component.ts","../../../projects/cashmere/src/lib/pop/tooltip/tooltip.component.html","../../../projects/cashmere/src/lib/pop/popover-anchoring.service.ts","../../../projects/cashmere/src/lib/pop/popover-accessibility.service.ts","../../../projects/cashmere/src/lib/pop/directives/popover-anchor.directive.ts","../../../projects/cashmere/src/lib/pop/directives/menu.directive.ts","../../../projects/cashmere/src/lib/pop/directives/menu-icon.directive.ts","../../../projects/cashmere/src/lib/pop/directives/menu-text.directive.ts","../../../projects/cashmere/src/lib/pop/directives/menu-sub-text.directive.ts","../../../projects/cashmere/src/lib/pop/directives/divider.directive.ts","../../../projects/cashmere/src/lib/pop/popover.module.ts","../../../projects/cashmere/src/lib/progress-indicators/progress-dots.component.ts","../../../projects/cashmere/src/lib/progress-indicators/progress-dots.component.html","../../../projects/cashmere/src/lib/progress-indicators/progress-bar.component.ts","../../../projects/cashmere/src/lib/progress-indicators/progress-bar.component.html","../../../projects/cashmere/src/lib/progress-indicators/progress-indicators.module.ts","../../../projects/cashmere/src/lib/app-switcher/app-switcher.service.ts","../../../projects/cashmere/src/lib/pipes/ellipsis/ellipsis-pipe.module.ts","../../../projects/cashmere/src/lib/pipes/null-or-empty-string/null-or-empty-string.pipe.ts","../../../projects/cashmere/src/lib/pipes/null-or-empty-string/null-or-empty-string-pipe.module.ts","../../../projects/cashmere/src/lib/pipes/file-size/file-size.pipe.ts","../../../projects/cashmere/src/lib/pipes/file-size/file-size-pipe.module.ts","../../../projects/cashmere/src/lib/pipes/number-abbreviator/number-abbreviator.pipe.ts","../../../projects/cashmere/src/lib/pipes/number-abbreviator/number-abbreviator-pipe.module.ts","../../../projects/cashmere/src/lib/pipes/highlight/highlight.pipe.ts","../../../projects/cashmere/src/lib/pipes/highlight/highlight-pipe.module.ts","../../../projects/cashmere/src/lib/pipes/pipes.module.ts","../../../projects/cashmere/src/lib/icon/hc-icon-sm.directive.ts","../../../projects/cashmere/src/lib/icon/hc-icon-md.directive.ts","../../../projects/cashmere/src/lib/icon/hc-icon-lg.directive.ts","../../../projects/cashmere/src/lib/icon/icon.module.ts","../../../projects/cashmere/src/lib/app-switcher/app-switcher.module.ts","../../../projects/cashmere/src/lib/banner/hc-banner.component.ts","../../../projects/cashmere/src/lib/banner/hc-banner.html","../../../projects/cashmere/src/lib/banner/hc-banner-stamp.directive.ts","../../../projects/cashmere/src/lib/banner/hc-banner.module.ts","../../../projects/cashmere/src/lib/breadcrumbs/breadcrumbs.component.ts","../../../projects/cashmere/src/lib/breadcrumbs/breadcrumbs.component.html","../../../projects/cashmere/src/lib/breadcrumbs/breadcrumbs.module.ts","../../../projects/cashmere/src/lib/utils/supported-colors.ts","../../../projects/cashmere/src/lib/button/button.component.ts","../../../projects/cashmere/src/lib/button/anchor.component.ts","../../../projects/cashmere/src/lib/button/split-button/split-button.component.ts","../../../projects/cashmere/src/lib/button/split-button/split-button.component.html","../../../projects/cashmere/src/lib/button/button.module.ts","../../../projects/cashmere/src/lib/button-toggle/button-toggle.component.ts","../../../projects/cashmere/src/lib/button-toggle/button-toggle-change-event.ts","../../../projects/cashmere/src/lib/form-field/hc-form-control.component.ts","../../../projects/cashmere/src/lib/button-toggle/button-toggle-group.component.ts","../../../projects/cashmere/src/lib/button-toggle/button-toggle.module.ts","../../../projects/cashmere/src/lib/checkbox/checkbox.component.ts","../../../projects/cashmere/src/lib/checkbox/checkbox.component.html","../../../projects/cashmere/src/lib/checkbox/checkbox-required.directive.ts","../../../projects/cashmere/src/lib/checkbox/checkbox.module.ts","../../../projects/cashmere/src/lib/chip/chip.component.ts","../../../projects/cashmere/src/lib/chip/chip.component.html","../../../projects/cashmere/src/lib/chip/chip-row/chip-row.component.ts","../../../projects/cashmere/src/lib/chip/chip.module.ts","../../../projects/cashmere/src/lib/utils/local-storage.ts","../../../projects/cashmere/src/lib/column-menu/column-menu.component.ts","../../../projects/cashmere/src/lib/column-menu/column-menu.component.html","../../../projects/cashmere/src/lib/column-menu/column-menu.module.ts","../../../projects/cashmere/src/lib/datepicker/datetime/datepicker-errors.ts","../../../projects/cashmere/src/lib/datepicker/datetime/date-formats.ts","../../../projects/cashmere/src/lib/datepicker/calendar-body/calendar-body.component.ts","../../../projects/cashmere/src/lib/datepicker/calendar-body/calendar-body.component.html","../../../projects/cashmere/src/lib/datepicker/datetime/date-adapter.ts","../../../projects/cashmere/src/lib/datepicker/multi-year-view/multi-year-view.component.ts","../../../projects/cashmere/src/lib/datepicker/multi-year-view/multi-year-view.component.html","../../../projects/cashmere/src/lib/datepicker/month-view/month-view.component.ts","../../../projects/cashmere/src/lib/datepicker/month-view/month-view.component.html","../../../projects/cashmere/src/lib/datepicker/year-view/year-view.component.ts","../../../projects/cashmere/src/lib/datepicker/year-view/year-view.component.html","../../../projects/cashmere/src/lib/datepicker/datepicker-intl.ts","../../../projects/cashmere/src/lib/input/input.directive.ts","../../../projects/cashmere/src/lib/form-field/hc-error.component.ts","../../../projects/cashmere/src/lib/form-field/hc-prefix.directive.ts","../../../projects/cashmere/src/lib/form-field/hc-suffix.directive.ts","../../../projects/cashmere/src/lib/form-field/hc-label.component.ts","../../../projects/cashmere/src/lib/form-field/hc-form-field.component.ts","../../../projects/cashmere/src/lib/form-field/hc-form-field.component.html","../../../projects/cashmere/src/lib/select/select.service.ts","../../../projects/cashmere/src/lib/select/hc-option.directive.ts","../../../projects/cashmere/src/lib/select/select.component.ts","../../../projects/cashmere/src/lib/select/select.component.html","../../../projects/cashmere/src/lib/datepicker/calendar/calendar.component.ts","../../../projects/cashmere/src/lib/datepicker/calendar/calendar-header.html","../../../projects/cashmere/src/lib/datepicker/calendar/calendar.component.html","../../../projects/cashmere/src/lib/datepicker/datepicker-animations.ts","../../../projects/cashmere/src/lib/datepicker/datepicker-content/datepicker-content.component.ts","../../../projects/cashmere/src/lib/datepicker/datepicker-content/datepicker-content.component.html","../../../projects/cashmere/src/lib/datepicker/datepicker-input/datepicker-input.directive.ts","../../../projects/cashmere/src/lib/datepicker/datepicker-toggle/datepicker-toggle.component.ts","../../../projects/cashmere/src/lib/datepicker/datepicker-toggle/datepicker-toggle.component.html","../../../projects/cashmere/src/lib/datepicker/datetime/native-date-adapter.ts","../../../projects/cashmere/src/lib/datepicker/datetime/native-date-formats.ts","../../../projects/cashmere/src/lib/datepicker/datetime/datetime.module.ts","../../../projects/cashmere/src/lib/datepicker/datepicker.component.ts","../../../projects/cashmere/src/lib/form-field/hc-label-ext.component.ts","../../../projects/cashmere/src/lib/form-field/hc-form.directive.ts","../../../projects/cashmere/src/lib/form-field/hc-form-field.module.ts","../../../projects/cashmere/src/lib/input/clear-input.component.ts","../../../projects/cashmere/src/lib/input/input.module.ts","../../../projects/cashmere/src/lib/select/select.module.ts","../../../projects/cashmere/src/lib/datepicker/datepicker.module.ts","../../../projects/cashmere/src/lib/date-range/services/config-store.service.ts","../../../projects/cashmere/src/lib/date-range/calendar-wrapper/calendar-wrapper.component.ts","../../../projects/cashmere/src/lib/date-range/calendar-wrapper/calendar-wrapper.component.html","../../../projects/cashmere/src/lib/radio-button/radio.ts","../../../projects/cashmere/src/lib/radio-button/radio-button.component.html","../../../projects/cashmere/src/lib/date-range/picker-overlay/picker-overlay.component.ts","../../../projects/cashmere/src/lib/date-range/picker-overlay/picker-overlay.component.html","../../../projects/cashmere/src/lib/date-range/services/calendar-overlay.service.ts","../../../projects/cashmere/src/lib/date-range/date-range/date-range.directive.ts","../../../projects/cashmere/src/lib/radio-button/radio-button.module.ts","../../../projects/cashmere/src/lib/date-range/date-range.module.ts","../../../projects/cashmere/src/lib/drawer/drawer.component.ts","../../../projects/cashmere/src/lib/backdrop/backdrop.component.ts","../../../projects/cashmere/src/lib/backdrop/backdrop-host.directive.ts","../../../projects/cashmere/src/lib/drawer/drawer-container.component.ts","../../../projects/cashmere/src/lib/drawer/drawer-container.component.html","../../../projects/cashmere/src/lib/drawer/menu-drawer/drawer-header.directive.ts","../../../projects/cashmere/src/lib/drawer/menu-drawer/menu-drawer.component.ts","../../../projects/cashmere/src/lib/drawer/menu-drawer/menu-drawer.component.html","../../../projects/cashmere/src/lib/drawer/menu-drawer/drawer-item.component.ts","../../../projects/cashmere/src/lib/backdrop/backdrop.module.ts","../../../projects/cashmere/src/lib/drawer/drawer.module.ts","../../../projects/cashmere/src/lib/drag-list/drag-list.component.ts","../../../projects/cashmere/src/lib/drag-list/drag-list.component.html","../../../projects/cashmere/src/lib/drag-list/drag-list.module.ts","../../../projects/cashmere/src/lib/env-switcher/env-switcher-interfaces.ts","../../../projects/cashmere/src/lib/env-switcher/env-switcher.component.ts","../../../projects/cashmere/src/lib/env-switcher/env-switcher.component.html","../../../projects/cashmere/src/lib/env-switcher/env-switcher.module.ts","../../../projects/cashmere/src/lib/file-uploader/file-uploader.component.ts","../../../projects/cashmere/src/lib/file-uploader/file-uploader.component.html","../../../projects/cashmere/src/lib/file-uploader/file-uploader.module.ts","../../../projects/cashmere/src/lib/measurable/measurable.component.ts","../../../projects/cashmere/src/lib/measurable/measurable.component.html","../../../projects/cashmere/src/lib/measurable/measurable.service.ts","../../../projects/cashmere/src/lib/measurable/measurable.module.ts","../../../projects/cashmere/src/lib/instance-switcher/instance-switcher.component.ts","../../../projects/cashmere/src/lib/instance-switcher/instance-switcher.component.html","../../../projects/cashmere/src/lib/instance-switcher/instance-switcher.module.ts","../../../projects/cashmere/src/lib/list/list.component.ts","../../../projects/cashmere/src/lib/list/list.component.html","../../../projects/cashmere/src/lib/list/list-item/list-item.component.ts","../../../projects/cashmere/src/lib/list/list-item/list-item.component.html","../../../projects/cashmere/src/lib/list/list-item/directives/list-avatar.directive.ts","../../../projects/cashmere/src/lib/list/list-item/directives/list-icon.directive.ts","../../../projects/cashmere/src/lib/list/list-item/directives/list-line.directive.ts","../../../projects/cashmere/src/lib/list/list.module.ts","../../../projects/cashmere/src/lib/modal/active-modal.ts","../../../projects/cashmere/src/lib/modal/modal-body.component.ts","../../../projects/cashmere/src/lib/modal/modal-footer.component.ts","../../../projects/cashmere/src/lib/modal/modal-header.component.ts","../../../projects/cashmere/src/lib/modal/modal.component.ts","../../../projects/cashmere/src/lib/modal/modal-window.component.ts","../../../projects/cashmere/src/lib/modal/modal-overlay.component.ts","../../../projects/cashmere/src/lib/modal/modal.ts","../../../projects/cashmere/src/lib/modal/simple-modal/simple-modal-options.model.ts","../../../projects/cashmere/src/lib/modal/simple-modal/simple-modal.component.ts","../../../projects/cashmere/src/lib/modal/simple-modal/simple-modal.component.html","../../../projects/cashmere/src/lib/modal/modal.service.ts","../../../projects/cashmere/src/lib/modal/modal.module.ts","../../../projects/cashmere/src/lib/multiselect/multiselect.component.ts","../../../projects/cashmere/src/lib/multiselect/multiselect.module.ts","../../../projects/cashmere/src/lib/navbar/navbar-link/navbar-link.component.ts","../../../projects/cashmere/src/lib/navbar/navbar-link/navbar-link.component.html","../../../projects/cashmere/src/lib/navbar/navbar-mobile-menu/navbar-mobile-menu.component.ts","../../../projects/cashmere/src/lib/navbar/navbar-mobile-menu/navbar-mobile-menu.component.html","../../../projects/cashmere/src/lib/navbar/navbar.component.ts","../../../projects/cashmere/src/lib/navbar/navbar.component.html","../../../projects/cashmere/src/lib/navbar/navbar-dropdown/navbar-dropdown.component.ts","../../../projects/cashmere/src/lib/navbar/navbar-dropdown/navbar-dropdown.component.html","../../../projects/cashmere/src/lib/navbar/navbar-cobrand/navbar-cobrand.component.ts","../../../projects/cashmere/src/lib/navbar/navbar.module.ts","../../../projects/cashmere/src/lib/shared/initializable.ts","../../../projects/cashmere/src/lib/pagination/base-pagination.ts","../../../projects/cashmere/src/lib/pagination/pagination.component.ts","../../../projects/cashmere/src/lib/pagination/pagination.component.html","../../../projects/cashmere/src/lib/pagination/load-more-pagination.component.ts","../../../projects/cashmere/src/lib/pagination/load-more-pagination.component.html","../../../projects/cashmere/src/lib/pagination/page-event.ts","../../../projects/cashmere/src/lib/pagination/pagination.module.ts","../../../projects/cashmere/src/lib/picklist-old/picklist-old.model.ts","../../../projects/cashmere/src/lib/picklist-old/pane/picklist-pane.model.ts","../../../projects/cashmere/src/lib/picklist-old/services/picklist-filter-local.service.ts","../../../projects/cashmere/src/lib/picklist-old/services/picklist-state.service.ts","../../../projects/cashmere/src/lib/picklist-old/services/picklist-filter-remote.service.ts","../../../projects/cashmere/src/lib/picklist-old/services/picklist-filter.service.ts","../../../projects/cashmere/src/lib/picklist-old/services/picklist-valueset-moving.service.ts","../../../projects/cashmere/src/lib/picklist-old/services/picklist-old.service.ts","../../../projects/cashmere/src/lib/picklist-old/services/picklist-action.service.ts","../../../projects/cashmere/src/lib/picklist-old/pane/picklist-pane.component.ts","../../../projects/cashmere/src/lib/picklist-old/pane/picklist-pane.component.html","../../../projects/cashmere/src/lib/picklist-old/picklist-old.component.ts","../../../projects/cashmere/src/lib/picklist-old/picklist-old.component.html","../../../projects/cashmere/src/lib/picklist-old/picklist-old.module.ts","../../../projects/cashmere/src/lib/picklist/pick-templates.directive.ts","../../../projects/cashmere/src/lib/picklist/pick-option.component.ts","../../../projects/cashmere/src/lib/picklist/picklist.service.ts","../../../projects/cashmere/src/lib/picklist/pick.types.ts","../../../projects/cashmere/src/lib/picklist/pane/items-list.ts","../../../projects/cashmere/src/lib/picklist/pane/pick-pane-list.service.ts","../../../projects/cashmere/src/lib/picklist/pane/pick-pane-list.component.ts","../../../projects/cashmere/src/lib/picklist/pane/pick-pane-drag.service.ts","../../../projects/cashmere/src/lib/picklist/pane/pick-pane.component.ts","../../../projects/cashmere/src/lib/picklist/pane/pick-pane.component.html","../../../projects/cashmere/src/lib/picklist/picklist.component.ts","../../../projects/cashmere/src/lib/picklist/picklist.component.html","../../../projects/cashmere/src/lib/picklist/pane/selection-model.ts","../../../projects/cashmere/src/lib/picklist/picklist.module.ts","../../../projects/cashmere/src/lib/release-notes-modal/release-notes-modal.component.ts","../../../projects/cashmere/src/lib/release-notes-modal/release-notes-modal.component.html","../../../projects/cashmere/src/lib/release-notes-modal/release-notes.model.ts","../../../projects/cashmere/src/lib/release-notes-modal/release-notes.service.ts","../../../projects/cashmere/src/lib/release-notes-modal/release-notes-modal.module.ts","../../../projects/cashmere/src/lib/resizable/resizable.config.ts","../../../projects/cashmere/src/lib/resizable/resizable.meta.ts","../../../projects/cashmere/src/lib/resizable/resizable.component.ts","../../../projects/cashmere/src/lib/resizable/resizable.component.html","../../../projects/cashmere/src/lib/resizable/resizable-static.directive.ts","../../../projects/cashmere/src/lib/resizable/resizable-container.directive.ts","../../../projects/cashmere/src/lib/resizable/resizable.module.ts","../../../projects/cashmere/src/lib/scroll-nav/nav/scroll-nav-link.directive.ts","../../../projects/cashmere/src/lib/scroll-nav/nav/scroll-nav.component.ts","../../../projects/cashmere/src/lib/scroll-nav/nav/scroll-nav.component.html","../../../projects/cashmere/src/lib/scroll-nav/content/scroll-nav-target.directive.ts","../../../projects/cashmere/src/lib/scroll-nav/content/scroll-nav-content.component.ts","../../../projects/cashmere/src/lib/scroll-nav/content/scroll-nav-content.component.html","../../../projects/cashmere/src/lib/scroll-nav/scroll-nav.module.ts","../../../projects/cashmere/src/lib/search-bar/search-bar.component.ts","../../../projects/cashmere/src/lib/search-bar/search-bar.component.html","../../../projects/cashmere/src/lib/search-bar/search-bar.module.ts","../../../projects/cashmere/src/lib/slide-toggle/slide-toggle.component.ts","../../../projects/cashmere/src/lib/slide-toggle/slide-toggle.component.html","../../../projects/cashmere/src/lib/slide-toggle/slide-toggle.module.ts","../../../projects/cashmere/src/lib/slider/slider.component.ts","../../../projects/cashmere/src/lib/slider/slider.module.ts","../../../projects/cashmere/src/lib/sidenav/sidenav.component.ts","../../../projects/cashmere/src/lib/sidenav/sidenav.component.html","../../../projects/cashmere/src/lib/sidenav/sidenav.models.ts","../../../projects/cashmere/src/lib/sidenav/sidenav-header.directive.ts","../../../projects/cashmere/src/lib/sidenav/sidenav-body.directive.ts","../../../projects/cashmere/src/lib/sidenav/sidenav-footer.directive.ts","../../../projects/cashmere/src/lib/sidenav/sidenav.module.ts","../../../projects/cashmere/src/lib/sort/sort-animations.ts","../../../projects/cashmere/src/lib/sort/sort-errors.ts","../../../projects/cashmere/src/lib/sort/sort-header-intl.ts","../../../projects/cashmere/src/lib/sort/sort.ts","../../../projects/cashmere/src/lib/sort/sort-header.ts","../../../projects/cashmere/src/lib/sort/sort-header.html","../../../projects/cashmere/src/lib/sort/sort-menu.component.ts","../../../projects/cashmere/src/lib/sort/sort-menu.component.html","../../../projects/cashmere/src/lib/sort/sort-module.ts","../../../projects/cashmere/src/lib/stepper/stepper.component.ts","../../../projects/cashmere/src/lib/stepper/stepper.component.html","../../../projects/cashmere/src/lib/stepper/stepper.module.ts","../../../projects/cashmere/src/lib/subnav/subnav.component.ts","../../../projects/cashmere/src/lib/subnav/subnav-right.directive.ts","../../../projects/cashmere/src/lib/subnav/subnav.module.ts","../../../projects/cashmere/src/lib/table/table.component.ts","../../../projects/cashmere/src/lib/table/cell.ts","../../../projects/cashmere/src/lib/table/row.ts","../../../projects/cashmere/src/lib/table/cell-resizer.component.ts","../../../projects/cashmere/src/lib/table/table-container.directive.ts","../../../projects/cashmere/src/lib/table/table.module.ts","../../../projects/cashmere/src/lib/table/table-data-source.ts","../../../projects/cashmere/src/lib/tabs/tab/tab-title.component.ts","../../../projects/cashmere/src/lib/tabs/tab/tab.component.ts","../../../projects/cashmere/src/lib/tabs/tab/tab.component.html","../../../projects/cashmere/src/lib/tabs/tab-set/tab-set.component.ts","../../../projects/cashmere/src/lib/tabs/tab-set/tab-set.component.html","../../../projects/cashmere/src/lib/tabs/tabs.module.ts","../../../projects/cashmere/src/lib/tile/tile.component.ts","../../../projects/cashmere/src/lib/tile/tile-header.directive.ts","../../../projects/cashmere/src/lib/tile/tile.module.ts","../../../projects/cashmere/src/lib/toaster/hc-toast.component.ts","../../../projects/cashmere/src/lib/toaster/hc-toast.component.html","../../../projects/cashmere/src/lib/toaster/hc-toast-ref.ts","../../../projects/cashmere/src/lib/toaster/hc-toaster.service.ts","../../../projects/cashmere/src/lib/toaster/hc-toaster.module.ts","../../../projects/cashmere/src/lib/typeform-survey/typeform-survey.component.ts","../../../projects/cashmere/src/lib/typeform-survey/typeform-survey.module.ts","../../../projects/cashmere/src/public_api.ts","../../../projects/cashmere/src/healthcatalyst-cashmere.ts"],"sourcesContent":["import {Observable, Subject} from 'rxjs';\nimport {takeUntil} from 'rxjs/operators';\n\n/** Parse a given input into a boolean. */\nexport function parseBooleanAttribute(value: boolean | string): boolean {\n if (value === null || value === undefined) {\n return false;\n }\n if (typeof value === 'boolean') {\n return value;\n }\n if (value.toLowerCase() === 'false') {\n return false;\n }\n if (value.toLowerCase() === 'true' || value === '') {\n return true;\n }\n throw Error(String(value) + ' is not a boolean value');\n}\n\n/** Accepts a string, return that string with HTML tag escaped. */\nconst helperEl = document.createElement('p');\nexport function escapeHTML(string: string): string {\n helperEl.innerText = string; // Setting inner text causes escaping\n return helperEl.innerHTML;\n}\n\n/** Return true if given value is not null and not undefined. */\nexport function isDefined(value: unknown): boolean {\n return value !== undefined && value !== null;\n}\n\n/** Return true if given value is an object that is defined. */\nexport function isObject(value: unknown): boolean {\n return typeof value === 'object' && isDefined(value);\n}\n\n/** Return true if given value is a promise. */\nexport function isPromise(value: unknown): boolean {\n return value instanceof Promise;\n}\n\n/** Return true if given value is a function. */\nexport function isFunction(value: unknown): boolean {\n return value instanceof Function;\n}\n\n/* Open Source `take-until-destroy` operator from: https://github.com/NetanelBasal/ngx-take-until-destroy */\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport const untilDestroyed = (componentInstance, destroyMethodName = 'ngOnDestroy') => (source: Observable) => {\n const originalDestroy = componentInstance[destroyMethodName];\n if (isFunction(originalDestroy) === false) {\n throw new Error(`${componentInstance.constructor.name} is using untilDestroyed but doesn't implement ${destroyMethodName}`);\n }\n if (!componentInstance['__takeUntilDestroy']) {\n componentInstance['__takeUntilDestroy'] = new Subject();\n\n componentInstance[destroyMethodName] = function () {\n if (isFunction(originalDestroy)) {\n // eslint-disable-next-line prefer-rest-params\n originalDestroy.apply(this, arguments);\n }\n componentInstance['__takeUntilDestroy'].next(true);\n componentInstance['__takeUntilDestroy'].complete();\n };\n }\n return source.pipe(takeUntil(componentInstance['__takeUntilDestroy']));\n};\n\nexport function hcClassify(style: string): string {\n return `hc-${style}`;\n}\n\nexport function validateInput(input: T, validOptions: T[], inputName: string, component: string): void {\n if (validOptions.indexOf(input) < 0) {\n throw Error(`Unsupported ${inputName || 'input'} attribute value on ${component || 'cashmere component'}: ${input} \\n\n The following are valid options: ${validOptions.join(', ')}`);\n }\n}\n","import {AfterContentInit, Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from '@angular/core';\nimport {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';\nimport {parseBooleanAttribute} from '../util';\n\nconst supportedAligns = ['left', 'right'];\n\nexport function validateAlignInput(inputStr: string): void {\n if (supportedAligns.indexOf(inputStr) < 0) {\n throw Error('Unsupported accordion alignment value: ' + inputStr);\n }\n}\n\n/** Parent component that can have a `` and content that is collapsable */\n@Component({\n selector: 'hc-accordion',\n templateUrl: './accordion.component.html',\n styleUrls: ['./accordion.component.scss'],\n exportAs: 'hcAccordion',\n animations: [\n trigger('openState', [\n state('open, open-instant', style({\n height: '*'\n })),\n state('void', style({\n height: '0px',\n visibility: 'hidden'\n })),\n transition('void => open-instant', animate('0ms')),\n transition('void <=> open', animate('400ms ease'))\n ])\n ],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class AccordionComponent implements AfterContentInit {\n private _animationDisabled = false;\n private _currentlyAnimating = false;\n private _hideToolbar = false;\n private _toolbarTrigger = true;\n private _triggerAlign = 'left';\n private __isOpen = false;\n private _disabled = false;\n\n constructor(public elementRef: ElementRef) {}\n\n /** Side the accordion trigger is attached to: `left` or `right` */\n @Input()\n get triggerAlign(): string {\n return this._triggerAlign;\n }\n\n set triggerAlign(alignType: string) {\n validateAlignInput(alignType);\n this._triggerAlign = alignType;\n }\n\n /** Whether the entire width of the accordion bar is clickable, or only the down arrow button; default = true */\n @Input()\n get toolbarTrigger(): boolean {\n return this._toolbarTrigger;\n }\n\n set toolbarTrigger(doTrigger: boolean) {\n this._toolbarTrigger = parseBooleanAttribute(doTrigger);\n }\n\n /** Hide toolbar. */\n @Input()\n get hideToolbar(): boolean {\n return this._hideToolbar;\n }\n\n set hideToolbar(hide: boolean) {\n this._hideToolbar = parseBooleanAttribute(hide);\n }\n\n /** Whether the accordion is opened. */\n @Input()\n get open(): boolean {\n return this.__isOpen;\n }\n\n set open(opened: boolean) {\n this.toggle(parseBooleanAttribute(opened));\n }\n\n /** Whether the accordion button is disabled. */\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(isDisabled: boolean) {\n this._disabled = parseBooleanAttribute(isDisabled);\n }\n\n /** Allows for two-way binding of the `open` property */\n @Output() openChange = new EventEmitter();\n\n /** Event emitted when accordion is opened. */\n @Output()\n opened = new EventEmitter();\n\n /** Event emitted when accordion has started to open. */\n @Output()\n openStart = new EventEmitter();\n\n /** Event emitted when accordion is closed. */\n @Output()\n closed = new EventEmitter();\n\n /** Event emitted when accordion has started to close. */\n @Output()\n closeStart = new EventEmitter();\n\n @HostBinding('class.hc-accordion')\n _hostClass = true;\n\n get _alignment(): string {\n return this.triggerAlign === 'right' ? 'hc-align-right' : '';\n }\n\n get _pointer(): string {\n return this.toolbarTrigger === true && this.disabled === false ? 'hc-toolbar-pointer' : '';\n }\n\n get _hideButton(): string {\n return this.disabled === true ? 'hc-accordian-hide-button' : '';\n }\n\n get _openState(): 'void' | 'open-instant' | 'open' {\n if (this.__isOpen) {\n return this._animationDisabled ? 'open-instant' : 'open';\n }\n return 'void';\n }\n\n _animationStart(event: AnimationEvent): void {\n this._currentlyAnimating = true;\n\n const {fromState, toState} = event;\n if (fromState === 'void' && toState === 'open') {\n this.openStart.emit();\n } else if (fromState === 'open' && toState === 'void') {\n this.closeStart.emit();\n }\n }\n\n _animationEnd(event: AnimationEvent): void {\n this._currentlyAnimating = false;\n\n const {fromState, toState} = event;\n if (fromState === 'void' && toState === 'open') {\n this.opened.emit();\n } else if (fromState === 'open' && toState === 'void') {\n this.closed.emit();\n }\n }\n\n @HostBinding('class.hc-accordion-opened')\n get _isOpened(): boolean {\n return this.__isOpen && !this._currentlyAnimating;\n }\n\n @HostBinding('class.hc-accordion-opening')\n get _isOpening(): boolean {\n return this.__isOpen && this._currentlyAnimating;\n }\n\n @HostBinding('class.hc-accordion-closed')\n get _isClosed(): boolean {\n return !this.__isOpen && !this._currentlyAnimating;\n }\n\n @HostBinding('class.hc-accordion-closing')\n get _isClosing(): boolean {\n return !this.__isOpen && this._currentlyAnimating;\n }\n\n ngAfterContentInit(): void {\n this._animationDisabled = false;\n }\n\n _triggerClick(event: Event, toolbarClick: boolean): void {\n if ((toolbarClick && this.toolbarTrigger && !this.disabled) || !toolbarClick) {\n event.stopPropagation();\n this.toggle();\n }\n }\n\n /** Opens accordion. */\n toggleOpen(): void {\n return this.toggle(true);\n }\n\n /** Closes accordion. */\n toggleClose(): void {\n return this.toggle(false);\n }\n\n /** Toggle this accordion. */\n toggle(isOpen = !this.open): void {\n if (!this._currentlyAnimating) {\n this.__isOpen = isOpen;\n this.openChange.emit(isOpen);\n }\n }\n}\n","@if (!hideToolbar) {\n
\n \n \n
\n}\n\n\n
\n \n
\n\n","import {ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation} from '@angular/core';\n\n/** Container for content that is to be shown in-line with the accordion trigger */\n@Component({\n selector: 'hc-accordion-toolbar',\n template: '',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class AccordionToolbarComponent {\n @HostBinding('class.hc-accordion-toolbar')\n _hostClass = true;\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {AccordionComponent} from './accordion.component';\nimport {AccordionToolbarComponent} from './accordion-toolbar.component';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [AccordionComponent, AccordionToolbarComponent],\n exports: [AccordionComponent, AccordionToolbarComponent]\n})\nexport class AccordionModule {}\n","import {Observable, of} from 'rxjs';\nimport {InjectionToken} from '@angular/core';\n\nexport interface IDiscoveryApplication {\n /** Usually the name of the application */\n ServiceName: string;\n /** A formatted version of the name of the application */\n FriendlyName: string;\n /** A short description of the application */\n Description: string;\n /** Optional build number for the application */\n BuildNumber: string | null;\n /** Version number of the application */\n Version: number;\n /** The unique id for this application in the Discovery Service */\n DiscoveryServiceId: number | null;\n /** The url to link to for the application */\n ServiceUrl: string;\n /** The last successful ping of the application */\n Heartbeat?: Date;\n /** Whether the app should be displayed in the app switcher */\n IsHidden?: boolean;\n /** The type of element, usually `application` */\n DiscoveryType: string;\n /** The base64 encoded png or svg of the application icon */\n Icon: string;\n}\n\nexport interface IDiscoveryRequest {\n value: IDiscoveryApplication[];\n}\n\nexport interface IAppSwitcherService {\n /** Optional URL for a separate page the app switcher can link to with a complete list of all available applications */\n allApplicationsUri: string;\n\n getApplications(): Observable;\n}\n\nexport const APP_SWITCHER_SERVICE = new InjectionToken('IAppSwitcherService');\n\nexport interface IAppSwitcherConfig {\n discoveryServiceUri: string;\n}\n\nexport const APP_SWITCHER_CONFIG = new InjectionToken('IAppSwitcherConfig');\n\nexport class MockAppSwitcherService implements IAppSwitcherService {\n allApplicationsUri: string;\n\n getApplications(): Observable {\n return of({\n value: [\n {\n ServiceName: 'MyApp',\n FriendlyName: 'My App',\n Description: 'The currently showing app',\n BuildNumber: '123',\n Version: 1,\n DiscoveryServiceId: 1,\n ServiceUrl: 'http://myapp.com',\n DiscoveryType: 'Application',\n Icon: ''\n },\n {\n ServiceName: 'AnotherApp',\n FriendlyName: 'Another App',\n Description: 'App we could switch to',\n BuildNumber: '123',\n Version: 1,\n DiscoveryServiceId: 2,\n ServiceUrl: 'http://anotherapp.com',\n DiscoveryType: 'Application',\n Icon: ''\n }\n ]\n });\n }\n}\n","import {Injectable} from '@angular/core';\nimport {Observable, ReplaySubject, Subscription} from 'rxjs';\n\n@Injectable()\nexport class WorkTrackerService {\n public start(task: () => Promise): Observable {\n const working = new ReplaySubject();\n working.next(true);\n task()\n .then(() => {\n working.next(false);\n })\n .catch(() => {\n working.next(false);\n });\n\n return working.asObservable();\n }\n\n public startObservable(task: () => Subscription): Observable {\n const working = new ReplaySubject();\n const taskSubscription = task();\n working.next(true);\n\n taskSubscription.add(() => {\n working.next(false);\n taskSubscription.unsubscribe();\n });\n\n return working.asObservable();\n }\n}\n","import {Component, Input, ViewEncapsulation} from '@angular/core';\n\nconst supportedColors = ['blue', 'green', 'purple', 'orange', 'red', 'gray', 'white'];\n\nexport function validateColorInput(inputStr: string): void {\n if (supportedColors.indexOf(inputStr) < 0) {\n throw Error('Unsupported progress spinner color value: ' + inputStr);\n }\n}\n\n@Component({\n selector: 'hc-progress-spinner',\n templateUrl: 'progress-spinner.component.html',\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ProgressSpinnerComponent {\n private _color = 'blue';\n\n /** Color of the spinner: `blue`, `green`, `purple`, `orange`, `red`, `gray`, `white` */\n @Input()\n get color(): string {\n return this._color;\n }\n\n set color(colorVal: string) {\n validateColorInput(colorVal);\n this._color = colorVal;\n }\n\n /** If true, the spinner will center itself inside its container. */\n @Input()\n public isCentered = true;\n\n /** If true, include background \"channel\" circle. */\n @Input()\n public hasChannel = true;\n\n /** If true, switches to determinate mode. Must pass in progress (0-100%), instead of having the loader spin freely. */\n @Input()\n public isDeterminate = false;\n\n /** (0-100%) Only used if \"isDeterminate\" is set to true. */\n @Input()\n public set progress(progress: number) {\n this.setProgress(progress);\n }\n public get progress(): number {\n return this._progress;\n }\n\n /** Set the diameter of the circle, in pixels. Minimum is 20, maximum is 250. */\n @Input()\n public set diameter(diameter: number) {\n this._diameter = Math.min(Math.max(this._minDiameter, diameter), this._maxDiameter);\n }\n public get diameter(): number {\n return this._diameter;\n }\n\n public _rightCircleTransform = '';\n public _leftCircleTransform = '';\n public _rightCircleTransition = '';\n public _leftCircleTransition = '';\n private _progress = 0;\n private _diameter = 0;\n private _minDiameter = 20;\n private _maxDiameter = 250;\n\n private setProgress(progress: number) {\n progress = Math.min(100, progress);\n progress = Math.max(0, progress);\n\n this.setProgressTransition(progress);\n this.setProgressTransform(progress);\n\n this._progress = progress;\n }\n\n private setProgressTransition(progress: number) {\n const sizeBasedTime = this.diameter > 150 ? 0.6 : 0.4;\n const timing = Math.abs(progress - this._progress) > 40 ? sizeBasedTime : sizeBasedTime / 2;\n const halfTime = timing / 2;\n if ((progress <= 50 && this._progress <= 50) || (progress >= 51 && this._progress >= 51)) {\n this._leftCircleTransition = `transform ${timing}s ease-in-out 0s`;\n this._rightCircleTransition = `transform ${timing}s ease-in-out 0s`;\n } else if (progress <= 50 && this._progress >= 51) {\n this._leftCircleTransition = `transform ${halfTime}s ease-in 0s`;\n this._rightCircleTransition = `transform ${halfTime}s ease-out ${halfTime - 0.001}s`;\n } else if (progress >= 51 && this._progress <= 50) {\n this._leftCircleTransition = `transform ${halfTime}s ease-out ${halfTime - 0.001}s`;\n this._rightCircleTransition = `transform ${halfTime}s ease-in 0s`;\n }\n }\n\n /**\n * Using a somewhat complicated set of transforms to achive the animation.\n * For 0% to 50% the right circle element rotates from -135deg to 45deg\n * For 51% to 100% the left circle element rotates from 135deg to 315deg\n */\n private setProgressTransform(progress: number) {\n if (progress <= 50) {\n const rightDegrees = (progress / 50) * 180 - 135;\n this._rightCircleTransform = `rotate(${rightDegrees}deg)`;\n this._leftCircleTransform = `rotate(135deg)`;\n } else if (progress >= 51) {\n const leftDegrees = ((progress - 50) / 50) * 180 + 135;\n this._leftCircleTransform = `rotate(${leftDegrees}deg)`;\n this._rightCircleTransform = 'rotate(45deg)';\n }\n }\n}\n","","import {Pipe, PipeTransform} from '@angular/core';\n\nexport type EllipsisMode = 'characters' | 'words';\n\n@Pipe({\n name: 'ellipsis',\n pure: true,\n standalone: false\n})\nexport class EllipsisPipe implements PipeTransform {\n static readonly ELLIPSIS = '…';\n\n transform(value: string, length: number, mode: EllipsisMode = 'characters'): string {\n if (typeof value !== 'string' || typeof length !== 'number' || length < 0 || isNaN(length) || Math.floor(length) !== length) {\n return value;\n }\n\n const truncated = mode === 'words' ? this.firstNWords(value, length) : this.firstNCharacters(value, length);\n\n if (truncated === value) {\n return value;\n }\n\n return truncated + EllipsisPipe.ELLIPSIS;\n }\n\n private firstNWords(value: string, n: number): string | undefined {\n const words = value.split(/\\s+/g);\n if (words.length <= n) {\n return value;\n }\n\n const pattern = new RegExp('^' + words.slice(0, n).join('\\\\s+'));\n return pattern.exec(value)?.[0];\n }\n\n private firstNCharacters(value: string, n: number): string {\n return value.length > n ? value.substring(0, n) : value;\n }\n}\n","import {takeUntil} from 'rxjs/operators';\nimport {Component, Inject, OnDestroy, OnInit, Input, ViewEncapsulation, Output, EventEmitter, HostBinding} from '@angular/core';\nimport {Subject, Observable} from 'rxjs';\n\nimport {IAppSwitcherService, IDiscoveryApplication, APP_SWITCHER_SERVICE} from './app-switcher-interfaces';\nimport {WorkTrackerService} from '../shared/work-tracker.service';\n\n/**\n * `hc-app-switcher` is typically included in a popover to display links to available apps from the Discovery Service\n */\n@Component({\n selector: 'hc-app-switcher',\n templateUrl: './app-switcher.component.html',\n styleUrls: ['./app-switcher.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class AppSwitcherComponent implements OnInit, OnDestroy {\n @HostBinding('class.hc-app-switcher-container') _hostClass = true;\n\n /** The array of applications pulled from the Discovery Service */\n public applications: IDiscoveryApplication[];\n\n /** Whether the app switcher is currently loading data from the Discovery Service */\n public loading: Observable;\n\n /** Whether the load from the Discovery Service was successful */\n public loadFailed = false;\n\n private _iconHeight = 60;\n private _serviceName = '';\n private _version = '';\n\n private ngUnsubscribe = new Subject();\n\n /** Sets the height of the app thumbnail icons, width is auto (defaults to 60px) */\n @Input()\n get iconHeight(): number {\n return this._iconHeight;\n }\n\n set iconHeight(heightVal: number) {\n this._iconHeight = heightVal;\n }\n\n /** Used to disable switching for your own app. `serviceVersion` must also be set. */\n @Input()\n get serviceName(): string {\n return this._serviceName;\n }\n\n set serviceName(serviceNameVal: string) {\n this._serviceName = serviceNameVal;\n }\n\n /** Used to disable switching for your own app. `serviceName` must also be set. */\n @Input()\n get serviceVersion(): string | number {\n return this._version;\n }\n\n set serviceVersion(serviceVersionVal: string | number) {\n this._version = `${serviceVersionVal}`;\n }\n\n /** Event emitted when a user clicks an app in the app switcher */\n @Output()\n appClick = new EventEmitter();\n\n constructor(@Inject(APP_SWITCHER_SERVICE) public _appSwitcherService: IAppSwitcherService, private workTracker: WorkTrackerService) {}\n\n ngOnInit(): void {\n this.loadApplications();\n }\n\n ngOnDestroy(): void {\n this.ngUnsubscribe.next();\n this.ngUnsubscribe.complete();\n }\n\n /** Manually loads all applications from the configured Discovery Service */\n public loadApplications(): void {\n try {\n this.loadApplicationFromDiscoveryService();\n } catch (error) {\n this.handleError(error);\n }\n }\n\n private loadApplicationFromDiscoveryService() {\n this.loading = this.workTracker.startObservable(() =>\n this._appSwitcherService\n .getApplications()\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe(\n (response) => {\n this.loadFailed = false;\n this.applications = response.value;\n },\n (error) => {\n this.handleError(error);\n }\n )\n );\n }\n\n private handleError(error: Error) {\n console.error('Failed to load applications from the app switcher service.', error);\n this.loadFailed = true;\n }\n\n _linkIfNotMe(app: IDiscoveryApplication): string | null {\n return this._appIsMe(app) ? null : app.ServiceUrl;\n }\n\n _appIsMe(app: IDiscoveryApplication): boolean {\n return app.ServiceName === this.serviceName && `${app.Version}` === this.serviceVersion;\n }\n\n _appClick( app: IDiscoveryApplication ): void {\n this.appClick.emit( app );\n }\n}\n","
\n

\n Applications @if (_appSwitcherService.allApplicationsUri) {\n \n View All\n \n }\n

\n\n @if (applications?.length > 0) {\n
\n @for (app of applications; track app) {\n
\n \n
\n
{{ app?.FriendlyName | ellipsis: 18 }}
\n \n
\n }\n
\n }\n\n \n @if (loading | async) {\n
\n \n
\n }\n\n \n @if (!(loading | async) && loadFailed) {\n
\n \n Failed to load applications.\n Retry now.\n
\n }\n\n \n @if (!(loading | async) && applications?.length === 0) {\n
\n \n No applications available.\n
\n }\n\n","import {Attribute, Component, ElementRef, HostBinding, Input, OnChanges, ViewEncapsulation} from '@angular/core';\n\n/** Object used to pass values that will be used in an IconComponent */\nexport interface HcIcon {\n /** Font set icon is a part of */\n fontSet: string;\n /** Name of icon within a font set */\n fontIcon: string;\n /** Optional height in pixels of the icon; defaults to 37 */\n fontSize?: number;\n}\n\n/** Makes using a font icon easier. */\n@Component({\n selector: 'hc-icon',\n template: '',\n styleUrls: ['./icon.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class IconComponent implements OnChanges {\n private _fontIcon = '';\n private _fontSet = '';\n\n private _previousFontIcon = '';\n private _previousFontSet = '';\n\n @HostBinding('class.hc-icon')\n _hostClass = true;\n\n /** Name of icon within a font set. */\n @Input()\n get fontIcon(): string {\n return this._fontIcon;\n }\n\n set fontIcon(icon: string) {\n this._fontIcon = this._cleanupFontValue(icon);\n }\n\n /** Font set icon is a part of. */\n @Input()\n get fontSet(): string {\n return this._fontSet;\n }\n\n set fontSet(fontSet: string) {\n this._fontSet = this._cleanupFontValue(fontSet);\n }\n\n constructor(private elementRef: ElementRef, @Attribute('aria-hidden') ariaHidden: string) {\n // icon should be hidden for accessibility\n if (!ariaHidden) {\n elementRef.nativeElement.setAttribute('aria-hidden', 'true');\n }\n }\n\n ngOnChanges(): void {\n this._updateFontIcon();\n }\n\n private _updateFontIcon(): void {\n const element = this.elementRef.nativeElement;\n if (this._previousFontIcon !== this._fontIcon) {\n if (this._previousFontIcon) {\n element.classList.remove(this._previousFontIcon);\n }\n if (this._fontIcon) {\n element.classList.add(this._fontIcon);\n this._previousFontIcon = this._fontIcon;\n }\n }\n\n if (this._previousFontSet !== this._fontSet) {\n if (this._previousFontSet) {\n element.classList.remove(this._previousFontSet);\n }\n if (this._fontSet) {\n element.classList.add(this._fontSet);\n this._previousFontSet = this._fontSet;\n }\n }\n }\n\n // make sure that there are no spaces and that if they sent multiple space separated values grab the first\n private _cleanupFontValue(fontValue: string): string {\n return (fontValue || '').trim().split(' ')[0];\n }\n}\n","import {Component, Inject, ViewEncapsulation} from '@angular/core';\nimport {IAppSwitcherService, APP_SWITCHER_SERVICE} from '../app-switcher-interfaces';\n\n/**\n * `hc-app-switcher-links` is used to link to an app switcher page from the navbar mobile menu\n */\n@Component({\n selector: 'hc-app-switcher-links',\n templateUrl: './app-switcher-links.component.html',\n styleUrls: ['./app-switcher-links.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class AppSwitcherLinksComponent {\n constructor(@Inject(APP_SWITCHER_SERVICE) public _appSwitcherService: IAppSwitcherService) {}\n}\n","
\n\n \n View all my applications\n\n","import {trigger, style, animate, transition, AnimationTriggerMetadata} from '@angular/animations';\n\nexport const transformPopover: AnimationTriggerMetadata = trigger('transformPopover', [\n transition(':enter', [style({opacity: 0}), animate('{{openTransition}}', style({opacity: 1}))]),\n transition(':leave', [animate('{{closeTransition}}', style({opacity: 0}))])\n]);\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport {Injectable} from '@angular/core';\nimport {Observable, Subject} from 'rxjs';\n\n/** Enumerated actions for a popover to perform. */\nexport enum NotificationAction {\n /** Popover should open. */\n OPEN,\n /** Popover should close. */\n CLOSE,\n /** Popover should toggle open or closed. */\n TOGGLE,\n /** Popover has new target positions. */\n REPOSITION,\n /** Popover needs new configuration. */\n UPDATE_CONFIG,\n /** Popover should realign itself to the anchor. */\n REALIGN\n}\n\n/** Event object for dispatching to anchoring service. */\nexport class PopoverNotification {\n constructor(\n /** Action to perform. */\n public action: NotificationAction,\n /** Optional payload. */\n public value?: any\n ) {}\n}\n\n@Injectable()\nexport class PopoverNotificationService {\n private store = new Subject();\n\n /** Dispatch a notification to all subscribers. */\n dispatch(notification: PopoverNotification): void {\n this.store.next(notification);\n }\n\n /** Stream of notification events. */\n events(): Observable {\n return this.store.asObservable();\n }\n\n /** Complete event stream. */\n dispose(): void {\n this.store.complete();\n }\n}\n","export type HcPopoverScrollStrategy = 'noop' | 'block' | 'reposition' | 'close';\nexport const VALID_SCROLL: HcPopoverScrollStrategy[] = ['noop', 'block', 'reposition', 'close'];\n\nexport type HcPopoverTrigger = 'click' | 'mousedown' | 'rightclick' | 'hover' | 'none';\nexport const VALID_TRIGGER: HcPopoverTrigger[] = ['click', 'mousedown', 'rightclick', 'hover', 'none'];\n\nexport type HcPopoverHorizontalAlign = 'before' | 'start' | 'center' | 'end' | 'after' | 'mouse';\nexport const VALID_HORIZ_ALIGN: HcPopoverHorizontalAlign[] = ['before', 'start', 'center', 'end', 'after', 'mouse'];\n\nexport type HcPopoverVerticalAlign = 'above' | 'start' | 'center' | 'end' | 'below' | 'mouse';\nexport const VALID_VERT_ALIGN: HcPopoverVerticalAlign[] = ['above', 'start', 'center', 'end', 'below', 'mouse'];\n\nexport interface HcPopoverOpenOptions {\n /**\n * Whether the popover should return focus to the previously focused element after\n * closing. Defaults to true.\n */\n restoreFocus?: boolean;\n\n /** Whether the first focusable element should be focused on open. Defaults to true. */\n autoFocus?: boolean;\n\n /** The horizontal position for a fixed position popover. Defaults to 0 if `y` is set. */\n x?: number;\n\n /** The vertical position for a fixed position popover. Defaults to 0 if `x` is set. */\n y?: number;\n}\n","import {VALID_HORIZ_ALIGN, VALID_VERT_ALIGN, VALID_SCROLL, VALID_TRIGGER} from './types';\n\nexport function getInvalidPopoverError(): Error {\n return Error('HcPopoverAnchorDirective must be provided an HcPopover component instance.');\n}\n\nexport function getUnanchoredPopoverError(): Error {\n return Error('HcPopover is not anchored to any HcPopoverAnchorDirective.');\n}\n\nexport function getInvalidHorizontalAlignError(alignment: unknown): Error {\n return Error(generateGenericError('horizontalAlign/xAlign', alignment, VALID_HORIZ_ALIGN));\n}\n\nexport function getInvalidVerticalAlignError(alignment: unknown): Error {\n return Error(generateGenericError('verticalAlign/yAlign', alignment, VALID_VERT_ALIGN));\n}\n\nexport function getInvalidTriggerError(trigger: unknown): Error {\n return Error(generateGenericError('trigger', trigger, VALID_TRIGGER));\n}\n\nexport function getInvalidScrollStrategyError(strategy: unknown): Error {\n return Error(generateGenericError('scrollStrategy', strategy, VALID_SCROLL));\n}\n\nfunction generateGenericError(apiName: string, invalid: unknown, valid: string[]): string {\n return `Invalid ${apiName}: '${invalid}'. Valid options are ` + `${valid.map(v => `'${v}'`).join(', ')}.`;\n}\n","import {Directive, HostBinding, ElementRef, HostListener, Output, EventEmitter} from '@angular/core';\n\n/** Use `hcMenuItem` for a selectable item in an hcMenu. */\n@Directive({\n selector: '[hcMenuItem], [hcButtonItem]',\n standalone: false\n})\nexport class MenuItemDirective {\n @HostBinding('class.hc-menu-item')\n _hostClass = true;\n\n // Event fired on mouseenter (used to close submenus)\n @Output() _itemEnter = new EventEmitter();\n\n // Menu Item uses focus for hover highlighting to sync with keyboard navigation of the menu\n @HostListener('mouseenter')\n focus(): void {\n this.ref.nativeElement.focus();\n this._itemEnter.emit();\n }\n\n @HostListener('touchend')\n @HostListener('touchcancel')\n @HostListener('mouseleave')\n blur(): void {\n this.ref.nativeElement.blur();\n }\n\n constructor(public ref: ElementRef) {}\n}\n","/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n Component,\n ElementRef,\n EventEmitter,\n Inject,\n Input,\n ViewChild,\n ViewEncapsulation,\n TemplateRef,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n ContentChildren,\n DOCUMENT\n} from '@angular/core';\nimport type {QueryList} from '@angular/core';\nimport {AnimationEvent} from '@angular/animations';\n\nimport {ConfigurableFocusTrapFactory, ConfigurableFocusTrap} from '@angular/cdk/a11y';\nimport {coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {transformPopover} from './popover.animations';\nimport {NotificationAction, PopoverNotification, PopoverNotificationService} from './notification.service';\nimport {\n getUnanchoredPopoverError,\n getInvalidHorizontalAlignError,\n getInvalidVerticalAlignError,\n getInvalidScrollStrategyError\n} from './popover.errors';\nimport {\n HcPopoverScrollStrategy,\n HcPopoverHorizontalAlign,\n HcPopoverVerticalAlign,\n VALID_SCROLL,\n VALID_HORIZ_ALIGN,\n VALID_VERT_ALIGN,\n HcPopoverOpenOptions\n} from './types';\nimport {OverlayRef} from '@angular/cdk/overlay';\nimport {MenuItemDirective} from './directives/menu-item.directive';\nimport {Subject} from 'rxjs';\n\n// See http://cubic-bezier.com/#.25,.8,.25,1 for reference.\nconst DEFAULT_TRANSITION = '100ms linear';\nconst EMPTY_TRANSITION = '0ms linear';\n\n@Component({\n selector: 'hc-pop',\n encapsulation: ViewEncapsulation.None,\n animations: [transformPopover],\n styleUrls: ['./popover.component.scss'],\n templateUrl: './popover.component.html',\n standalone: false\n})\nexport class HcPopComponent implements OnInit, OnDestroy {\n /** Whether or not to disable default popover container styles. *Defaults to `false`.* */\n @Input() disableStyle = false;\n\n /** Whether or not to show a connection arrow when possible. *Defaults to `true`.* */\n @Input() showArrow = true;\n\n /** Alignment of the popover on the horizontal axis. Can be `before`, `start`, `center`, `end`, `after`, or `mouse`.\n * *Defaults to `center`.* */\n @Input()\n get horizontalAlign(): HcPopoverHorizontalAlign {\n return this._horizontalAlign;\n }\n set horizontalAlign(val: HcPopoverHorizontalAlign) {\n this._validateHorizontalAlign(val);\n if (this._horizontalAlign !== val) {\n this._horizontalAlign = val;\n this._dispatchConfigNotification(new PopoverNotification(NotificationAction.REPOSITION));\n }\n }\n private _horizontalAlign: HcPopoverHorizontalAlign = 'center';\n\n /** Alignment of the popover on the x axis. Alias for `horizontalAlign`. *Defaults to `\"center\"`.* */\n @Input()\n get xAlign(): HcPopoverHorizontalAlign {\n return this.horizontalAlign;\n }\n set xAlign(val: HcPopoverHorizontalAlign) {\n this.horizontalAlign = val;\n }\n\n /** Alignment of the popover on the vertical axis. Can be `above`, `start`, `center`, `end`, `below`, or `mouse`.\n * *Defaults to `\"below\"`.* */\n @Input()\n get verticalAlign(): HcPopoverVerticalAlign {\n return this._verticalAlign;\n }\n set verticalAlign(val: HcPopoverVerticalAlign) {\n this._validateVerticalAlign(val);\n if (this._verticalAlign !== val) {\n this._verticalAlign = val;\n this._dispatchConfigNotification(new PopoverNotification(NotificationAction.REPOSITION));\n }\n }\n private _verticalAlign: HcPopoverVerticalAlign = 'below';\n\n /** Alignment of the popover on the y axis. Alias for `verticalAlign`. *Defaults to `\"below\"`.* */\n @Input()\n get yAlign(): HcPopoverVerticalAlign {\n return this.verticalAlign;\n }\n set yAlign(val: HcPopoverVerticalAlign) {\n this.verticalAlign = val;\n }\n\n /** Whether the popover always opens with the specified alignment. *Defaults to `false`.* */\n @Input()\n get forceAlignment(): boolean {\n return this._forceAlignment;\n }\n set forceAlignment(val: boolean) {\n const coercedVal = coerceBooleanProperty(val);\n if (this._forceAlignment !== coercedVal) {\n this._forceAlignment = coercedVal;\n this._dispatchConfigNotification(new PopoverNotification(NotificationAction.REPOSITION));\n }\n }\n private _forceAlignment = false;\n\n /**\n * Whether the popover's alignment is locked after opening. This prevents the popover\n * from changing its alignement when scrolling or changing the size of the viewport.\n * *Defaults to `false`.*\n */\n @Input()\n get lockAlignment(): boolean {\n return this._lockAlignment;\n }\n set lockAlignment(val: boolean) {\n const coercedVal = coerceBooleanProperty(val);\n if (this._lockAlignment !== coercedVal) {\n this._lockAlignment = coerceBooleanProperty(val);\n this._dispatchConfigNotification(new PopoverNotification(NotificationAction.REPOSITION));\n }\n }\n private _lockAlignment = false;\n\n /** Constrains the content of a container to a standard css string value; *Defaults to `none`.* */\n @Input()\n get maxWidth(): string {\n return this._maxWidth;\n }\n set maxWidth(val: string) {\n this._maxWidth = val;\n }\n private _maxWidth = 'none';\n\n /** Whether the first focusable element should be focused on open. *Defaults to `false`.* */\n @Input()\n get autoFocus(): boolean {\n return this._autoFocus && this._autoFocusOverride;\n }\n set autoFocus(val: boolean) {\n this._autoFocus = coerceBooleanProperty(val);\n }\n private _autoFocus = false;\n _autoFocusOverride = false;\n\n /** Whether the popover should return focus to the previously focused element after closing. *Defaults to `true`.* */\n @Input()\n get restoreFocus(): boolean {\n return this._restoreFocus && this._restoreFocusOverride;\n }\n set restoreFocus(val: boolean) {\n this._restoreFocus = coerceBooleanProperty(val);\n }\n private _restoreFocus = true;\n _restoreFocusOverride = true;\n\n /** How the popover should handle scrolling. *Defaults to `\"reposition\"`.* */\n @Input()\n get scrollStrategy(): HcPopoverScrollStrategy {\n return this._scrollStrategy;\n }\n set scrollStrategy(val: HcPopoverScrollStrategy) {\n this._validateScrollStrategy(val);\n if (this._scrollStrategy !== val) {\n this._scrollStrategy = val;\n this._dispatchConfigNotification(new PopoverNotification(NotificationAction.UPDATE_CONFIG));\n }\n }\n private _scrollStrategy: HcPopoverScrollStrategy = 'reposition';\n\n /** Whether the popover should have a backdrop (includes closing on click). *Defaults to `true`.* */\n @Input()\n get hasBackdrop(): boolean {\n return this._hasBackdrop;\n }\n set hasBackdrop(val: boolean) {\n this._hasBackdrop = coerceBooleanProperty(val);\n this._dispatchConfigNotification(new PopoverNotification(NotificationAction.UPDATE_CONFIG));\n }\n private _hasBackdrop = true;\n\n /** Whether the popover should close when the user clicks the backdrop or presses ESC. *Defaults to `true`.* */\n @Input()\n get interactiveClose(): boolean {\n return this._interactiveClose;\n }\n set interactiveClose(val: boolean) {\n this._interactiveClose = coerceBooleanProperty(val);\n this._dispatchConfigNotification(new PopoverNotification(NotificationAction.UPDATE_CONFIG));\n }\n private _interactiveClose = true;\n\n /** Custom transition to use while opening. *Defaults to `'200ms cubic-bezier(0.25, 0.8, 0.25, 1)'`.* */\n @Input()\n get openTransition(): string {\n return this._openTransition;\n }\n set openTransition(val: string) {\n if (val) {\n this._openTransition = val;\n }\n }\n private _openTransition = DEFAULT_TRANSITION;\n\n /** Custom transition to use while closing. *Defaults to `'200ms cubic-bezier(0.25, 0.8, 0.25, 1)'`.* */\n @Input()\n get closeTransition(): string {\n return this._closeTransition;\n }\n set closeTransition(val: string) {\n if (val) {\n this._closeTransition = val;\n }\n }\n private _closeTransition = DEFAULT_TRANSITION;\n\n /** A link to an associated parent menu that will be closed when this menu closes. */\n @Input()\n get parent(): HcPopComponent | null {\n return this._parentMenu;\n }\n set parent(val: HcPopComponent | null) {\n if (this._parentMenu) {\n this._parentClose.unsubscribe();\n }\n this._parentMenu = val;\n if ( this._parentMenu ) {\n this._parentClose = this._parentMenu.closed.subscribe(() => {\n if (this.isOpen()) {\n this.close();\n }\n });\n }\n }\n private _parentMenu: HcPopComponent | null;\n\n /** Should the popover animate? *Defaults to `true`.* */\n @Input() shouldAnimate = true;\n\n /** Optional backdrop class. *Defaults to `''`.* */\n @Input() backdropClass = '';\n\n /** Set to true if clicking anywhere inside the popover should close it. *Defaults to `false`.* */\n @Input() autoCloseOnContentClick = false;\n\n /** Emits when the popover is opened. If `context` was set on the anchor, it will be emitted with this event. */\n @Output() opened = new EventEmitter();\n\n /** Emits when the popover is closed. */\n @Output() closed = new EventEmitter();\n\n /** Emits when the popover has finished opening. */\n @Output() afterOpen = new EventEmitter();\n\n /** Emits when the popover has finished closing. */\n @Output() afterClose = new EventEmitter();\n\n /** Emits when the backdrop is clicked. */\n @Output() backdropClicked = new EventEmitter();\n\n /** Emits when a keydown event is targeted to this popover's overlay. */\n @Output() overlayKeydown = new EventEmitter();\n\n /** Reference to template so it can be placed within a portal. */\n @ViewChild(TemplateRef) _templateRef: TemplateRef;\n\n /** Stores the click coordinates for mouse-based positioning */\n _offsetPos: number[] = [0, 0];\n\n /** Stores a reference to the associated overlay */\n _componentOverlay: OverlayRef;\n\n /** Classes to be added to the popover for setting the correct transform origin. */\n _classList: any = {};\n _yAlignClass = '';\n _xAlignClass = '';\n\n /** Whether the popover is presently open. */\n _open = false;\n\n /** Instance of notification service. Will be undefined until attached to an anchor. */\n _notifications: PopoverNotificationService;\n\n /** Reference to the element to build a focus trap around. */\n @ViewChild('focusTrapElement')\n private _focusTrapElement: ElementRef;\n\n /** Reference to the element that was focused before opening. */\n private _previouslyFocusedElement: HTMLElement | null;\n\n /** Reference to a focus trap around the popover. */\n private _focusTrap: ConfigurableFocusTrap | undefined;\n\n /** If this menu has children, keep track of whether any of them are open */\n public _subMenuOpen = false;\n\n /** Reference to subscription of parent popover close events */\n private _parentClose: any = new Subject();\n\n /** Block this popover from closing its parent on close */\n _parentCloseBlock = false;\n\n /** Reference to hcMenuItems (if the popover contains them) */\n @ContentChildren(MenuItemDirective, {descendants: true}) _menuItems: QueryList;\n\n constructor(\n public _elementRef: ElementRef,\n private _focusTrapFactory: ConfigurableFocusTrapFactory,\n @Optional() @Inject(DOCUMENT) private _document: any\n ) {}\n\n ngOnInit(): void {\n this._setAlignmentClasses();\n }\n\n ngOnDestroy(): void {\n if (this._notifications) {\n this._notifications.dispose();\n }\n if (this._parentMenu) {\n this._parentClose.unsubscribe();\n }\n }\n\n _popContainerClicked(): void {\n if (this.autoCloseOnContentClick) {\n this.close();\n }\n }\n\n /** Open this popover. */\n open(options: HcPopoverOpenOptions = {}): void {\n const notification = new PopoverNotification(NotificationAction.OPEN, options);\n this._dispatchActionNotification(notification);\n }\n\n /** Close this popover and its parent (if linked). */\n close(value?: unknown): void {\n const notification = new PopoverNotification(NotificationAction.CLOSE, value);\n this._dispatchActionNotification(notification);\n if (this.parent && !this._parentCloseBlock) {\n this.parent.close();\n }\n }\n\n /** Toggle this popover open or closed. */\n toggle(): void {\n if (this.parent) {\n this.parent._subMenuOpen = !this.isOpen();\n }\n const notification = new PopoverNotification(NotificationAction.TOGGLE);\n this._dispatchActionNotification(notification);\n }\n\n /** Realign the popover to the anchor. */\n realign(): void {\n const notification = new PopoverNotification(NotificationAction.REALIGN);\n this._dispatchActionNotification(notification);\n }\n\n /** Gets whether the popover is presently open. */\n isOpen(): boolean {\n return this._open;\n }\n\n /** Gets an animation config with customized (or default) transition values. */\n _getAnimation(): {value: any; params: any} {\n return {\n value: 'visible',\n params: {\n openTransition: this.shouldAnimate ? this.openTransition : EMPTY_TRANSITION,\n closeTransition: this.shouldAnimate ? this.closeTransition : EMPTY_TRANSITION\n }\n };\n }\n\n /** Callback for when the popover is finished animating in or out. */\n _onAnimationDone(event: AnimationEvent): void {\n if (event.toState === 'visible') {\n this._trapFocus();\n this.afterOpen.emit();\n } else if (event.toState === 'void') {\n this._restoreFocusAndDestroyTrap();\n this.afterClose.emit();\n }\n }\n\n /** Apply alignment classes based on alignment inputs. */\n _setAlignmentClasses(horizAlign = this.horizontalAlign, vertAlign = this.verticalAlign): void {\n this._setAlignmentClassesForAnimation(horizAlign, vertAlign);\n this._setAlignmentClassesForArrow();\n }\n\n _setAlignmentClassesForAnimation(horizAlign = this.horizontalAlign, vertAlign = this.verticalAlign): void {\n this._classList['hc-pop-before'] = horizAlign === 'before' || horizAlign === 'end';\n this._classList['hc-pop-after'] = horizAlign === 'after' || horizAlign === 'start';\n\n this._classList['hc-pop-above'] = vertAlign === 'above' || vertAlign === 'end';\n this._classList['hc-pop-below'] = vertAlign === 'below' || vertAlign === 'start';\n\n this._classList['hc-pop-center'] = horizAlign === 'center' || vertAlign === 'center';\n }\n\n _setAlignmentClassesForArrow(xAlign = this.horizontalAlign, yAlign = this.verticalAlign): void {\n this._classList['hc-pop-show-arrow'] =\n (this.showArrow &&\n (xAlign === 'start' || xAlign === 'center' || xAlign === 'end') &&\n (yAlign === 'above' || yAlign === 'below')) ||\n ((yAlign === 'start' || yAlign === 'center' || yAlign === 'end') && (xAlign === 'before' || xAlign === 'after'));\n\n this._yAlignClass = this._classList['hc-pop-show-arrow'] ? `hc-pop-arrow-y-${yAlign}` : '';\n this._xAlignClass = this._classList['hc-pop-show-arrow'] ? `hc-pop-arrow-x-${xAlign}` : '';\n }\n\n /** Set the focus of an hcMenu based on a keyboard arrow press */\n _keyFocus(downPress: boolean): void {\n const itemArray = this._menuItems.toArray();\n if (!downPress) {\n itemArray.reverse();\n }\n let selected = false;\n\n // Determine if any item in the menu is currently focused, and select the next (or previous)\n for (let i = 0; i < itemArray.length; i++) {\n if (selected && !itemArray[i].ref.nativeElement.classList.contains('hc-divider') && !itemArray[i].ref.nativeElement.disabled) {\n itemArray[i].focus();\n return;\n }\n if (itemArray[i].ref.nativeElement === document.activeElement) {\n selected = true;\n }\n }\n\n // If no item is focused, selected the first (or last) item that isn't a divider or disabled\n for (let i = 0; i < itemArray.length; i++) {\n if (!itemArray[i].ref.nativeElement.classList.contains('hc-divider') && !itemArray[i].ref.nativeElement.disabled) {\n itemArray[i].focus();\n return;\n }\n }\n }\n\n /** Restore focus to the element focused before the popover opened. Also destroy trap. */\n _restoreFocusAndDestroyTrap(): void {\n const toFocus = this._previouslyFocusedElement;\n\n // Must check active element is focusable for IE sake\n if (toFocus && 'focus' in toFocus && this.restoreFocus && this._previouslyFocusedElement) {\n this._previouslyFocusedElement.focus();\n }\n\n this._previouslyFocusedElement = null;\n\n if (this._focusTrap) {\n this._focusTrap.destroy();\n this._focusTrap = undefined;\n }\n }\n\n /** Save a reference to the element focused before the popover was opened. */\n _savePreviouslyFocusedElement(): void {\n if (this._document) {\n this._previouslyFocusedElement = this._document.activeElement as HTMLElement;\n }\n }\n\n /** Move the focus inside the focus trap and remember where to return later. */\n private _trapFocus(): void {\n // There won't be a focus trap element if the close animation starts before open finishes\n if (!this._focusTrapElement) {\n return;\n }\n\n if (!this._focusTrap && this._focusTrapElement) {\n this._focusTrap = this._focusTrapFactory.create(this._focusTrapElement.nativeElement);\n }\n\n if (this.autoFocus && this._focusTrap) {\n this._focusTrap.focusInitialElementWhenReady();\n }\n }\n\n /** Dispatch a notification to the notification service, if possible. */\n private _dispatchConfigNotification(notification: PopoverNotification) {\n if (this._notifications) {\n this._notifications.dispatch(notification);\n }\n }\n\n /** Dispatch a notification to the notification service and throw if unable to. */\n private _dispatchActionNotification(notification: PopoverNotification) {\n if (!this._notifications) {\n throw getUnanchoredPopoverError();\n }\n\n this._notifications.dispatch(notification);\n }\n\n /** Throws an error if the alignment is not a valid horizontalAlign. */\n private _validateHorizontalAlign(pos: HcPopoverHorizontalAlign): void {\n if (VALID_HORIZ_ALIGN.indexOf(pos) === -1) {\n throw getInvalidHorizontalAlignError(pos);\n }\n }\n\n /** Throws an error if the alignment is not a valid verticalAlign. */\n private _validateVerticalAlign(pos: HcPopoverVerticalAlign): void {\n if (VALID_VERT_ALIGN.indexOf(pos) === -1) {\n throw getInvalidVerticalAlignError(pos);\n }\n }\n\n /** Throws an error if the scroll strategy is not a valid strategy. */\n private _validateScrollStrategy(strategy: HcPopoverScrollStrategy): void {\n if (VALID_SCROLL.indexOf(strategy) === -1) {\n throw getInvalidScrollStrategyError(strategy);\n }\n }\n}\n","\n \n \n @if (showArrow) {\n
\n }\n \n\n","import {Component, Input, ViewEncapsulation} from '@angular/core';\nimport {HcPopComponent} from '../popover.component';\nimport {transformPopover} from '../popover.animations';\n\n/** Displays additional information on hover above the element after a specified delay */\n@Component({\n selector: 'hc-tooltip',\n templateUrl: './tooltip.component.html',\n animations: [transformPopover],\n styleUrls: ['../popover.component.scss', './tooltip.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class HcTooltipComponent extends HcPopComponent {\n /** The content to be display in the tooltip */\n @Input()\n tooltipContent = '';\n}\n","\n \n
\n {{ tooltipContent }}\n
\n @if (showArrow) {\n
\n }\n \n\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {ElementRef, Injectable, NgZone, OnDestroy, Optional, Renderer2, ViewContainerRef} from '@angular/core';\nimport {\n ConnectionPositionPair,\n FlexibleConnectedPositionStrategy,\n GlobalPositionStrategy,\n HorizontalConnectionPos,\n Overlay,\n OverlayConfig,\n OverlayRef,\n ScrollStrategy,\n VerticalConnectionPos\n} from '@angular/cdk/overlay';\nimport {Directionality, Direction} from '@angular/cdk/bidi';\nimport {TemplatePortal} from '@angular/cdk/portal';\nimport {Subscription, Subject} from 'rxjs';\nimport {takeUntil, take, filter, tap} from 'rxjs/operators';\n\nimport {HcPopComponent} from './popover.component';\nimport {HcPopoverHorizontalAlign, HcPopoverVerticalAlign, HcPopoverScrollStrategy, HcPopoverOpenOptions} from './types';\n\nimport {PopoverNotificationService, NotificationAction} from './notification.service';\nimport {HcPopoverAnchorDirective} from './directives/popover-anchor.directive';\n\n/**\n * Configuration provided by the popover for the anchoring service\n * to build the correct overlay config.\n */\ninterface PopoverConfig {\n horizontalAlign: HcPopoverHorizontalAlign;\n verticalAlign: HcPopoverVerticalAlign;\n hasBackdrop: boolean;\n backdropClass: string;\n scrollStrategy: HcPopoverScrollStrategy;\n forceAlignment: boolean;\n lockAlignment: boolean;\n}\n\n@Injectable()\nexport class HcPopoverAnchoringService implements OnDestroy {\n /** Emits when the popover is opened. */\n popoverOpened = new Subject();\n\n /** Emits when the popover is closed. */\n popoverClosed = new Subject();\n\n /** Reference to the overlay containing the popover component. */\n _overlayRef: OverlayRef | null;\n\n /** Reference to the target popover. */\n private _popover: HcPopComponent;\n\n /** Stores the context assigned to the popover */\n _context: any;\n\n /** Reference to the view container for the popover template. */\n private _viewContainerRef: ViewContainerRef;\n\n /** Reference to the anchor */\n private _anchor: HcPopoverAnchorDirective;\n\n /** Reference to a template portal where the overlay will be attached. */\n private _portal: TemplatePortal;\n\n /** Communications channel with the popover. */\n private _notifications: PopoverNotificationService;\n\n /** Single subscription to notifications service events. */\n private _notificationsSubscription: Subscription;\n\n /** Single subscription to position changes. */\n private _positionChangeSubscription: Subscription;\n\n /** Whether the popover is presently open. */\n private _popoverOpen = false;\n\n /** Emits when the service is destroyed. */\n private _onDestroy = new Subject();\n\n /** Stores the fixed position coordinates */\n _fixedPos: number[] = [];\n\n /** Function to remove a right-click event listener if added */\n private _unlistener: () => void;\n\n constructor(private _overlay: Overlay, private _renderer: Renderer2, private _ngZone: NgZone, @Optional() private _dir: Directionality) {}\n\n ngOnDestroy(): void {\n // Destroy popover before terminating subscriptions so that any resulting\n // detachments update 'closed state'\n this._destroyPopover();\n\n // Terminate subscriptions\n if (this._notificationsSubscription) {\n this._notificationsSubscription.unsubscribe();\n }\n if (this._positionChangeSubscription) {\n this._positionChangeSubscription.unsubscribe();\n }\n this._onDestroy.next();\n this._onDestroy.complete();\n\n this.popoverOpened.complete();\n this.popoverClosed.complete();\n }\n\n /** Anchor a popover instance to a view and connection element. */\n anchor(popover: HcPopComponent, viewContainerRef: ViewContainerRef, anchor: HcPopoverAnchorDirective): void {\n // Destroy any previous popovers\n this._destroyPopover();\n\n // Assign local refs\n this._popover = popover;\n this._viewContainerRef = viewContainerRef;\n this._anchor = anchor;\n\n // Provide notification service as a communication channel between popover and anchor.\n // Then subscribe to notifications to take appropriate actions.\n this._popover._notifications = this._notifications = this._anchor._notifications = new PopoverNotificationService();\n this._subscribeToNotifications();\n }\n\n /** Gets whether the popover is presently open. */\n isPopoverOpen(): boolean {\n return this._popoverOpen;\n }\n\n /** Toggles the popover between the open and closed states. */\n togglePopover(): void {\n return this._popoverOpen ? this.closePopover() : this.openPopover();\n }\n\n /** Opens the popover. */\n openPopover(options: HcPopoverOpenOptions = {}): void {\n if (!this._popoverOpen) {\n this._applyOpenOptions(options);\n this._popover._componentOverlay = this._createOverlay();\n this._subscribeToBackdrop();\n this._subscribeToEscape();\n this._subscribeToDetachments();\n this._saveOpenedState();\n this._popover._savePreviouslyFocusedElement();\n }\n }\n\n /** Closes the popover. */\n closePopover(value?: unknown, neighborSubMenusAreOpen = false): void {\n if ( this._unlistener ) {\n this._unlistener();\n }\n if (this._popover._componentOverlay) {\n this._saveClosedState(value, neighborSubMenusAreOpen);\n this._popover._componentOverlay.detach();\n this._popover._restoreFocusAndDestroyTrap();\n }\n }\n\n /** Realign the popover to the anchor. */\n realignPopoverToAnchor(): void {\n if (this._popover._componentOverlay) {\n const config = this._popover._componentOverlay.getConfig();\n const strategy = config.positionStrategy as FlexibleConnectedPositionStrategy;\n strategy.reapplyLastPosition();\n }\n }\n\n /** Get a reference to the anchor element. */\n getAnchorElement(): ElementRef {\n return this._anchor._elementRef;\n }\n\n /** Apply behavior properties on the popover based on the open options. */\n private _applyOpenOptions(options: HcPopoverOpenOptions): void {\n // Only override restoreFocus as `false` if the option is explicitly `false`\n const restoreFocus = options.restoreFocus !== false;\n this._popover._restoreFocusOverride = restoreFocus;\n\n // Only override autoFocus as `false` if the option is explicitly `false`\n const autoFocus = options.autoFocus !== false;\n this._popover._autoFocusOverride = autoFocus;\n\n // Set the fixed position coordinates if a x or y value is provided\n if ( options.x || options.y ) {\n this._destroyPopoverOnceClosed();\n\n this._fixedPos[0] = options.x ? options.x : 0;\n this._fixedPos[1] = options.y ? options.y : 0;\n }\n }\n\n /** Create an overlay to be attached to the portal. */\n private _createOverlay(): OverlayRef {\n // Create overlay if it doesn't yet exist\n if (!this._overlayRef) {\n this._portal = new TemplatePortal(this._popover._templateRef, this._viewContainerRef);\n\n const popoverConfig = {\n horizontalAlign: this._popover.horizontalAlign,\n verticalAlign: this._popover.verticalAlign,\n hasBackdrop: this._popover.hasBackdrop,\n backdropClass: this._popover.backdropClass,\n scrollStrategy: this._popover.scrollStrategy,\n forceAlignment: this._popover.forceAlignment,\n lockAlignment: this._popover.lockAlignment\n };\n\n const overlayConfig = this._getOverlayConfig(popoverConfig, this._anchor);\n\n // Only subscribe to position changes when the popover is not fixed position\n if ( !this._fixedPos.length ) {\n this._subscribeToPositionChanges(overlayConfig.positionStrategy as FlexibleConnectedPositionStrategy);\n }\n\n this._overlayRef = this._overlay.create(overlayConfig);\n } else if (this._popover.horizontalAlign === 'mouse' || this._popover.verticalAlign === 'mouse' && !this._fixedPos.length ) {\n /* If aligning to mouse clicks - adjust the strategy based on the most current click */\n this._overlayRef.updatePositionStrategy(\n this._getPositionStrategy(\n this._popover.horizontalAlign,\n this._popover.verticalAlign,\n this._popover.forceAlignment,\n this._popover.lockAlignment,\n this._anchor._elementRef\n )\n );\n }\n\n // Actually open the popover\n this._overlayRef.attach(this._portal);\n return this._overlayRef;\n }\n\n /** Removes the popover from the DOM. Does NOT update open state. */\n private _destroyPopover(): void {\n if (this._overlayRef) {\n this._overlayRef.dispose();\n this._overlayRef = null;\n }\n }\n\n /**\n * Destroys the popover immediately if it is closed, or waits until it\n * has been closed to destroy it.\n */\n private _destroyPopoverOnceClosed(): void {\n if (this.isPopoverOpen() && this._overlayRef) {\n this._overlayRef\n .detachments()\n .pipe(take(1), takeUntil(this._onDestroy))\n .subscribe(() => this._destroyPopover());\n } else {\n this._destroyPopover();\n }\n }\n\n /**\n * Call appropriate anchor method when an event is dispatched through\n * the notification service.\n */\n private _subscribeToNotifications(): void {\n if (this._notificationsSubscription) {\n this._notificationsSubscription.unsubscribe();\n }\n\n this._notificationsSubscription = this._notifications.events().subscribe(event => {\n switch (event.action) {\n case NotificationAction.OPEN:\n this.openPopover(event.value);\n break;\n case NotificationAction.CLOSE:\n this.closePopover(event.value);\n break;\n case NotificationAction.TOGGLE:\n this.togglePopover();\n break;\n // TODO: When the overlay's position can be dynamically changed, do not destroy\n case NotificationAction.REPOSITION:\n case NotificationAction.UPDATE_CONFIG:\n this._destroyPopoverOnceClosed();\n break;\n case NotificationAction.REALIGN:\n this.realignPopoverToAnchor();\n break;\n }\n });\n }\n\n /** Close popover when backdrop is clicked. */\n private _subscribeToBackdrop(): void {\n if (!this._overlayRef) {\n return;\n }\n this._overlayRef\n .backdropClick()\n .pipe(\n tap(() => this._popover.backdropClicked.emit()),\n filter(() => this._popover.interactiveClose),\n takeUntil(this.popoverClosed),\n takeUntil(this._onDestroy)\n )\n .subscribe(() => this.closePopover());\n\n // Allow right-clicks to close an open popover\n if ( this._overlayRef.backdropElement && this._popover.interactiveClose ) {\n this._unlistener = this._renderer.listen( this._overlayRef.backdropElement, 'contextmenu', event => {\n event.preventDefault();\n this._popover.backdropClicked.emit();\n this.closePopover();\n });\n }\n }\n\n /** Close popover when escape keydown event occurs. */\n private _subscribeToEscape(): void {\n if (!this._overlayRef) {\n return;\n }\n this._overlayRef\n .keydownEvents()\n .pipe(\n tap(event => this._popover.overlayKeydown.emit(event)),\n filter(event => event.key === 'Escape'),\n filter(() => this._popover.interactiveClose),\n takeUntil(this.popoverClosed),\n takeUntil(this._onDestroy)\n )\n .subscribe(() => this.closePopover());\n }\n\n /** Set state back to closed when detached. */\n private _subscribeToDetachments(): void {\n if (!this._overlayRef) {\n return;\n }\n this._overlayRef\n .detachments()\n .pipe(takeUntil(this._onDestroy))\n .subscribe(() => this._saveClosedState());\n }\n\n /** Save the opened state of the popover and emit. */\n private _saveOpenedState(): void {\n if (!this._popoverOpen) {\n this._popover._open = this._popoverOpen = true;\n if ( this._popover.parent ) {\n this._popover.parent._subMenuOpen = true;\n }\n\n this.popoverOpened.next();\n if (typeof this._context === 'undefined') {\n this._popover.opened.emit();\n } else {\n this._popover.opened.emit(this._context);\n }\n }\n }\n\n /** Save the closed state of the popover and emit. */\n private _saveClosedState(value?: any, neighborSubMenusAreOpen = false): void {\n if (this._popoverOpen) {\n this._popover._open = this._popoverOpen = false;\n if ( this._popover.parent ) {\n this._popover.parent._subMenuOpen = neighborSubMenusAreOpen;\n }\n this.popoverClosed.next(value);\n this._popover.closed.emit(value);\n }\n }\n\n /** Gets the text direction of the containing app. */\n private _getDirection(): Direction {\n return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';\n }\n\n /** Create and return a config for creating the overlay. */\n private _getOverlayConfig(config: PopoverConfig, anchor: HcPopoverAnchorDirective): OverlayConfig {\n return new OverlayConfig({\n positionStrategy: this._fixedPos.length ?\n this._getFixedPositionStrategy() :\n this._getPositionStrategy(\n config.horizontalAlign,\n config.verticalAlign,\n config.forceAlignment,\n config.lockAlignment,\n anchor._elementRef\n ),\n // make it hard for users to shoot themselves in the foot by disabling backdrop if hover is the trigger\n hasBackdrop: anchor.trigger !== 'hover' ? config.hasBackdrop : false,\n\n backdropClass: config.backdropClass || 'cdk-overlay-transparent-backdrop',\n scrollStrategy: this._getScrollStrategyInstance(config.scrollStrategy),\n direction: this._getDirection(),\n\n // disable pointer events for hover popovers to avoid potential flickering issues\n panelClass: anchor.trigger === 'hover' && !anchor._hasSubmenu ? 'overlay-pointer-events' : ''\n });\n }\n\n /**\n * Listen to changes in the position of the overlay and set the correct alignment classes,\n * ensuring that the animation origin is correct, even with a fallback position.\n */\n private _subscribeToPositionChanges(position: FlexibleConnectedPositionStrategy): void {\n if (this._positionChangeSubscription) {\n this._positionChangeSubscription.unsubscribe();\n }\n\n this._positionChangeSubscription = position.positionChanges.pipe(takeUntil(this._onDestroy)).subscribe(change => {\n // Position changes may occur outside the Angular zone\n this._ngZone.run(() => {\n this._popover._setAlignmentClassesForAnimation(\n getHorizontalPopoverAlignment(change.connectionPair.overlayX),\n getVerticalPopoverAlignment(change.connectionPair.overlayY)\n );\n this._popover._setAlignmentClassesForArrow(\n getHPopAlignmentForArrow(change.connectionPair.overlayX, change.connectionPair.originX),\n getVPopAlignmentForArrow(change.connectionPair.overlayY, change.connectionPair.originY)\n );\n });\n });\n }\n\n /** Map a scroll strategy string type to an instance of a scroll strategy. */\n private _getScrollStrategyInstance(strategy: HcPopoverScrollStrategy): ScrollStrategy {\n switch (strategy) {\n case 'block':\n return this._overlay.scrollStrategies.block();\n case 'reposition':\n return this._overlay.scrollStrategies.reposition();\n case 'close':\n return this._overlay.scrollStrategies.close();\n case 'noop':\n default:\n return this._overlay.scrollStrategies.noop();\n }\n }\n\n /** Create and return a position strategy based on config provided to the component instance. */\n private _getPositionStrategy(\n horizontalTarget: HcPopoverHorizontalAlign,\n verticalTarget: HcPopoverVerticalAlign,\n forceAlignment: boolean,\n lockAlignment: boolean,\n anchor: ElementRef\n ): FlexibleConnectedPositionStrategy {\n // Attach the overlay at the preferred position\n const targetPosition = getPosition(horizontalTarget, verticalTarget, this._popover._offsetPos);\n const positions = [targetPosition];\n\n const strategy = this._overlay\n .position()\n .flexibleConnectedTo(anchor)\n .withPush(false)\n .withViewportMargin(0)\n .withLockedPosition(lockAlignment);\n\n // Unless the alignment is forced, add fallbacks based on the preferred positions\n if (!forceAlignment) {\n const fallbacks = this._getFallbacks(horizontalTarget, verticalTarget);\n positions.push(...fallbacks);\n }\n\n return strategy.withPositions(positions);\n }\n\n /** Create and return a position strategy for a fixed position popover. */\n private _getFixedPositionStrategy(): GlobalPositionStrategy {\n return this._overlay\n .position()\n .global()\n .left(this._fixedPos[0] + 'px')\n .top(this._fixedPos[1] + 'px');\n }\n\n /** Get fallback positions based around target alignments. */\n private _getFallbacks(hTarget: HcPopoverHorizontalAlign, vTarget: HcPopoverVerticalAlign): ConnectionPositionPair[] {\n // Determine if the target alignments overlap the anchor\n const horizontalOverlapAllowed = hTarget !== 'before' && hTarget !== 'after';\n const verticalOverlapAllowed = vTarget !== 'above' && vTarget !== 'below';\n\n // If a target alignment doesn't cover the anchor, don't let any of the fallback alignments\n // cover the anchor\n const possibleHorizontalAlignments: HcPopoverHorizontalAlign[] = horizontalOverlapAllowed\n ? ['before', 'start', 'center', 'end', 'after', 'mouse']\n : ['before', 'after'];\n const possibleVerticalAlignments: HcPopoverVerticalAlign[] = verticalOverlapAllowed\n ? ['above', 'start', 'center', 'end', 'below', 'mouse']\n : ['above', 'below'];\n\n // Create fallbacks for each allowed prioritized fallback alignment combo\n const fallbacks: ConnectionPositionPair[] = [];\n prioritizeAroundTarget(hTarget, possibleHorizontalAlignments).forEach(h => {\n prioritizeAroundTarget(vTarget, possibleVerticalAlignments).forEach(v => {\n fallbacks.push(getPosition(h, v, this._popover._offsetPos));\n });\n });\n\n // Remove the first item since it will be the target alignment and isn't considered a fallback\n return fallbacks.slice(1, fallbacks.length);\n }\n}\n\n/** Helper function to convert an overlay connection position to equivalent popover alignment for arrow positioning */\nfunction getHPopAlignmentForArrow(hOverlay: HorizontalConnectionPos, hOrigin: HorizontalConnectionPos): HcPopoverHorizontalAlign {\n if (hOverlay === hOrigin) {\n return hOverlay;\n }\n\n if (hOverlay === 'start') {\n return 'after';\n }\n\n if (hOverlay === 'end') {\n return 'before';\n }\n\n return 'center';\n}\n\n/** Helper function to convert an overlay connection position to equivalent popover alignment for arrow positioning. */\nfunction getVPopAlignmentForArrow(vOverlay: VerticalConnectionPos, vOrigin: VerticalConnectionPos): HcPopoverVerticalAlign {\n if (vOverlay === vOrigin && (vOverlay === 'top' || vOverlay === 'bottom')) {\n return vOverlay === 'top' ? 'start' : 'end';\n }\n\n if (vOverlay === 'top') {\n return 'below';\n }\n\n if (vOverlay === 'bottom') {\n return 'above';\n }\n\n return 'center';\n}\n\n/** Helper function to get a cdk position pair from HcPopover alignments. */\nfunction getPosition(h: HcPopoverHorizontalAlign, v: HcPopoverVerticalAlign, offset: number[]): ConnectionPositionPair {\n const {originX, overlayX} = getHorizontalConnectionPosPair(h);\n const {originY, overlayY} = getVerticalConnectionPosPair(v);\n return new ConnectionPositionPair({originX, originY}, {overlayX, overlayY}, offset[0], offset[1]);\n}\n\n/** Helper function to convert an overlay connection position to equivalent popover alignment. */\nfunction getHorizontalPopoverAlignment(h: HorizontalConnectionPos): HcPopoverHorizontalAlign {\n if (h === 'start') {\n return 'after';\n }\n\n if (h === 'end') {\n return 'before';\n }\n\n return 'center';\n}\n\n/** Helper function to convert an overlay connection position to equivalent popover alignment. */\nfunction getVerticalPopoverAlignment(v: VerticalConnectionPos): HcPopoverVerticalAlign {\n if (v === 'top') {\n return 'below';\n }\n\n if (v === 'bottom') {\n return 'above';\n }\n\n return 'center';\n}\n\n/** Helper function to convert alignment to origin/overlay position pair. */\nfunction getHorizontalConnectionPosPair(\n h: HcPopoverHorizontalAlign\n): {originX: HorizontalConnectionPos; overlayX: HorizontalConnectionPos} {\n switch (h) {\n case 'before':\n return {originX: 'start', overlayX: 'end'};\n case 'start':\n case 'mouse':\n return {originX: 'start', overlayX: 'start'};\n case 'end':\n return {originX: 'end', overlayX: 'end'};\n case 'after':\n return {originX: 'end', overlayX: 'start'};\n default:\n return {originX: 'center', overlayX: 'center'};\n }\n}\n\n/** Helper function to convert alignment to origin/overlay position pair. */\nfunction getVerticalConnectionPosPair(v: HcPopoverVerticalAlign): {originY: VerticalConnectionPos; overlayY: VerticalConnectionPos} {\n switch (v) {\n case 'above':\n return {originY: 'top', overlayY: 'bottom'};\n case 'start':\n case 'mouse':\n return {originY: 'top', overlayY: 'top'};\n case 'end':\n return {originY: 'bottom', overlayY: 'bottom'};\n case 'below':\n return {originY: 'bottom', overlayY: 'top'};\n default:\n return {originY: 'center', overlayY: 'center'};\n }\n}\n\n/**\n * Helper function that takes an ordered array options and returns a reorderded\n * array around the target item. e.g.:\n *\n * target: 3; options: [1, 2, 3, 4, 5, 6, 7];\n *\n * return: [3, 4, 2, 5, 1, 6, 7]\n */\nfunction prioritizeAroundTarget(target: T, options: T[]): T[] {\n const targetIndex = options.indexOf(target);\n\n // Set the first item to be the target\n const reordered = [target];\n\n // Make left and right stacks where the highest priority item is last\n const left = options.slice(0, targetIndex);\n const right = options.slice(targetIndex + 1, options.length).reverse();\n\n // Alternate between stacks until one is empty\n while (left.length && right.length) {\n const r = right.pop();\n if (r) {\n reordered.push(r);\n }\n const l = left.pop();\n if (l) {\n reordered.push(l);\n }\n }\n\n // Flush out right side\n while (right.length) {\n const r2 = right.pop();\n if (r2) {\n reordered.push(r2);\n }\n }\n\n // Flush out left side\n while (left.length) {\n const l2 = left.pop();\n if (l2) {\n reordered.push(l2);\n }\n }\n\n return reordered;\n}\n","import {Injectable, OnDestroy} from '@angular/core';\n\nexport interface HcPopKeyboardNotifier {\n isOpen: boolean;\n nativeElement: HTMLElement;\n hasSubmenu: () => boolean;\n onKeyDown: (event: KeyboardEvent) => void;\n}\n\n@Injectable({\n providedIn: 'root'\n})\nexport class HcPopoverAccessibilityService implements OnDestroy {\n private notifiers: HcPopKeyboardNotifier[] = [];\n\n constructor() {\n window.addEventListener('keydown', this.handleKeydown);\n }\n\n ngOnDestroy():void {\n window.removeEventListener('keydown', this.handleKeydown);\n }\n\n registerNotifier(notifier: HcPopKeyboardNotifier): void {\n this.notifiers.push(notifier);\n }\n\n private handleKeydown = (event: KeyboardEvent) => {\n this.notifiers.filter(n => n.isOpen).forEach(n => n.onKeyDown(event));\n if (event.key === 'ArrowRight') {\n this.notifiers.filter(n => document.activeElement === n.nativeElement && n.hasSubmenu()).forEach(n => n.onKeyDown(event));\n }\n };\n}\n","import {\n Directive,\n ElementRef,\n EventEmitter,\n Input,\n OnInit,\n OnDestroy,\n Output,\n ViewContainerRef,\n HostListener,\n HostBinding,\n AfterContentInit,\n ComponentFactoryResolver\n} from '@angular/core';\nimport { Subject, merge } from 'rxjs';\nimport { tap, takeUntil } from 'rxjs/operators';\n\nimport { HcPopComponent } from '../popover.component';\nimport { getInvalidPopoverError, getInvalidTriggerError } from '../popover.errors';\nimport { HcPopoverAnchoringService } from '../popover-anchoring.service';\nimport { HcPopoverHorizontalAlign, HcPopoverOpenOptions, HcPopoverTrigger, HcPopoverVerticalAlign, VALID_TRIGGER } from '../types';\nimport { PopoverNotification, PopoverNotificationService, NotificationAction } from '../notification.service';\nimport { HcPopoverAccessibilityService, HcPopKeyboardNotifier } from '../popover-accessibility.service';\nimport { HcTooltipComponent } from '../tooltip/tooltip.component';\nimport { parseBooleanAttribute } from '../../util';\n\n@Directive({\n selector: '[hcPop],[hcTooltip]',\n exportAs: 'hcPopAnchor',\n providers: [HcPopoverAnchoringService],\n standalone: false\n})\nexport class HcPopoverAnchorDirective implements OnInit, AfterContentInit, OnDestroy {\n /** Reference to the popover instance. */\n @Input('hcPop')\n get attachedPopover(): HcPopComponent {\n return this._attachedPopover;\n }\n set attachedPopover(value: HcPopComponent) {\n this._validateAttachedPopover(value);\n this._attachedPopover = value;\n // Anchor the popover to the element ref\n this._anchoring.anchor(this.attachedPopover, this._viewContainerRef, this);\n }\n private _attachedPopover: HcPopComponent;\n\n /** A string of text to display as a tooltip above an element */\n @Input('hcTooltip')\n get tooltipText(): string {\n return this._tooltipText;\n }\n set tooltipText(value: string) {\n this._tooltipText = value;\n const factory = this._componentFactoryResolver.resolveComponentFactory(HcTooltipComponent);\n const popover = this._viewContainerRef.createComponent(factory).instance;\n popover.tooltipContent = value;\n popover.disableStyle = true;\n popover.verticalAlign = 'above';\n popover.scrollStrategy = 'close';\n popover.restoreFocus = false;\n popover.maxWidth = this._maxWidth;\n this.attachedPopover = popover;\n // Don't enable the tooltip if the content string is empty\n this.trigger = value ? 'hover' : 'none';\n this.popoverDelay = 300;\n }\n private _tooltipText: string;\n\n /** Trigger event to toggle the popover. *Defaults to `\"click\"`.*\n * Accepts `click`, `mousedown`, `hover`, `rightclick`, or `none`.\n * Note: if \"hover\" is selected, the backdrop for the popover will be disabled. */\n @Input()\n get trigger(): HcPopoverTrigger {\n return this._trigger;\n }\n set trigger(val: HcPopoverTrigger) {\n this._validateTrigger(val);\n if (this._trigger !== val) {\n this._trigger = val;\n }\n this._dispatchConfigNotification(new PopoverNotification(NotificationAction.UPDATE_CONFIG));\n }\n private _trigger: HcPopoverTrigger = 'click';\n\n /** Number that can be passed into the popover to change hover delay. Also used for tooltip.\n * Delay is measured in milliseconds.\n */\n @Input()\n get popoverDelay(): number {\n return this._popoverDelay;\n }\n\n set popoverDelay(val: number) {\n this._popoverDelay = Number(val);\n }\n\n private _popoverDelay = 0;\n\n /** Timer that delays togglePopover on hover. */\n private hoverInterval: number;\n\n /** Constrains the content of a popover to a standard css string value; *Defaults to `none`.* */\n @Input()\n get maxWidth(): string {\n return this._attachedPopover.maxWidth;\n }\n\n set maxWidth(val: string) {\n this._maxWidth = val;\n if ( this.attachedPopover ) {\n this._attachedPopover.maxWidth = val;\n }\n }\n\n private _maxWidth = 'none';\n\n /** Whether the popover should return focus to the previously focused element after closing.* */\n @Input()\n get restoreFocus(): boolean {\n return this._attachedPopover.restoreFocus && this._attachedPopover._restoreFocusOverride;\n }\n set restoreFocus(val: boolean) {\n if ( this.attachedPopover ) {\n this._attachedPopover.restoreFocus = parseBooleanAttribute(val);\n }\n }\n\n /** Object or value that can be passed into the popover to customize its content */\n @Input()\n get context(): unknown {\n return this._anchoring._context;\n }\n set context(val: unknown) {\n this._anchoring._context = val;\n }\n\n /** Alignment of the popover on the horizontal axis. Can be `before`, `start`, `center`, `end`, `after`, or `mouse`.\n * *Defaults to `center`.* */\n @Input()\n get horizontalAlign(): HcPopoverHorizontalAlign {\n return this._attachedPopover.horizontalAlign;\n }\n set horizontalAlign(val: HcPopoverHorizontalAlign) {\n if ( this.attachedPopover ) {\n this.attachedPopover.horizontalAlign = val;\n }\n }\n\n /** Alignment of the popover on the vertical axis. Can be `above`, `start`, `center`, `end`, `below`, or `mouse`.\n * *Defaults to `\"below\"`.* */\n @Input()\n get verticalAlign(): HcPopoverVerticalAlign {\n return this._attachedPopover.verticalAlign;\n }\n set verticalAlign(val: HcPopoverVerticalAlign) {\n if ( this.attachedPopover ) {\n this.attachedPopover.verticalAlign = val;\n }\n }\n\n @HostBinding('class.hc-menu-item-submenu')\n _hasSubmenu = false;\n\n /** Emits when the popover is opened. */\n @Output() popoverOpened = new EventEmitter();\n\n /** Emits when the popover is closed. */\n @Output() popoverClosed = new EventEmitter();\n\n /** Instance of notification service. Will be undefined until attached to a popover. */\n _notifications: PopoverNotificationService;\n\n /** Emits when the directive is destroyed. */\n private _onDestroy = new Subject();\n\n constructor(\n public _elementRef: ElementRef,\n private _viewContainerRef: ViewContainerRef,\n public _anchoring: HcPopoverAnchoringService,\n private _accessibility: HcPopoverAccessibilityService,\n private _componentFactoryResolver: ComponentFactoryResolver\n ) { }\n\n ngOnInit(): void {\n // Re-emit open and close events\n const opened$ = this._anchoring.popoverOpened.pipe(tap(() => this.popoverOpened.emit()));\n const closed$ = this._anchoring.popoverClosed.pipe(tap(value => this.popoverClosed.emit(value)));\n merge(opened$, closed$)\n .pipe(takeUntil(this._onDestroy))\n .subscribe();\n }\n\n ngAfterContentInit(): void {\n this._setupKeyboardEvents();\n }\n\n ngOnDestroy(): void {\n clearTimeout(this.hoverInterval);\n this._onDestroy.next();\n this._onDestroy.complete();\n }\n\n @HostListener('click', ['$event'])\n _showOrHideOnClick(event: MouseEvent): void {\n if (this._hasSubmenu && event) {\n // Prevent the popover component from auto closing on click if a submenu was selected\n event.stopPropagation();\n event.preventDefault();\n }\n if (this.trigger !== 'click') {\n return;\n }\n this._attachedPopover._offsetPos[0] = this._attachedPopover.horizontalAlign === 'mouse' ? event.offsetX : 0;\n this._attachedPopover._offsetPos[1] = this._attachedPopover.verticalAlign === 'mouse' ? event.offsetY : 0;\n this.togglePopover();\n }\n\n /** So popover anchors can be accessible via keyboard. */\n @HostListener('keydown', ['$event'])\n _showOrHideOnEnter(event: KeyboardEvent): void {\n // buttons already trigger a click when you press enter, so executing this event handler would be redundant\n const targetElement = event.target as Element;\n const triggerFromButton = targetElement && targetElement.tagName === \"BUTTON\";\n // not triggering popover on keypress unless the key pressed was enter or spacebar\n const keyPressedShouldTrigger = event.key === 'Enter' || event.key === ' ';\n // not triggering popover on keypress unless the trigger is 'click'\n const anchorHasClickTrigger = this.trigger === 'click';\n\n if (triggerFromButton || !keyPressedShouldTrigger || !anchorHasClickTrigger ) {\n return;\n }\n this.togglePopover();\n }\n\n @HostListener('touchstart', ['$event'])\n @HostListener('mousedown', ['$event'])\n _showOrHideOnMouseOver($event: MouseEvent): void {\n if (this.trigger !== 'mousedown') {\n return;\n }\n this._attachedPopover._offsetPos[0] = this._attachedPopover.horizontalAlign === 'mouse' ? $event.offsetX : 0;\n this._attachedPopover._offsetPos[1] = this._attachedPopover.verticalAlign === 'mouse' ? $event.offsetY : 0;\n this.togglePopover();\n }\n\n @HostListener('contextmenu', ['$event'])\n _showOrHideRightClick($event: MouseEvent): boolean {\n if (this.trigger !== 'rightclick') {\n return true;\n } else {\n this._attachedPopover._offsetPos[0] = this._attachedPopover.horizontalAlign === 'mouse' ? $event.offsetX : 0;\n this._attachedPopover._offsetPos[1] = this._attachedPopover.verticalAlign === 'mouse' ? $event.offsetY : 0;\n this.togglePopover();\n return false;\n }\n }\n\n @HostListener('mouseenter', ['$event'])\n _showOnHover($event: MouseEvent): void {\n if (this.trigger !== 'hover') {\n return;\n }\n\n this._attachedPopover._offsetPos[0] = this._attachedPopover.horizontalAlign === 'mouse' ? $event.offsetX : 0;\n this._attachedPopover._offsetPos[1] = this._attachedPopover.verticalAlign === 'mouse' ? $event.offsetY : 0;\n this.hoverInterval = window.setTimeout(() => {\n // Hover triggers on hcMenu sub-menus should only ever open on mouseenter\n // Toggle would cause the menu to close unexpectedly\n if ( this._hasSubmenu ) {\n this.openPopover();\n } else {\n this.togglePopover();\n }\n }, this.popoverDelay);\n }\n\n @HostListener('touchend')\n @HostListener('touchcancel')\n @HostListener('mouseleave')\n _hideOnLeave(): void {\n if (this.trigger !== 'hover') {\n return;\n }\n // For hcMenu sub-menus, closing on mouseleave would cause the sub-menu\n // to close when you leave the anchor and try to move your mouse to the sub-menu\n if ( !this._hasSubmenu ) {\n this.closePopover();\n }\n }\n\n /** Handle keyboard navigation of a hcMenu using the arrow or tab keys */\n _keyEvent(event: KeyboardEvent): void {\n if (this.attachedPopover.isOpen() && this.attachedPopover._menuItems.length > 0 && !this.attachedPopover._subMenuOpen) {\n if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {\n event.stopPropagation();\n event.preventDefault();\n this.attachedPopover._keyFocus(false);\n } else if (event.key === 'ArrowDown' || (event.key === 'Tab' && !event.shiftKey)) {\n event.stopPropagation();\n event.preventDefault();\n this.attachedPopover._keyFocus(true);\n } else if (this.attachedPopover.parent && this.attachedPopover.parent.isOpen() && event.key === 'ArrowLeft') {\n event.stopPropagation();\n event.preventDefault();\n this.closePopover();\n }\n }\n if (this._hasSubmenu && this._elementRef.nativeElement === document.activeElement && event.key === 'ArrowRight') {\n event.stopPropagation();\n event.preventDefault();\n this.openPopover();\n this.attachedPopover._keyFocus(true);\n }\n }\n\n /** Gets whether the popover is presently open. */\n isPopoverOpen(): boolean {\n return this._anchoring.isPopoverOpen();\n }\n\n /** Toggles the popover between the open and closed states. */\n togglePopover(): void {\n this._anchoring.togglePopover();\n }\n\n /** Opens the popover. */\n openPopover(options: HcPopoverOpenOptions = {}): void {\n this._anchoring.openPopover(options);\n }\n\n /** Closes the popover. */\n closePopover(value?: unknown, neighborSubMenusAreOpen = false): void {\n clearTimeout(this.hoverInterval);\n this._anchoring.closePopover(value, neighborSubMenusAreOpen);\n }\n\n /** Realign the popover to the anchor. */\n realignPopover(): void {\n this._anchoring.realignPopoverToAnchor();\n }\n\n /** Get a reference to the anchor element. */\n getElement(): ElementRef {\n return this._elementRef;\n }\n\n /** Throws an error if the popover instance is not provided. */\n private _validateAttachedPopover(popover: HcPopComponent): void {\n if (!popover || !(popover instanceof HcPopComponent)) {\n throw getInvalidPopoverError();\n }\n }\n\n /** Throws an error if the trigger is not a valid HcPopoverTrigger. */\n private _validateTrigger(trig: HcPopoverTrigger): void {\n if (VALID_TRIGGER.indexOf(trig) === -1) {\n throw getInvalidTriggerError(trig);\n }\n }\n\n /** Dispatch a notification to the notification service, if possible. */\n private _dispatchConfigNotification(notification: PopoverNotification) {\n if (this._notifications) {\n this._notifications.dispatch(notification);\n }\n }\n\n private _setupKeyboardEvents() {\n const notifier: HcPopKeyboardNotifier = {\n isOpen: false,\n nativeElement: this._elementRef.nativeElement,\n hasSubmenu: () => this._hasSubmenu,\n onKeyDown: event => this._keyEvent(event)\n };\n this.popoverClosed.asObservable().subscribe(() => (notifier.isOpen = false));\n this.popoverOpened.asObservable().subscribe(() => (notifier.isOpen = true));\n this._accessibility.registerNotifier(notifier);\n }\n}\n","import {Directive, HostBinding, ContentChildren, AfterContentInit, OnDestroy} from '@angular/core';\nimport type {QueryList} from '@angular/core';\nimport {HcPopoverAnchorDirective} from './popover-anchor.directive';\nimport {Subject, Subscription} from 'rxjs';\nimport {takeUntil} from 'rxjs/operators';\nimport {MenuItemDirective} from './menu-item.directive';\n\n/** The `hcMenu` directive provides a standard way of displaying a series of selectable elements in a popover. */\n@Directive({\n selector: '[hcMenu]',\n standalone: false\n})\nexport class MenuDirective implements AfterContentInit, OnDestroy {\n @HostBinding('class.hc-menu-panel')\n _hostClass = true;\n\n @ContentChildren(HcPopoverAnchorDirective)\n _subMenus: QueryList;\n\n @ContentChildren(MenuItemDirective)\n _menuItems: QueryList;\n\n private unsubscribe$ = new Subject();\n\n ngAfterContentInit(): void {\n this.updateSubMenus();\n\n // Update submenus if they are added dynamically or after check\n this._menuItems.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this.updateSubMenus());\n }\n\n /** Rechecks the content for instances of `HcPopComponent` and inits them as submenus */\n updateSubMenus(): void {\n this._subMenus.forEach((anchor: HcPopoverAnchorDirective) => {\n anchor._hasSubmenu = true;\n // Force the trigger on any menu item with a submenu to a hover trigger\n anchor.trigger = \"hover\";\n });\n\n // Subscribe to submenu mouseenter events so we can close any other submenus currently open\n this._menuItems.forEach((item: MenuItemDirective) => {\n item._itemEnter.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {\n this._subMenus.forEach((sub: HcPopoverAnchorDirective) => {\n if (sub._elementRef.nativeElement !== item.ref.nativeElement && sub.attachedPopover.isOpen()) {\n sub.attachedPopover._parentCloseBlock = true;\n sub.attachedPopover._restoreFocusOverride = false;\n sub.closePopover({}, true);\n sub.attachedPopover._restoreFocusOverride = true;\n const closeSub: Subscription = sub.attachedPopover.afterClose.subscribe(() => {\n sub.attachedPopover._parentCloseBlock = false;\n closeSub.unsubscribe();\n });\n }\n });\n });\n });\n }\n\n ngOnDestroy(): void {\n this.unsubscribe$.next();\n this.unsubscribe$.complete();\n }\n}\n","import {Directive, HostBinding} from '@angular/core';\n\n/** Use `hcMenuIcon` to prefix an icon to the beginning of a button inside of a menu. */\n@Directive({\n selector: '[hcMenuIcon]',\n standalone: false\n})\nexport class MenuIconDirective {\n @HostBinding('class.hc-menu-icon')\n _hostClass = true;\n}\n","import {Directive, HostBinding} from '@angular/core';\n\n/** Use `hcMenuText` for main button text inside of a menu. */\n@Directive({\n selector: '[hcMenuText]',\n standalone: false\n})\nexport class MenuTextDirective {\n @HostBinding('class.hc-menu-text')\n _hostClass = true;\n}\n","import {Directive, HostBinding} from '@angular/core';\n\n/** Use `hcMenuSubText` for right-aligned subtext of a button inside of a menu. Often used for keyboard shortcuts. */\n@Directive({\n selector: '[hcMenuSubText]',\n standalone: false\n})\nexport class MenuSubTextDirective {\n @HostBinding('class.hc-menu-sub-text')\n _hostClass = true;\n}\n","import {Directive, HostBinding} from '@angular/core';\n\n/** Use `hcDivider` for a horizontal divider in a menu. */\n@Directive({\n selector: '[hcDivider]',\n standalone: false\n})\nexport class DividerDirective {\n @HostBinding('class.hc-divider')\n _hostClass = true;\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {OverlayModule} from '@angular/cdk/overlay';\nimport {A11yModule} from '@angular/cdk/a11y';\nimport {BidiModule} from '@angular/cdk/bidi';\n\nimport {HcPopComponent} from './popover.component';\nimport {HcTooltipComponent} from './tooltip/tooltip.component';\nimport {HcPopoverAnchorDirective} from './directives/popover-anchor.directive';\n\nimport {MenuItemDirective} from './directives/menu-item.directive';\nimport {MenuDirective} from './directives/menu.directive';\nimport {MenuIconDirective} from './directives/menu-icon.directive';\nimport {MenuTextDirective} from './directives/menu-text.directive';\nimport {MenuSubTextDirective} from './directives/menu-sub-text.directive';\nimport {DividerDirective} from './directives/divider.directive';\nimport {HcPopoverAccessibilityService} from './popover-accessibility.service';\n\n@NgModule({\n imports: [CommonModule, OverlayModule, A11yModule, BidiModule],\n declarations: [\n HcPopComponent,\n HcTooltipComponent,\n HcPopoverAnchorDirective,\n MenuDirective,\n MenuItemDirective,\n MenuIconDirective,\n MenuTextDirective,\n MenuSubTextDirective,\n DividerDirective\n ],\n exports: [\n HcPopComponent,\n HcTooltipComponent,\n HcPopoverAnchorDirective,\n BidiModule,\n MenuDirective,\n MenuItemDirective,\n MenuIconDirective,\n MenuTextDirective,\n MenuSubTextDirective,\n DividerDirective\n ],\n providers: [HcPopoverAccessibilityService]\n})\nexport class PopModule {}\n","import { Component, Input, ViewEncapsulation } from '@angular/core';\n\nexport type ProgressDotsColor = 'light' | 'dark';\n\nconst supportedColors: ProgressDotsColor[] = ['light', 'dark'];\n\nexport function validateColorInput(inputStr: ProgressDotsColor): void {\n if (supportedColors.indexOf(inputStr) < 0) {\n throw Error('Unsupported progress dots color value: ' + inputStr);\n }\n}\n\n@Component({\n selector: 'hc-progress-dots',\n templateUrl: 'progress-dots.component.html',\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ProgressDotsComponent {\n private _color: ProgressDotsColor = 'dark';\n\n /** Use `light` on darker backgrounds and `dark` for lighter backgrounds. */\n @Input()\n get color(): ProgressDotsColor {\n return this._color;\n }\n\n set color(colorVal: ProgressDotsColor) {\n validateColorInput(colorVal);\n this._color = colorVal;\n }\n\n /** If true, the loader will center itself within its container. */\n @Input()\n public isCentered = true;\n /** If true, you'll get a teeny tiny little loader. */\n @Input()\n public isMini = false;\n}\n","
\n
\n
\n
\n
\n","import {Component, Input, ViewEncapsulation} from '@angular/core';\n\nconst supportedColors = ['blue', 'green', 'purple', 'orange', 'red', 'gray', 'white'];\n\nexport function validateColorInput(inputStr: string): void {\n if (supportedColors.indexOf(inputStr) < 0) {\n throw Error('Unsupported progress bar color value: ' + inputStr);\n }\n}\n\n@Component({\n selector: 'hc-progress-bar',\n templateUrl: 'progress-bar.component.html',\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ProgressBarComponent {\n private _color = 'blue';\n\n /** Color of the bar: `blue`, `green`, `purple`, `orange`, `red`, `gray`, `white` */\n @Input()\n get color(): string {\n return this._color;\n }\n\n set color(colorVal: string) {\n validateColorInput(colorVal);\n this._color = colorVal;\n }\n\n /** If true, switches to determinate mode. Must pass in progress (0-100%), instead of having the loader spin freely. */\n @Input()\n public isDeterminate = false;\n\n /** If true, displays the current percentage of the progress bar and expands the height to accomidate. Only used if \"isDeterminate\" is set to true.*/\n @Input()\n public showValue = false;\n\n /** Optional text string to be displayed beneath the progress bar */\n @Input()\n public label: string;\n\n /** (0-100%) Only used if \"isDeterminate\" is set to true. */\n @Input()\n public set progress(progress: number) {\n this.setProgress(progress);\n }\n public get progress(): number {\n return this._progress;\n }\n\n private _progress = 0;\n\n private setProgress(progress: number) {\n progress = Math.min(100, progress);\n progress = Math.max(0, progress);\n\n this._progress = progress;\n }\n}\n","
\n
\n \n @if (showValue && isDeterminate) {\n {{ progress }}%\n }\n
\n
\n @if (label) {\n
{{ label }}
\n }\n\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {ProgressSpinnerComponent} from './progress-spinner.component';\nimport {ProgressDotsComponent} from './progress-dots.component';\nimport {ProgressBarComponent} from './progress-bar.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [ProgressSpinnerComponent, ProgressDotsComponent, ProgressBarComponent],\n declarations: [ProgressSpinnerComponent, ProgressDotsComponent, ProgressBarComponent]\n})\nexport class ProgressIndicatorsModule {}\n","import {Observable} from 'rxjs';\n\nimport { HttpClient } from '@angular/common/http';\nimport {Inject, Injectable} from '@angular/core';\nimport {IAppSwitcherConfig, IAppSwitcherService, IDiscoveryRequest, APP_SWITCHER_CONFIG} from './app-switcher-interfaces';\n\n/**\n * An app switcher service designed to work with the Health Catalyst DOS platform's DiscoveryService\n */\n@Injectable()\nexport class AppSwitcherService implements IAppSwitcherService {\n /** Optional URL for a separate page the app switcher can link to with a complete list of all available applications */\n readonly allApplicationsUri: string;\n\n private readonly discoveryServiceUri: string;\n\n constructor(private http: HttpClient, @Inject(APP_SWITCHER_CONFIG) private config: IAppSwitcherConfig) {\n if (!config || !config.discoveryServiceUri) {\n throw new Error(\n [\n 'Failed to initialize AppSwitcherService: invalid APP_SWITCHER_CONFIG.',\n 'You must provide a config object with a `discoveryServiceUri`.',\n `(value provided: ${config ? config.discoveryServiceUri : config})`\n ].join(' ')\n );\n }\n\n this.discoveryServiceUri = this.normalizeUri(this.config.discoveryServiceUri);\n this.allApplicationsUri = `${this.discoveryServiceUri}/apps`;\n }\n\n getApplications(): Observable {\n const url = `${this.discoveryServiceUri}/v1/Services?$filter=DiscoveryType eq 'Application' and IsHidden eq false&$top=12`;\n return this.http.get(url, {withCredentials: true});\n }\n\n private normalizeUri(uri: string): string {\n return uri.replace(/\\/(v\\d+\\/?)?$/, '');\n }\n}\n","import {NgModule} from '@angular/core';\nimport {EllipsisPipe} from './ellipsis.pipe';\n\n@NgModule({\n declarations: [EllipsisPipe],\n exports: [EllipsisPipe]\n})\nexport class EllipsisPipeModule {}\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n 'name': 'ifNullOrEmpty',\n standalone: false\n})\nexport class NullOrEmptyStringPipe implements PipeTransform {\n\n public transform(value: unknown, altText: string): string | unknown {\n if (typeof(value) === 'string') {\n value = value.trim();\n return value ? value : altText;\n }\n\n if (value === undefined || value === null) {\n return altText;\n }\n\n // if given value is not null or undefined, and is not a string, return as is\n return value;\n }\n}\n","import {NgModule} from '@angular/core';\nimport {NullOrEmptyStringPipe} from './null-or-empty-string.pipe';\n\n@NgModule({\n declarations: [NullOrEmptyStringPipe],\n exports: [NullOrEmptyStringPipe]\n})\nexport class NullOrEmptyStringPipeModule {}\n","import {Pipe, PipeTransform} from '@angular/core';\n\n// Convert bytes into largest possible unit.\n// Credit to https://gist.github.com/JonCatmull/ecdf9441aaa37336d9ae2c7f9cb7289a\n@Pipe({\n name: 'fileSize', pure: true,\n standalone: false\n})\nexport class FileSizePipe implements PipeTransform {\n private units: string[] = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];\n\n public transform(bytes: number, precision = 2): string {\n const originalInput = bytes;\n if (typeof bytes === 'string') {\n bytes = +bytes;\n }\n if (typeof bytes !== 'number' || isNaN(bytes) || !isFinite(bytes) || bytes < 0 || Math.floor(bytes) !== bytes) {\n return `${originalInput}`;\n }\n\n if (\n typeof precision !== 'number' ||\n isNaN(precision) ||\n !isFinite(precision) ||\n precision < 0 ||\n Math.floor(precision) !== precision\n ) {\n precision = 2;\n }\n if (precision > 100) {\n precision = 100;\n }\n\n let unit = 0;\n\n while (bytes >= 1024) {\n bytes /= 1024;\n unit++;\n\n if (unit === 5) {\n // PB, largest size for pipe\n break;\n }\n }\n\n let rounded = bytes.toFixed(precision);\n\n // if the value after truncating is a whole number, don't display a decimal\n if (Math.floor(+rounded) === +rounded) {\n rounded = (+rounded).toString();\n }\n\n return rounded + ' ' + this.units[unit];\n }\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\n\nimport { FileSizePipe } from './file-size.pipe';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [FileSizePipe],\n exports: [FileSizePipe]\n})\nexport class FileSizePipeModule {}\n","import { Pipe, PipeTransform } from \"@angular/core\";\n\n/** Creates an abbreviated number for display. 1,234,234 => 1.23M */\n@Pipe({\n name: \"abbreviateNumber\",\n standalone: false\n})\nexport class NumberAbbreviatorPipe implements PipeTransform {\n public static powers = [\n { key: \"Q\", value: Math.pow(10, 15) },\n { key: \"T\", value: Math.pow(10, 12) },\n { key: \"B\", value: Math.pow(10, 9) },\n { key: \"M\", value: Math.pow(10, 6) },\n { key: \"K\", value: 1000 }\n ];\n\n /**\n * @param value the value to be abbreviated\n * @param decimalPoints how many decimal points to round to\n * @param threshold represents the number at which we should start abbreviating;\n * if the threshold is 1 million, we'll leave number less than 1 million as is (aside from adding commas or decimal points)\n */\n public transform(value: number, decimalPoints = 2, threshold = 1000000): string {\n if (value === null) { return value; }\n\n // use defaults if given funky parameters\n if (decimalPoints < 0 || !Number.isInteger(decimalPoints)) { decimalPoints = 2; }\n if (threshold < 1000 || !Number.isInteger(threshold)) { threshold = 1000; }\n\n const abs = Math.abs(value);\n let key = \"\";\n let roundedStringVal = \"\";\n const isNegative = value < 0;\n\n if (abs >= threshold) {\n // Abbreviate, adding unit if greater than specified limit\n for (const power of NumberAbbreviatorPipe.powers) {\n let reduced = abs / power.value;\n reduced = this.roundValue(reduced, decimalPoints);\n\n if (reduced >= 1) {\n roundedStringVal = reduced.toString();\n key = power.key;\n break;\n }\n }\n } else {\n // Just round decimals and add commas if less than specified limit\n roundedStringVal = this.roundValue(abs, decimalPoints).toLocaleString();\n }\n\n return (isNegative ? \"-\" : \"\") + roundedStringVal + key;\n }\n\n private roundValue(value: number, decimalPoints = 2): number {\n const rounder = Math.pow(10, decimalPoints);\n return Math.round(value * rounder) / rounder;\n }\n}","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\n\nimport {NumberAbbreviatorPipe} from './number-abbreviator.pipe';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [NumberAbbreviatorPipe],\n exports: [NumberAbbreviatorPipe]\n})\nexport class NumberAbbreviatorPipeModule {}\n","import {PipeTransform, Pipe} from '@angular/core';\n\n@Pipe({\n name: 'highlight',\n pure: true,\n standalone: false\n})\nexport class HighlightPipe implements PipeTransform {\n transform(text: string, search?: string, preserveHTML = false): string {\n if (search && text) {\n // eslint-disable-next-line no-useless-escape\n let pattern: string = this.escapeTags(search).replace(/[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g, '\\\\$&');\n pattern = pattern\n .split(' ')\n .filter(t => {\n return t.length > 0;\n })\n .join('|');\n const regex = new RegExp(pattern, 'gi');\n\n if ( preserveHTML ) {\n const parser = new DOMParser();\n const htmlDoc = parser.parseFromString(text, 'text/html');\n\n this.searchChildren( htmlDoc.children[0].children[1], regex );\n return this.reverseEscapeTags(htmlDoc.children[0].children[1].innerHTML);\n } else {\n return this.escapeTags(text).replace(regex, match => `${match}`);\n }\n } else {\n return preserveHTML ? text : this.escapeTags(text);\n }\n }\n\n searchChildren( parent: ChildNode, regex: RegExp ): void {\n if( parent.childNodes.length > 0 ){\n parent.childNodes.forEach( child => this.searchChildren( child, regex ) );\n } else {\n if( parent.nodeValue ) {\n parent.nodeValue = parent.nodeValue.replace(regex, match => `${match}`);\n }\n }\n }\n\n escapeTags(input: string): string {\n return (input || '').replace(//g, '>');\n }\n\n reverseEscapeTags( input: string ): string {\n return (input || '').replace(/</g, '<').replace(/>/g, '>');\n }\n}\n","import {NgModule} from '@angular/core';\nimport {HighlightPipe} from './highlight.pipe';\n\n@NgModule({\n declarations: [HighlightPipe],\n exports: [HighlightPipe]\n})\nexport class HighlightPipeModule {}\n","import {NgModule} from '@angular/core';\nimport {EllipsisPipeModule} from './ellipsis/ellipsis-pipe.module';\nimport {NullOrEmptyStringPipeModule} from './null-or-empty-string/null-or-empty-string-pipe.module';\nimport {FileSizePipeModule} from './file-size/file-size-pipe.module';\nimport {NumberAbbreviatorPipeModule} from './number-abbreviator/number-abbreviator-pipe.module';\nimport {HighlightPipeModule} from './highlight/highlight-pipe.module';\n\n@NgModule({\n imports: [EllipsisPipeModule, NullOrEmptyStringPipeModule, FileSizePipeModule, NumberAbbreviatorPipeModule, HighlightPipeModule],\n exports: [EllipsisPipeModule, NullOrEmptyStringPipeModule, FileSizePipeModule, NumberAbbreviatorPipeModule, HighlightPipeModule]\n})\nexport class PipesModule {}\n","import {Directive, HostBinding} from '@angular/core';\n\n/** `hcIconSm` - small size of hc-icon (14px) */\n@Directive({\n selector: '[hcIconSm]',\n standalone: false\n})\nexport class HcIconSmallDirective {\n @HostBinding('class.hc-icon-sm')\n _hostHcIconSmallClass = true;\n}\n","import {Directive, HostBinding} from '@angular/core';\n\n/** `hcIconMd` - medium size of hc-icon (20px) - default size */\n@Directive({\n selector: '[hcIconMd]',\n standalone: false\n})\nexport class HcIconMediumDirective {\n @HostBinding('class.hc-icon-md')\n _hostHcIconMediumClass = true;\n}\n","import {Directive, HostBinding} from '@angular/core';\n\n/** `hcIconLg` - large size of hc-icon (36px) */\n@Directive({\n selector: '[hcIconLg]',\n standalone: false\n})\nexport class HcIconLargeDirective {\n @HostBinding('class.hc-icon-lg')\n _hostHcIconLargeClass = true;\n}\n","import {NgModule} from '@angular/core';\nimport {IconComponent} from './icon.component';\nimport {HcIconSmallDirective} from './hc-icon-sm.directive';\nimport {HcIconMediumDirective} from './hc-icon-md.directive';\nimport {HcIconLargeDirective} from './hc-icon-lg.directive';\n\n@NgModule({\n declarations: [IconComponent, HcIconSmallDirective, HcIconMediumDirective, HcIconLargeDirective],\n exports: [IconComponent, HcIconSmallDirective, HcIconMediumDirective, HcIconLargeDirective]\n})\nexport class IconModule {}\n","import {ModuleWithProviders, NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';\n\nimport {AppSwitcherComponent} from './app-switcher.component';\nimport {PopModule} from '../pop/popover.module';\nimport {ProgressIndicatorsModule} from '../progress-indicators/progress-indicators.module';\nimport {AppSwitcherService} from './app-switcher.service';\nimport {WorkTrackerService} from '../shared/work-tracker.service';\nimport {PipesModule} from '../pipes/pipes.module';\nimport {IAppSwitcherConfig, APP_SWITCHER_CONFIG, APP_SWITCHER_SERVICE} from './app-switcher-interfaces';\nimport {AppSwitcherLinksComponent} from './app-switcher-application-link/app-switcher-links.component';\nimport {IconModule} from '../icon/icon.module';\n\n@NgModule({ declarations: [AppSwitcherComponent, AppSwitcherLinksComponent],\n exports: [AppSwitcherComponent, AppSwitcherLinksComponent], imports: [CommonModule, PopModule, PipesModule, IconModule, ProgressIndicatorsModule], providers: [\n {\n provide: APP_SWITCHER_SERVICE,\n useClass: AppSwitcherService\n },\n WorkTrackerService,\n provideHttpClient(withInterceptorsFromDi())\n ] })\nexport class AppSwitcherModule {\n static forRoot(config: IAppSwitcherConfig): ModuleWithProviders {\n return {\n ngModule: AppSwitcherModule,\n providers: [\n {\n provide: APP_SWITCHER_CONFIG,\n useValue: config\n }\n ]\n };\n }\n}\n","import {Component, Input, ViewEncapsulation, EventEmitter, Output} from '@angular/core';\nimport {parseBooleanAttribute} from '../util';\n\nexport type BannerType = 'success' | 'info' | 'warning' | 'alert';\nconst bannerTypes: BannerType[] = ['success', 'info', 'warning', 'alert'];\n\n/** Notification banners are used for general information about the state of the application or upcoming events. For instant\n * feedback responding to user actions, use a toaster message.*/\n@Component({\n selector: 'hc-banner',\n templateUrl: './hc-banner.html',\n styleUrls: ['./hc-banner.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class HcBannerComponent {\n private _type: BannerType = 'info';\n private _clickDismiss = false;\n\n /** If the banner can be dismissed, emits when the banner is clicked to close */\n @Output()\n bannerClose: EventEmitter = new EventEmitter();\n\n /** Style of the notification banner; Defaults to info.\n * Options are: `success`, `info`, `warning`, `alert`*/\n @Input()\n get type(): BannerType {\n return this._type;\n }\n\n set type(typeVal: BannerType) {\n if (!bannerTypes.includes(typeVal)) {\n throw new Error('Unsupported banner type: ' + typeVal);\n }\n this._type = typeVal;\n }\n\n /** When set to true, a close icon is added to the right side and `bannerClose`\n * emits on a click. Defaults to false.*/\n @Input()\n get clickDismiss(): boolean {\n return this._clickDismiss;\n }\n\n set clickDismiss(dismissVal: boolean) {\n this._clickDismiss = parseBooleanAttribute(dismissVal);\n }\n\n _bannerClick(event: MouseEvent): void {\n if (this._clickDismiss) {\n this.bannerClose.emit(event);\n }\n }\n}\n","
\n \n @if (clickDismiss) {\n \n
\n \n }\n
\n","import {Directive, HostBinding} from '@angular/core';\n\n/** Including `hcBannerStamp` wraps the enclosed text in a stamp to provide greater emphasis */\n@Directive({\n selector: '[hcBannerStamp]',\n standalone: false\n})\nexport class BannerStampDirective {\n @HostBinding('class.hc-banner-stamp')\n get _hostClass(): boolean {\n return true;\n }\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {HcBannerComponent} from './hc-banner.component';\nimport {BannerStampDirective} from './hc-banner-stamp.directive';\n\n@NgModule({\n imports: [CommonModule],\n exports: [HcBannerComponent, BannerStampDirective],\n declarations: [HcBannerComponent, BannerStampDirective]\n})\nexport class BannerModule {}\n","import {Component, OnDestroy, OnInit, Input, ViewEncapsulation} from '@angular/core';\nimport {ActivatedRoute, Event, NavigationEnd, Params, PRIMARY_OUTLET, Router} from '@angular/router';\nimport { Subscription } from 'rxjs';\n\n/**\n * IBreadcrumb interface is used to store all required data for each breadcrumb element\n * @docs-private\n */\nexport interface IBreadcrumb {\n label: string;\n params?: Params;\n url: string;\n}\n\n/*\n This type is from @angular/router, but the import location varies by Angular version\n Including here to allow Cashmere to work regardless of Angular version\n*/\nexport type QueryParamsHandling = 'merge' | 'preserve' | '';\n\n/** A navigational aid that allows users to keep track of their location within the current application */\n@Component({\n selector: 'hc-breadcrumbs',\n templateUrl: './breadcrumbs.component.html',\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class BreadcrumbsComponent implements OnInit, OnDestroy {\n public _breadcrumbs: IBreadcrumb[] = [];\n public _routerSubscription: Subscription;\n _backURL = '';\n _backShow = 'none';\n _locationLabel = '';\n _queryParamsHandling: QueryParamsHandling = '';\n\n /** Sets the handling of the query parameters for the breadcrumb. Choose from: `'preserve' | 'merge' | '' (default)` */\n @Input()\n get queryParamsHandling(): QueryParamsHandling {\n return this._queryParamsHandling;\n }\n\n set queryParamsHandling(queryParamsHandling: QueryParamsHandling) {\n this._queryParamsHandling = queryParamsHandling;\n }\n\n constructor(private activatedRoute: ActivatedRoute, private router: Router) {}\n\n ngOnInit(): void {\n // Add the first breadcrumb for the base page\n const root: ActivatedRoute = this.activatedRoute.root;\n this._breadcrumbs = this.getBreadcrumbs(root);\n\n // subscribe to the NavigationEnd event\n this._routerSubscription = this.router.events.subscribe((event: Event) => {\n if (event instanceof NavigationEnd) {\n this.setBreadcrumbs();\n }\n });\n\n // set initial breadcrumb state\n this.setBreadcrumbs();\n }\n\n private setBreadcrumbs() {\n const root = this.activatedRoute.root;\n this._breadcrumbs = this.getBreadcrumbs(root);\n if (this._breadcrumbs.length > 1) {\n this._backURL = this._breadcrumbs[this._breadcrumbs.length - 2].url;\n this._backShow = 'inline';\n this._locationLabel = '';\n } else if (this._breadcrumbs.length === 1) {\n this._backShow = 'none';\n this._locationLabel = this._breadcrumbs[this._breadcrumbs.length - 1].label;\n } else {\n this._backShow = 'none';\n this._locationLabel = '';\n }\n }\n\n private getBreadcrumbs(route: ActivatedRoute, url = '', breadcrumbs: IBreadcrumb[] = []): IBreadcrumb[] {\n const ROUTE_DATA_BREADCRUMB = 'breadcrumb';\n\n // get the child routes\n const children: ActivatedRoute[] = route.children;\n\n // return if there are no more children\n if (children.length === 0) {\n return breadcrumbs;\n }\n\n // iterate over each children\n for (const child of children) {\n // verify primary route\n if (child.outlet !== PRIMARY_OUTLET) {\n continue;\n }\n\n // verify the custom data property \"breadcrumb\" is specified on the route\n // eslint-disable-next-line no-prototype-builtins\n if (!child.snapshot.data.hasOwnProperty(ROUTE_DATA_BREADCRUMB)) {\n return this.getBreadcrumbs(child, url, breadcrumbs);\n }\n\n // get the route's URL segment\n const routeURL: string = child.snapshot.url.map(segment => segment.path).join('/');\n\n // append route URL to URL\n url += `/${routeURL}`;\n\n // add breadcrumb\n const parent: ActivatedRoute | null = this.activatedRoute.parent;\n let fullURL = '';\n if (parent !== null) {\n fullURL += '/' + parent.snapshot.url.map(segment => segment.path).join('/');\n }\n fullURL += `${url}`;\n const breadcrumb: IBreadcrumb = {\n label: child.snapshot.data[ROUTE_DATA_BREADCRUMB],\n params: child.snapshot.params,\n url: fullURL\n };\n\n breadcrumbs.push(breadcrumb);\n\n // recursive\n return this.getBreadcrumbs(child, url, breadcrumbs);\n }\n\n // we should never get here, but just in case\n return breadcrumbs;\n }\n\n ngOnDestroy(): void {\n this._routerSubscription.unsubscribe();\n }\n}\n","
    \n @for (breadcrumb of _breadcrumbs; track breadcrumb; let last = $last) {\n
  1. \n @if (!last) {\n \n } @if (last) {\n \n }\n \n
    2. \n }\n
\n
\n \n \n  Back\n \n \n
\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {BreadcrumbsComponent} from './breadcrumbs.component';\nimport {RouterModule} from '@angular/router';\nimport {IconModule} from '../icon/icon.module';\n\n@NgModule({\n imports: [CommonModule, RouterModule, IconModule],\n exports: [BreadcrumbsComponent],\n declarations: [BreadcrumbsComponent]\n})\nexport class BreadcrumbsModule {}\n","export const supportedColors = [\n 'blue',\n 'green',\n 'purple',\n 'red',\n 'orange',\n 'ruby-red',\n 'deep-red',\n 'red-orange',\n 'magenta',\n 'pink',\n 'light-pink',\n 'azure',\n 'teal',\n 'ai-green',\n 'dark-green',\n 'light-green',\n 'brown',\n 'purple-gray',\n 'yellow',\n 'yellow-orange',\n 'tan',\n 'white',\n 'black',\n 'offblack',\n 'shadow',\n 'dark-blue',\n 'charcoal-blue',\n 'slate-gray-100',\n 'slate-gray-200',\n 'slate-gray-300',\n 'slate-gray-400',\n 'slate-gray-500',\n 'slate-gray-600',\n 'gray-100',\n 'gray-200',\n 'gray-300',\n 'gray-400',\n 'gray-500',\n 'gray-600'\n];\n","import {ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, Renderer2, ViewEncapsulation} from '@angular/core';\nimport {parseBooleanAttribute, validateInput, hcClassify} from '../util';\nimport {supportedColors} from '../utils/supported-colors';\n\nexport const supportedStyles = ['primary', 'primary-alt', 'destructive', 'neutral', 'secondary', 'minimal', 'link', 'link-inline', 'pagination'];\nexport const supportedSizes = ['sm', 'md', 'lg'];\nconst buttonAttributes = ['hc-icon-button', 'hc-button'];\n\n/** Cashmere styled button */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[hc-button], button[hc-icon-button]',\n template: '',\n styleUrls: ['./button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ButtonComponent {\n private _disabled = false;\n private _style: string;\n private _size: string;\n\n /** Sets style of button. Choose from: `'primary' | 'primary-alt' | 'destructive' |\n * 'neutral' | 'secondary' | 'minimal' | link' | 'link-inline'`. If needed, colors from\n * the primary, secondary, or neutral palette may be used as well (e.g. 'pink', 'red-orange', etc) */\n @Input()\n get buttonStyle(): string {\n return this._style;\n }\n\n set buttonStyle(btnStyle: string) {\n validateInput(btnStyle, supportedColors.concat(supportedStyles), 'buttonStyle', 'ButtonComponent');\n if ( supportedStyles.indexOf(btnStyle) < 0 ) {\n btnStyle = \"button-\" + btnStyle;\n }\n this.setHostClass(this._style, btnStyle);\n this._style = btnStyle;\n }\n\n /** Sets size of button. Choose from: `'sm' | 'md' | 'lg' |`. *Defaults to `md`.* */\n @Input()\n get size(): string {\n return this._size;\n }\n\n set size(size: string) {\n validateInput(size, supportedSizes, 'size', 'ButtonComponent');\n this.setHostClass(this._size, size);\n this._size = size;\n }\n\n /** Whether the control is disabled. */\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(isDisabled: boolean) {\n this._disabled = parseBooleanAttribute(isDisabled);\n }\n\n @HostBinding('attr.disabled')\n get _disabledAttr(): string | null {\n return this.disabled ? \"disabled\" : null;\n }\n\n constructor(public elementRef: ElementRef, private renderer: Renderer2) {\n this.buttonStyle = 'primary';\n this.size = 'md';\n\n for (const attr of buttonAttributes) {\n if (elementRef.nativeElement.hasAttribute(attr)) {\n renderer.addClass(elementRef.nativeElement, attr);\n }\n }\n }\n\n /** Used to give focus to the button */\n focus(): void {\n this.elementRef.nativeElement.focus();\n }\n\n private setHostClass(previous: string, current) {\n if (previous !== current) {\n if (previous) {\n this.renderer.removeClass(this.elementRef.nativeElement, hcClassify(previous));\n }\n this.renderer.addClass(this.elementRef.nativeElement, hcClassify(current));\n }\n }\n\n\n}\n","/* eslint-disable @angular-eslint/component-selector */\n// https://github.com/mgechev/codelyzer/issues/178#issuecomment-265154480\n\nimport {ChangeDetectionStrategy, Component, ElementRef, HostBinding, Renderer2, ViewEncapsulation} from '@angular/core';\nimport {ButtonComponent} from './button.component';\n\n/* Cashmere button styled anchor */\n@Component({\n selector: 'a[hc-button]',\n template: '',\n styleUrls: ['./button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class AnchorComponent extends ButtonComponent {\n @HostBinding('attr.aria-disabled')\n get _hostAriaDisabled(): string {\n return this.disabled ? this.disabled.toString() : 'false';\n }\n\n @HostBinding('attr.tabindex')\n get _hostTabIndex(): number {\n return this.disabled ? -1 : 0;\n }\n\n @HostBinding('style.pointer-events')\n get _handleClickEvents(): string {\n return this.disabled ? 'none' : 'auto';\n }\n\n constructor(elementRef: ElementRef, renderer: Renderer2) {\n super(elementRef, renderer);\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n ViewEncapsulation,\n ViewChild,\n ContentChildren\n} from '@angular/core';\nimport type {QueryList} from '@angular/core';\nimport {parseBooleanAttribute, validateInput} from '../../util';\nimport {ButtonComponent, supportedSizes} from '../button.component';\nimport {HcPopComponent} from '../../pop/popover.component';\nimport {MenuItemDirective} from '../../pop/directives/menu-item.directive';\nimport { supportedColors } from '../../utils/supported-colors';\n\nconst supportedStyles = ['primary', 'primary-alt', 'destructive', 'neutral', 'secondary', 'minimal', 'link', 'link-inline'];\n\n/** SplitButton click event */\nexport class SplitButtonClickEvent {\n constructor(public source: SplitButtonComponent) {}\n}\n\n/** Split button provides a primary action button along with a secondary menu of actions */\n@Component({\n selector: 'hc-split-button',\n templateUrl: './split-button.component.html',\n styleUrls: ['../button.component.scss', './split-button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class SplitButtonComponent {\n private _tabIndex: number;\n private _disabled = false;\n private _style = 'primary';\n private _size = 'md';\n\n @ViewChild('splitBtnToggle')\n _splitBtnToggle: ButtonComponent;\n\n @ViewChild('splitMenu')\n _splitMenu: HcPopComponent;\n\n @ContentChildren(MenuItemDirective, {descendants: true}) _menuItems: QueryList;\n\n /** Primary button's click event */\n @Output()\n click = new EventEmitter();\n\n /** Additional information shown as tooltip */\n @Input()\n title: string;\n\n /** Positioning for the menu. Possible values: 'start', 'end', 'center' */\n @Input()\n menuPosition = 'end';\n\n /** True if clicking anywhere in the menu should automatically close it. */\n @Input()\n autoCloseMenuOnClick = true;\n\n /** Type of button. Possible values: 'submit', 'reset', 'button' */\n @Input()\n type = 'button';\n\n /** Used as a reference in JavaScript, or to reference form data after a form is submitted */\n @Input()\n name: string;\n\n /** Value of primary button when submitted within a form */\n @Input()\n value: string;\n\n /** Button tabindex */\n @Input()\n get tabIndex(): number {\n return this.disabled ? -1 : this._tabIndex;\n }\n\n set tabIndex(value: number) {\n this._tabIndex = value == null ? 0 : value;\n }\n\n /** Sets style of button. Choose from: `'primary' | 'primary-alt' | 'destructive' |\n * 'neutral' | 'secondary' | 'minimal'`. If needed, colors from\n * the primary or secondary palette may be used as well (e.g. 'pink', 'red-orange', etc) */\n @Input()\n get buttonStyle(): string {\n return this._style;\n }\n\n set buttonStyle(btnStyle: string) {\n validateInput(btnStyle, supportedColors.concat(supportedStyles), 'buttonStyle', 'SplitButtonComponent');\n if ( supportedStyles.indexOf(btnStyle) < 0 ) {\n btnStyle = \"button-\" + btnStyle;\n }\n this._style = btnStyle;\n }\n\n /** Sets size of button. Choose from: `'sm' | 'md' | 'lg'` */\n @Input()\n get size(): string {\n return this._size;\n }\n\n set size(size: string) {\n validateInput(size, supportedSizes, 'size', 'SplitButtonComponent');\n this._size = size;\n }\n\n /** Whether the control is disabled. */\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(isDisabled: boolean) {\n this._disabled = parseBooleanAttribute(isDisabled);\n }\n\n @HostBinding('class.hc-split-button')\n get _hostClass(): boolean {\n return true;\n }\n\n constructor(private elementRef: ElementRef) {}\n\n _stopClick($event: MouseEvent): void {\n $event.stopPropagation();\n }\n\n /** Used to give focus to the button */\n focus(): void {\n this.elementRef.nativeElement.focus();\n }\n\n _mainBtnClick(event: MouseEvent): void {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.click.emit(new SplitButtonClickEvent(this));\n }\n }\n\n /** Manually close the menu */\n closeMenu(): void {\n this._splitMenu.close();\n }\n\n /** Manually open the menu */\n openMenu(): void {\n // pass menuItems on to the HcPop instance so that keyboard accessibility works\n if (this._splitMenu) { this._splitMenu._menuItems = this._menuItems; }\n\n this._splitMenu.open();\n }\n}\n","\n \n \n \n \n\n\n\n
\n \n
\n\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {ButtonComponent} from './button.component';\nimport {AnchorComponent} from './anchor.component';\nimport {SplitButtonComponent} from './split-button/split-button.component';\nimport {PopModule} from '../pop/popover.module';\n\n@NgModule({\n imports: [CommonModule, PopModule],\n declarations: [AnchorComponent, ButtonComponent, SplitButtonComponent],\n exports: [AnchorComponent, ButtonComponent, SplitButtonComponent, PopModule]\n})\nexport class ButtonModule {}\n","import { Component, EventEmitter, HostBinding, HostListener, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { parseBooleanAttribute } from '../util';\n\n\n/** Button Toggle components are the individually selectable buttons used within the Button Toggle Group component. */\n\n@Component({\n selector: 'hc-button-toggle',\n template: '',\n styleUrls: ['./button-toggle.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\n\nexport class ButtonToggleComponent {\n _disabled = false;\n _parentDisabled = false;\n _selected = false;\n\n @HostBinding('class') _hostClass = 'hc-button-toggle';\n\n /** Event emitted when this specific toggle is changed. */\n @Output()\n _toggleClick: EventEmitter = new EventEmitter();\n\n /** The value assigned to this particular toggle. Used by the group to get/set the value of the selected item(s). */\n @Input()\n value: string;\n\n /** Whether the toggle is currently selected. Updates the value of the group when set. *Defaults to `false`.* */\n @Input()\n get selected(): boolean {\n return this._selected;\n }\n set selected(isSelected: boolean) {\n this._selected = parseBooleanAttribute(isSelected);\n this._toggleClick.emit(this);\n }\n\n /** Whether the individual toggle is disabled */\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(isDisabled: boolean) {\n this._disabled = parseBooleanAttribute(isDisabled);\n if ( this._disabled && !this._hostClass.includes( 'hc-toggle-disabled' )) {\n this._hostClass += ' hc-toggle-disabled';\n }\n if ( !this._disabled && this._hostClass.includes( 'hc-toggle-disabled' )) {\n this._hostClass = this._hostClass.replace( ' hc-toggle-disabled', '' );\n }\n }\n\n @HostListener('click')\n _onClick(): void {\n if ( !this.disabled && !this._parentDisabled ) {\n this.selected = !this.selected;\n }\n }\n}\n","import {ButtonToggleComponent} from './button-toggle.component';\n\nexport class ButtonToggleChangeEvent {\n /**\n * @param source the button toggle that fired the event\n * @param buttonToggles the collection of button toggles in the group\n * @param selectedValues the values of all 'selected' button toggles\n */\n constructor(\n public source: ButtonToggleComponent | null,\n public buttonToggles: ButtonToggleComponent[] | null,\n public selectedValues: string[] | null\n ) {}\n}\n","\n/** Wrapper component that textual form controls extend to work with hc-form-field */\nexport abstract class HcFormControlComponent {\n /** Whether the control should be displaying an associated error */\n _errorState = false;\n\n /** An error message to be shown in the UI when there is an error state present */\n _errorMessage = '';\n\n /** An object that represents the Angular validation errors that are present on the form */\n _errors: {\n [key: string]: unknown;\n } = {};\n\n /** Whether the control is disabled */\n _isDisabled = false;\n\n /** ID identifier of the the control */\n _componentId: string;\n\n /** Whether the control is required */\n _isRequired = false;\n\n /** Whether the control should apply tight styling */\n _tight = false;\n}\n","import {\n AfterContentInit,\n Component,\n ContentChildren,\n EventEmitter,\n forwardRef,\n HostBinding,\n Input,\n OnDestroy,\n Output,\n ViewEncapsulation } from '@angular/core';\nimport type { QueryList } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { ButtonToggleChangeEvent } from './button-toggle-change-event';\nimport { parseBooleanAttribute, validateInput } from '../util';\nimport { ButtonToggleComponent } from './button-toggle.component';\nimport { supportedSizes, supportedStyles } from '../button/button.component';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { HcFormControlComponent } from '../form-field/hc-form-control.component';\nimport { supportedColors } from '../utils/supported-colors';\n\n\n/** `hc-button-toggle-group` components are on/off toggles with the appearance of an `hc-button`.\n * These toggle groups may be configured to behave as single-select (like radio buttons), or multi-select (like checkboxes). */\n@Component({\n selector: 'hc-button-toggle-group',\n template: '',\n styleUrls: ['./button-toggle.component.scss'],\n providers: [{\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ButtonToggleGroupComponent),\n multi: true\n }],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ButtonToggleGroupComponent extends HcFormControlComponent implements AfterContentInit, OnDestroy, ControlValueAccessor {\n private _disabled = false;\n private _style = 'secondary';\n private _size = 'md';\n private _valueRequired = false;\n private _multiple = false;\n private unsubscribe$ = new Subject();\n private _value;\n\n @HostBinding('class.hc-button-toggle-group') _hostClass = true;\n\n @ContentChildren(ButtonToggleComponent)\n _buttons: QueryList;\n\n /** Event fired whenever a change is made to any button toggle in the group. */\n @Output() selectionChangedEvent: EventEmitter = new EventEmitter();\n\n /** Sets style of toggle. Choose from: `'primary' | 'primary-alt' | 'destructive' | 'neutral' | 'secondary'`.\n * If needed, colors from the primary or secondary palette may be used as well (e.g. 'pink', 'red-orange', etc).\n * *Defaults to `secondary`.* */\n @Input()\n get buttonStyle(): string {\n return this._style;\n }\n set buttonStyle(val: string) {\n validateInput(val, supportedColors.concat(supportedStyles), 'buttonStyle', 'ButtonToggleComponent');\n if (supportedStyles.indexOf(val) < 0) {\n val = \"button-\" + val;\n }\n this._style = val;\n this._updateButtonStyle();\n }\n\n @Input()\n get value(): unknown {\n return this._value;\n }\n\n set value(newValue: unknown) {\n if ( newValue !== undefined && this._value !== newValue) {\n this._value = newValue;\n this.onChange(newValue);\n }\n }\n\n /** Sets size of toggle. Choose from: `'sm' | 'md' | 'lg' |`. *Defaults to `md`.* */\n @Input()\n get size(): string {\n return this._size;\n }\n\n set size(size: string) {\n validateInput(size, supportedSizes, 'size', 'ButtonToggleGroupComponent');\n this._size = size;\n this._updateButtonStyle();\n }\n\n /** Whether multiple button toggles can be selected. *Defaults to `false`.* */\n @Input()\n get multiple(): boolean {\n return this._multiple;\n }\n set multiple(val: boolean) {\n this._multiple = parseBooleanAttribute(val);\n }\n\n /** Whether at least one button must remain selected. */\n @Input()\n get valueRequired(): boolean {\n return this._valueRequired;\n }\n set valueRequired(required: boolean) {\n this._valueRequired = parseBooleanAttribute(required);\n }\n\n /** Whether the entire toggle group is disabled. */\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(isDisabled: boolean) {\n this._disabled = parseBooleanAttribute(isDisabled);\n if (this._buttons) {\n this._buttons.forEach((button: ButtonToggleComponent) => button._parentDisabled = this._disabled);\n }\n this._updateButtonStyle();\n }\n\n ngAfterContentInit(): void {\n this._connectToButtonChildren();\n setTimeout(() => {\n this._setInitalModelAsNeeded();\n this._updateButtonStateFromModel();\n this._emitEventForInitiallySelected();\n this._updateButtonStyle();\n });\n }\n\n ngOnDestroy(): void {\n this.unsubscribe$.next();\n this.unsubscribe$.complete();\n }\n\n writeValue(value: unknown): void {\n // Prevent the form control from trying to write a value when removing the control\n if ( this.onChange.name !== 'noop' ) {\n this._value = value;\n this._updateButtonStateFromModel();\n }\n }\n\n public onChange: (value: unknown) => void = () => undefined;\n public onTouch: () => unknown = () => undefined;\n public registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n public registerOnTouched(fn: () => unknown): void {\n this.onTouch = fn;\n }\n\n setDisabledState(state: boolean): void {\n this.disabled = state;\n }\n\n _touch(): void {\n if (this.onTouch) {\n this.onTouch();\n }\n }\n\n _updateButtonStyle(): void {\n if (this._buttons) {\n this._buttons.forEach((button: ButtonToggleComponent) => {\n const checkedClass = button.selected ? 'hc-toggle-checked' : '';\n const disabledClass = button.disabled || this.disabled ? 'hc-toggle-disabled' : '';\n const classStr = 'hc-button-toggle hc-' + this._style + ' ' + 'hc-' + this._size + ' ' + checkedClass + ' ' + disabledClass;\n button._hostClass = classStr.trim();\n });\n }\n }\n\n _updateButtonStateFromModel(): void {\n this._buttons?.forEach((button: ButtonToggleComponent) => {\n if (this.multiple) {\n button._selected = this._value?.some(v => v === button.value);\n } else {\n button._selected = button.value === this._value;\n }\n });\n\n if (!this.multiple && this._buttons?.filter(b => b._selected).length > 1) {\n throw new Error(`Multiple buttons in group have same value (${this._value}).\n This is not allowed if \"multiple\" property isn't set to true.`);\n }\n this._updateButtonStyle();\n }\n\n _updateValueOnClick(targetButton: ButtonToggleComponent): void {\n if (!this.multiple) {\n this._buttons.forEach((button: ButtonToggleComponent) => {\n if (button !== targetButton) {\n button._selected = false;\n }\n if (this.valueRequired && button === targetButton) {\n button._selected = true;\n }\n });\n } else {\n this._buttons.forEach((button: ButtonToggleComponent) => {\n if (this.valueRequired && this._buttons.filter((btn: ButtonToggleComponent) => btn.selected ).length === 0) {\n if (button === targetButton) { button._selected = true; }\n }\n });\n }\n\n // if multiple = true, _value is an array, if not, _value should be a single value.\n const selectedValues = this._buttons.filter((btn: ButtonToggleComponent) => btn.selected).map(val => val.value);\n this.value = this.multiple ? selectedValues : selectedValues[0];\n this.onChange(this.value);\n\n this._updateButtonStyle();\n }\n\n /** The component allows you to set [selected] on individual buttons, so we need to honor that in the model. */\n private _setInitalModelAsNeeded() {\n this._value = this._value || (this.multiple ? [] : this.value);\n this._buttons.forEach((button: ButtonToggleComponent) => {\n if (button.selected) {\n if (this.multiple && !(this.value as Array)?.includes(button.value)) {\n (this.value as Array)?.push(button.value);\n }\n\n if (!this.multiple) {\n this.value = button.value;\n }\n } else {\n if (this.multiple && (this.value as Array)?.includes(button.value)) {\n (this.value as Array)?.splice((this.value as Array)?.indexOf(button.value, 1));\n }\n }\n });\n }\n\n private _emitEventForInitiallySelected() {\n if (this._buttons.some((button: ButtonToggleComponent) => {\n return button.selected;\n })) {\n this.selectionChangedEvent.emit(new ButtonToggleChangeEvent(\n null,\n this._buttons.toArray()\n , this._buttons.filter((btn: ButtonToggleComponent) => btn.selected).map(val => val.value)\n ));\n }\n }\n\n private _connectToButtonChildren() {\n if (this._buttons) {\n this._buttons.forEach((button: ButtonToggleComponent) => {\n button._parentDisabled = this.disabled;\n this._subscribeToButtonClick(button);\n });\n }\n }\n\n private _subscribeToButtonClick(button: ButtonToggleComponent) {\n button._toggleClick.pipe(takeUntil(this.unsubscribe$)).subscribe(\n (target: ButtonToggleComponent) => {\n this._updateValueOnClick(target);\n this.selectionChangedEvent.emit(new ButtonToggleChangeEvent(\n target,\n this._buttons.toArray()\n , this._buttons.filter((btn: ButtonToggleComponent) => btn.selected).map(val => val.value)\n ));\n });\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { ButtonToggleGroupComponent } from './button-toggle-group.component';\nimport { ButtonToggleComponent } from './button-toggle.component';\n\n\n@NgModule({\n imports: [CommonModule, FormsModule],\n declarations: [ButtonToggleComponent, ButtonToggleGroupComponent],\n exports: [ButtonToggleComponent, ButtonToggleGroupComponent],\n providers: [ButtonToggleGroupComponent]\n})\nexport class ButtonToggleModule {}\n","import {\n Attribute,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n Input,\n Output,\n Renderer2,\n ViewChild,\n Self,\n Optional,\n ContentChildren,\n ViewEncapsulation,\n AfterViewInit,\n OnDestroy,\n ChangeDetectorRef,\n QueryList\n} from '@angular/core';\nimport {ControlValueAccessor, NgForm, FormGroupDirective, NgControl} from '@angular/forms';\nimport {HcFormControlComponent} from '../form-field/hc-form-control.component';\nimport {parseBooleanAttribute} from '../util';\nimport {delay, filter, takeUntil} from 'rxjs/operators';\nimport {Subject} from 'rxjs';\n\nlet nextCheckboxId = 1;\n\nexport class CheckboxChangeEvent {\n constructor(public source: CheckboxComponent, public checked: boolean) {}\n}\n\n@Component({\n selector: 'hc-checkbox-group',\n styleUrls: ['./checkbox.component.scss'],\n providers: [{provide: HcFormControlComponent, useExisting: forwardRef(() => CheckboxGroup)}],\n exportAs: 'hcCheckboxGroup',\n template: `\n @if (!_disableParent) {\n {{ _parentLabel }}\n }\n
\n \n
\n `,\n standalone: false\n})\nexport class CheckboxGroup extends HcFormControlComponent {\n /** A list of all the checkboxes included in the group */\n private _checkboxes: QueryList;\n private _checkboxesArray: CheckboxComponent[];\n\n _groupState = false;\n _parentLabel = 'Parent Checkbox';\n _disableParent = false;\n _isIndeterminate = true;\n\n /** gets all children and subscribes to their events */\n @ContentChildren(forwardRef(() => CheckboxComponent), {descendants: false})\n get checkboxes(): QueryList {\n return this._checkboxes;\n }\n set checkboxes(value: QueryList) {\n if (value) {\n this._checkboxes = value;\n const arr = value.toArray() || [];\n this._checkboxesArray = arr;\n arr.forEach(c => c.change.pipe(filter(() => this._checkboxesArray === arr)).subscribe(() => this.updateParentState()));\n }\n }\n\n /** Input to disable the Parent button *Defaults to `false`.* */\n @Input()\n get disableParent(): boolean {\n return this._disableParent;\n }\n set disableParent(disableParent: boolean) {\n this._disableParent = disableParent;\n }\n\n /** Input to change the label for the parent checkbox *Defaults to 'Parent Checkbox'* */\n @Input()\n get parentLabel(): string {\n return this._parentLabel;\n }\n set parentLabel(parentLabel: string) {\n this._parentLabel = parentLabel;\n }\n\n /** Function to handle the indeterminate checkbox */\n updateParentState(): void {\n if (this.checkboxes) {\n const checkedCount = this.checkboxes.filter(c => c.checked).length;\n if (checkedCount === this.checkboxes.length) {\n this._groupState = true;\n this._isIndeterminate = false;\n } else if (checkedCount === 0) {\n this._groupState = false;\n this._isIndeterminate = false;\n } else {\n this._groupState = false;\n this._isIndeterminate = true;\n }\n }\n }\n\n /** Function to return all checkboxes*/\n getSelected(): CheckboxComponent[] {\n if (this.checkboxes) {\n return this.checkboxes.filter(c => c.checked);\n }\n return [];\n }\n\n /** Function that handles the parent checkbox functionality */\n toggleCheckAll(): void {\n if (this._groupState === true) {\n this.checkboxes.filter(c => (c.checked = false));\n } else {\n this.checkboxes.filter(c => (c.checked = true));\n }\n this.updateParentState();\n }\n}\n\n@Component({\n selector: 'hc-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n encapsulation: ViewEncapsulation.None,\n providers: [{provide: HcFormControlComponent, useExisting: forwardRef(() => CheckboxComponent)}],\n exportAs: 'hcCheckbox',\n standalone: false\n})\nexport class CheckboxComponent extends HcFormControlComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {\n private _uniqueId = `hc-checkbox-${nextCheckboxId++}`;\n private _form: NgForm | FormGroupDirective | null;\n private _checked = false;\n private _tabIndex: number;\n private _parent = false;\n private readonly checkboxGroup: CheckboxGroup | null;\n private _unsubscribe = new Subject();\n _componentId = this._uniqueId;\n\n /** Value attribute of the native checkbox */\n @Input()\n value: string;\n\n /** Whether the checkbox is indeterminate. It can represent a checkbox with three states. */\n @Input()\n indeterminate: boolean;\n\n /** If true, the checkbox is for display purposes (not user interaction). As such its checked/unchecked state\n * can only be controlled programatically. Useful for embedding in an ng-select typeahead */\n @Input()\n isStub = false;\n\n /** Unique id for the checkbox element. If none is supplied, one will be auto-generated. */\n @Input()\n get id(): string {\n return this._componentId || this._uniqueId;\n }\n\n set id(idVal: string) {\n this._componentId = idVal ? idVal : this._uniqueId;\n }\n\n /** If true, condense the default margin and reduce the font size. *Defaults to `false`.* */\n @Input()\n get tight(): boolean {\n return this._tight;\n }\n set tight(value: boolean) {\n this._tight = parseBooleanAttribute(value);\n }\n\n /** Sets the position of the checkbox relative to its associated label. *Defaults to `center`.* */\n @Input()\n align: 'center' | 'top' | 'bottom' = 'center';\n\n /** Sets unique name used in a form */\n @Input()\n name: string | null = null;\n\n /** Event emitted whenever the state changes */\n @Output()\n change = new EventEmitter();\n\n @ViewChild('checkboxInput', {static: true})\n _checkboxInput: ElementRef;\n\n @HostBinding('attr.id')\n get _getHostId(): string {\n return this.id;\n }\n\n @HostBinding('class.hc-checkbox-checked')\n get _getCheckboxCheckedClass(): boolean {\n return this.checked;\n }\n\n @HostBinding('class.hc-checkbox-disabled')\n get _getCheckboxDisabledClass(): boolean {\n if (this._ngControl && this._ngControl.disabled) {\n return this._ngControl.disabled;\n }\n return this._isDisabled;\n }\n\n @HostBinding('class.hc-checkbox-indeterminate')\n get _getCheckboxIndeterminateClass(): boolean {\n return this.indeterminate;\n }\n\n /** Whether the checkbox is required. */\n @Input()\n get required(): boolean {\n return this._isRequired;\n }\n\n set required(requiredVal: boolean) {\n this._isRequired = parseBooleanAttribute(requiredVal);\n }\n\n /** Whether the checkbox is disabled. */\n @Input()\n get disabled(): boolean {\n if (this._ngControl && this._ngControl.disabled) {\n return this._ngControl.disabled;\n }\n return this._isDisabled;\n }\n\n set disabled(disabledVal: boolean) {\n this._isDisabled = parseBooleanAttribute(disabledVal);\n }\n\n /** Whether the checkbox is checked. */\n @Input()\n get checked(): boolean {\n return this._checked;\n }\n\n set checked(checked: boolean) {\n if (this._checked === checked) {\n return;\n }\n this._checked = checked;\n }\n\n /** Whether the checkbox is a parent. */\n @Input()\n get parent(): boolean {\n return this._parent;\n }\n\n set parent(parent: boolean) {\n this._parent = parseBooleanAttribute(parent);\n }\n\n /** TabIndex attribute of native checkbox */\n get tabIndex(): number {\n return this._isDisabled ? -1 : this._tabIndex;\n }\n\n set tabIndex(value: number) {\n this._tabIndex = value == null ? 0 : value;\n }\n\n get _inputId(): string {\n return `${this.id || this._uniqueId}-input`;\n }\n\n ngAfterViewInit(): void {\n if (this._ngControl?.statusChanges) {\n // delay() is necessary to make sure any form or control state changes have been applied before rechecking error states\n this._ngControl.statusChanges.pipe(delay(0), takeUntil(this._unsubscribe)).subscribe(() => this._updateErrorState());\n }\n if (this._form) {\n this._form.ngSubmit.pipe(takeUntil(this._unsubscribe)).subscribe(() => this._updateErrorState());\n }\n\n /** Monkey patching the markAsTouched function to call error state checking because there is not an event for touched changes */\n if (this._ngControl && this._ngControl.control) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const self = this;\n const originalMarkMethod = this._ngControl.control.markAsTouched;\n this._ngControl.control.markAsTouched = function () {\n // eslint-disable-next-line prefer-rest-params\n originalMarkMethod.apply(this, arguments);\n self._updateErrorState();\n };\n\n const originalMarkAllMethod = this._ngControl.control.markAllAsTouched;\n this._ngControl.control.markAllAsTouched = function () {\n // eslint-disable-next-line prefer-rest-params\n originalMarkAllMethod.apply(this, arguments);\n self._updateErrorState();\n };\n }\n }\n\n constructor(\n @Attribute('tabindex') tabindex: string,\n private _renderer: Renderer2,\n @Optional() _parentForm: NgForm,\n @Optional() _parentFormGroup: FormGroupDirective,\n @Optional() checkboxGroup: CheckboxGroup,\n @Optional()\n @Self()\n public _ngControl: NgControl,\n private _changeRef: ChangeDetectorRef\n ) {\n super();\n\n this.checkboxGroup = checkboxGroup;\n this.tabIndex = parseInt(tabindex, 10) || 0;\n\n this._form = _parentForm || _parentFormGroup;\n if (this._ngControl != null) {\n this._ngControl.valueAccessor = this;\n }\n }\n\n writeValue(value: unknown): void {\n // Prevent the form control from trying to write a value when removing the control\n if (this.onChange.name !== 'noop') {\n this.checked = !!value;\n }\n }\n\n public onChange: (value: unknown) => void = () => undefined;\n public onTouch: () => unknown = () => undefined;\n public registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n public registerOnTouched(fn: () => unknown): void {\n this.onTouch = fn;\n }\n\n setDisabledState(disabledVal: boolean): void {\n this.disabled = disabledVal;\n this._renderer.setProperty(this._checkboxInput.nativeElement, 'disabled', disabledVal);\n }\n\n /** Toggles the current checked state of the checkbox */\n toggle(): void {\n this.checked = !this.checked;\n }\n\n _clickEvent(event: Event): void {\n event.stopPropagation(); // prevent native click event from being dispatched\n if (!this.disabled) {\n if (this.checkboxGroup && this._parent) {\n this.checkboxGroup.toggleCheckAll();\n }\n this.toggle();\n this._emitChangeEvent();\n }\n }\n\n _stopChangeEvent(event: Event): void {\n event.stopPropagation(); // prevent native change event from emitting its own object through output 'change'\n }\n\n private _emitChangeEvent(): void {\n this.onTouch();\n this.onChange(this.checked);\n this.change.emit(new CheckboxChangeEvent(this, this.checked));\n }\n\n _onBlur(): void {\n this.onTouch();\n this._updateErrorState();\n }\n\n private _updateErrorState() {\n const oldState = this._errorState;\n\n // TODO: this could be abstracted out as an @Input() if we need this to be configurable\n const newState = !!(\n this._ngControl &&\n this._ngControl.invalid &&\n (this._ngControl.touched || (this._form && this._form.submitted))\n );\n\n if (oldState !== newState) {\n this._errorState = newState;\n this._changeRef.detectChanges();\n }\n }\n\n ngOnDestroy(): void {\n this._unsubscribe.next();\n this._unsubscribe.complete();\n }\n}\n","
\n
\n \n \n \n
\n
\n","import {Directive, forwardRef, Input, Provider} from '@angular/core';\nimport {AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, Validators} from '@angular/forms';\n\nexport const HC_CHECKBOX_REQUIRED_VALIDATOR: Provider = {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => HcCheckboxRequiredValidatorDirective),\n multi: true\n};\n\n/** @docs-private */\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: `hc-checkbox[required][formControlName],hc-checkbox[required][formControl],hc-checkbox[required][ngModel]`,\n providers: [HC_CHECKBOX_REQUIRED_VALIDATOR],\n standalone: false\n})\nexport class HcCheckboxRequiredValidatorDirective implements Validator {\n private _required = false;\n private _onChange?: () => void;\n\n validate(control: AbstractControl): ValidationErrors | null {\n return this.required ? Validators.requiredTrue(control) : null;\n }\n\n @Input()\n get required(): boolean | string {\n return this._required;\n }\n\n set required(value: boolean | string) {\n this._required = value != null && value !== false && `${value}` !== 'false';\n if (this._onChange) {\n this._onChange();\n }\n }\n\n registerOnValidatorChange(fn: () => void): void {\n this._onChange = fn;\n }\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {FormsModule} from '@angular/forms';\nimport {CheckboxComponent, CheckboxGroup} from './checkbox.component';\nimport {HcCheckboxRequiredValidatorDirective} from './checkbox-required.directive';\n\n@NgModule({\n imports: [CommonModule, FormsModule],\n exports: [CheckboxComponent, HcCheckboxRequiredValidatorDirective, CheckboxGroup],\n declarations: [CheckboxComponent, HcCheckboxRequiredValidatorDirective, CheckboxGroup]\n})\nexport class CheckboxModule {}\n","import {Component, Input, ViewEncapsulation, Output, EventEmitter} from '@angular/core';\nimport {parseBooleanAttribute} from '../util';\n\nconst supportedColors = ['neutral', 'yellow', 'green', 'red', 'blue'];\n\nexport function validateColorInput(inputStr: string): void {\n if (supportedColors.indexOf(inputStr) < 0) {\n throw Error('Unsupported chip color value: ' + inputStr);\n }\n}\n\n/** Chips represent complex entities in small blocks, such as filters, contacts, or system information */\n@Component({\n selector: 'hc-chip',\n templateUrl: './chip.component.html',\n styleUrls: ['./chip.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ChipComponent {\n private _hasCloseButton = false;\n private _color = 'neutral';\n _tight = false;\n\n /** Emitted when the 'X' close button is clicked. `(click)` may be used for clicks on the entire chip */\n @Output()\n closeClick = new EventEmitter();\n\n /** Sets chip color to one of: `neutral`, `yellow`, `green`, `red`, or `blue` (default=`neutral`) */\n @Input()\n get color(): string {\n return this._color;\n }\n\n set color(colorType: string) {\n validateColorInput(colorType);\n this._color = colorType;\n }\n\n /** If true, displays an X button on the right side of the chip which emits a `closeClick` event */\n @Input()\n get hasCloseButton(): boolean {\n return this._hasCloseButton;\n }\n\n set hasCloseButton(hasButton: boolean) {\n this._hasCloseButton = parseBooleanAttribute(hasButton);\n }\n\n /** If true, removes the margins & padding from the chip; defaults to `false` */\n @Input()\n get tight(): boolean {\n return this._tight;\n }\n\n set tight(val: boolean) {\n this._tight = parseBooleanAttribute(val);\n }\n\n /** Allows you to customize the width of a chip (ie. `100%`, `250px`); defaults to `auto` */\n @Input()\n width = 'auto';\n\n /** Called on a click of the X close button */\n _closeClick(e: MouseEvent): void {\n this.closeClick.emit(e);\n }\n}\n","
\n \n \n \n @if (hasCloseButton) {\n \n \n \n }\n
\n","import {Component, Input, ViewEncapsulation} from '@angular/core';\nimport {parseBooleanAttribute} from '../../util';\n\n/** Supporting component to help with grouping chips into collections */\n@Component({\n selector: 'hc-chip-row',\n template: `\n
\n
\n
\n
\n
\n `,\n styleUrls: ['../chip.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ChipRowComponent {\n private _wrap = true;\n\n /** If false, constrain the container to one line with overflow ellipses (default=true) */\n @Input()\n get wrap(): boolean {\n return this._wrap;\n }\n\n set wrap(doWrap: boolean) {\n this._wrap = parseBooleanAttribute(doWrap);\n }\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {ChipComponent} from './chip.component';\nimport {ChipRowComponent} from './chip-row/chip-row.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [ChipComponent, ChipRowComponent],\n declarations: [ChipComponent, ChipRowComponent]\n})\nexport class ChipModule {}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nexport function writeToStorage(key: string, value: any): void {\n window.localStorage.setItem(key, JSON.stringify(value));\n}\n\nexport function readFromStorage(key: string): any | null {\n const rawValue = window.localStorage.getItem(key);\n return rawValue ? JSON.parse(rawValue) : null;\n}\n","import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { HcPopComponent } from '../pop/popover.component';\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { HcDynamicColumn, HcCachedColumn } from './column-menu.models';\nimport { readFromStorage, writeToStorage } from '../utils/local-storage';\n\n/** Component for toggling and reordering columns within a data grid */\n@Component({\n selector: 'hc-column-menu',\n templateUrl: './column-menu.component.html',\n styleUrls: ['./column-menu.component.scss'],\n standalone: false\n})\nexport class ColumnMenuComponent implements OnInit {\n /** Reference to the popover menu. */\n @ViewChild('columns') menu!: HcPopComponent;\n /** Every time column settings are changed, emits an array of displayed columns in their proper order. */\n @Output() displayedColumnChange: EventEmitter = new EventEmitter();\n /** Fires when button to open menu is clicked. */\n @Output() onMenuIconClick: EventEmitter = new EventEmitter();\n /** Key used when caching the column order and display settings in local storage. If not provided, these settings will not be cached. */\n @Input() cacheKey = '';\n /** Keys for columns that cannot be moved or hidden and sit at the start of the row. */\n @Input() set staticPrefixCols(prefixCols: string[]) {\n this._staticPrefixCols = prefixCols;\n this._refreshCols();\n }\n get staticPrefixCols(): string[] { return this._staticPrefixCols; }\n private _staticPrefixCols: string[] = [];\n\n /** Keys for columns that cannot be moved or hidden and sit at the end of the row. */\n @Input() set staticSuffixCols(suffixCols: string[]) {\n this._staticSuffixCols = suffixCols;\n this._refreshCols();\n }\n get staticSuffixCols(): string[] { return this._staticSuffixCols; }\n private _staticSuffixCols: string[] = [];\n\n /** Collection of columns that can be hidden and/or reordered. */\n @Input() set dynamicCols(cols: Array) {\n this._dynamicCols = cols;\n this._generateColumnSelectionForms(cols);\n this._getCachedPreferences();\n }\n get dynamicCols(): Array { return this._dynamicCols; }\n private _dynamicCols = new Array();\n\n /** An array of the currently displayed column keys sorted in their proper order. */\n get displayedColumns(): string[] { return this._displayedColumns; }\n _displayedColumns: string[] = [];\n\n /** Collection of the sortable/hidable column forms. */\n get colSelectionForm(): FormGroup { return this._colSelectionForm; }\n _colSelectionForm = new FormGroup({});\n\n ngOnInit(): void {\n this._generateColumnSelectionForms(this._dynamicCols);\n this._getCachedPreferences();\n }\n\n /** Returns true if every hideable column is currently hidden. */\n get allHidden(): boolean {\n return !Object.values(this._colSelectionForm.controls).some(c => (c as FormControl).value);\n }\n\n /** Show all columns */\n selectAll(): void {\n Object.values(this._colSelectionForm.controls).forEach(c => (c as FormControl).setValue(true));\n this._onColChange();\n }\n\n /** Hide all columns */\n clearAll(): void {\n Object.values(this._colSelectionForm.controls).forEach(c => (c as FormControl).setValue(false));\n this._onColChange();\n }\n\n /** Open the column menu */\n open(): void {\n this.menu.open();\n }\n\n /** Close the column menu */\n close(): void {\n this.menu.close();\n }\n\n _onColChange(): void {\n this._refreshCols();\n this.saveCachedPreferences();\n }\n\n _generateColumnSelectionForms(cols: Array): void {\n this._colSelectionForm = new FormGroup({});\n cols.filter(c => this._interpretOptionalBoolean(c.isHidable)).forEach((c) => {\n this._colSelectionForm.addControl(c.name, new FormControl(this._interpretOptionalBoolean(c.isShownByDefault)));\n });\n this._refreshCols();\n }\n\n _interpretOptionalBoolean(val?: boolean): boolean {\n return val === undefined || val === null ? true : val;\n }\n\n _refreshCols(): string[] {\n // merge user controlled columns with static columns\n this._displayedColumns = this.staticPrefixCols\n .concat(this._getDisplayedColumns())\n .concat(this.staticSuffixCols);\n\n setTimeout(() => this.displayedColumnChange.emit(this._displayedColumns));\n return this._displayedColumns;\n }\n\n _getDisplayedColumns(): string[] {\n return this.dynamicCols\n .filter((col) =>\n this._interpretOptionalBoolean(col.isHidable) ? this._colSelectionForm.get(col.name)?.value : true\n )\n .map((cd) => cd.name as string);\n }\n\n /**\n * Handle rearanging of columns via drag and drop\n * @param event contains data from the drag and drop event\n * @param isInDataGrid if true, we need to take in account the fact that some columns may currently be hidden\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n columnDropped(event: CdkDragDrop, isInDataGrid = true): void {\n if (event) {\n const prevIndex = isInDataGrid ?\n this._dynamicCols.findIndex(c => c.name === event.item.data.name) :\n event.previousIndex;\n const adjustedIndexForPrefixes = event.currentIndex + this.staticPrefixCols.length;\n const newIndex = isInDataGrid ?\n this._dynamicCols.findIndex( c => c.name === this._displayedColumns[adjustedIndexForPrefixes]) :\n event.currentIndex;\n moveItemInArray(this._dynamicCols, prevIndex, newIndex);\n this._refreshCols();\n this.saveCachedPreferences();\n }\n }\n\n /**\n * Save ordered list of columns with their display status to local storage\n */\n saveCachedPreferences(): void {\n if (!this.cacheKey) { return; } // don't save if no key is provided\n const cachedColumns: HcCachedColumn[] = this.dynamicCols\n .map((col) => ({ key: col.name, isHidden: !this._colSelectionForm.get(col.name?.toString())?.value}));\n writeToStorage(this.cacheKey, cachedColumns);\n }\n\n /**\n * Load user preferences for columns order and display status\n */\n _getCachedPreferences(): void {\n if (!this.cacheKey) { return; } // don't load if no key is provided\n const cachedColumns: HcCachedColumn[] = readFromStorage(this.cacheKey) || new Array();\n const orderedAvailableColumns = new Array();\n cachedColumns?.forEach((col) => {\n const existingColumn = this._dynamicCols.find(c => c.name === col.key);\n if(!existingColumn) { return; } // watch for columns that don't exist anymore\n\n // if the cached column still exists, set display status & add at correct index\n this._colSelectionForm.get(col.key)?.setValue(!col.isHidden);\n orderedAvailableColumns.push(existingColumn);\n });\n\n // if available columns don't exist in cache (like a newly introduced column),\n // add them in at their default index\n this._dynamicCols.forEach((availableColumn, index) => {\n if(!cachedColumns.find(c => c.key === availableColumn.name)) {\n orderedAvailableColumns.splice(index, 0, availableColumn);\n }\n });\n\n this._dynamicCols = orderedAvailableColumns;\n this._refreshCols();\n }\n}\n","\n \n\n\n\n
\n
\n \n Configure Columns\n
\n
\n \n \n
\n @for (column of dynamicCols; track column) {\n \n \n @if (_interpretOptionalBoolean(column.isHidable)) {\n {{ column.title }}\n } @if (!_interpretOptionalBoolean(column.isHidable)) {\n \n {{ column.title }}\n \n }\n
\n }\n
\n \n
\n \n\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {FormsModule, ReactiveFormsModule} from '@angular/forms';\nimport {ColumnMenuComponent} from './column-menu.component';\nimport { CheckboxModule } from '../checkbox/checkbox.module';\nimport { PopModule } from '../pop/popover.module';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { IconModule } from '../icon';\nimport { ButtonModule } from '../button';\n\n@NgModule({\n imports: [CommonModule, FormsModule, ReactiveFormsModule, ButtonModule, CheckboxModule, PopModule, DragDropModule, IconModule],\n exports: [ColumnMenuComponent],\n declarations: [ColumnMenuComponent]\n})\nexport class ColumnMenuModule {}\n","/**\n * @license\n * Copyright Health Catalyst All Rights Reserved.\n *\n * Use of this source code is governed by an Apache-2.0 license that can be\n * found in the LICENSE file at https://raw.githubusercontent.com/HealthCatalyst/Fabric.Cashmere/dev/LICENSE\n */\n\n/** @docs-private */\nexport function createMissingDateImplError(provider: string): Error {\n return Error(\n `Datepicker: No provider found for ${provider}. You must import one of the following ` +\n `modules at your application root: HcNativeDateModule, MatMomentDateModule, or provide a ` +\n `custom implementation.`\n );\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright Health Catalyst All Rights Reserved.\n *\n * Use of this source code is governed by an Apache-2.0 license that can be\n * found in the LICENSE file at https://raw.githubusercontent.com/HealthCatalyst/Fabric.Cashmere/dev/LICENSE\n */\n\nimport {InjectionToken} from '@angular/core';\n\nexport type D = Date;\n\nexport type HcDateFormats = {\n parse: {\n dateInput: any;\n };\n display: {\n dateInput: any;\n timeInput: any;\n dateTimeInput: any;\n monthYearLabel: any;\n dateA11yLabel: any;\n monthYearA11yLabel: any;\n };\n};\n\nexport const HC_DATE_FORMATS = new InjectionToken('hc-date-formats');\n","/* eslint-disable @angular-eslint/component-selector */\nimport {\n Component,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n OnChanges,\n Input,\n Output,\n EventEmitter,\n ElementRef,\n NgZone,\n SimpleChanges,\n HostBinding\n} from '@angular/core';\nimport {take} from 'rxjs/operators';\n\n/**\n * Extra CSS classes that can be associated with a calendar cell.\n */\nexport type HcCalendarCellCssClasses = string | string[] | Set | {[key: string]: unknown};\n\n/**\n * An internal class that represents the data corresponding to a single calendar cell.\n * @docs-private\n */\nexport class HcCalendarCell {\n constructor(\n public value: number,\n public displayValue: string,\n public ariaLabel: string,\n public enabled: boolean,\n public cssClasses?: HcCalendarCellCssClasses\n ) {}\n}\n\n/**\n * An internal component used to display calendar data in a table.\n * @docs-private\n */\n@Component({\n selector: '[hc-calendar-body]',\n templateUrl: './calendar-body.component.html',\n styleUrls: ['calendar-body.component.scss'],\n exportAs: 'hcCalendarBody',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class CalendarBodyComponent implements OnChanges {\n @HostBinding('class.hc-calendar-body') _hostClass = true;\n @HostBinding('attr.role') _role = 'grid';\n @HostBinding('attr.aria-readonly') _aria = true;\n\n /** The label for the table. (e.g. \"Jan 2017\"). */\n @Input()\n label: string;\n\n /** The cells to display in the table. */\n @Input()\n rows: HcCalendarCell[][];\n\n /** The value in the table that corresponds to today. */\n @Input()\n todayValue: number;\n\n /** The value in the table that is currently selected. */\n @Input()\n selectedValue: number;\n\n /** The minimum number of free cells needed to fit the label in the first row. */\n @Input()\n labelMinRequiredCells: number;\n\n /** The number of columns in the table. */\n @Input()\n numCols = 7;\n\n /** The cell number of the active cell in the table. */\n @Input()\n activeCell = 0;\n\n /**\n * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be\n * maintained even as the table resizes.\n */\n @Input()\n cellAspectRatio = 1;\n\n /** Emits when a new value is selected. */\n @Output()\n readonly selectedValueChange: EventEmitter = new EventEmitter();\n\n /** The number of blank cells to put at the beginning for the first row. */\n _firstRowOffset: number;\n\n /** Padding for the individual date cells. */\n _cellPadding: string;\n\n /** Width of an individual cell. */\n _cellWidth: string;\n\n constructor(private _elementRef: ElementRef, private _ngZone: NgZone) {}\n\n _cellClicked(cell: HcCalendarCell): void {\n if (cell.enabled) {\n this.selectedValueChange.emit(cell.value);\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n const columnChanges = changes.numCols;\n const {rows, numCols} = this;\n\n if (changes.rows || columnChanges) {\n this._firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;\n }\n\n if (changes.cellAspectRatio || columnChanges || !this._cellPadding) {\n this._cellPadding = `${(50 * this.cellAspectRatio) / numCols}%`;\n }\n\n if (columnChanges || !this._cellWidth) {\n this._cellWidth = `${100 / numCols}%`;\n }\n }\n\n _isActiveCell(rowIndex: number, colIndex: number): boolean {\n let cellNumber = rowIndex * this.numCols + colIndex;\n\n // Account for the fact that the first row may not have as many cells.\n if (rowIndex) {\n cellNumber -= this._firstRowOffset;\n }\n\n return cellNumber === this.activeCell;\n }\n\n /** Focuses the active cell after the microtask queue is empty. */\n _focusActiveCell(): void {\n this._ngZone.runOutsideAngular(() => {\n this._ngZone.onStable\n .asObservable()\n .pipe(take(1))\n .subscribe(() => {\n const activeCell: HTMLElement | null = this._elementRef.nativeElement.querySelector('.hc-calendar-body-active');\n\n if (activeCell) {\n activeCell.focus();\n }\n });\n });\n }\n}\n","\n@for (row of rows; track row; let rowIndex = $index) {\n\n \n @if (rowIndex === 0 && _firstRowOffset) {\n \n } @for (item of row; track item; let colIndex = $index) {\n \n \n {{ item.displayValue }}\n \n \n }\n\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/**\n * @license\n * Copyright Health Catalyst All Rights Reserved.\n *\n * Use of this source code is governed by an Apache-2.0 license that can be\n * found in the LICENSE file at https://raw.githubusercontent.com/HealthCatalyst/Fabric.Cashmere/dev/LICENSE\n */\n\nimport {inject, InjectionToken, LOCALE_ID} from '@angular/core';\nimport {Observable, Subject} from 'rxjs';\n\n/** InjectionToken for datepicker that can be used to override default locale code. */\nexport const HC_DATE_LOCALE = new InjectionToken('HC_DATE_LOCALE', {\n providedIn: 'root',\n factory: HC_DATE_LOCALE_FACTORY\n});\n\n/** @docs-private */\nexport function HC_DATE_LOCALE_FACTORY(): string {\n return inject(LOCALE_ID);\n}\n\n/** Adapts type `D` to be usable as a date by cdk-based components that work with dates. */\nexport abstract class DateAdapter {\n /** The locale to use for all dates. */\n protected locale;\n\n /** A stream that emits when the locale changes. */\n get localeChanges(): Observable {\n return this._localeChanges;\n }\n protected _localeChanges = new Subject();\n\n /**\n * Gets the year component of the given date.\n * @param date The date to extract the year from.\n * @returns The year component.\n */\n abstract getYear(date: D): number;\n\n /**\n * Gets the month component of the given date.\n * @param date The date to extract the month from.\n * @returns The month component (0-indexed, 0 = January).\n */\n abstract getMonth(date: D): number;\n\n /**\n * Gets the date of the month component of the given date.\n * @param date The date to extract the date of the month from.\n * @returns The month component (1-indexed, 1 = first of month).\n */\n abstract getDate(date: D): number;\n\n abstract getHours(date: D): number;\n abstract getMinutes(date: D): number;\n\n /**\n * Gets the day of the week component of the given date.\n * @param date The date to extract the day of the week from.\n * @returns The month component (0-indexed, 0 = Sunday).\n */\n abstract getDayOfWeek(date: D): number;\n\n /**\n * Gets a list of names for the months.\n * @param style The naming style (e.g. long = 'January', short = 'Jan', narrow = 'J').\n * @returns An ordered list of all month names, starting with January.\n */\n abstract getMonthNames(style: 'long' | 'short' | 'narrow'): string[];\n\n /**\n * Gets a list of names for the dates of the month.\n * @returns An ordered list of all date of the month names, starting with '1'.\n */\n abstract getDateNames(): string[];\n\n /**\n * Gets a list of names for the days of the week.\n * @param style The naming style (e.g. long = 'Sunday', short = 'Sun', narrow = 'S').\n * @returns An ordered list of all weekday names, starting with Sunday.\n */\n abstract getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[];\n\n /**\n * Gets the name for the year of the given date.\n * @param date The date to get the year name for.\n * @returns The name of the given year (e.g. '2017').\n */\n abstract getYearName(date: D): string;\n\n /**\n * Gets the first day of the week.\n * @returns The first day of the week (0-indexed, 0 = Sunday).\n */\n abstract getFirstDayOfWeek(): number;\n\n /**\n * Gets the number of days in the month of the given date.\n * @param date The date whose month should be checked.\n * @returns The number of days in the month of the given date.\n */\n abstract getNumDaysInMonth(date: D): number;\n\n /**\n * Clones the given date.\n * @param date The date to clone\n * @returns A new date equal to the given date.\n */\n abstract clone(date: D): D;\n\n /**\n * Creates a date with the given year, month, and date. Does not allow over/under-flow of the\n * month and date.\n * @param year The full year of the date. (e.g. 89 means the year 89, not the year 1989).\n * @param month The month of the date (0-indexed, 0 = January). Must be an integer 0 - 11.\n * @param date The date of month of the date. Must be an integer 1 - length of the given month.\n * @returns The new date, or null if invalid.\n */\n abstract createDate(year: number, month: number, date: number): D;\n\n /**\n * Gets today's date.\n * @returns Today's date.\n */\n abstract today(): D;\n\n /**\n * Parses a date from a user-provided value.\n * @param value The value to parse.\n * @param parseFormat The expected format of the value being parsed\n * (type is implementation-dependent).\n * @returns The parsed date.\n */\n abstract parse(value: any, parseFormat: any): D | null;\n\n /**\n * Formats a date as a string according to the given format.\n * @param date The value to format.\n * @param displayFormat The format to use to display the date as a string.\n * @returns The formatted date string.\n */\n abstract format(date: D, displayFormat: any): string;\n\n /**\n * Adds the given number of years to the date. Years are counted as if flipping 12 pages on the\n * calendar for each year and then finding the closest date in the new month. For example when\n * adding 1 year to Feb 29, 2016, the resulting date will be Feb 28, 2017.\n * @param date The date to add years to.\n * @param years The number of years to add (may be negative).\n * @returns A new date equal to the given one with the specified number of years added.\n */\n abstract addCalendarYears(date: D, years: number): D;\n\n /**\n * Adds the given number of months to the date. Months are counted as if flipping a page on the\n * calendar for each month and then finding the closest date in the new month. For example when\n * adding 1 month to Jan 31, 2017, the resulting date will be Feb 28, 2017.\n * @param date The date to add months to.\n * @param months The number of months to add (may be negative).\n * @returns A new date equal to the given one with the specified number of months added.\n */\n abstract addCalendarMonths(date: D, months: number): D;\n\n /**\n * Adds the given number of days to the date. Days are counted as if moving one cell on the\n * calendar for each day.\n * @param date The date to add days to.\n * @param days The number of days to add (may be negative).\n * @returns A new date equal to the given one with the specified number of days added.\n */\n abstract addCalendarDays(date: D, days: number): D;\n\n /**\n * Gets the RFC 3339 compatible string (https://tools.ietf.org/html/rfc3339) for the given date.\n * This method is used to generate date strings that are compatible with native HTML attributes\n * such as the `min` or `max` attribute of an ``.\n * @param date The date to get the ISO date string for.\n * @returns The ISO date string date string.\n */\n abstract toIso8601(date: D): string;\n\n /**\n * Checks whether the given object is considered a date instance by this DateAdapter.\n * @param obj The object to check\n * @returns Whether the object is a date instance.\n */\n abstract isDateInstance(obj: any): boolean;\n\n /**\n * Checks whether the given date is valid.\n * @param date The date to check.\n * @returns Whether the date is valid.\n */\n abstract isValid(date: D): boolean;\n\n /**\n * Gets date instance that is not valid.\n * @returns An invalid date.\n */\n abstract invalid(): D;\n\n /**\n * Attempts to deserialize a value to a valid date object. This is different from parsing in that\n * deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601\n * string). The default implementation does not allow any deserialization, it simply checks that\n * the given value is already a valid date object or null. The `` will call this\n * method on all of it's `@Input()` properties that accept dates. It is therefore possible to\n * support passing values from your backend directly to these properties by overriding this method\n * to also deserialize the format used by your backend.\n * @param value The value to be deserialized into a date object.\n * @returns The deserialized date object, either a valid date, null if the value can be\n * deserialized into a null date (e.g. the empty string), or an invalid date.\n */\n deserialize(value: any): D | null {\n if (value == null || (this.isDateInstance(value) && this.isValid(value))) {\n return value;\n }\n return this.invalid();\n }\n\n /**\n * Sets the locale used for all dates.\n * @param locale The new locale.\n */\n setLocale(locale: any) {\n this.locale = locale;\n this._localeChanges.next();\n }\n\n /**\n * Compares two dates.\n * @param first The first date to compare.\n * @param second The second date to compare.\n * @returns 0 if the dates are equal, a number less than 0 if the first date is earlier,\n * a number greater than 0 if the first date is later.\n */\n compareDate(first: D, second: D): number {\n return (\n this.getYear(first) - this.getYear(second) ||\n this.getMonth(first) - this.getMonth(second) ||\n this.getDate(first) - this.getDate(second) ||\n this.getHours(first) - this.getHours(second) ||\n this.getMinutes(first) - this.getMinutes(second)\n );\n }\n\n /**\n * Checks if two dates are equal.\n * @param first The first date to check.\n * @param second The second date to check.\n * @returns Whether the two dates are equal.\n * Null dates are considered equal to other null dates.\n */\n sameDate(first: D | null, second: D | null): boolean {\n if (first && second) {\n const firstValid = this.isValid(first);\n const secondValid = this.isValid(second);\n if (firstValid && secondValid) {\n return !this.compareDate(first, second);\n }\n return firstValid === secondValid;\n }\n return first === second;\n }\n\n /**\n * Clamp the given date between min and max dates.\n * @param date The date to clamp.\n * @param min The minimum value to allow. If null or omitted no min is enforced.\n * @param max The maximum value to allow. If null or omitted no max is enforced.\n * @returns `min` if `date` is less than `min`, `max` if date is greater than `max`,\n * otherwise `date`.\n */\n clampDate(date: D, min?: D | null, max?: D | null): D {\n if (min && this.compareDate(date, min) < 0) {\n return min;\n }\n if (max && this.compareDate(date, max) > 0) {\n return max;\n }\n return date;\n }\n}\n","import {\n Component,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n AfterContentInit,\n Input,\n Output,\n EventEmitter,\n ViewChild,\n ChangeDetectorRef,\n Optional\n} from '@angular/core';\nimport {DateAdapter} from '../datetime/date-adapter';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {createMissingDateImplError} from '../datetime/datepicker-errors';\nimport {D} from '../datetime/date-formats';\nimport {CalendarBodyComponent, HcCalendarCell} from '../calendar-body/calendar-body.component';\n\nexport const yearsPerPage = 24;\n\nexport const yearsPerRow = 4;\n\n@Component({\n selector: 'hc-multi-year-view',\n templateUrl: './multi-year-view.component.html',\n exportAs: 'hcMultiYearView',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class MultiYearViewComponent implements AfterContentInit {\n /** The date to display in this multi-year view (everything other than the year is ignored). */\n @Input()\n get activeDate(): D {\n return this._activeDate;\n }\n set activeDate(value: D) {\n const oldActiveDate = this._activeDate;\n const validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();\n this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);\n if (\n Math.floor(this._dateAdapter.getYear(oldActiveDate) / yearsPerPage) !==\n Math.floor(this._dateAdapter.getYear(this._activeDate) / yearsPerPage)\n ) {\n this._init();\n }\n }\n private _activeDate: D;\n\n /** The currently selected date. */\n @Input()\n get selected(): D | null {\n return this._selected;\n }\n set selected(value: D | null) {\n this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n this._selectedYear = this._selected && this._dateAdapter.getYear(this._selected);\n }\n private _selected: D | null;\n\n /** The minimum selectable date. */\n @Input()\n get minDate(): D | null {\n return this._minDate;\n }\n set minDate(value: D | null) {\n this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n private _minDate: D | null;\n\n /** The maximum selectable date. */\n @Input()\n get maxDate(): D | null {\n return this._maxDate;\n }\n set maxDate(value: D | null) {\n this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n private _maxDate: D | null;\n\n /** A function used to filter which dates are selectable. */\n @Input()\n dateFilter: (date: D) => boolean;\n\n /** Emits when a new year is selected. */\n @Output()\n readonly selectedChange: EventEmitter = new EventEmitter();\n\n /** Emits the selected year. This doesn't imply a change on the selected date */\n @Output()\n readonly yearSelected: EventEmitter = new EventEmitter();\n\n /** Emits when any date is activated. */\n @Output()\n readonly activeDateChange: EventEmitter = new EventEmitter();\n\n /** The body of calendar table */\n @ViewChild(CalendarBodyComponent)\n _hcCalendarBody: CalendarBodyComponent;\n\n /** Grid of calendar cells representing the currently displayed years. */\n _years: HcCalendarCell[][];\n\n /** The year that today falls on. */\n _todayYear: number;\n\n /** The year of the selected date. Null if the selected date is null. */\n _selectedYear: number | null;\n\n constructor(\n private _changeDetectorRef: ChangeDetectorRef,\n @Optional() public _dateAdapter: DateAdapter,\n @Optional() private _dir?: Directionality\n ) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n\n this._activeDate = this._dateAdapter.today();\n }\n\n ngAfterContentInit(): void {\n this._init();\n }\n\n /** Initializes this multi-year view. */\n _init(): void {\n this._todayYear = this._dateAdapter.getYear(this._dateAdapter.today());\n const activeYear = this._dateAdapter.getYear(this._activeDate);\n const activeOffset = activeYear % yearsPerPage;\n this._years = [];\n for (let i = 0, row: number[] = []; i < yearsPerPage; i++) {\n row.push(activeYear - activeOffset + i);\n if (row.length === yearsPerRow) {\n this._years.push(row.map(year => this._createCellForYear(year)));\n row = [];\n }\n }\n this._changeDetectorRef.markForCheck();\n }\n\n /** Handles when a new year is selected. */\n _yearSelected(year: number): void {\n this.yearSelected.emit(this._dateAdapter.createDate(year, 0, 1));\n const month = this._dateAdapter.getMonth(this.activeDate);\n const daysInMonth = this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, month, 1));\n this.selectedChange.emit(\n this._dateAdapter.createDate(year, month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth))\n );\n }\n\n /** Handles keydown events on the calendar body when calendar is in multi-year view. */\n _handleCalendarBodyKeydown(event: KeyboardEvent): void {\n // disabled ones from being selected. This may not be ideal, we should look into whether\n // navigation should skip over disabled dates, and if so, how to implement that efficiently.\n\n const oldActiveDate = this._activeDate;\n const isRtl = this._isRtl();\n\n switch (event.key) {\n case 'ArrowLeft':\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? 1 : -1);\n break;\n case 'ArrowRight':\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? -1 : 1);\n break;\n case 'ArrowUp':\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -yearsPerRow);\n break;\n case 'ArrowDown':\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerRow);\n break;\n case 'Home':\n this.activeDate = this._dateAdapter.addCalendarYears(\n this._activeDate,\n -this._dateAdapter.getYear(this._activeDate) % yearsPerPage\n );\n break;\n case 'End':\n this.activeDate = this._dateAdapter.addCalendarYears(\n this._activeDate,\n yearsPerPage - (this._dateAdapter.getYear(this._activeDate) % yearsPerPage) - 1\n );\n break;\n case 'PageUp':\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);\n break;\n case 'PageDown':\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);\n break;\n case 'Enter':\n case ' ':\n this._yearSelected(this._dateAdapter.getYear(this._activeDate));\n break;\n default:\n // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n return;\n }\n\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n\n this._focusActiveCell();\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n\n _getActiveCell(): number {\n return this._dateAdapter.getYear(this.activeDate) % yearsPerPage;\n }\n\n /** Focuses the active cell after the microtask queue is empty. */\n _focusActiveCell(): void {\n this._hcCalendarBody._focusActiveCell();\n }\n\n /** Creates an hcCalendarCell for the given year. */\n private _createCellForYear(year: number) {\n const yearName = this._dateAdapter.getYearName(this._dateAdapter.createDate(year, 0, 1));\n return new HcCalendarCell(year, yearName, yearName, this._shouldEnableYear(year));\n }\n\n /** Whether the given year is enabled. */\n private _shouldEnableYear(year: number) {\n // disable if the year is greater than maxDate lower than minDate\n if (\n year === undefined ||\n year === null ||\n (this.maxDate && year > this._dateAdapter.getYear(this.maxDate)) ||\n (this.minDate && year < this._dateAdapter.getYear(this.minDate))\n ) {\n return false;\n }\n\n // enable if it reaches here and there's no filter defined\n if (!this.dateFilter) {\n return true;\n }\n\n const firstOfYear = this._dateAdapter.createDate(year, 0, 1);\n\n // If any date in the year is enabled count the year as enabled.\n for (let date = firstOfYear; this._dateAdapter.getYear(date) === year; date = this._dateAdapter.addCalendarDays(date, 1)) {\n if (this.dateFilter(date)) {\n return true;\n }\n }\n\n return false;\n }\n\n /**\n * @param obj The object to check.\n * @returns The given object if it is both a date instance and valid, otherwise null.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _getValidDateOrNull(obj: any): D | null {\n return this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj) ? obj : null;\n }\n\n /** Determines whether the user has the RTL layout direction. */\n private _isRtl() {\n return this._dir && this._dir.value === 'rtl';\n }\n}\n","\n \n \n \n \n \n
\n ","import {\n Component,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n AfterContentInit,\n Input,\n Output,\n EventEmitter,\n ViewChild,\n ChangeDetectorRef,\n Optional,\n Inject\n} from '@angular/core';\nimport {HcCalendarCellCssClasses, CalendarBodyComponent, HcCalendarCell} from '../calendar-body/calendar-body.component';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {createMissingDateImplError} from '../datetime/datepicker-errors';\nimport {D, HC_DATE_FORMATS, HcDateFormats} from '../datetime/date-formats';\nimport {DateAdapter} from '../datetime/date-adapter';\n\nconst DAYS_PER_WEEK = 7;\n\n/**\n * An internal component used to display a single month in the datepicker.\n * @docs-private\n */\n@Component({\n selector: 'hc-month-view',\n templateUrl: './month-view.component.html',\n exportAs: 'hcMonthView',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class MonthViewComponent implements AfterContentInit {\n /**\n * The date to display in this month view (everything other than the month and year is ignored).\n */\n @Input()\n get activeDate(): D {\n return this._activeDate;\n }\n set activeDate(value: D) {\n const oldActiveDate = this._activeDate;\n const validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();\n this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);\n if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {\n this._init();\n }\n }\n private _activeDate: D;\n\n /** The currently selected date. */\n @Input()\n get selected(): D | null {\n return this._selected;\n }\n set selected(value: D | null) {\n this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n this._selectedDate = this._getDateInCurrentMonth(this._selected);\n }\n private _selected: D | null;\n\n /** The minimum selectable date. */\n @Input()\n get minDate(): D | null {\n return this._minDate;\n }\n set minDate(value: D | null) {\n this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n private _minDate: D | null;\n\n /** The maximum selectable date. */\n @Input()\n get maxDate(): D | null {\n return this._maxDate;\n }\n set maxDate(value: D | null) {\n this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n private _maxDate: D | null;\n\n /** Function used to filter which dates are selectable. */\n @Input()\n dateFilter: (date: D) => boolean;\n\n /** Function that can be used to add custom CSS classes to dates. */\n @Input()\n dateClass: (date: D) => HcCalendarCellCssClasses;\n\n /** Emits when a new date is selected. */\n @Output()\n readonly selectedChange: EventEmitter = new EventEmitter();\n\n /** Emits when any date is selected. */\n @Output()\n readonly _userSelection: EventEmitter = new EventEmitter();\n\n /** Emits when any date is activated. */\n @Output()\n readonly activeDateChange: EventEmitter = new EventEmitter();\n\n /** The body of calendar table */\n @ViewChild(CalendarBodyComponent)\n _hcCalendarBody: CalendarBodyComponent;\n\n /** The label for this month (e.g. \"January 2017\"). */\n _monthLabel: string;\n\n /** Grid of calendar cells representing the dates of the month. */\n _weeks: HcCalendarCell[][];\n\n /** The number of blank cells in the first row before the 1st of the month. */\n _firstWeekOffset: number;\n\n /**\n * The date of the month that the currently selected Date falls on.\n * Null if the currently selected Date is in another month.\n */\n _selectedDate: number | null;\n\n /** The date of the month that today falls on. Null if today is in another month. */\n _todayDate: number | null;\n\n /** The names of the weekdays. */\n _weekdays: {long: string; narrow: string}[];\n\n constructor(\n private _changeDetectorRef: ChangeDetectorRef,\n @Optional()\n @Inject(HC_DATE_FORMATS)\n private _dateFormats: HcDateFormats,\n @Optional() public _dateAdapter: DateAdapter,\n @Optional() private _dir?: Directionality\n ) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n if (!this._dateFormats) {\n throw createMissingDateImplError('HC_DATE_FORMATS');\n }\n\n const firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();\n const narrowWeekdays = this._dateAdapter.getDayOfWeekNames('short');\n const longWeekdays = this._dateAdapter.getDayOfWeekNames('long');\n\n // Rotate the labels for days of the week based on the configured first day of the week.\n const weekdays = longWeekdays.map((long, i) => {\n return {long, narrow: narrowWeekdays[i]};\n });\n this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));\n\n this._activeDate = this._dateAdapter.today();\n }\n\n ngAfterContentInit(): void {\n this._init();\n }\n\n /** Handles when a new date is selected. */\n _dateSelected(date: number): void {\n if (this._selectedDate !== date) {\n const selectedYear = this._dateAdapter.getYear(this.activeDate);\n const selectedMonth = this._dateAdapter.getMonth(this.activeDate);\n const selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);\n\n if (this._selected) {\n selectedDate.setHours(this._selected.getHours());\n selectedDate.setMinutes(this._selected.getMinutes());\n }\n\n this.selectedChange.emit(selectedDate);\n }\n\n this._userSelection.emit();\n }\n\n /** Handles keydown events on the calendar body when calendar is in month view. */\n _handleCalendarBodyKeydown(event: KeyboardEvent): void {\n // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent\n // disabled ones from being selected. This may not be ideal, we should look into whether\n // navigation should skip over disabled dates, and if so, how to implement that efficiently.\n\n const oldActiveDate = this._activeDate;\n const isRtl = this._isRtl();\n\n switch (event.key) {\n case 'ArrowLeft':\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? 1 : -1);\n break;\n case 'ArrowRight':\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? -1 : 1);\n break;\n case 'ArrowUp':\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, -7);\n break;\n case 'ArrowDown':\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 7);\n break;\n case 'Home':\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 1 - this._dateAdapter.getDate(this._activeDate));\n break;\n case 'End':\n this.activeDate = this._dateAdapter.addCalendarDays(\n this._activeDate,\n this._dateAdapter.getNumDaysInMonth(this._activeDate) - this._dateAdapter.getDate(this._activeDate)\n );\n break;\n case 'PageUp':\n this.activeDate = event.altKey\n ? this._dateAdapter.addCalendarYears(this._activeDate, -1)\n : this._dateAdapter.addCalendarMonths(this._activeDate, -1);\n break;\n case 'PageDown':\n this.activeDate = event.altKey\n ? this._dateAdapter.addCalendarYears(this._activeDate, 1)\n : this._dateAdapter.addCalendarMonths(this._activeDate, 1);\n break;\n case 'Enter':\n case ' ':\n if (!this.dateFilter || this.dateFilter(this._activeDate)) {\n this._dateSelected(this._dateAdapter.getDate(this._activeDate));\n this._userSelection.emit();\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n return;\n default:\n // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n return;\n }\n\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n\n this._focusActiveCell();\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n\n /** Initializes this month view. */\n _init(): void {\n this._selectedDate = this._getDateInCurrentMonth(this.selected);\n this._todayDate = this._getDateInCurrentMonth(this._dateAdapter.today());\n this._monthLabel = this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)].toLocaleUpperCase();\n\n const firstOfMonth = this._dateAdapter.createDate(\n this._dateAdapter.getYear(this.activeDate),\n this._dateAdapter.getMonth(this.activeDate),\n 1\n );\n this._firstWeekOffset =\n (DAYS_PER_WEEK + this._dateAdapter.getDayOfWeek(firstOfMonth) - this._dateAdapter.getFirstDayOfWeek()) % DAYS_PER_WEEK;\n\n this._createWeekCells();\n this._changeDetectorRef.markForCheck();\n }\n\n /** Focuses the active cell after the microtask queue is empty. */\n _focusActiveCell(): void {\n this._hcCalendarBody._focusActiveCell();\n }\n\n /** Creates hcCalendarCells for the dates in this month. */\n private _createWeekCells() {\n const daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate);\n const dateNames = this._dateAdapter.getDateNames();\n this._weeks = [[]];\n for (let i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {\n if (cell === DAYS_PER_WEEK) {\n this._weeks.push([]);\n cell = 0;\n }\n const date = this._dateAdapter.createDate(\n this._dateAdapter.getYear(this.activeDate),\n this._dateAdapter.getMonth(this.activeDate),\n i + 1\n );\n const enabled = this._shouldEnableDate(date);\n const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);\n const cellClasses = this.dateClass ? this.dateClass(date) : undefined;\n\n this._weeks[this._weeks.length - 1].push(new HcCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses));\n }\n }\n\n /** Date filter for the month */\n private _shouldEnableDate(date: D): boolean {\n return (\n !!date &&\n (!this.dateFilter || this.dateFilter(date)) &&\n (!this.minDate || this._dateAdapter.compareDate(date, this.minDate) >= 0) &&\n (!this.maxDate || this._dateAdapter.compareDate(date, this.maxDate) <= 0)\n );\n }\n\n /**\n * Gets the date in this month that the given Date falls on.\n * Returns null if the given Date is in another month.\n */\n private _getDateInCurrentMonth(date: D | null): number | null {\n return date && this._hasSameMonthAndYear(date, this.activeDate) ? this._dateAdapter.getDate(date) : null;\n }\n\n /** Checks whether the 2 dates are non-null and fall within the same month of the same year. */\n private _hasSameMonthAndYear(d1: D | null, d2: D | null): boolean {\n return !!(\n d1 &&\n d2 &&\n this._dateAdapter.getMonth(d1) === this._dateAdapter.getMonth(d2) &&\n this._dateAdapter.getYear(d1) === this._dateAdapter.getYear(d2)\n );\n }\n\n /**\n * @param obj The object to check.\n * @returns The given object if it is both a date instance and valid, otherwise null.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _getValidDateOrNull(obj: any): D | null {\n return this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj) ? obj : null;\n }\n\n /** Determines whether the user has the RTL layout direction. */\n private _isRtl() {\n return this._dir && this._dir.value === 'rtl';\n }\n}\n","\n \n \n @for (day of _weekdays; track day) {\n \n }\n \n \n \n \n \n \n
{{ day.narrow }}
\n","import {\n Component,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n AfterContentInit,\n Input,\n Output,\n EventEmitter,\n ViewChild,\n ChangeDetectorRef,\n Optional,\n Inject\n} from '@angular/core';\nimport {CalendarBodyComponent, HcCalendarCell} from '../calendar-body/calendar-body.component';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {createMissingDateImplError} from '../datetime/datepicker-errors';\nimport {D, HC_DATE_FORMATS, HcDateFormats} from '../datetime/date-formats';\nimport {DateAdapter} from '../datetime/date-adapter';\n\n/**\n * An internal component used to display a single year in the datepicker.\n * @docs-private\n */\n@Component({\n selector: 'hc-year-view',\n templateUrl: './year-view.component.html',\n exportAs: 'hcYearView',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class YearViewComponent implements AfterContentInit {\n /** The date to display in this year view (everything other than the year is ignored). */\n @Input()\n get activeDate(): D {\n return this._activeDate;\n }\n set activeDate(value: D) {\n const oldActiveDate = this._activeDate;\n const validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();\n this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);\n if (this._dateAdapter.getYear(oldActiveDate) !== this._dateAdapter.getYear(this._activeDate)) {\n this._init();\n }\n }\n private _activeDate: D;\n\n /** The currently selected date. */\n @Input()\n get selected(): D | null {\n return this._selected;\n }\n set selected(value: D | null) {\n this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n this._selectedMonth = this._getMonthInCurrentYear(this._selected);\n }\n private _selected: D | null;\n\n /** The minimum selectable date. */\n @Input()\n get minDate(): D | null {\n return this._minDate;\n }\n set minDate(value: D | null) {\n this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n private _minDate: D | null;\n\n /** The maximum selectable date. */\n @Input()\n get maxDate(): D | null {\n return this._maxDate;\n }\n set maxDate(value: D | null) {\n this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n private _maxDate: D | null;\n\n /** A function used to filter which dates are selectable. */\n @Input()\n dateFilter: (date: D) => boolean;\n\n /** Emits when a new month is selected. */\n @Output()\n readonly selectedChange: EventEmitter = new EventEmitter();\n\n /** Emits the selected month. This doesn't imply a change on the selected date */\n @Output()\n readonly monthSelected: EventEmitter = new EventEmitter();\n\n /** Emits when any date is activated. */\n @Output()\n readonly activeDateChange: EventEmitter = new EventEmitter();\n\n /** The body of calendar table */\n @ViewChild(CalendarBodyComponent)\n _hcCalendarBody: CalendarBodyComponent;\n\n /** Grid of calendar cells representing the months of the year. */\n _months: HcCalendarCell[][];\n\n /** The label for this year (e.g. \"2017\"). */\n _yearLabel: string;\n\n /** The month in this year that today falls on. Null if today is in a different year. */\n _todayMonth: number | null;\n\n /**\n * The month in this year that the selected Date falls on.\n * Null if the selected Date is in a different year.\n */\n _selectedMonth: number | null;\n\n constructor(\n private _changeDetectorRef: ChangeDetectorRef,\n @Optional()\n @Inject(HC_DATE_FORMATS)\n private _dateFormats: HcDateFormats,\n @Optional() public _dateAdapter: DateAdapter,\n @Optional() private _dir?: Directionality\n ) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n if (!this._dateFormats) {\n throw createMissingDateImplError('HC_DATE_FORMATS');\n }\n\n this._activeDate = this._dateAdapter.today();\n }\n\n ngAfterContentInit(): void {\n this._init();\n }\n\n /** Handles when a new month is selected. */\n _monthSelected(month: number): void {\n const normalizedDate = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);\n\n this.monthSelected.emit(normalizedDate);\n\n const daysInMonth = this._dateAdapter.getNumDaysInMonth(normalizedDate);\n\n this.selectedChange.emit(\n this._dateAdapter.createDate(\n this._dateAdapter.getYear(this.activeDate),\n month,\n Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth)\n )\n );\n }\n\n /** Handles keydown events on the calendar body when calendar is in year view. */\n _handleCalendarBodyKeydown(event: KeyboardEvent): void {\n // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent\n // disabled ones from being selected. This may not be ideal, we should look into whether\n // navigation should skip over disabled dates, and if so, how to implement that efficiently.\n\n const oldActiveDate = this._activeDate;\n const isRtl = this._isRtl();\n\n switch (event.key) {\n case 'ArrowLeft':\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? 1 : -1);\n break;\n case 'ArrowRight':\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? -1 : 1);\n break;\n case 'ArrowUp':\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -4);\n break;\n case 'ArrowDown':\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 4);\n break;\n case 'Home':\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -this._dateAdapter.getMonth(this._activeDate));\n break;\n case 'End':\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 11 - this._dateAdapter.getMonth(this._activeDate));\n break;\n case 'PageUp':\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);\n break;\n case 'PageDown':\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);\n break;\n case 'Enter':\n case ' ':\n this._monthSelected(this._dateAdapter.getMonth(this._activeDate));\n break;\n default:\n // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n return;\n }\n\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n\n this._focusActiveCell();\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n\n /** Initializes this year view. */\n _init(): void {\n this._selectedMonth = this._getMonthInCurrentYear(this.selected);\n this._todayMonth = this._getMonthInCurrentYear(this._dateAdapter.today());\n this._yearLabel = this._dateAdapter.getYearName(this.activeDate);\n\n const monthNames = this._dateAdapter.getMonthNames('short');\n // First row of months only contains 5 elements so we can fit the year label on the same row.\n this._months = [\n [0, 1, 2, 3],\n [4, 5, 6, 7],\n [8, 9, 10, 11]\n ].map(row => row.map(month => this._createCellForMonth(month, monthNames[month])));\n this._changeDetectorRef.markForCheck();\n }\n\n /** Focuses the active cell after the microtask queue is empty. */\n _focusActiveCell(): void {\n this._hcCalendarBody._focusActiveCell();\n }\n\n /**\n * Gets the month in this year that the given Date falls on.\n * Returns null if the given Date is in another year.\n */\n private _getMonthInCurrentYear(date: D | null) {\n return date && this._dateAdapter.getYear(date) === this._dateAdapter.getYear(this.activeDate)\n ? this._dateAdapter.getMonth(date)\n : null;\n }\n\n /** Creates an hcCalendarCell for the given month. */\n private _createCellForMonth(month: number, monthName: string) {\n const ariaLabel = this._dateAdapter.format(\n this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1),\n this._dateFormats.display.monthYearA11yLabel\n );\n return new HcCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month));\n }\n\n /** Whether the given month is enabled. */\n private _shouldEnableMonth(month: number) {\n const activeYear = this._dateAdapter.getYear(this.activeDate);\n\n if (\n month === undefined ||\n month === null ||\n this._isYearAndMonthAfterMaxDate(activeYear, month) ||\n this._isYearAndMonthBeforeMinDate(activeYear, month)\n ) {\n return false;\n }\n\n if (!this.dateFilter) {\n return true;\n }\n\n const firstOfMonth = this._dateAdapter.createDate(activeYear, month, 1);\n\n // If any date in the month is enabled count the month as enabled.\n for (let date = firstOfMonth; this._dateAdapter.getMonth(date) === month; date = this._dateAdapter.addCalendarDays(date, 1)) {\n if (this.dateFilter(date)) {\n return true;\n }\n }\n\n return false;\n }\n\n /**\n * Tests whether the combination month/year is after this.maxDate, considering\n * just the month and year of this.maxDate\n */\n private _isYearAndMonthAfterMaxDate(year: number, month: number) {\n if (this.maxDate) {\n const maxYear = this._dateAdapter.getYear(this.maxDate);\n const maxMonth = this._dateAdapter.getMonth(this.maxDate);\n\n return year > maxYear || (year === maxYear && month > maxMonth);\n }\n\n return false;\n }\n\n /**\n * Tests whether the combination month/year is before this.minDate, considering\n * just the month and year of this.minDate\n */\n private _isYearAndMonthBeforeMinDate(year: number, month: number) {\n if (this.minDate) {\n const minYear = this._dateAdapter.getYear(this.minDate);\n const minMonth = this._dateAdapter.getMonth(this.minDate);\n\n return year < minYear || (year === minYear && month < minMonth);\n }\n\n return false;\n }\n\n /**\n * @param obj The object to check.\n * @returns The given object if it is both a date instance and valid, otherwise null.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _getValidDateOrNull(obj: any): D | null {\n return this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj) ? obj : null;\n }\n\n /** Determines whether the user has the RTL layout direction. */\n private _isRtl() {\n return this._dir && this._dir.value === 'rtl';\n }\n}\n","\n \n \n \n \n \n
\n","/**\n * @license\n * Copyright Health Catalyst All Rights Reserved.\n *\n * Use of this source code is governed by an Apache-2.0 license that can be\n * found in the LICENSE file at https://raw.githubusercontent.com/HealthCatalyst/Fabric.Cashmere/dev/LICENSE\n */\n\nimport {Injectable} from '@angular/core';\nimport {Subject} from 'rxjs';\n\n/** Datepicker data that requires internationalization. */\n@Injectable({providedIn: 'root'})\nexport class HcDatepickerIntl {\n /**\n * Stream that emits whenever the labels here are changed. Use this to notify\n * components if the labels have changed after initialization.\n */\n readonly changes: Subject = new Subject();\n\n /** A label for the calendar popup (used by screen readers). */\n calendarLabel = 'Calendar';\n\n /** A label for the button used to open the calendar popup (used by screen readers). */\n openCalendarLabel = 'Open calendar';\n\n /** A label for the current month button (used by screen readers). */\n currentMonthLabel = 'Current month';\n\n /** A label for the previous month button (used by screen readers). */\n prevMonthLabel = 'Previous month';\n\n /** A label for the next month button (used by screen readers). */\n nextMonthLabel = 'Next month';\n\n /** A label for the previous year button (used by screen readers). */\n prevYearLabel = 'Previous year';\n\n /** A label for the next year button (used by screen readers). */\n nextYearLabel = 'Next year';\n\n /** A label for the previous multi-year button (used by screen readers). */\n prevMultiYearLabel = 'Previous 20 years';\n\n /** A label for the next multi-year button (used by screen readers). */\n nextMultiYearLabel = 'Next 20 years';\n\n /** A label for the 'switch to month view' button (used by screen readers). */\n switchToMonthViewLabel = 'Choose date';\n\n /** A label for the 'switch to year view' button (used by screen readers). */\n switchToMultiYearViewLabel = 'Choose month and year';\n\n /** A label for the 'jump to the current date' button (used by screen readers). */\n switchToTodayLabel = 'Jump to the current date';\n}\n","import {\n Directive,\n ElementRef,\n HostBinding,\n HostListener,\n Input,\n Optional,\n Self,\n forwardRef,\n Output,\n EventEmitter,\n AfterViewInit,\n OnDestroy,\n ChangeDetectorRef\n} from '@angular/core';\nimport {parseBooleanAttribute} from '../util';\nimport {HcFormControlComponent} from '../form-field/hc-form-control.component';\nimport {FormGroupDirective, NgControl, NgForm} from '@angular/forms';\nimport {delay, takeUntil} from 'rxjs/operators';\nimport {Subject} from 'rxjs';\n\nexport function getUnsupportedHCInputType(type: string): Error {\n return new Error(`hc-input doesn't support the following type: ${type}`);\n}\n\nexport function validateValidationType(type: string): void {\n if (supportedValidation.indexOf(type) < 0) {\n throw Error('Unsupported validation type: ' + type);\n }\n}\n\nlet uniqueId = 1;\n\nconst unsupportedTypes = ['button', 'checkbox', 'file', 'hidden', 'image', 'radio', 'reset'];\nconst supportedValidation = ['onBlur', 'onChange'];\n\n/** Directive that allows a native input to work inside a HcFormFieldComponent */\n@Directive({\n selector: '[hcInput]',\n providers: [{ provide: HcFormControlComponent, useExisting: forwardRef(() => InputDirective) }],\n standalone: false\n})\nexport class InputDirective extends HcFormControlComponent implements AfterViewInit, OnDestroy {\n private _focused = false;\n private _mobile = false;\n private _validationType = 'onBlur';\n private _uniqueInputId = `hc-input-${uniqueId++}`;\n private _form: NgForm | FormGroupDirective | null;\n private _unsubscribe = new Subject();\n\n _componentId = this._uniqueInputId;\n\n /** Input type of the element. */\n @Input()\n get type(): string {\n return this._type;\n }\n\n set type(type: string) {\n if (unsupportedTypes.indexOf(type) > -1) {\n throw getUnsupportedHCInputType(type);\n }\n this._type = type;\n\n // textArea doesn't have type property\n if (!this._isTextArea()) {\n this._elementRef.nativeElement.type = this.type;\n }\n }\n\n private _type = 'input';\n\n /** Element id. */\n @Input()\n get id(): string {\n return this._componentId || this._uniqueInputId;\n }\n\n set id(idVal: string) {\n this._componentId = idVal ? idVal : this._uniqueInputId;\n }\n\n /** Sets input element as readonly. */\n @Input()\n get readonly(): boolean {\n return this._readonly;\n }\n\n set readonly(isReadOnly: boolean) {\n this._readonly = parseBooleanAttribute(isReadOnly);\n }\n\n private _readonly = false;\n\n /** Disables the input element. */\n @Input()\n get disabled(): boolean {\n if (this._ngControl && this._ngControl.disabled) {\n return this._ngControl.disabled;\n }\n return this._isDisabled;\n }\n\n set disabled(disabledInput: boolean) {\n this._isDisabled = parseBooleanAttribute(disabledInput);\n\n if (this._focused) {\n this._focused = false;\n // TODO: trigger state change\n }\n }\n\n /** Sets required attribute. */\n @Input()\n get required(): boolean {\n return this._isRequired;\n }\n\n set required(requiredInput: boolean) {\n this._isRequired = parseBooleanAttribute(requiredInput);\n }\n\n /** Fires when the input either gets focus or loses focus. */\n @Output() focusChanged = new EventEmitter();\n\n /** Fires on either a `change` or `input` event type from the input. */\n @Output() inputEvent = new EventEmitter();\n\n @HostBinding('class.hc-input')\n _hostHcInputClass = true;\n\n @HostBinding('attr.id')\n get _hostId(): string {\n return this._componentId || this._uniqueInputId;\n }\n\n @HostBinding('readonly')\n get _hostReadOnly(): boolean {\n return this.readonly;\n }\n\n @HostBinding('disabled')\n get _hostDisabled(): boolean {\n return this.disabled;\n }\n\n @HostBinding('required')\n get _hostRequired(): boolean {\n return this._isRequired;\n }\n\n @HostListener('blur')\n _onBlur(): void {\n if (this._ngControl && this._ngControl.control) {\n this._ngControl.control.markAsTouched();\n }\n this._changeFocus(false);\n this._updateErrorState();\n }\n\n @HostListener('focus')\n _onFocus(): void {\n this._changeFocus(true);\n }\n\n /** Sets value of the input element */\n @Input()\n get value(): string {\n return this._elementRef.nativeElement.value;\n }\n\n set value(value: string) {\n if (value !== this.value) {\n this._elementRef.nativeElement.value = value;\n }\n }\n\n @HostListener('input', ['$event'])\n _inputEvent(event: Event): void {\n if (this.validationType === 'onChange') {\n this._ngControl.control?.markAsTouched();\n }\n\n this.inputEvent.emit(event);\n }\n\n @HostListener('change', ['$event'])\n _changeEvent(event: Event): void {\n this.inputEvent.emit(event);\n if (this.validationType === 'onChange') {\n this._updateErrorState();\n }\n }\n\n /** Determines when validation checks run. Choose from: `'onBlur' | 'onChange' |`. *Defaults to `onBlur`.* */\n @Input()\n get validationType(): string {\n return this._validationType;\n }\n\n set validationType(type: string) {\n validateValidationType(type);\n this._validationType = type;\n }\n\n /** Sets whether the input should be sized for small screens (if true, overrides the `tight` param on FormField) */\n @Input()\n get mobile(): boolean {\n return this._mobile;\n }\n\n set mobile(value: boolean) {\n if (value !== this._mobile) {\n this._mobile = value;\n this.mobileChange.emit(this._mobile);\n }\n }\n\n /** Output for two-way binding on the `mobile` param. Emits when the property is updated */\n @Output()\n mobileChange = new EventEmitter();\n\n ngAfterViewInit(): void {\n if (this._ngControl?.statusChanges) {\n // delay() is necessary to make sure any form or control state changes have been applied before rechecking error states\n this._ngControl.statusChanges.pipe(delay(0), takeUntil(this._unsubscribe)).subscribe(() => this._updateErrorState());\n }\n if (this._form) {\n this._form.ngSubmit.pipe(takeUntil(this._unsubscribe)).subscribe(() => this._updateErrorState());\n }\n\n /** Monkey patching the markAsTouched function to call error state checking because there is not an event for touched changes */\n if (this._ngControl && this._ngControl.control) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const self = this;\n const originalMarkMethod = this._ngControl.control.markAsTouched;\n this._ngControl.control.markAsTouched = function () {\n // eslint-disable-next-line prefer-rest-params\n originalMarkMethod.apply(this, arguments);\n self._updateErrorState();\n };\n\n const originalMarkAllMethod = this._ngControl.control.markAllAsTouched;\n this._ngControl.control.markAllAsTouched = function () {\n // eslint-disable-next-line prefer-rest-params\n originalMarkAllMethod.apply(this, arguments);\n self._updateErrorState();\n };\n }\n }\n\n constructor(\n private _elementRef: ElementRef,\n @Optional() _parentForm: NgForm,\n @Optional() _parentFormGroup: FormGroupDirective,\n @Optional()\n @Self()\n public _ngControl: NgControl,\n private _changeRef: ChangeDetectorRef\n ) {\n super();\n\n this._form = _parentForm || _parentFormGroup;\n }\n\n /** Sets the focus on the input element */\n focus(): void {\n this._elementRef.nativeElement.focus();\n }\n\n private _changeFocus(focused: boolean) {\n if (this._focused !== focused && !this.readonly) {\n this._focused = focused;\n this.focusChanged.emit(focused);\n }\n }\n\n private _isTextArea(): boolean {\n return this._elementRef.nativeElement.nodeName.toLowerCase() !== 'textarea';\n }\n\n private _updateErrorState() {\n const oldState = this._errorState;\n const newState = !!(\n this._ngControl &&\n this._ngControl.invalid &&\n (this._ngControl.touched || (this._form && this._form.submitted))\n );\n\n if (oldState !== newState) {\n this._errorState = newState;\n this._changeRef.detectChanges();\n }\n }\n\n ngOnDestroy(): void {\n this._unsubscribe.next();\n this._unsubscribe.complete();\n }\n}\n","import {Component, HostBinding, ViewEncapsulation} from '@angular/core';\n\n/** Single error to be shown under HcFormFieldComponent */\n@Component({\n selector: 'hc-error',\n template: '',\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class HcErrorComponent {\n @HostBinding('class.hc-error')\n _hostClass = true;\n}\n","import {Directive, HostBinding} from '@angular/core';\n\n/** Position an element at the front of HcFormFieldComponent */\n@Directive({\n selector: '[hcPrefix]',\n standalone: false\n})\nexport class HcPrefixDirective {\n @HostBinding('class.hc-prefix')\n _hostHcPrefixClass = true;\n}\n","import {Directive, HostBinding} from '@angular/core';\n\n/** Position an element at the end of HcFormFieldComponent */\n@Directive({\n selector: '[hcSuffix]',\n standalone: false\n})\nexport class HcSuffixDirective {\n @HostBinding('class.hc-suffix')\n _hostHcSuffixClass = true;\n}\n","import {Component, ViewEncapsulation} from '@angular/core';\n\n/** Label for HcFormFieldComponent */\n@Component({\n selector: 'hc-label',\n template: '',\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class HcLabelComponent {}\n","import {\n AfterContentInit,\n Component,\n ContentChild,\n ContentChildren,\n HostBinding,\n ViewEncapsulation,\n Input,\n ElementRef,\n OnDestroy\n} from '@angular/core';\nimport type {QueryList} from '@angular/core';\nimport {HcFormControlComponent} from './hc-form-control.component';\nimport {HcErrorComponent} from './hc-error.component';\nimport {HcPrefixDirective} from './hc-prefix.directive';\nimport {HcSuffixDirective} from './hc-suffix.directive';\nimport {HcLabelComponent} from './hc-label.component';\nimport {parseBooleanAttribute} from '../util';\nimport {InputDirective} from '../input/input.directive';\nimport {takeUntil} from 'rxjs/operators';\nimport {Subject} from 'rxjs';\n\nexport function getControlMissing(): Error {\n return new Error(`HcFormField must contain a component that extends HcFormControl`);\n}\n\n/** Container for form fields that applies Cashmere styling and behavior */\n@Component({\n selector: 'hc-form-field',\n templateUrl: './hc-form-field.component.html',\n styleUrls: ['./hc-form-field.component.scss', '../input/input.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class HcFormFieldComponent implements AfterContentInit, OnDestroy {\n private _inline = false;\n private _tight = false;\n private unsubscribe$ = new Subject();\n\n @ContentChild(HcFormControlComponent)\n _control: HcFormControlComponent;\n @ContentChildren(HcFormControlComponent)\n _controls: QueryList;\n @ContentChildren(HcErrorComponent)\n _errorChildren: QueryList;\n @ContentChildren(HcPrefixDirective)\n _prefixChildren: QueryList;\n @ContentChildren(HcSuffixDirective)\n _suffixChildren: QueryList;\n @ContentChildren(InputDirective)\n _inputChildren: QueryList;\n @ContentChildren(HcLabelComponent)\n _labelChildren: QueryList;\n\n @HostBinding('class.hc-form-field')\n _classHcFormFieldClass = true;\n\n @HostBinding('class.hc-form-field-disabled')\n get _disabledClass(): boolean {\n if (this._inputChildren.length > 0) {\n return this._inputChildren.first.disabled;\n } else {\n return this._control._isDisabled;\n }\n }\n\n /** Read-only boolean value of whether the form field has an associated label element */\n get hasLabel(): boolean {\n return !!this._labelChildren.length;\n }\n\n /** Read-only boolean value of whether the form field has an input element */\n get hasInput(): boolean {\n return !!this._inputChildren.length;\n }\n\n public _hasFocusedInput = false;\n\n /** Whether the form elements should be stacked (default), or inline */\n @Input()\n get inline(): boolean {\n return this._inline;\n }\n\n set inline(isInline: boolean) {\n this._inline = parseBooleanAttribute(isInline);\n }\n\n /** If true, condense the default padding on all included elements and reduce the font size. *Defaults to `false`.* */\n @Input()\n get tight(): boolean {\n return this._tight;\n }\n set tight(value: boolean) {\n this._tight = parseBooleanAttribute(value);\n this._updateTightControls();\n }\n\n public _mobileInput = false;\n\n constructor(private _elementRef: ElementRef) {}\n\n ngAfterContentInit(): void {\n if (!this._control) {\n throw getControlMissing();\n } else {\n this._updateTightControls();\n // Pass the current tight setting to controls that are added dynamically to the FormField\n this._controls.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this._updateTightControls());\n }\n\n // wire up focus and mobile listeners for hcInputs\n if (this.hasInput) {\n this._inputChildren.first.focusChanged.pipe(takeUntil(this.unsubscribe$)).subscribe(focused => {\n this._hasFocusedInput = focused;\n });\n\n this._mobileInput = this._inputChildren.first.mobile;\n\n this._inputChildren.first.mobileChange.pipe(takeUntil(this.unsubscribe$)).subscribe(mobileVal => {\n this._mobileInput = mobileVal;\n });\n }\n }\n\n iconClicked(): void {\n if (this.hasInput) {\n this._inputChildren.first.focus();\n }\n }\n\n ngOnDestroy(): void {\n this.unsubscribe$.next();\n this.unsubscribe$.complete();\n }\n\n _updateTightControls(): void {\n if (this._controls) {\n this._controls.forEach(control => {\n control._tight = this._tight;\n });\n }\n }\n\n getConnectedOverlayOrigin(): ElementRef {\n return this._elementRef;\n }\n\n _shouldShowErrorMessages(): boolean {\n return (\n this._control._errorState &&\n ((this._errorChildren && this._errorChildren.length > 0) ||\n (!!this._control._errorMessage && this._control._errorMessage.length > 0))\n );\n }\n}\n","\n @if (hasLabel) {\n \n \n \n @if (_control._isRequired && !_control._isDisabled) {\n  *\n }\n \n \n }\n
\n \n\n @if (hasInput) {\n \n @if (_prefixChildren.length) {\n
\n \n
\n }\n \n \n
\n @if (_suffixChildren.length) {\n
\n \n
\n }\n \n } @if (!hasInput) {\n \n \n \n } @if (_shouldShowErrorMessages()) {\n
\n @if (_control._errorMessage && _control._errorMessage.length) {\n {{ _control._errorMessage }}\n }\n \n
\n }\n \n\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {Injectable} from '@angular/core';\n\n/** Builds a value string to help with matching objects */\nexport function _buildValueString(id: string | null, value: any): string {\n if (id == null) {\n return `${value}`;\n }\n if (value && typeof value === 'object') {\n value = 'Object';\n }\n return `${id}: ${value}`.slice(0, 50);\n}\n\n@Injectable()\n/** @docs-private */\nexport class SelectService {\n _optionMap: Map = new Map();\n _optionIdCounter = 0; // tracks ids for select options\n\n _registerOption(): string {\n return (this._optionIdCounter++).toString();\n }\n}\n","/* eslint-disable @angular-eslint/directive-selector */\nimport {Directive, Input, ElementRef, Optional, Host, Renderer2, OnDestroy} from '@angular/core';\nimport {SelectService, _buildValueString} from './select.service';\n\n/** Utility directive to hold objects used in ngValue */\n@Directive({\n selector: 'option',\n standalone: false\n})\nexport class HcOptionDirective implements OnDestroy {\n /** id of the option element, use in identifying stringifyied values */\n _id: string;\n\n constructor(private _element: ElementRef, private _renderer: Renderer2, @Optional() @Host() private _selectService: SelectService) {\n if (this._selectService) {\n this._id = this._selectService._registerOption();\n }\n }\n\n /** Tracks the value bound to the option element. Unlike the value binding, ngValue supports binding to objects. */\n @Input('ngValue')\n set ngValue(value: unknown) {\n if (this._selectService == null) {\n return;\n }\n this._selectService._optionMap.set(this._id, value);\n this._setElementValue(_buildValueString(this._id, value));\n }\n\n /** Tracks simple string values bound to the option element. For objects, use the `ngValue` input binding. */\n @Input('value')\n set value(value: string) {\n this._setElementValue(value);\n }\n\n _setElementValue(value: string): void {\n this._renderer.setProperty(this._element.nativeElement, 'value', value);\n }\n\n ngOnDestroy(): void {\n if (this._selectService) {\n this._selectService._optionMap.delete(this._id);\n }\n }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport {\n Component,\n forwardRef,\n HostBinding,\n Input,\n ViewEncapsulation,\n ElementRef,\n Optional,\n Self,\n Output,\n EventEmitter,\n ViewChild,\n Renderer2,\n AfterViewInit,\n OnDestroy,\n ChangeDetectorRef\n} from '@angular/core';\nimport {ControlValueAccessor, NgForm, FormGroupDirective, NgControl} from '@angular/forms';\nimport {Subject} from 'rxjs';\nimport {delay, takeUntil} from 'rxjs/operators';\nimport {HcFormControlComponent} from '../form-field/hc-form-control.component';\nimport {parseBooleanAttribute} from '../util';\nimport {SelectService, _buildValueString} from './select.service';\n\nlet uniqueId = 1;\n\nexport class SelectChangeEvent {\n constructor(public source: SelectComponent, public value: any) {}\n}\n\n/** Select one of many options from a dropdown */\n@Component({\n selector: 'hc-select',\n templateUrl: 'select.component.html',\n styleUrls: ['select.component.scss'],\n encapsulation: ViewEncapsulation.None,\n providers: [SelectService, { provide: HcFormControlComponent, useExisting: forwardRef(() => SelectComponent) }],\n standalone: false\n})\nexport class SelectComponent extends HcFormControlComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {\n private _uniqueInputId = `hc-select-${uniqueId++}`;\n private _form: NgForm | FormGroupDirective | null;\n private _unsubscribe = new Subject();\n private _value: any = '';\n private _placeholderValue: any = '';\n get _optionMap(): Map {\n return this.selectService._optionMap;\n }\n _componentId = this._uniqueInputId; // contains id for the hc-select component\n\n @ViewChild('selectInput')\n _nativeSelect: ElementRef;\n\n @ViewChild('selectPlaceholder')\n _nativePlaceholder: ElementRef;\n\n /** Optional string of text to appear before selection is made */\n @Input()\n placeholder: string;\n\n /** Optional value for when the placeholder should appear -\n * defaults to the empty string, but could be set to `null` or `undefined` */\n @Input()\n get placeholderValue(): any {\n return this._placeholderValue;\n }\n\n set placeholderValue(val: any) {\n this._placeholderValue = val;\n this._applyPlaceholderValueToNativeControl();\n this._applyValueToNativeControl();\n }\n\n /** Enables or disables the component */\n @Input()\n get disabled(): boolean {\n if (this._ngControl && this._ngControl.disabled) {\n return this._ngControl.disabled;\n }\n return this._isDisabled;\n }\n\n set disabled(disabledVal) {\n this._isDisabled = parseBooleanAttribute(disabledVal);\n }\n\n /** Sets whether this is a required form element */\n @Input()\n get required(): boolean {\n return this._isRequired;\n }\n\n set required(requiredVal) {\n this._isRequired = parseBooleanAttribute(requiredVal);\n }\n\n /** Element id. */\n @Input()\n get id(): string {\n return this._componentId || this._uniqueInputId;\n }\n\n set id(idVal: string) {\n this._componentId = idVal ? idVal : this._uniqueInputId;\n }\n\n /** Get or set the value of the select component */\n @Input()\n get value() {\n return this._value;\n }\n\n set value(val: any) {\n if (val !== this._value) {\n this._value = val;\n this.onChange(val);\n }\n }\n\n /** If true, condense the default margin and reduce the font size. *Defaults to `false`.* */\n @Input()\n get tight(): boolean {\n return this._tight;\n }\n set tight(value) {\n this._tight = parseBooleanAttribute(value);\n }\n\n @Output()\n readonly focus: EventEmitter = new EventEmitter();\n @Output()\n readonly blur: EventEmitter = new EventEmitter();\n\n /** Event emitted whenever the state changes */\n @Output()\n change = new EventEmitter();\n\n @HostBinding('class.hc-select')\n _hostClass = true;\n\n @HostBinding('class.hc-select-disabled')\n get _disabledClass() {\n if (this._ngControl && this._ngControl.disabled) {\n return this._ngControl.disabled;\n }\n return this._isDisabled;\n }\n\n /** A function to compare the option values with the selected values. The first argument is a value from an option.\n * The second is a value from the selection(model). A boolean should be returned. */\n @Input()\n set compareWith(fn: (o1: any, o2: any) => boolean) {\n if (typeof fn !== 'function') {\n throw new Error(`compareWith must be a function, but received ${JSON.stringify(fn)}`);\n }\n this._compareWith = fn;\n }\n\n private _compareWith: (o1: any, o2: any) => boolean = Object.is;\n\n constructor(\n private _renderer: Renderer2,\n private selectService: SelectService,\n @Optional() _parentForm: NgForm,\n @Optional() _parentFormGroup: FormGroupDirective,\n @Optional()\n @Self()\n public _ngControl: NgControl,\n private _changeRef: ChangeDetectorRef\n ) {\n super();\n\n this._form = _parentForm || _parentFormGroup;\n if (this._ngControl != null) {\n this._ngControl.valueAccessor = this;\n }\n }\n\n ngAfterViewInit() {\n this._applyPlaceholderValueToNativeControl();\n this._applyValueToNativeControl();\n\n if (this._ngControl?.statusChanges) {\n // delay() is necessary to make sure any form or control state changes have been applied before rechecking error states\n this._ngControl.statusChanges.pipe(delay(0), takeUntil(this._unsubscribe)).subscribe(() => this._updateErrorState());\n }\n if (this._form) {\n this._form.ngSubmit.pipe(takeUntil(this._unsubscribe)).subscribe(() => this._updateErrorState());\n }\n\n /** Monkey patching the markAsTouched function to call error state checking because there is not an event for touched changes */\n if (this._ngControl && this._ngControl.control) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const self = this;\n const originalMarkMethod = this._ngControl.control.markAsTouched;\n this._ngControl.control.markAsTouched = function () {\n // eslint-disable-next-line prefer-rest-params\n originalMarkMethod.apply(this, arguments);\n self._updateErrorState();\n };\n\n const originalMarkAllMethod = this._ngControl.control.markAllAsTouched;\n this._ngControl.control.markAllAsTouched = function () {\n // eslint-disable-next-line prefer-rest-params\n originalMarkAllMethod.apply(this, arguments);\n self._updateErrorState();\n };\n }\n }\n\n _onBlur(): void {\n this.onTouch();\n this._updateErrorState();\n this.blur.next();\n }\n\n public onChange: (value: unknown) => void = () => undefined;\n public onTouch: () => unknown = () => undefined;\n public registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n public registerOnTouched(fn: () => unknown): void {\n this.onTouch = fn;\n }\n\n writeValue(value: any) {\n // Prevent the form control from trying to write a value when removing the control\n if (this.onChange.name !== 'noop') {\n this._value = value;\n this._applyValueToNativeControl();\n }\n }\n\n _applyValueToNativeControl() {\n const id: string | null = this._getOptionId(this._value);\n if (!this._nativeSelect) {\n return;\n }\n if (id == null) {\n const selectedIndex = this.placeholder ? 0 : -1;\n this._renderer.setProperty(this._nativeSelect.nativeElement, 'selectedIndex', selectedIndex);\n }\n const valueString = _buildValueString(id, this._value);\n this._renderer.setProperty(this._nativeSelect.nativeElement, 'value', valueString);\n }\n\n _applyPlaceholderValueToNativeControl() {\n if (!this._nativePlaceholder) {\n return;\n }\n\n this._renderer.setProperty(this._nativePlaceholder.nativeElement, 'value', this._placeholderValue);\n }\n\n _change(event: Event, value: any) {\n event.stopPropagation();\n this._value = this._getOptionValue(value);\n this.onChange(this._value);\n this.change.emit(new SelectChangeEvent(this, this._value));\n }\n\n _getOptionId(value: any): string | null {\n for (const id of Array.from(this._optionMap.keys())) {\n if (this._compareWith(this._optionMap.get(id), value)) {\n return id;\n }\n }\n return null;\n }\n\n _getOptionValue(valueString: string): any {\n const id: string = this._extractId(valueString);\n return this._optionMap.has(id) ? this._optionMap.get(id) : valueString;\n }\n\n _extractId(valueString: string): string {\n return valueString.split(':')[0];\n }\n\n _onContentUpdated(): void {\n this._applyValueToNativeControl();\n }\n\n private _updateErrorState() {\n const oldState = this._errorState;\n\n // TODO: this could be abstracted out as an @Input() if we need this to be configurable\n const newState = !!(\n this._ngControl &&\n this._ngControl.invalid &&\n (this._ngControl.touched || (this._form && this._form.submitted))\n );\n\n if (oldState !== newState) {\n this._errorState = newState;\n this._changeRef.detectChanges();\n }\n }\n\n ngOnDestroy(): void {\n this._unsubscribe.next();\n this._unsubscribe.complete();\n }\n}\n","
\n \n \n @if (placeholder) {\n \n }\n \n \n
\n","import {\n Component,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n forwardRef,\n Inject,\n SimpleChanges,\n Optional,\n ChangeDetectorRef,\n EventEmitter,\n Input,\n Output,\n ViewChild,\n AfterContentInit,\n AfterViewChecked,\n OnDestroy,\n OnChanges,\n HostBinding\n} from '@angular/core';\nimport {HcDatepickerIntl} from '../datepicker-intl';\nimport {ComponentPortal, Portal, ComponentType} from '@angular/cdk/portal';\nimport {createMissingDateImplError} from '../datetime/datepicker-errors';\nimport {HC_DATE_FORMATS, HcDateFormats, D} from '../datetime/date-formats';\nimport {DateAdapter} from '../datetime/date-adapter';\nimport {Subject, Subscription} from 'rxjs';\nimport {yearsPerPage, MultiYearViewComponent} from '../multi-year-view/multi-year-view.component';\nimport {HcCalendarCellCssClasses} from '../calendar-body/calendar-body.component';\nimport {MonthViewComponent} from '../month-view/month-view.component';\nimport {YearViewComponent} from '../year-view/year-view.component';\nimport {FormControl} from '@angular/forms';\n\n/**\n * Possible views for the calendar.\n * @docs-private\n */\nexport type CalendarViewComponent = 'month' | 'year' | 'multi-year';\n\n/** Default header for hcCalendar */\n@Component({\n selector: 'hc-calendar-header',\n templateUrl: 'calendar-header.html',\n exportAs: 'hcCalendarHeader',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class CalendarHeaderComponent {\n constructor(\n private _intl: HcDatepickerIntl,\n @Inject(forwardRef(() => CalendarComponent)) public calendar: CalendarComponent,\n @Optional() private _dateAdapter: DateAdapter,\n @Optional()\n @Inject(HC_DATE_FORMATS)\n private _dateFormats: HcDateFormats,\n changeDetectorRef: ChangeDetectorRef\n ) {\n this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck());\n }\n\n /** The label for the currently visible month */\n get monthButtonText(): string {\n return this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.calendar.activeDate)];\n }\n\n /** The label for the current calendar view. */\n get periodButtonText(): string {\n return this._dateAdapter.getYearName(this.calendar.activeDate);\n }\n\n get periodButtonLabel(): string {\n return this.calendar.currentView === 'month' ? this._intl.switchToMultiYearViewLabel : this._intl.switchToMonthViewLabel;\n }\n\n /** The label for the jump to today button */\n get _todayButtonLabel(): string {\n return this._intl.switchToTodayLabel;\n }\n\n /** The label for the currently displayed month */\n get monthButtonLabel(): string {\n return this._intl.currentMonthLabel;\n }\n\n /** The label for the the previous button. */\n get prevButtonLabel(): string {\n return {\n month: this._intl.prevMonthLabel,\n year: this._intl.prevYearLabel,\n 'multi-year': this._intl.prevMultiYearLabel\n }[this.calendar.currentView];\n }\n\n /** The label for the the next button. */\n get nextButtonLabel(): string {\n return {\n month: this._intl.nextMonthLabel,\n year: this._intl.nextYearLabel,\n 'multi-year': this._intl.nextMultiYearLabel\n }[this.calendar.currentView];\n }\n\n /** Handles user clicks on the period label. */\n currentPeriodClicked(): void {\n this.calendar.currentView = this.calendar.currentView === 'month' ? 'multi-year' : 'month';\n }\n\n /** Handles user clicks on the previous button. */\n previousClicked(): void {\n this.calendar.activeDate =\n this.calendar.currentView === 'month'\n ? this._dateAdapter.addCalendarMonths(this.calendar.activeDate, -1)\n : this._dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView === 'year' ? -1 : -yearsPerPage);\n }\n\n /** Handles user clicks on the next button. */\n nextClicked(): void {\n this.calendar.activeDate =\n this.calendar.currentView === 'month'\n ? this._dateAdapter.addCalendarMonths(this.calendar.activeDate, 1)\n : this._dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView === 'year' ? 1 : yearsPerPage);\n }\n\n /** Handles clicks on the jump to today button */\n _todayClicked(): void {\n const selectedYear = this._dateAdapter.getYear(this._dateAdapter.today());\n const selectedMonth = this._dateAdapter.getMonth(this._dateAdapter.today());\n const selectedDate = this._dateAdapter.getDate(this._dateAdapter.today());\n const todayDate = this._dateAdapter.createDate(selectedYear, selectedMonth, selectedDate);\n\n if ( this.calendar.mode !== 'date' ) {\n todayDate.setHours(this._dateAdapter.today().getHours());\n todayDate.setMinutes(this._dateAdapter.today().getMinutes());\n }\n\n this.calendar._dateSelected(todayDate);\n this.calendar._userSelection.emit(true);\n }\n\n /** Whether the previous period button is enabled. */\n previousEnabled(): boolean {\n if (!this.calendar.minDate) {\n return true;\n }\n return !this.calendar.minDate || !this._isSameView(this.calendar.activeDate, this.calendar.minDate);\n }\n\n /** Whether the next period button is enabled. */\n nextEnabled(): boolean {\n return !this.calendar.maxDate || !this._isSameView(this.calendar.activeDate, this.calendar.maxDate);\n }\n\n _todayEnabled(): boolean {\n let minDate;\n let maxDate;\n const today = new Date(this._dateAdapter.today().toDateString());\n\n /** Normalize the compare dates to all be on the first day of the month because we are only concerned\n * about whether today falls outside of the month than min or max is in */\n today.setDate(1);\n if (this.calendar.minDate) {\n minDate = new Date(this.calendar.minDate.toDateString());\n minDate.setDate(1);\n }\n if (this.calendar.maxDate) {\n maxDate = new Date(this.calendar.maxDate.toDateString());\n maxDate.setDate(1);\n }\n return (\n (!minDate || this._dateAdapter.compareDate(minDate, today) < 1) &&\n (!maxDate || this._dateAdapter.compareDate(maxDate, today) > -1)\n );\n }\n\n /** Whether the two dates represent the same view in the current view mode (month or year). */\n private _isSameView(date1: D, date2: D): boolean {\n if (this.calendar.currentView === 'month') {\n return (\n this._dateAdapter.getYear(date1) === this._dateAdapter.getYear(date2) &&\n this._dateAdapter.getMonth(date1) === this._dateAdapter.getMonth(date2)\n );\n }\n if (this.calendar.currentView === 'year') {\n return this._dateAdapter.getYear(date1) === this._dateAdapter.getYear(date2);\n }\n // Otherwise we are in 'multi-year' view.\n return Math.floor(this._dateAdapter.getYear(date1) / yearsPerPage) === Math.floor(this._dateAdapter.getYear(date2) / yearsPerPage);\n }\n}\n\n/**\n * A calendar that is used as part of the datepicker.\n * @docs-private\n */\n@Component({\n selector: 'hc-calendar',\n templateUrl: './calendar.component.html',\n styleUrls: ['calendar.component.scss'],\n exportAs: 'hcCalendar',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class CalendarComponent implements AfterContentInit, AfterViewChecked, OnDestroy, OnChanges {\n @HostBinding('class.hc-calendar') _hostClass = true;\n\n /** An input indicating the type of the header component, if set. */\n @Input()\n headerComponent: ComponentType;\n\n /** A portal containing the header component type for this calendar. */\n _calendarHeaderPortal: Portal;\n\n /** Stores the current am/pm value */\n _period: FormControl = new FormControl('am');\n\n private _intlChanges: Subscription;\n\n /**\n * Used for scheduling that focus should be moved to the active cell on the next tick.\n * We need to schedule it, rather than do it immediately, because we have to wait\n * for Angular to re-evaluate the view children.\n */\n private _moveFocusOnNextTick = false;\n\n /** A date representing the period (month or year) to start the calendar in. */\n @Input()\n get startAt(): D | null {\n return this._startAt;\n }\n set startAt(value: D | null) {\n this._startAt = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n private _startAt: D | null;\n\n /** Whether the calendar should be started in month or year view. */\n @Input()\n startView: CalendarViewComponent = 'month';\n\n /** Whether the calendar should show calendar, time-picker, or both */\n @Input()\n mode: 'date' | 'time' | 'date-time' = 'date';\n\n /** Whether the time picker should display a 12-hour or 24-clock. Accepts 12 or 24. Defaults to 12. */\n @Input()\n get hourCycle(): string | number {\n return this._hourCycle;\n }\n set hourCycle(value: string | number) {\n if (+value === 12 || +value === 24) {\n this._hourCycle = +value;\n } else if (value) {\n throw Error('Unsupported hourCycle value: ' + value + '. Accepted values are 12 or 24.');\n }\n }\n _hourCycle = 12;\n\n /** The currently selected date. */\n @Input()\n get selected(): D | null {\n return this._selected;\n }\n set selected(value: D | null) {\n this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n if (this._selected) {\n this._period.setValue(this._selected.getHours() > 11 ? 'pm' : 'am');\n }\n }\n private _selected: D | null;\n\n /** The minimum selectable date. */\n @Input()\n get minDate(): D | null {\n return this._minDate;\n }\n set minDate(value: D | null) {\n this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n private _minDate: D | null;\n\n /** The maximum selectable date. */\n @Input()\n get maxDate(): D | null {\n return this._maxDate;\n }\n set maxDate(value: D | null) {\n this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n private _maxDate: D | null;\n\n /** Function used to filter which dates are selectable. */\n @Input()\n dateFilter: (date: D) => boolean;\n\n /** Function that can be used to add custom CSS classes to dates. */\n @Input()\n dateClass: (date: D) => HcCalendarCellCssClasses;\n\n /** Emits when the currently selected date changes. */\n @Output()\n readonly selectedChange: EventEmitter = new EventEmitter();\n\n /**\n * Emits the year chosen in multiyear view.\n * This doesn't imply a change on the selected date.\n */\n @Output()\n readonly yearSelected: EventEmitter = new EventEmitter();\n\n /**\n * Emits the month chosen in year view.\n * This doesn't imply a change on the selected date.\n */\n @Output()\n readonly monthSelected: EventEmitter = new EventEmitter();\n\n /** Emits when any date is selected; boolean indicates if Today button was clicked */\n @Output()\n readonly _userSelection: EventEmitter = new EventEmitter();\n\n /** Reference to the current month view component. */\n @ViewChild(MonthViewComponent)\n monthView: MonthViewComponent;\n\n /** Reference to the current year view component. */\n @ViewChild(YearViewComponent)\n yearView: YearViewComponent;\n\n /** Reference to the current multi-year view component. */\n @ViewChild(MultiYearViewComponent)\n multiYearView: MultiYearViewComponent;\n\n /**\n * The current active date. This determines which time period is shown and which date is\n * highlighted when using keyboard navigation.\n */\n get activeDate(): D {\n return this._clampedActiveDate;\n }\n set activeDate(value: D) {\n this._clampedActiveDate = this._dateAdapter.clampDate(value, this.minDate, this.maxDate);\n this.stateChanges.next();\n }\n private _clampedActiveDate: D;\n\n /** Whether the calendar is in month view. */\n get currentView(): CalendarViewComponent {\n return this._currentView;\n }\n set currentView(value: CalendarViewComponent) {\n this._currentView = value;\n this._moveFocusOnNextTick = true;\n }\n private _currentView: CalendarViewComponent;\n\n /**\n * Emits whenever there is a state change that the header may need to respond to.\n */\n stateChanges = new Subject();\n\n /** A string containing the value of minutes for the current date */\n get minutes(): string | null {\n if (this.selected) {\n const minVal = this.selected.getMinutes();\n return minVal < 10 ? '0' + minVal : minVal.toString();\n } else {\n return this.selected;\n }\n }\n set minutes(value: string | null) {\n if (value && !isNaN(+value)) {\n const tempDate = this.selected ? new Date(this.selected.getTime()) : new Date();\n tempDate.setMinutes(+value);\n this.selectedChange.emit(tempDate);\n this._userSelected();\n }\n }\n\n /** A string containing the hour for the current date */\n get hours(): string | null {\n if (this.selected) {\n const hourVal = this.selected.getHours();\n if (this._hourCycle === 12) {\n if (hourVal > 11) {\n return hourVal === 12 ? hourVal.toString() : (hourVal - 12).toString();\n } else {\n return hourVal === 0 ? '12' : hourVal.toString();\n }\n } else {\n return hourVal.toString();\n }\n } else {\n return this.selected;\n }\n }\n set hours(value: string | null) {\n if (value && !isNaN(+value)) {\n let hourVal: number = +value;\n if (this._hourCycle === 12) {\n if (this._period.value === 'pm' && hourVal !== 12) {\n hourVal += 12;\n } else if (this._period.value === 'am' && hourVal === 12) {\n hourVal = 0;\n }\n }\n const tempDate = this.selected ? new Date(this.selected.getTime()) : new Date();\n tempDate.setHours(hourVal);\n this.selectedChange.emit(tempDate);\n this._userSelected();\n }\n }\n\n _periodChange(): void {\n if (this.selected) {\n const tempDate = new Date(this.selected.getTime());\n const curHours = tempDate.getHours();\n if (this._period.value === 'pm') {\n tempDate.setHours(curHours + 12);\n } else {\n tempDate.setHours(curHours - 12);\n }\n this.selectedChange.emit(tempDate);\n this._userSelected();\n }\n }\n\n constructor(\n private _intl: HcDatepickerIntl,\n @Optional() private _dateAdapter: DateAdapter,\n @Optional()\n @Inject(HC_DATE_FORMATS)\n private _dateFormats: HcDateFormats,\n private _changeDetectorRef: ChangeDetectorRef\n ) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n\n if (!this._dateFormats) {\n throw createMissingDateImplError('HC_DATE_FORMATS');\n }\n\n this._intlChanges = _intl.changes.subscribe(() => {\n _changeDetectorRef.markForCheck();\n this.stateChanges.next();\n });\n }\n\n ngAfterContentInit(): void {\n this._calendarHeaderPortal = new ComponentPortal(this.headerComponent || CalendarHeaderComponent);\n this.activeDate = this.startAt || this._dateAdapter.today();\n\n // Assign to the private property since we don't want to move focus on init.\n this._currentView = this.startView;\n }\n\n ngAfterViewChecked(): void {\n if (this._moveFocusOnNextTick) {\n this._moveFocusOnNextTick = false;\n this.focusActiveCell();\n }\n }\n\n ngOnDestroy(): void {\n this._intlChanges.unsubscribe();\n this.stateChanges.complete();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n const change = changes.minDate || changes.maxDate || changes.dateFilter;\n\n if (change && !change.firstChange) {\n const view = this._getCurrentViewComponent();\n\n if (view) {\n // We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are\n // passed down to the view via data bindings which won't be up-to-date when we call `_init`.\n this._changeDetectorRef.detectChanges();\n view._init();\n }\n }\n\n this.stateChanges.next();\n }\n\n focusActiveCell(): void {\n if (this.mode !== 'time') {\n this._getCurrentViewComponent()._focusActiveCell();\n }\n }\n\n /** Updates today's date after an update of the active date */\n updateTodaysDate(): void {\n const view = this.currentView === 'month' ? this.monthView : this.currentView === 'year' ? this.yearView : this.multiYearView;\n\n view.ngAfterContentInit();\n }\n\n /** Handles date selection in the month view. */\n _dateSelected(date: D): void {\n if (!this._dateAdapter.sameDate(date, this.selected)) {\n this.selectedChange.emit(date);\n }\n }\n\n /** Handles year selection in the multiyear view. */\n _yearSelectedInMultiYearView(normalizedYear: D): void {\n this.yearSelected.emit(normalizedYear);\n }\n\n /** Handles month selection in the year view. */\n _monthSelectedInYearView(normalizedMonth: D): void {\n this.monthSelected.emit(normalizedMonth);\n }\n\n _userSelected(): void {\n this._userSelection.emit(false);\n }\n\n /** Handles year/month selection in the multi-year/year views. */\n _goToDateInView(date: D, view: 'month' | 'year' | 'multi-year'): void {\n this.activeDate = date;\n this.currentView = view;\n }\n\n /**\n * @param obj The object to check.\n * @returns The given object if it is both a date instance and valid, otherwise null.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _getValidDateOrNull(obj: any): D | null {\n return this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj) ? obj : null;\n }\n\n /** Returns the component instance that corresponds to the current calendar view. */\n private _getCurrentViewComponent() {\n return this.monthView || this.yearView || this.multiYearView;\n }\n\n _hoursUp(): void {\n if (!this.hours) {\n this.hours = this._hourCycle > 12 ? '0' : '1';\n } else {\n let curHour = +this.hours;\n curHour++;\n const tempCycle = this._hourCycle > 12 ? 24 : 12;\n if (curHour > tempCycle) {\n curHour = this._hourCycle > 12 ? 0 : 1;\n }\n this._changeMeridiem(curHour, 12);\n this.hours = curHour.toString();\n }\n }\n\n _hoursDown(): void {\n if (!this.hours) {\n this.hours = this._hourCycle > 12 ? '23' : '12';\n } else {\n let curHour = +this.hours;\n curHour--;\n const tempCycle = this._hourCycle > 12 ? 0 : 1;\n if (curHour < tempCycle) {\n curHour = this._hourCycle > 12 ? 23 : 12;\n }\n this._changeMeridiem(curHour, 11);\n this.hours = curHour.toString();\n }\n }\n\n _changeMeridiem(curHour: number, hourChange: number): void {\n if (curHour === hourChange) {\n this._period.setValue(this._period.value > 'am' ? 'am' : 'pm');\n }\n }\n\n _minutesUp(): void {\n if (!this.minutes) {\n this.minutes = '00';\n } else {\n let curMin = +this.minutes;\n curMin++;\n if (curMin > 59) {\n curMin = 0;\n }\n this.minutes = curMin.toString();\n }\n }\n\n _minutesDown(): void {\n if (!this.minutes) {\n this.minutes = '59';\n } else {\n let curMin = +this.minutes;\n curMin--;\n if (curMin < 0) {\n curMin = 59;\n }\n this.minutes = curMin.toString();\n }\n }\n}\n","@if (calendar.mode!=='time') {\n
\n
\n \n Today\n \n \n \n {{ monthButtonText }}\n \n \n \n \n {{ periodButtonText }}\n
\n \n
\n
\n}\n","\n\n@if (mode !== 'time') {\n
\n @switch (currentView) { @case ('month') {\n \n } @case ('year') {\n \n } @case ('multi-year') {\n \n } }\n
\n} @if (mode !== 'date') {\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n @if (_hourCycle === 12) {\n \n \n \n \n \n \n }\n
\n}\n","/**\n * @license\n * Copyright Health Catalyst All Rights Reserved.\n *\n * Use of this source code is governed by an Apache-2.0 license that can be\n * found in the LICENSE file at https://raw.githubusercontent.com/HealthCatalyst/Fabric.Cashmere/dev/LICENSE\n */\nimport {animate, state, style, transition, trigger, AnimationTriggerMetadata} from '@angular/animations';\n\n/**\n * Animations used by the Material datepicker.\n * @docs-private\n */\nexport const HcDatepickerAnimations: {\n readonly transformPanel: AnimationTriggerMetadata;\n readonly fadeInCalendar: AnimationTriggerMetadata;\n} = {\n /** Transforms the height of the datepicker's calendar. */\n transformPanel: trigger('transformPanel', [\n state(\n 'void',\n style({\n opacity: 0,\n transform: 'scale(1, 0.8)'\n })\n ),\n transition(\n 'void => enter',\n animate(\n '120ms cubic-bezier(0, 0, 0.2, 1)',\n style({\n opacity: 1,\n transform: 'scale(1, 1)'\n })\n )\n ),\n transition('* => void', animate('100ms linear', style({opacity: 0})))\n ]),\n\n /** Fades in the content of the calendar. */\n fadeInCalendar: trigger('fadeInCalendar', [\n state('void', style({opacity: 0})),\n state('enter', style({opacity: 1})),\n\n // TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we\n // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.\n transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))\n ])\n};\n","import {Component, ViewEncapsulation, ChangeDetectionStrategy, AfterViewInit, ViewChild} from '@angular/core';\nimport {HcDatepickerAnimations} from '../datepicker-animations';\nimport {CalendarComponent} from '../calendar/calendar.component';\nimport {DatepickerComponent} from '../datepicker.component';\n\n/**\n * Component used as the content for the datepicker popup. We use this instead of using\n * hcCalendar directly as the content so we can control the initial focus. This also gives us a\n * place to put additional features of the popup that are not part of the calendar itself in the\n * future. (e.g. confirmation buttons).\n * @docs-private\n */\n@Component({\n selector: 'hc-datepicker-content',\n templateUrl: './datepicker-content.component.html',\n host: {\n class: 'hc-datepicker-content',\n '[@transformPanel]': '\"enter\"'\n },\n animations: [HcDatepickerAnimations.transformPanel, HcDatepickerAnimations.fadeInCalendar],\n exportAs: 'hcDatepickerContent',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class DatepickerContentComponent implements AfterViewInit {\n /** Reference to the internal calendar component. */\n @ViewChild(CalendarComponent)\n _calendar: CalendarComponent;\n\n /** Reference to the datepicker that created the overlay. */\n datepicker: DatepickerComponent;\n\n /** Whether the datepicker is above or below the input. */\n _isAbove: boolean;\n\n ngAfterViewInit(): void {\n this._calendar.focusActiveCell();\n }\n\n /** Close the datepicker automatically on selection only if in date mode */\n autoClose( todayClicked: boolean ): void {\n if (this.datepicker.mode === 'date' || todayClicked ) {\n this.datepicker.close();\n }\n }\n}\n","\n\n","import {forwardRef, Directive, ElementRef, Optional, Inject, Input, EventEmitter, Output, OnDestroy} from '@angular/core';\nimport {\n NG_VALUE_ACCESSOR,\n NG_VALIDATORS,\n Validator,\n ValidatorFn,\n ValidationErrors,\n AbstractControl,\n ControlValueAccessor,\n Validators\n} from '@angular/forms';\nimport {createMissingDateImplError} from '../datetime/datepicker-errors';\nimport {DatepickerComponent} from '../datepicker.component';\nimport {parseBooleanAttribute} from '../../util';\nimport {Subscription} from 'rxjs';\nimport {D, HC_DATE_FORMATS, HcDateFormats} from '../datetime/date-formats';\nimport {DateAdapter} from '../datetime/date-adapter';\nimport {HcFormControlComponent} from '../../form-field/hc-form-control.component';\nimport {HcFormFieldComponent} from '../../form-field/hc-form-field.component';\n\n/** @docs-private */\nexport const HC_DATEPICKER_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => DatepickerInputDirective),\n multi: true\n};\n\n/** @docs-private */\nexport const HC_DATEPICKER_VALIDATORS = {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => DatepickerInputDirective),\n multi: true\n};\n\n/**\n * An event used for datepicker input and change events. We don't always have access to a native\n * input or change event because the event may have been triggered by the user clicking on the\n * calendar popup. For consistency, we always use hcDatepickerInputEvent instead.\n */\nexport class HcDatepickerInputEvent {\n /** The new value for the target datepicker input. */\n value: D | null;\n\n constructor(\n /** Reference to the datepicker input component that emitted the event. */\n public target: DatepickerInputDirective,\n /** Reference to the native input element associated with the datepicker input. */\n public targetElement: HTMLElement\n ) {\n this.value = this.target.value;\n }\n}\n\n@Directive({\n selector: 'input[hcDatepicker]',\n host: {\n '[attr.aria-haspopup]': 'true',\n '[attr.aria-owns]': '(_datepicker?.opened && _datepicker.id) || null',\n '[attr.min]': 'min ? _dateAdapter.toIso8601(min) : null',\n '[attr.max]': 'max ? _dateAdapter.toIso8601(max) : null',\n '[disabled]': 'disabled',\n '(input)': '_onInput($event.target.value)',\n '(change)': '_onChange()',\n '(blur)': '_onBlur()',\n '(keydown)': '_onKeydown($event)'\n },\n providers: [\n HC_DATEPICKER_VALUE_ACCESSOR,\n HC_DATEPICKER_VALIDATORS,\n { provide: HcFormControlComponent, useExisting: forwardRef(() => DatepickerInputDirective) }\n ],\n standalone: false\n})\nexport class DatepickerInputDirective implements ControlValueAccessor, OnDestroy, Validator {\n /** The datepicker that this input is associated with. */\n @Input()\n set hcDatepicker(value: DatepickerComponent) {\n if (!value) {\n return;\n }\n\n this._datepicker = value;\n this._datepicker._registerInput(this);\n this._datepickerSubscription.unsubscribe();\n\n this._datepickerSubscription = this._datepicker._selectedChanged.subscribe((selected: D) => {\n this.setDate(selected);\n });\n }\n _datepicker: DatepickerComponent;\n\n /** Function that can be used to filter out dates within the datepicker. */\n @Input()\n set hcDatepickerFilter(value: (date: D | null) => boolean) {\n this._dateFilter = value;\n this._validatorOnChange();\n }\n _dateFilter: (date: D | null) => boolean;\n\n /** The value of the input. */\n @Input()\n get value(): D | null {\n return this._value;\n }\n set value(value: D | null) {\n value = this._dateAdapter.deserialize(value);\n this._lastValueValid = !value || this._dateAdapter.isValid(value);\n value = this._getValidDateOrNull(value);\n const oldDate = this.value;\n this._value = value;\n this._formatValue(value);\n\n if ( value ) {\n this._timeDate = value;\n }\n if (!this._dateAdapter.sameDate(oldDate, value)) {\n this._valueChange.emit(value);\n }\n }\n private _value: D | null;\n\n /** The minimum valid date. */\n @Input()\n get min(): D | null {\n return this._min;\n }\n set min(value: D | null) {\n this._min = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n this._validatorOnChange();\n }\n private _min: D | null;\n\n /** The maximum valid date. */\n @Input()\n get max(): D | null {\n return this._max;\n }\n set max(value: D | null) {\n this._max = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n this._validatorOnChange();\n }\n private _max: D | null;\n\n /** Whether the datepicker-input is disabled. */\n @Input()\n get disabled(): boolean {\n return !!this._disabled;\n }\n set disabled(value: boolean) {\n const newValue = parseBooleanAttribute(value);\n const element = this._elementRef.nativeElement;\n\n if (this._disabled !== newValue) {\n this._disabled = newValue;\n this._disabledChange.emit(newValue);\n }\n\n // We need to null check the `blur` method, because it's undefined during SSR.\n if (newValue && element.blur) {\n // Normally, native input elements automatically blur if they turn disabled. This behavior\n // is problematic, because it would mean that it triggers another change detection cycle,\n // which then causes a changed after checked error if the input element was focused before.\n element.blur();\n }\n }\n private _disabled: boolean;\n\n /** Emits when a `change` event is fired on this ``. */\n @Output()\n readonly dateChange: EventEmitter = new EventEmitter();\n\n /** Emits when an `input` event is fired on this ``. */\n @Output()\n readonly dateInput: EventEmitter = new EventEmitter();\n\n /** Stores the mode & hourCycle for the inputs of the date range (which don't have a DatePickerComponent) */\n @Input() _mode: string;\n @Input() _hourCycle: number;\n\n /** When true, this allows the date picker to validate with a blank value OR a valid date value. Defaults to false. */\n @Input()\n get allowsBlankValues(): boolean {\n return this._allowsBlankValues;\n }\n set allowsBlankValues(value: boolean) {\n this._allowsBlankValues = parseBooleanAttribute(value);\n }\n private _allowsBlankValues: boolean;\n\n /** Emits when the value changes (either due to user input or programmatic change). */\n _valueChange = new EventEmitter();\n\n /** Emits when the disabled state has changed */\n _disabledChange = new EventEmitter();\n\n _onTouched = (): void => {\n // do nothing\n };\n\n private _cvaOnChange: (value: unknown) => void = () => {\n // do nothing\n };\n\n private _validatorOnChange = () => {\n // do nothing\n };\n\n private _datepickerSubscription = Subscription.EMPTY;\n\n private _localeSubscription = Subscription.EMPTY;\n\n // Stores a placeholder date value to be used for parsing when in time-only mode\n private _timeDate: Date = new Date();\n\n /** The form control validator for whether the input parses. */\n private _parseValidator: ValidatorFn = (): ValidationErrors | null => {\n return this._lastValueValid ? null : {hcDatepickerParse: {text: this._elementRef.nativeElement.value}};\n };\n\n /** The form control validator for the min date. */\n private _minValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {\n const controlValue = this._getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n return !this.min || control.pristine || !controlValue || this._dateAdapter.compareDate(this.min, controlValue) <= 0\n ? null\n : {hcDatepickerMin: {min: this.min, actual: controlValue}};\n };\n\n /** The form control validator for the max date. */\n private _maxValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {\n const controlValue = this._getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n return !this.max || control.pristine || !controlValue || this._dateAdapter.compareDate(this.max, controlValue) >= 0\n ? null\n : {hcDatepickerMax: {max: this.max, actual: controlValue}};\n };\n\n /** The form control validator for the date filter. */\n private _filterValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {\n const controlValue = this._getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n return !this._dateFilter || !controlValue || this._dateFilter(controlValue) ? null : {hcDatepickerFilter: true};\n };\n\n /** The combined form control validator for this input. */\n private _validator: ValidatorFn | null = Validators.compose([\n this._parseValidator,\n this._minValidator,\n this._maxValidator,\n this._filterValidator\n ]);\n\n /** Whether the last value set on the input was valid. */\n private _lastValueValid = false;\n\n constructor(\n private _elementRef: ElementRef,\n @Optional() public _dateAdapter: DateAdapter,\n @Optional()\n @Inject(HC_DATE_FORMATS)\n private _dateFormats: HcDateFormats,\n @Optional() private _formField: HcFormFieldComponent\n ) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n if (!this._dateFormats) {\n throw createMissingDateImplError('HC_DATE_FORMATS');\n }\n\n // Update the displayed date when the locale changes.\n this._localeSubscription = _dateAdapter.localeChanges.subscribe(() => {\n // eslint-disable-next-line no-self-assign\n this.value = this.value;\n });\n\n this._allowsBlankValues = false;\n }\n\n ngOnDestroy(): void {\n this._datepickerSubscription.unsubscribe();\n this._localeSubscription.unsubscribe();\n this._valueChange.complete();\n this._disabledChange.complete();\n }\n\n /** @docs-private */\n registerOnValidatorChange(fn: () => void): void {\n this._validatorOnChange = fn;\n }\n\n /** @docs-private */\n validate(c: AbstractControl): ValidationErrors | null {\n return this._validator ? this._validator(c) : null;\n }\n\n /**\n * Gets the element that the datepicker popup should be connected to.\n * @return The element to connect the popup to.\n */\n getConnectedOverlayOrigin(): ElementRef {\n return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;\n }\n\n /** Sets the focus on the input element */\n focus(): void {\n this._elementRef.nativeElement.focus();\n }\n\n // Implemented as part of ControlValueAccessor.\n writeValue(value: D): void {\n this.value = value;\n }\n\n // Implemented as part of ControlValueAccessor.\n registerOnChange(fn: (value: unknown) => void): void {\n this._cvaOnChange = fn;\n }\n\n // Implemented as part of ControlValueAccessor.\n registerOnTouched(fn: () => void): void {\n this._onTouched = fn;\n }\n\n // Implemented as part of ControlValueAccessor.\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n // Set the date programmatically\n setDate(selected: D): void {\n this.value = selected;\n this._cvaOnChange(selected);\n this._onTouched();\n this.dateInput.emit(new HcDatepickerInputEvent(this, this._elementRef.nativeElement));\n this.dateChange.emit(new HcDatepickerInputEvent(this, this._elementRef.nativeElement));\n }\n\n _onKeydown(event: KeyboardEvent): void {\n const isAltDownArrow = event.altKey && event.key === 'ArrowDown';\n\n if (this._datepicker && isAltDownArrow && !this._elementRef.nativeElement.readOnly) {\n this._datepicker.open();\n event.preventDefault();\n }\n }\n\n _onInput(value: string): void {\n // Add stored date value to a time-only input for javascript date object parsing\n const pickerMode = this._datepicker ? this._datepicker.mode : this._mode;\n if ( pickerMode === 'time' ) {\n value = this._timeDate.getDate() + '/' + (this._timeDate.getMonth() + 1) + '/' + this._timeDate.getFullYear() + ' ' + value;\n }\n\n let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);\n\n /** Two-digit year input conversion method for IE\n * Based on the current year, assume that the four-digit year date should be in\n * either the next 30 years, or the preceding 70 years */\n if (date) {\n const inputString: string = this._elementRef.nativeElement.value;\n /** Skip this check if the input string contains any 3+ digit numerical values - assumed to be a year */\n if (!inputString.match(/[1-9][0-9][0-9]/g)) {\n const currentDate = new Date();\n if (date.getFullYear() >= currentDate.getFullYear() + 30) {\n date.setFullYear(date.getFullYear() - 100);\n } else if (date.getFullYear() < currentDate.getFullYear() - 70) {\n date.setFullYear(date.getFullYear() + 100);\n }\n }\n }\n\n if (this._allowsBlankValues && value.trim() == '') {\n this._lastValueValid = true;\n } else {\n this._lastValueValid = !date || this._dateAdapter.isValid(date);\n }\n\n date = this._getValidDateOrNull(date);\n\n if (!this._dateAdapter.sameDate(date, this._value)) {\n this._value = date;\n this._cvaOnChange(date);\n this._valueChange.emit(date);\n this.dateInput.emit(new HcDatepickerInputEvent(this, this._elementRef.nativeElement));\n }\n }\n\n _onChange(): void {\n this.dateChange.emit(new HcDatepickerInputEvent(this, this._elementRef.nativeElement));\n }\n\n /** Handles blur events on the input. */\n _onBlur(): void {\n // Reformat the input only if we have a valid value.\n if (this.value || this._elementRef.nativeElement.value) {\n this._formatValue(this.value);\n }\n\n this._onTouched();\n }\n\n /** Formats a value and sets it on the input element. */\n private _formatValue(value: D | null) {\n let dateFormat = this._dateFormats.display.dateInput;\n let tempMode = 'date';\n let tempCycle = 12;\n\n if (this._datepicker) {\n tempMode = this._datepicker.mode;\n tempCycle = +this._datepicker.hourCycle;\n } else if (this._mode) {\n tempMode = this._mode;\n if (this._hourCycle) {\n tempCycle = this._hourCycle;\n }\n }\n\n if (tempMode === 'time') {\n const tempFormat = this._dateFormats.display.timeInput;\n tempFormat['hour12'] = tempCycle === 12;\n dateFormat = tempFormat;\n } else if (tempMode === 'date-time') {\n const tempFormat = this._dateFormats.display.dateTimeInput;\n tempFormat['hour12'] = tempCycle === 12;\n dateFormat = tempFormat;\n }\n this._elementRef.nativeElement.value = value ? this._dateAdapter.format(value, dateFormat) : '';\n }\n\n /**\n * @param obj The object to check.\n * @returns The given object if it is both a date instance and valid, otherwise null.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _getValidDateOrNull(obj: any): D | null {\n return this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj) ? obj : null;\n }\n}\n","import {\n Component,\n Input,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n ViewChild,\n OnDestroy,\n Directive,\n AfterContentInit,\n OnChanges,\n ContentChild,\n Attribute,\n SimpleChanges\n} from '@angular/core';\nimport {merge, Subscription, of as observableOf} from 'rxjs';\nimport {parseBooleanAttribute} from '../../util';\nimport {HcDatepickerIntl} from '../datepicker-intl';\nimport {DatepickerComponent} from '../datepicker.component';\nimport {ButtonComponent} from '../../button/button.component';\n\n/** Can be used to override the icon of a `hcDatepickerToggle`. */\n@Directive({\n selector: '[hcDatepickerToggleIcon]',\n standalone: false\n})\nexport class DatepickerToggleIconDirective {}\n\n@Component({\n selector: 'hc-datepicker-toggle',\n templateUrl: './datepicker-toggle.component.html',\n styleUrls: ['./datepicker-toggle.component.scss'],\n host: {\n class: 'hc-datepicker-toggle',\n // Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the\n // consumer may have provided, while still being able to receive focus.\n '[attr.tabindex]': '-1',\n '[class.hc-datepicker-toggle-active]': 'datepicker && datepicker.opened',\n '(focus)': '_button.focus()'\n },\n exportAs: 'hcDatepickerToggle',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class DatepickerToggleComponent implements AfterContentInit, OnChanges, OnDestroy {\n private _stateChanges = Subscription.EMPTY;\n\n /** Datepicker instance that the button will toggle. */\n @Input('for')\n datepicker: DatepickerComponent;\n\n /** Tabindex for the toggle. */\n @Input()\n tabIndex: number | null;\n\n /** Whether the toggle button is disabled. */\n @Input()\n get disabled(): boolean {\n return this._disabled === undefined ? this.datepicker.disabled : !!this._disabled;\n }\n set disabled(value: boolean) {\n this._disabled = parseBooleanAttribute(value);\n }\n private _disabled: boolean;\n\n /** Custom icon set by the consumer. */\n @ContentChild(DatepickerToggleIconDirective)\n _customIcon: DatepickerToggleIconDirective;\n\n /** Underlying button element. */\n @ViewChild('button')\n _button: ButtonComponent;\n\n constructor(\n public _intl: HcDatepickerIntl,\n private _changeDetectorRef: ChangeDetectorRef,\n @Attribute('tabindex') defaultTabIndex: string\n ) {\n const parsedTabIndex = Number(defaultTabIndex);\n this.tabIndex = parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.datepicker) {\n this._watchStateChanges();\n }\n }\n\n ngOnDestroy(): void {\n this._stateChanges.unsubscribe();\n }\n\n ngAfterContentInit(): void {\n this._watchStateChanges();\n }\n\n _open(event: Event): void {\n if (this.datepicker && !this.disabled) {\n this.datepicker.open();\n event.stopPropagation();\n }\n }\n\n private _watchStateChanges() {\n const datepickerDisabled = this.datepicker ? this.datepicker._disabledChange : observableOf();\n const inputDisabled =\n this.datepicker && this.datepicker._datepickerInput ? this.datepicker._datepickerInput._disabledChange : observableOf();\n const datepickerToggled = this.datepicker ? merge(this.datepicker.openedStream, this.datepicker.closedStream) : observableOf();\n\n this._stateChanges.unsubscribe();\n this._stateChanges = merge(this._intl.changes, datepickerDisabled, inputDisabled, datepickerToggled).subscribe(() =>\n this._changeDetectorRef.markForCheck()\n );\n }\n}\n","\n \n @if (!_customIcon) {\n \n }\n\n","/**\n * @license\n * Copyright Health Catalyst All Rights Reserved.\n *\n * Use of this source code is governed by an Apache-2.0 license that can be\n * found in the LICENSE file at https://raw.githubusercontent.com/HealthCatalyst/Fabric.Cashmere/dev/LICENSE\n */\n\nimport {Platform} from '@angular/cdk/platform';\nimport {Inject, Injectable, Optional} from '@angular/core';\nimport {DateAdapter, HC_DATE_LOCALE} from './date-adapter';\n\n// TODO(mmalerba): Remove when we no longer support safari 9.\n/** Whether the browser supports the Intl API. */\nconst SUPPORTS_INTL_API = typeof Intl !== 'undefined';\n\n/** The default month names to use if Intl API is not available. */\nconst DEFAULT_MONTH_NAMES = {\n long: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],\n short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']\n};\n\n/** The default date names to use if Intl API is not available. */\nconst DEFAULT_DATE_NAMES = range(31, i => String(i + 1));\n\n/** The default day of the week names to use if Intl API is not available. */\nconst DEFAULT_DAY_OF_WEEK_NAMES = {\n long: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\n short: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S']\n};\n\n/** First day of week according locale.\n * Taken form moment.js source code https://github.com/moment/moment/tree/develop/src/locale\n */\nconst FIRST_DAY_OF_WEEK = {\n af: 1,\n ar: 6,\n 'ar-ly': 6,\n 'ar-ma': 6,\n 'ar-tn': 1,\n az: 1,\n be: 1,\n bg: 1,\n bm: 1,\n br: 1,\n bs: 1,\n ca: 1,\n cs: 1,\n cv: 1,\n cy: 1,\n da: 1,\n de: 1,\n 'de-at': 1,\n 'de-ch': 1,\n el: 1,\n 'en-au': 1,\n 'en-gb': 1,\n 'en-ie': 1,\n 'en-nz': 1,\n eo: 1,\n es: 1,\n 'es-do': 1,\n et: 1,\n eu: 1,\n fa: 6,\n fi: 1,\n fo: 1,\n fr: 1,\n 'fr-ch': 1,\n fy: 1,\n gd: 1,\n gl: 1,\n 'gom-latn': 1,\n hr: 1,\n hu: 1,\n 'hy-am': 1,\n id: 1,\n is: 1,\n it: 1,\n jv: 1,\n ka: 1,\n kk: 1,\n km: 1,\n ky: 1,\n lb: 1,\n lt: 1,\n lv: 1,\n me: 1,\n mi: 1,\n mk: 1,\n ms: 1,\n 'ms-my': 1,\n mt: 1,\n my: 1,\n nb: 1,\n nl: 1,\n 'nl-be': 1,\n nn: 1,\n pl: 1,\n pt: 1,\n 'pt-BR': 0,\n ro: 1,\n ru: 1,\n sd: 1,\n se: 1,\n sk: 1,\n sl: 1,\n sq: 1,\n sr: 1,\n 'sr-cyrl': 1,\n ss: 1,\n sv: 1,\n sw: 1,\n tet: 1,\n tg: 1,\n 'tl-ph': 1,\n tlh: 1,\n tr: 1,\n tzl: 1,\n tzm: 6,\n 'tzm-latn': 6,\n 'ug-cn': 1,\n uk: 1,\n ur: 1,\n uz: 1,\n 'uz-latn': 1,\n vi: 1,\n 'x-pseudo': 1,\n yo: 1,\n 'zh-cn': 1\n};\n\n/**\n * Matches strings that have the form of a valid RFC 3339 string\n * (https://tools.ietf.org/html/rfc3339). Note that the string may not actually be a valid date\n * because the regex will match strings an with out of bounds month, date, etc.\n */\nconst ISO_8601_REGEX = /^\\d{4}-\\d{2}-\\d{2}(?:T\\d{2}:\\d{2}:\\d{2}(?:\\.\\d+)?(?:Z|(?:(?:\\+|-)\\d{2}:\\d{2}))?)?$/;\n\n/** Creates an array and fills it with values. */\nfunction range(length: number, valueFunction: (index: number) => T): T[] {\n const valuesArray = Array(length);\n for (let i = 0; i < length; i++) {\n valuesArray[i] = valueFunction(i);\n }\n return valuesArray;\n}\n\n/** Adapts the native JS Date for use with cdk-based components that work with dates. */\n@Injectable()\nexport class NativeDateAdapter extends DateAdapter {\n /** Whether to clamp the date between 1 and 9999 to avoid IE and Edge errors. */\n private readonly _clampDate: boolean;\n\n /**\n * Whether to use `timeZone: 'utc'` with `Intl.DateTimeFormat` when formatting dates.\n * Without this `Intl.DateTimeFormat` sometimes chooses the wrong timeZone, which can throw off\n * the result. (e.g. in the en-US locale `new Date(1800, 7, 14).toLocaleDateString()`\n * will produce `'8/13/1800'`.\n *\n * TODO(mmalerba): drop this variable. It's not being used in the code right now. We're now\n * getting the string representation of a Date object from it's utc representation. We're keeping\n * it here for sometime, just for precaution, in case we decide to revert some of these changes\n * though.\n */\n useUtcForDisplay = true;\n\n constructor(\n @Optional()\n @Inject(HC_DATE_LOCALE)\n hcDateLocale: string,\n platform: Platform\n ) {\n super();\n super.setLocale(hcDateLocale);\n\n // IE does its own time zone correction, so we disable this on IE.\n this.useUtcForDisplay = !platform.TRIDENT;\n this._clampDate = platform.TRIDENT || platform.EDGE;\n }\n\n getYear(date: Date): number {\n return date.getFullYear();\n }\n\n getMonth(date: Date): number {\n return date.getMonth();\n }\n\n getDate(date: Date): number {\n return date.getDate();\n }\n\n getHours(date: Date): number {\n return date.getHours();\n }\n\n getMinutes(date: Date): number {\n return date.getMinutes();\n }\n\n getDayOfWeek(date: Date): number {\n return date.getDay();\n }\n\n getMonthNames(style: 'long' | 'short' | 'narrow'): string[] {\n if (SUPPORTS_INTL_API) {\n const dtf = new Intl.DateTimeFormat(this.locale, {month: style, timeZone: 'utc'});\n return range(12, i => this._stripDirectionalityCharacters(this._format(dtf, new Date(2017, i, 1))));\n }\n return DEFAULT_MONTH_NAMES[style];\n }\n\n getDateNames(): string[] {\n if (SUPPORTS_INTL_API) {\n const dtf = new Intl.DateTimeFormat(this.locale, {day: 'numeric', timeZone: 'utc'});\n return range(31, i => this._stripDirectionalityCharacters(this._format(dtf, new Date(2017, 0, i + 1))));\n }\n return DEFAULT_DATE_NAMES;\n }\n\n getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[] {\n if (SUPPORTS_INTL_API) {\n const dtf = new Intl.DateTimeFormat(this.locale, {weekday: style, timeZone: 'utc'});\n return range(7, i => this._stripDirectionalityCharacters(this._format(dtf, new Date(2017, 0, i + 1))));\n }\n return DEFAULT_DAY_OF_WEEK_NAMES[style];\n }\n\n getYearName(date: Date): string {\n if (SUPPORTS_INTL_API) {\n const dtf = new Intl.DateTimeFormat(this.locale, {year: 'numeric', timeZone: 'utc'});\n return this._stripDirectionalityCharacters(this._format(dtf, date));\n }\n return String(this.getYear(date));\n }\n\n getFirstDayOfWeek(): number {\n // We can't tell using native JS Date what the first day of the week is.\n // Sometimes people use excess language definition, e.g. ru-RU,\n // so we use fallback to two-letter language code\n const locale = this.locale.toLowerCase();\n return FIRST_DAY_OF_WEEK[locale] || FIRST_DAY_OF_WEEK[locale.substr(0, 2)] || 0;\n }\n\n getNumDaysInMonth(date: Date): number {\n return this.getDate(this._createDateWithOverflow(this.getYear(date), this.getMonth(date) + 1, 0));\n }\n\n clone(date: Date): Date {\n return this.createDate(this.getYear(date), this.getMonth(date), this.getDate(date));\n }\n\n createDate(year: number, month: number, date: number): Date {\n // Check for invalid month and date (except upper bound on date which we have to check after\n // creating the Date).\n if (month < 0 || month > 11) {\n throw Error(`Invalid month index \"${month}\". Month index has to be between 0 and 11.`);\n }\n\n if (date < 1) {\n throw Error(`Invalid date \"${date}\". Date has to be greater than 0.`);\n }\n\n const result = this._createDateWithOverflow(year, month, date);\n // Check that the date wasn't above the upper bound for the month, causing the month to overflow\n if (result.getMonth() !== month) {\n throw Error(`Invalid date \"${date}\" for month with index \"${month}\".`);\n }\n\n return result;\n }\n\n today(): Date {\n return new Date();\n }\n\n parse(value: unknown): Date | null {\n // We have no way using the native JS Date to set the parse format or locale, so we ignore these\n // parameters.\n if (typeof value === 'number') {\n return new Date(value);\n }\n return value ? new Date(Date.parse(value as string)) : null;\n }\n\n format(date: Date, displayFormat: Record): string {\n if (!this.isValid(date)) {\n throw Error('NativeDateAdapter: Cannot format invalid date.');\n }\n\n if (SUPPORTS_INTL_API) {\n // On IE and Edge the i18n API will throw a hard error that can crash the entire app\n // if we attempt to format a date whose year is less than 1 or greater than 9999.\n if (this._clampDate && (date.getFullYear() < 1 || date.getFullYear() > 9999)) {\n date = this.clone(date);\n date.setFullYear(Math.max(1, Math.min(9999, date.getFullYear())));\n }\n\n displayFormat = {...displayFormat, timeZone: 'utc'};\n\n const dtf = new Intl.DateTimeFormat(this.locale, displayFormat);\n return this._stripDirectionalityCharacters(this._format(dtf, date));\n }\n return this._stripDirectionalityCharacters(date.toDateString());\n }\n\n addCalendarYears(date: Date, years: number): Date {\n return this.addCalendarMonths(date, years * 12);\n }\n\n addCalendarMonths(date: Date, months: number): Date {\n let newDate = this._createDateWithOverflow(this.getYear(date), this.getMonth(date) + months, this.getDate(date));\n\n // It's possible to wind up in the wrong month if the original month has more days than the new\n // month. In this case we want to go to the last day of the desired month.\n // Note: the additional + 12 % 12 ensures we end up with a positive number, since JS % doesn't\n // guarantee this.\n if (this.getMonth(newDate) !== (((this.getMonth(date) + months) % 12) + 12) % 12) {\n newDate = this._createDateWithOverflow(this.getYear(newDate), this.getMonth(newDate), 0);\n }\n\n return newDate;\n }\n\n addCalendarDays(date: Date, days: number): Date {\n return this._createDateWithOverflow(this.getYear(date), this.getMonth(date), this.getDate(date) + days);\n }\n\n toIso8601(date: Date): string {\n return [date.getUTCFullYear(), this._2digit(date.getUTCMonth() + 1), this._2digit(date.getUTCDate())].join('-');\n }\n\n /**\n * Returns the given value if given a valid Date or null. Deserializes valid ISO 8601 strings\n * (https://www.ietf.org/rfc/rfc3339.txt) into valid Dates and empty string into null. Returns an\n * invalid date for all other values.\n */\n deserialize(value: unknown): Date | null {\n if (typeof value === 'string') {\n if (!value) {\n return null;\n }\n // The `Date` constructor accepts formats other than ISO 8601, so we need to make sure the\n // string is the right format first.\n if (ISO_8601_REGEX.test(value)) {\n const date = new Date(value);\n if (this.isValid(date)) {\n return date;\n }\n }\n }\n return super.deserialize(value);\n }\n\n isDateInstance(obj: unknown): boolean {\n return obj instanceof Date;\n }\n\n isValid(date: Date): boolean {\n return !isNaN(date.getTime());\n }\n\n invalid(): Date {\n return new Date(NaN);\n }\n\n /** Creates a date but allows the month and date to overflow. */\n private _createDateWithOverflow(year: number, month: number, date: number) {\n const result = new Date(year, month, date);\n\n // We need to correct for the fact that JS native Date treats years in range [0, 99] as\n // abbreviations for 19xx.\n if (year >= 0 && year < 100) {\n result.setFullYear(this.getYear(result) - 1900);\n }\n return result;\n }\n\n /**\n * Pads a number to make it two digits.\n * @param n The number to pad.\n * @returns The padded number.\n */\n private _2digit(n: number) {\n return ('00' + n).slice(-2);\n }\n\n /**\n * Strip out unicode LTR and RTL characters. Edge and IE insert these into formatted dates while\n * other browsers do not. We remove them to make output consistent and because they interfere with\n * date parsing.\n * @param str The string to strip direction characters from.\n * @returns The stripped string.\n */\n private _stripDirectionalityCharacters(str: string) {\n return str.replace(/[\\u200e\\u200f]/g, '');\n }\n\n /**\n * When converting Date object to string, javascript built-in functions may return wrong\n * results because it applies its internal DST rules. The DST rules around the world change\n * very frequently, and the current valid rule is not always valid in previous years though.\n * We work around this problem building a new Date object which has its internal UTC\n * representation with the local date and time.\n * @param dtf Intl.DateTimeFormat object, containg the desired string format. It must have\n * timeZone set to 'utc' to work fine.\n * @param date Date from which we want to get the string representation according to dtf\n * @returns A Date object with its UTC representation based on the passed in date info\n */\n private _format(dtf: Intl.DateTimeFormat, date: Date) {\n const d = new Date(\n Date.UTC(\n date.getFullYear(),\n date.getMonth(),\n date.getDate(),\n date.getHours(),\n date.getMinutes(),\n date.getSeconds(),\n date.getMilliseconds()\n )\n );\n return dtf.format(d);\n }\n}\n","/**\n * @license\n * Copyright Health Catalyst All Rights Reserved.\n *\n * Use of this source code is governed by an Apache-2.0 license that can be\n * found in the LICENSE file at https://raw.githubusercontent.com/HealthCatalyst/Fabric.Cashmere/dev/LICENSE\n */\n\nimport {HcDateFormats} from './date-formats';\n\nexport const HC_NATIVE_DATE_FORMATS: HcDateFormats = {\n parse: {\n dateInput: null\n },\n display: {\n dateInput: {year: 'numeric', month: 'numeric', day: 'numeric'},\n timeInput: {hour: 'numeric', minute: '2-digit', hour12: true},\n dateTimeInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true},\n monthYearLabel: {year: 'numeric', month: 'short'},\n dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},\n monthYearA11yLabel: {year: 'numeric', month: 'long'}\n }\n};\n","/**\n * @license\n * Copyright Health Catalyst All Rights Reserved.\n *\n * Use of this source code is governed by an Apache-2.0 license that can be\n * found in the LICENSE file at https://raw.githubusercontent.com/HealthCatalyst/Fabric.Cashmere/dev/LICENSE\n */\n\nimport {PlatformModule} from '@angular/cdk/platform';\nimport {NgModule} from '@angular/core';\nimport {DateAdapter} from './date-adapter';\nimport {HC_DATE_FORMATS} from './date-formats';\nimport {NativeDateAdapter} from './native-date-adapter';\nimport {HC_NATIVE_DATE_FORMATS} from './native-date-formats';\n\n@NgModule({\n imports: [PlatformModule],\n providers: [{provide: DateAdapter, useClass: NativeDateAdapter}]\n})\nexport class NativeDateModule {}\n\n@NgModule({\n imports: [NativeDateModule],\n providers: [{provide: HC_DATE_FORMATS, useValue: HC_NATIVE_DATE_FORMATS}]\n})\nexport class HcNativeDateModule {}\n","/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n Component,\n ViewEncapsulation,\n Output,\n EventEmitter,\n Optional,\n InjectionToken,\n ElementRef,\n ChangeDetectionStrategy,\n OnDestroy,\n Input,\n ComponentRef,\n NgZone,\n ViewContainerRef,\n Inject,\n DOCUMENT\n} from '@angular/core';\nimport {D} from './datetime/date-formats';\nimport {DateAdapter} from './datetime/date-adapter';\nimport {createMissingDateImplError} from './datetime/datepicker-errors';\nimport {Subject, Subscription, merge} from 'rxjs';\nimport {ScrollStrategy, Overlay, ComponentType, OverlayRef, OverlayConfig, PositionStrategy} from '@angular/cdk/overlay';\nimport {parseBooleanAttribute} from '../util';\nimport {HcCalendarCellCssClasses} from './calendar-body/calendar-body.component';\nimport {DatepickerContentComponent} from './datepicker-content/datepicker-content.component';\nimport {ComponentPortal} from '@angular/cdk/portal';\nimport {DatepickerInputDirective} from './datepicker-input/datepicker-input.directive';\nimport {Directionality} from '@angular/cdk/bidi';\n\nimport {take, filter} from 'rxjs/operators';\n\n/** Used to generate a unique ID for each datepicker instance. */\nlet datepickerUid = 0;\n\n/** Injection token that determines the scroll handling while the calendar is open. */\nexport const HC_DATEPICKER_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>('hc-datepicker-scroll-strategy');\n\n/** @docs-private */\nexport function HC_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy {\n return () => overlay.scrollStrategies.reposition();\n}\n\n/** @docs-private */\nexport const HC_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {\n provide: HC_DATEPICKER_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: HC_DATEPICKER_SCROLL_STRATEGY_FACTORY\n};\n\n// Boilerplate for applying mixins to hcDatepickerContent.\n/** @docs-private */\nexport class HcDatepickerContentBase {\n constructor(public _elementRef: ElementRef) {}\n}\n\n/** Component responsible for managing the datepicker popup */\n@Component({\n selector: 'hc-datepicker',\n template: '',\n exportAs: 'hcDatepicker',\n styleUrls: ['datepicker.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class DatepickerComponent implements OnDestroy {\n private _scrollStrategy: () => ScrollStrategy;\n\n /**\n * Whether the datepicker can be set to a blank value (by deleting its contents). Defaults to `false`.\n */\n @Input('allows-blank-values')\n get allowsBlankValues() {\n return this._datepickerInput && this._datepickerInput.allowsBlankValues;\n }\n set allowsBlankValues(val: boolean) {\n if (this._datepickerInput) {\n this._datepickerInput.allowsBlankValues = parseBooleanAttribute(val);\n }\n }\n\n /**\n * Whether the datepicker includes the calendar, time selector, or both. Defaults to `date`.\n */\n @Input()\n get mode(): 'date' | 'time' | 'date-time' {\n return this._mode;\n }\n set mode( value: 'date' | 'time' | 'date-time' ) {\n this._mode = value;\n if ( this._selected ) {\n this._selectedChanged.next(this._selected);\n }\n }\n private _mode: 'date' | 'time' | 'date-time' = 'date';\n\n /**\n * Whether the time picker uses a 12 or 24 hour clock. Defaults to 12.\n */\n @Input()\n get hourCycle(): string | number {\n return this._hourCycle;\n }\n set hourCycle( value: string | number ) {\n if ( +value !== this._hourCycle) {\n this._hourCycle = +value;\n if ( this._selected ) {\n this._selectedChanged.next(this._selected);\n }\n }\n }\n private _hourCycle = 12;\n\n /** An input indicating the type of the custom header component for the calendar, if set. */\n @Input()\n calendarHeaderComponent: ComponentType;\n\n /** The date to open the calendar to initially. */\n @Input()\n get startAt(): D | null {\n // If an explicit startAt is set we start there, otherwise we start at whatever the currently\n // selected value is.\n return this._startAt || (this._datepickerInput ? this._datepickerInput.value : null);\n }\n set startAt(value: D | null) {\n this._startAt = this._getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n private _startAt: D | null;\n\n /** The view that the calendar should start in. */\n @Input()\n startView: 'month' | 'year' | 'multi-year' = 'month';\n\n /** Whether the datepicker pop-up should be disabled. */\n @Input()\n get disabled(): boolean {\n return this._disabled === undefined && this._datepickerInput ? this._datepickerInput.disabled : !!this._disabled;\n }\n set disabled(value: boolean) {\n const newValue = parseBooleanAttribute(value);\n\n if (newValue !== this._disabled) {\n this._disabled = newValue;\n this._disabledChange.next(newValue);\n }\n }\n private _disabled: boolean;\n\n /**\n * Emits selected year in multiyear view.\n * This doesn't imply a change on the selected date.\n */\n @Output()\n readonly yearSelected: EventEmitter = new EventEmitter();\n\n /**\n * Emits selected month in year view.\n * This doesn't imply a change on the selected date.\n */\n @Output()\n readonly monthSelected: EventEmitter = new EventEmitter();\n\n /** Classes to be passed to the date picker panel. Supports the same syntax as `ngClass`. */\n @Input()\n panelClass: string | string[];\n\n /** Function that can be used to add custom CSS classes to dates. */\n @Input()\n dateClass: (date: D) => HcCalendarCellCssClasses;\n\n /** Emits when the datepicker has been opened. */\n @Output('opened')\n openedStream: EventEmitter = new EventEmitter();\n\n /** Emits when the datepicker has been closed. */\n @Output('closed')\n closedStream: EventEmitter = new EventEmitter();\n\n /** Whether the calendar is open. */\n @Input()\n get opened(): boolean {\n return this._opened;\n }\n set opened(value: boolean) {\n if (value) {\n this.open();\n } else {\n this.close();\n }\n }\n private _opened = false;\n\n /** The id for the datepicker calendar. */\n id = `hc-datepicker-${datepickerUid++}`;\n\n /** The currently selected date. */\n get _selected(): D | null {\n return this._validSelected;\n }\n set _selected(value: D | null) {\n this._validSelected = value;\n }\n private _validSelected: D | null = null;\n\n /** The minimum selectable date. */\n get _minDate(): D | null {\n return this._datepickerInput && this._datepickerInput.min;\n }\n\n /** The maximum selectable date. */\n get _maxDate(): D | null {\n return this._datepickerInput && this._datepickerInput.max;\n }\n\n get _dateFilter(): (date: D | null) => boolean {\n return this._datepickerInput && this._datepickerInput._dateFilter;\n }\n\n /** A reference to the overlay when the calendar is opened as a popup. */\n _popupRef: OverlayRef | null;\n\n /** A portal containing the calendar for this datepicker. */\n private _calendarPortal: ComponentPortal;\n\n /** Reference to the component instantiated in popup mode. */\n private _popupComponentRef: ComponentRef | null;\n\n /** The element that was focused before the datepicker was opened. */\n private _focusedElementBeforeOpen: HTMLElement | null = null;\n\n /** Subscription to value changes in the associated input element. */\n private _inputSubscription = Subscription.EMPTY;\n\n /** The input element this datepicker is associated with. */\n _datepickerInput: DatepickerInputDirective;\n\n /** Emits when the datepicker is disabled. */\n readonly _disabledChange = new Subject();\n\n /** Emits new selected date when selected date changes. */\n readonly _selectedChanged = new Subject();\n\n constructor(\n private _overlay: Overlay,\n private _ngZone: NgZone,\n private _viewContainerRef: ViewContainerRef,\n @Inject(HC_DATEPICKER_SCROLL_STRATEGY) scrollStrategy: any,\n @Optional() private _dateAdapter: DateAdapter,\n @Optional() private _dir: Directionality,\n @Optional()\n @Inject(DOCUMENT)\n private _document: any\n ) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n\n this._scrollStrategy = scrollStrategy;\n }\n\n ngOnDestroy(): void {\n this.close();\n this._inputSubscription.unsubscribe();\n this._disabledChange.complete();\n\n if (this._popupRef) {\n this._popupRef.dispose();\n this._popupComponentRef = null;\n }\n }\n\n /** Selects the given date */\n select(date: D): void {\n const oldValue = this._selected;\n this._selected = date;\n if (!this._dateAdapter.sameDate(oldValue, this._selected)) {\n this._selectedChanged.next(date);\n }\n }\n\n /** Emits the selected year in multiyear view */\n _selectYear(normalizedYear: D): void {\n this.yearSelected.emit(normalizedYear);\n }\n\n /** Emits selected month in year view */\n _selectMonth(normalizedMonth: D): void {\n this.monthSelected.emit(normalizedMonth);\n }\n\n /**\n * Register an input with this datepicker.\n * @param input The datepicker input to register with this datepicker.\n */\n _registerInput(input: DatepickerInputDirective): void {\n if (this._datepickerInput) {\n throw Error('A hcDatepicker can only be associated with a single input.');\n }\n this._datepickerInput = input;\n this._inputSubscription = this._datepickerInput._valueChange.subscribe((value: D | null) => (this._selected = value));\n }\n\n /** Open the calendar. */\n open(): void {\n if (this._opened || this.disabled) {\n return;\n }\n if (!this._datepickerInput) {\n throw Error('Attempted to open an hcDatepicker with no associated input.');\n }\n if (this._document) {\n this._focusedElementBeforeOpen = this._document.activeElement as HTMLElement;\n }\n\n this._openAsPopup();\n this._opened = true;\n this.openedStream.emit();\n }\n\n /** Close the calendar. */\n close(): void {\n if (!this._opened) {\n return;\n }\n if (this._popupRef && this._popupRef.hasAttached()) {\n this._popupRef.detach();\n this._popupRef.dispose();\n this._popupRef = null;\n }\n if (this._calendarPortal && this._calendarPortal.isAttached) {\n this._calendarPortal.detach();\n }\n\n const completeClose = () => {\n // The `_opened` could've been reset already if\n // we got two events in quick succession.\n if (this._opened) {\n this._opened = false;\n this.closedStream.emit();\n this._focusedElementBeforeOpen = null;\n }\n };\n\n if (this._focusedElementBeforeOpen && typeof this._focusedElementBeforeOpen.focus === 'function') {\n // Because IE moves focus asynchronously, we can't count on it being restored before we've\n // marked the datepicker as closed. If the event fires out of sequence and the element that\n // we're refocusing opens the datepicker on focus, the user could be stuck with not being\n // able to close the calendar at all. We work around it by making the logic, that marks\n // the datepicker as closed, async as well.\n this._focusedElementBeforeOpen.focus();\n setTimeout(completeClose);\n } else {\n completeClose();\n }\n }\n\n /** Open the calendar as a popup. */\n private _openAsPopup(): void {\n if (!this._calendarPortal) {\n this._calendarPortal = new ComponentPortal(DatepickerContentComponent, this._viewContainerRef);\n }\n\n if (!this._popupRef) {\n this._createPopup();\n }\n\n if (this._popupRef && !this._popupRef.hasAttached()) {\n this._popupComponentRef = this._popupRef.attach(this._calendarPortal);\n this._popupComponentRef.instance.datepicker = this;\n\n // Update the position once the calendar has rendered.\n this._ngZone.onStable\n .asObservable()\n .pipe(take(1))\n .subscribe(() => {\n if (this._popupRef) { this._popupRef.updatePosition(); }\n });\n }\n }\n\n /** Create the popup. */\n private _createPopup(): void {\n const overlayConfig = new OverlayConfig({\n positionStrategy: this._createPopupPositionStrategy(),\n hasBackdrop: true,\n backdropClass: 'hc-overlay-transparent-backdrop',\n direction: this._dir,\n scrollStrategy: this._scrollStrategy(),\n panelClass: 'hc-datepicker-popup'\n });\n\n this._popupRef = this._overlay.create(overlayConfig);\n this._popupRef.overlayElement.setAttribute('role', 'dialog');\n\n merge(\n this._popupRef.backdropClick(),\n this._popupRef.detachments(),\n this._popupRef.keydownEvents().pipe(\n filter(event => {\n // Closing on alt + up is only valid when there's an input associated with the datepicker.\n return event.key === 'Escape' || (this._datepickerInput && event.altKey && event.key === 'ArrowUp');\n })\n )\n ).subscribe(() => this.close());\n }\n\n /** Create the popup PositionStrategy. */\n private _createPopupPositionStrategy(): PositionStrategy {\n return this._overlay\n .position()\n .flexibleConnectedTo(this._datepickerInput.getConnectedOverlayOrigin())\n .withTransformOriginOn('.hc-datepicker-content')\n .withFlexibleDimensions(false)\n .withViewportMargin(8)\n .withLockedPosition()\n .withPositions([\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n // hc form field wrapper bottom margin\n offsetY: -20\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'center'\n },\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top'\n },\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: 60\n }\n ]);\n }\n\n /**\n * @param obj The object to check.\n * @returns The given object if it is both a date instance and valid, otherwise null.\n */\n private _getValidDateOrNull(obj: any): D | null {\n return this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj) ? obj : null;\n }\n}\n","import {Component, HostBinding, ViewEncapsulation} from '@angular/core';\n\n/** Container for additional label content for HcFormFieldComponent */\n@Component({\n selector: 'hc-label-ext',\n template: '',\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class HcLabelExtensionComponent {\n @HostBinding('class.hc-form-field-label-extension')\n _hostHcLabelClass = true;\n}\n","import {Directive, Input, ContentChildren, AfterContentInit, OnDestroy} from '@angular/core';\nimport type {QueryList} from '@angular/core';\nimport {parseBooleanAttribute} from '../util';\nimport {HcFormFieldComponent} from './hc-form-field.component';\nimport {takeUntil} from 'rxjs/operators';\nimport {Subject} from 'rxjs';\n\n/** `hcForm` directive that allows settings to be applied to all included HcFormFields */\n@Directive({\n selector: '[hcForm]',\n standalone: false\n})\nexport class HcFormDirective implements AfterContentInit, OnDestroy {\n private _tight = false;\n private unsubscribe$ = new Subject();\n\n @ContentChildren(HcFormFieldComponent, {descendants: true})\n _formFields: QueryList;\n\n /** Set the tight parameter on all enclosed HcFormFields. *Defaults to `false`.* */\n @Input()\n get tight(): boolean {\n return this._tight;\n }\n set tight(value: boolean) {\n this._tight = parseBooleanAttribute(value);\n this._updateTightFields();\n }\n\n ngAfterContentInit(): void {\n this._updateTightFields();\n // Pass the tight setting to any FormFields added dynamically\n this._formFields.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this._updateTightFields());\n }\n\n ngOnDestroy(): void {\n this.unsubscribe$.next();\n this.unsubscribe$.complete();\n }\n\n _updateTightFields(): void {\n if (this._formFields) {\n this._formFields.forEach(field => {\n field.tight = this._tight;\n });\n }\n }\n}\n","import {NgModule} from '@angular/core';\nimport {HcFormFieldComponent} from './hc-form-field.component';\nimport {CommonModule} from '@angular/common';\nimport {HcErrorComponent} from './hc-error.component';\nimport {HcSuffixDirective} from './hc-suffix.directive';\nimport {HcPrefixDirective} from './hc-prefix.directive';\nimport {HcLabelComponent} from './hc-label.component';\nimport {HcLabelExtensionComponent} from './hc-label-ext.component';\nimport {HcFormDirective} from './hc-form.directive';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [\n HcFormFieldComponent,\n HcErrorComponent,\n HcPrefixDirective,\n HcSuffixDirective,\n HcLabelComponent,\n HcLabelExtensionComponent,\n HcFormDirective\n ],\n exports: [\n HcFormFieldComponent,\n HcErrorComponent,\n HcPrefixDirective,\n HcSuffixDirective,\n HcLabelComponent,\n HcLabelExtensionComponent,\n HcFormDirective\n ]\n})\nexport class FormFieldModule {}\n","import {Component, EventEmitter, Input, Output} from '@angular/core';\n\n@Component({\n selector: 'hc-clear-input-btn',\n template: `\n
0\" title=\"Clear\" (click)=\"clear()\">
\n `,\n styleUrls: ['clear-input.component.scss'],\n standalone: false\n})\nexport class ClearInputComponent {\n /** A reference to the HTML input element */\n @Input() public inputEl: HTMLInputElement;\n @Output() public clearClicked = new EventEmitter();\n public clear(): void {\n this.inputEl.value = '';\n this.inputEl.focus();\n this.inputEl.dispatchEvent(new CustomEvent('input')); // forces update of ngModel (if there is one)\n this.inputEl.dispatchEvent(new CustomEvent('keyup')); // fire off a keyup (for those inputs functioning as a search that are tied to keyup)\n this.clearClicked.emit();\n }\n}\n","import {NgModule} from '@angular/core';\nimport {InputDirective} from './input.directive';\nimport {FormFieldModule} from '../form-field/hc-form-field.module';\nimport {CommonModule} from '@angular/common';\nimport { ClearInputComponent } from './clear-input.component';\n\n@NgModule({\n imports: [CommonModule, FormFieldModule],\n declarations: [InputDirective, ClearInputComponent],\n exports: [InputDirective, ClearInputComponent]\n})\nexport class InputModule {}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {FormsModule} from '@angular/forms';\nimport {SelectComponent} from './select.component';\nimport {HcOptionDirective} from './hc-option.directive';\nimport {ObserversModule} from '@angular/cdk/observers';\n\n@NgModule({\n imports: [CommonModule, FormsModule, ObserversModule],\n exports: [SelectComponent, HcOptionDirective],\n declarations: [SelectComponent, HcOptionDirective]\n})\nexport class SelectModule {}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {OverlayModule} from '@angular/cdk/overlay';\nimport {A11yModule} from '@angular/cdk/a11y';\nimport {PortalModule} from '@angular/cdk/portal';\nimport {FormsModule, ReactiveFormsModule} from '@angular/forms';\nimport {CalendarComponent, CalendarHeaderComponent} from './calendar/calendar.component';\nimport {CalendarBodyComponent} from './calendar-body/calendar-body.component';\nimport {DatepickerComponent, HC_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER} from './datepicker.component';\nimport {DatepickerContentComponent} from './datepicker-content/datepicker-content.component';\nimport {DatepickerToggleComponent, DatepickerToggleIconDirective} from './datepicker-toggle/datepicker-toggle.component';\nimport {MonthViewComponent} from './month-view/month-view.component';\nimport {YearViewComponent} from './year-view/year-view.component';\nimport {MultiYearViewComponent} from './multi-year-view/multi-year-view.component';\nimport {HcDatepickerIntl} from './datepicker-intl';\nimport {DatepickerInputDirective} from './datepicker-input/datepicker-input.directive';\nimport {ButtonModule} from '../button/button.module';\nimport {IconModule} from '../icon/icon.module';\nimport {InputModule} from '../input/input.module';\nimport {SelectModule} from '../select/select.module';\nimport {FormFieldModule} from '../form-field/hc-form-field.module';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n ReactiveFormsModule,\n ButtonModule,\n IconModule,\n InputModule,\n FormFieldModule,\n SelectModule,\n OverlayModule,\n A11yModule,\n PortalModule\n ],\n exports: [\n CalendarComponent,\n CalendarBodyComponent,\n DatepickerComponent,\n DatepickerContentComponent,\n DatepickerInputDirective,\n DatepickerToggleComponent,\n DatepickerToggleIconDirective,\n MonthViewComponent,\n YearViewComponent,\n MultiYearViewComponent,\n CalendarHeaderComponent\n ],\n declarations: [\n CalendarComponent,\n CalendarBodyComponent,\n DatepickerComponent,\n DatepickerContentComponent,\n DatepickerInputDirective,\n DatepickerToggleComponent,\n DatepickerToggleIconDirective,\n MonthViewComponent,\n YearViewComponent,\n MultiYearViewComponent,\n CalendarHeaderComponent\n ],\n providers: [HcDatepickerIntl, HC_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER]\n})\nexport class DatepickerModule {}\n","import {Injectable} from '@angular/core';\nimport {DateRangeOptions, DateRange} from '../model/model';\nimport {Observable, BehaviorSubject} from 'rxjs';\nimport {D} from '../../datepicker';\nimport {map, tap} from 'rxjs/operators';\n\n@Injectable()\nexport class ConfigStoreService {\n private defaultOptions: DateRangeOptions = {\n presets: [],\n format: 'medium',\n mode: 'date',\n hourCycle: 12,\n excludeWeekends: false,\n locale: 'en-us',\n applyLabel: 'Apply',\n cancelLabel: 'Cancel',\n startDatePrefix: 'Start date:',\n endDatePrefix: 'End date:',\n invalidDateLabel: 'Please enter valid date',\n center: false,\n startDateIsRequired: true,\n endDateIsRequired: true\n };\n\n private dateRangeOptionsSubject: BehaviorSubject = new BehaviorSubject(this.defaultOptions);\n public dateRangeOptions$: Observable;\n\n private rangeUpdateSubject: BehaviorSubject = new BehaviorSubject({fromDate: undefined, toDate: undefined});\n public rangeUpdate$: Observable;\n\n private presetUpdateSubject: BehaviorSubject = new BehaviorSubject({\n fromDate: undefined,\n toDate: undefined\n });\n public presetUpdate$: Observable;\n\n public weekendFilter: (d: D) => boolean = () => true;\n\n private readonly emptyWeekendFilter = () => true;\n private readonly excludeWeekendFilter = (d: Date): boolean => {\n const day = d.getDay();\n return day !== 0 && day !== 6;\n };\n\n constructor() {\n this.dateRangeOptions$ = this.dateRangeOptionsSubject.pipe(\n map((options: DateRangeOptions) => {\n return {\n ...this.defaultOptions,\n ...options\n };\n }),\n tap((options: DateRangeOptions) => {\n if (options.excludeWeekends) {\n this.weekendFilter = this.excludeWeekendFilter;\n } else {\n this.weekendFilter = this.emptyWeekendFilter;\n }\n })\n );\n\n this.rangeUpdate$ = this.rangeUpdateSubject.pipe();\n this.presetUpdate$ = this.presetUpdateSubject.pipe();\n }\n\n updateDateRangeOptions(options: DateRangeOptions): void {\n this.dateRangeOptionsSubject.next(options);\n }\n\n updateRange(dateRange: DateRange): void {\n this.rangeUpdateSubject.next(dateRange);\n }\n\n updatePreset(value: number | DateRange): void {\n this.presetUpdateSubject.next(value);\n }\n\n currentSelection(): DateRange {\n return this.rangeUpdateSubject.value;\n }\n}\n","import {\n Component,\n ViewChild,\n Input,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Output,\n EventEmitter,\n OnChanges,\n SimpleChanges,\n HostBinding,\n ChangeDetectorRef\n} from '@angular/core';\nimport {ConfigStoreService} from '../services/config-store.service';\nimport {CalendarComponent} from '../../datepicker/calendar/calendar.component';\nimport {DatepickerInputDirective, HcDatepickerInputEvent} from '../../datepicker/datepicker-input/datepicker-input.directive';\nimport {D} from '../../datepicker/datetime/date-formats';\n\n/** Component combining a calendar and input as a representation of a date */\n@Component({\n selector: 'hc-calendar-wrapper',\n templateUrl: './calendar-wrapper.component.html',\n styleUrls: ['./calendar-wrapper.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class CalendarWrapperComponent implements OnChanges {\n @HostBinding('class.hc-calendar-wrapper')\n _hostClass = true;\n\n @ViewChild(CalendarComponent, {static: true})\n hcCalendar: CalendarComponent;\n\n @ViewChild(DatepickerInputDirective, {static: true})\n datePickerInput: DatepickerInputDirective;\n\n /** Emits when selected date has changed. */\n @Output()\n readonly selectedDateChange: EventEmitter = new EventEmitter();\n\n /** Current selected date. */\n @Input()\n selectedDate: D | undefined;\n\n @Input()\n dateFormat: string;\n\n /** Whether the pickers include the calendar, time selector, or both. Defaults to `date`. */\n @Input()\n mode: 'date' | 'time' | 'date-time' = 'date';\n\n /** Whether the time picker should use a 12 or 24 hour clock. Defaults to 12. */\n @Input()\n hourCycle = 12;\n\n /** Whether the field is required to contain a value. Defaults to `true`. */\n @Input()\n required = true;\n\n /** Prefix label on top of component. */\n @Input()\n prefixLabel: string;\n\n /** Flag to filter out weekends. */\n @Input()\n excludeWeekends: boolean;\n\n /** The minimum selectable date. */\n @Input()\n minDate: D | undefined;\n\n /** The maximum selectable date. */\n @Input()\n maxDate: D | undefined;\n\n /** Message displayed when a date is invalid. */\n @Input()\n invalidDateLabel: string;\n\n weekendFilter = (): boolean => true;\n\n constructor(public configStore: ConfigStoreService, private ref: ChangeDetectorRef) {}\n\n ngOnChanges(changes: SimpleChanges): void {\n // Necessary to force view refresh\n if (changes.selectedDate) {\n const date: D = changes.selectedDate.currentValue;\n if (date) {\n this.hcCalendar.activeDate = date;\n this.datePickerInput.setDate(date);\n this.selectedDateChange.emit(date);\n }\n }\n\n // eslint-disable-next-line no-prototype-builtins\n if (changes.hasOwnProperty('required')) {\n const isRequired = changes.required.currentValue;\n this.datePickerInput.allowsBlankValues = !isRequired;\n }\n }\n\n _onCalendarChange(date: D): void {\n this.selectedDateChange.emit(date);\n }\n\n _onInputChange(event: HcDatepickerInputEvent): void {\n if (this.mode === 'time') {\n const tempVal = event.value ? new Date(1900, 1, 1, event.value.getHours(), event.value.getMinutes()) : new Date(1900, 1, 1);\n const minVal = this.minDate ? new Date(1900, 1, 1, this.minDate.getHours(), this.minDate.getMinutes()) : new Date(1900, 1, 1);\n const maxVal = this.maxDate ? new Date(1900, 1, 1, this.maxDate.getHours(), this.maxDate.getMinutes()) : new Date(1900, 1, 2);\n\n if (tempVal < minVal || tempVal > maxVal) {\n this.selectedDate = undefined;\n this.selectedDateChange.emit(undefined);\n } else {\n this.selectedDateChange.emit(event.value || undefined);\n }\n } else {\n if (event.value && ((this.minDate && event.value < this.minDate) || (this.maxDate && event.value > this.maxDate))) {\n this.selectedDate = undefined;\n this.selectedDateChange.emit(undefined);\n } else {\n this.selectedDateChange.emit(event.value || undefined);\n }\n }\n }\n\n /** Focus inner input */\n focusInput(): void {\n this.datePickerInput.focus();\n this.ref.detectChanges();\n }\n}\n","
\n \n \n \n \n \n
\n\n\n","/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @angular-eslint/directive-selector */\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n Directive,\n EventEmitter,\n forwardRef,\n HostBinding,\n Input,\n OnInit,\n Optional,\n Output,\n Self,\n ElementRef,\n ContentChild,\n OnDestroy\n} from '@angular/core';\nimport type {QueryList} from '@angular/core';\nimport {parseBooleanAttribute} from '../util';\nimport {HcFormControlComponent} from '../form-field/hc-form-control.component';\nimport {ControlValueAccessor, NgForm, FormGroupDirective, NgControl} from '@angular/forms';\nimport { InputDirective } from '../input';\nimport { delay, takeUntil } from 'rxjs/operators';\nimport { Subject } from 'rxjs';\n\nlet nextUniqueId = 0;\n\n/** Groups single radio buttons together into a set for which only one can be selected */\n@Directive({\n selector: 'hc-radio-group',\n providers: [{ provide: HcFormControlComponent, useExisting: forwardRef(() => RadioGroupDirective), multi: true }],\n exportAs: 'hcRadioGroup',\n standalone: false\n})\nexport class RadioGroupDirective extends HcFormControlComponent implements ControlValueAccessor, AfterContentInit, OnDestroy {\n @HostBinding('class.hc-radio-group-vertical')\n _verticalClass = true;\n @HostBinding('class.hc-radio-group-horizontal')\n _horizontalClass = false;\n\n /** Event emitted when the value of a radio button changes inside the group. */\n @Output()\n change: EventEmitter = new EventEmitter();\n /** A list of all the radio buttons included in the group */\n @ContentChildren(\n forwardRef(() => RadioButtonComponent),\n {descendants: true}\n )\n radios: QueryList;\n private _value: any = null;\n private _uniqueName = `hc-radio-group-${nextUniqueId++}`;\n private _name = this._uniqueName;\n private _inline = false;\n private _align: 'center' | 'top' | 'bottom' = 'center';\n private _initialized = false; // if value of radio group has been set to initial value\n private _selected: RadioButtonComponent | null = null; // the currently selected radio\n private _form: NgForm | FormGroupDirective | null;\n private _unsubscribe = new Subject();\n\n _componentId = this._name;\n\n /** Name of radio group. Auto-generated name will be used if no name is set */\n @Input()\n get name(): string {\n return this._name;\n }\n\n set name(value: string) {\n this._name = value ? value : this._uniqueName;\n this._updateRadioButtonNames();\n }\n\n /** Unique id for the radio group. If none is supplied, defaults to name. */\n @Input()\n get id(): string {\n return this._componentId || this._name;\n }\n\n set id(idVal: string) {\n this._componentId = idVal ? idVal : this._name;\n }\n\n /** Value of radio buttons */\n @Input()\n get value(): any {\n return this._value;\n }\n\n set value(newValue: any) {\n if (this._value !== newValue) {\n this._value = newValue;\n this._updateSelectedRadio();\n this._checkSelectedRadio();\n }\n }\n\n /** Boolean value that enables/disables the radio group */\n @Input()\n get disabled(): boolean {\n if (this._ngControl && this._ngControl.disabled) {\n return this._ngControl.disabled;\n }\n return this._isDisabled;\n }\n\n set disabled(value: boolean) {\n this._isDisabled = parseBooleanAttribute(value);\n this._markRadiosForCheck();\n }\n\n /** Boolean value of whether the radio group is required on a form */\n @Input()\n get required(): boolean {\n return this._isRequired;\n }\n\n set required(value: boolean) {\n this._isRequired = parseBooleanAttribute(value);\n this._markRadiosForCheck();\n }\n\n /** Gets and sets the currently selected value of the radio button group */\n get selected(): RadioButtonComponent | null {\n return this._selected;\n }\n\n set selected(button: RadioButtonComponent | null) {\n this._selected = button;\n this.value = button ? button.value : null;\n this._checkSelectedRadio();\n }\n\n /** Sets the layout orientation of the radio button group; defaults to false */\n @Input()\n get inline(): boolean {\n return this._inline;\n }\n\n set inline(value: boolean) {\n this._inline = parseBooleanAttribute(value);\n this._verticalClass = !this._inline;\n this._horizontalClass = this._inline;\n }\n\n /** If true, condense the default margin and reduce the font size on all contained radios. *Defaults to `false`.* */\n @Input()\n get tight(): boolean {\n return this._tight;\n }\n set tight(value : boolean) {\n this._tight = parseBooleanAttribute(value);\n }\n\n /** Sets the position all radios in the group relative to their associated label. *Defaults to `center`.* */\n @Input()\n get align(): 'center' | 'top' | 'bottom' {\n return this._align;\n }\n set align( value: 'center' | 'top' | 'bottom' ) {\n this._align = value;\n this._markRadiosForCheck();\n }\n\n constructor(\n private _cdRef: ChangeDetectorRef,\n @Optional() _parentForm: NgForm,\n @Optional() _parentFormGroup: FormGroupDirective,\n @Optional()\n @Self()\n public _ngControl: NgControl\n ) {\n super();\n\n this._form = _parentForm || _parentFormGroup;\n if (this._ngControl != null) {\n this._ngControl.valueAccessor = this;\n }\n }\n\n ngAfterContentInit(): void {\n this._initialized = true;\n setTimeout(() => this._markRadiosForCheck());\n\n if ( this._ngControl?.statusChanges ) {\n // delay() is necessary to make sure any form or control state changes have been applied before rechecking error states\n this._ngControl.statusChanges.pipe(delay(0), takeUntil(this._unsubscribe)).subscribe(() => this._updateErrorState());\n }\n if ( this._form ) {\n this._form.ngSubmit.pipe(takeUntil(this._unsubscribe)).subscribe(() => this._updateErrorState());\n }\n\n /** Monkey patching the markAsTouched function to call error state checking because there is not an event for touched changes */\n if ( this._ngControl && this._ngControl.control ) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const self = this;\n const originalMarkMethod = this._ngControl.control.markAsTouched;\n this._ngControl.control.markAsTouched = function () {\n // eslint-disable-next-line prefer-rest-params\n originalMarkMethod.apply(this, arguments);\n self._updateErrorState();\n };\n\n const originalMarkAllMethod = this._ngControl.control.markAllAsTouched;\n this._ngControl.control.markAllAsTouched = function () {\n // eslint-disable-next-line prefer-rest-params\n originalMarkAllMethod.apply(this, arguments);\n self._updateErrorState();\n };\n }\n }\n\n writeValue(value: any): void {\n // Prevent the form control from trying to write a value when removing the control\n if ( this.onChange.name !== 'noop' ) {\n this.value = value;\n this._cdRef.markForCheck();\n }\n }\n\n public onChange: (value: unknown) => void = () => undefined;\n public onTouch: () => unknown = () => undefined;\n public registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n public registerOnTouched(fn: () => unknown): void {\n this.onTouch = fn;\n }\n\n setDisabledState(disabledVal: boolean): void {\n this.disabled = disabledVal;\n }\n\n _touch(): void {\n if (this.onTouch) {\n this.onTouch();\n }\n this._updateErrorState();\n }\n\n _emitChangeEvent(): void {\n if (this._initialized) {\n this.change.emit(new RadioButtonChangeEvent(this._selected, this.value));\n }\n }\n\n private _markRadiosForCheck() {\n if (this.radios) {\n this.radios.forEach(radio => radio._markForCheck());\n }\n }\n\n private _updateSelectedRadio() {\n const isAlreadySelected = this._selected !== null && this._selected.value === this._value;\n if (this.radios && !isAlreadySelected) {\n this._selected = null;\n this.radios.forEach(radio => {\n radio.checked = this.value === radio.value;\n if (radio.checked) {\n this._selected = radio;\n }\n });\n }\n }\n\n private _checkSelectedRadio() {\n if (this._selected && !this._selected.checked) {\n this._selected.checked = true;\n }\n }\n\n private _updateRadioButtonNames(): void {\n if (this.radios) {\n this.radios.forEach(radio => {\n radio.name = this.name;\n });\n }\n }\n\n private _updateErrorState() {\n const oldState = this._errorState;\n\n // TODO: this could be abstracted out as an @Input() if we need this to be configurable\n const newState = !!(\n this._ngControl &&\n this._ngControl.invalid &&\n (this._ngControl.touched || (this._form && this._form.submitted))\n );\n\n if (oldState !== newState) {\n this._errorState = newState;\n this._cdRef.detectChanges();\n }\n }\n\n ngOnDestroy(): void {\n this._unsubscribe.next();\n this._unsubscribe.complete();\n }\n}\n\n/** Event type that is emitted when a radio button or radio button group changes */\nexport class RadioButtonChangeEvent {\n /**\n * @param source the radio button that fired the event\n * @param value the value of that radio button\n */\n constructor(public source: RadioButtonComponent | null, public value: any) {}\n}\n\n/** Radio buttons allow the user to choose only one of a predefined set of mutually exclusive options. */\n@Component({\n selector: 'hc-radio-button',\n templateUrl: './radio-button.component.html',\n styleUrls: ['./radio-button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class RadioButtonComponent implements OnInit, AfterContentInit, OnDestroy {\n private _uniqueId = `hc-radio-button-${nextUniqueId++}`;\n /** Element id for the radio button. Auto-generated id will be used if none is set */\n @Input()\n id: string = this._uniqueId;\n /** Name of radio button */\n @Input()\n name: string;\n /** Event emitted when the value of the radio button changes */\n @Output()\n change = new EventEmitter();\n private _checked = false;\n private _value: any = null;\n private _required = false;\n private _disabled = false;\n private _tight = false;\n private _align: 'center' | 'top' | 'bottom' = 'center';\n private readonly radioGroup: RadioGroupDirective | null;\n\n private unsubscribe$ = new Subject();\n\n @ContentChild(InputDirective)\n _inputChild: InputDirective;\n\n /** Value of radio buttons */\n @Input()\n get value() {\n return this._value;\n }\n\n set value(value: any) {\n if (this._value !== value) {\n this._value = value;\n if (this.radioGroup !== null && !this.checked) {\n this.checked = this.radioGroup.value === value;\n } else if (this.radioGroup !== null && this.checked) {\n this.radioGroup.selected = this;\n }\n }\n }\n\n @HostBinding('attr.id')\n get _getHostId(): string {\n return this.id;\n }\n\n /** Boolean value of whether the radio button is required */\n @Input()\n get required(): boolean {\n return this._required || (this.radioGroup != null && this.radioGroup.required);\n }\n\n set required(required : boolean) {\n this._required = parseBooleanAttribute(required);\n }\n\n /** Boolean value that enables/disables the radio button */\n @Input()\n get disabled(): boolean {\n return this._disabled || (this.radioGroup != null && this.radioGroup.disabled);\n }\n\n set disabled(isDisabled: boolean) {\n this._disabled = parseBooleanAttribute(isDisabled);\n }\n\n /** Boolean that returns whether the radio button is selected */\n @Input()\n get checked(): boolean {\n return this._checked;\n }\n\n set checked(value: boolean) {\n const newCheckedState = parseBooleanAttribute(value);\n if (this._checked !== newCheckedState) {\n this._checked = newCheckedState;\n if (newCheckedState && this.radioGroup && this.radioGroup.value !== this.value) {\n this.radioGroup.selected = this;\n } else if (!newCheckedState && this.radioGroup && this.radioGroup.value === this.value) {\n this.radioGroup.selected = null;\n }\n this.cdRef.markForCheck();\n }\n }\n\n get _inlineGroup(): boolean {\n if (this.radioGroup !== null) {\n return this.radioGroup.inline;\n } else {\n return false;\n }\n }\n\n /** If true, condense the default margin, reduce the font size, and decrease the circle size.\n * Inherits value from parent radio group if part of one. *Defaults to `false`.* */\n @Input()\n get tight(): boolean {\n if (this.radioGroup !== null) {\n return this.radioGroup.tight;\n } else {\n return this._tight;\n }\n }\n set tight(value: boolean) {\n this._tight = parseBooleanAttribute(value);\n }\n\n /** Sets the position of the radio button relative to its associated label (if not already set in the group). *Defaults to `center`.* */\n @Input()\n get align(): 'center' | 'top' | 'bottom' {\n if (this.radioGroup !== null) {\n return this.radioGroup.align;\n } else {\n return this._align;\n }\n };\n set align( value: 'center' | 'top' | 'bottom' ) {\n this._align = value;\n }\n\n get _overlayClass(): string {\n const tightClass = this.tight ? '-tight' : '';\n return 'hc-radio-overlay hc-radio-align-' + this.align + tightClass;\n }\n\n get _inputId(): string {\n return `${this.id || this._uniqueId}-input`;\n }\n\n constructor(@Optional() radioGroup: RadioGroupDirective, private cdRef: ChangeDetectorRef, public _elementRef: ElementRef) {\n this.radioGroup = radioGroup;\n }\n\n ngOnInit(): void {\n if (this.radioGroup !== null) {\n this.checked = this.radioGroup.value === this._value;\n this.name = this.radioGroup.name;\n }\n }\n\n ngAfterContentInit(): void {\n if ( this._inputChild ) {\n this._inputChild.focusChanged.pipe(takeUntil(this.unsubscribe$)).subscribe( state => {\n if ( state ) {\n this._onInputChange();\n }\n });\n\n this._inputChild.inputEvent.pipe(takeUntil(this.unsubscribe$)).subscribe( event => {\n event.stopPropagation();\n this._onInputChange();\n });\n }\n }\n\n _onInputClick(event: Event): void {\n event.stopPropagation();\n }\n\n _onInputChange(event?: Event): void {\n if ( event ) {\n event.stopPropagation();\n }\n const valueChanged = this.radioGroup && this.value !== this.radioGroup.value;\n this._emitChangeEvent();\n if (this.radioGroup !== null) {\n this.radioGroup.onChange(this.value);\n this.radioGroup._touch();\n if (valueChanged) {\n this.radioGroup.value = this.value;\n this.radioGroup._emitChangeEvent();\n }\n } else {\n this.checked = true;\n }\n }\n\n private _emitChangeEvent(): void {\n this.change.emit(new RadioButtonChangeEvent(this, this.value));\n }\n\n _markForCheck(): void {\n this.cdRef.markForCheck();\n }\n\n ngOnDestroy(): void {\n this.unsubscribe$.next();\n this.unsubscribe$.complete();\n }\n}\n","\n","import {Component, OnInit, ViewEncapsulation, AfterViewInit, ViewChildren, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter} from '@angular/core';\nimport type {QueryList} from '@angular/core';\nimport {DateRangeOptions, PresetItem} from '../model/model';\nimport {OverlayRef} from '@angular/cdk/overlay';\nimport {ConfigStoreService} from '../services/config-store.service';\nimport {DateRange} from '../model/model';\nimport {D} from '../../datepicker/datetime/date-formats';\nimport {CalendarWrapperComponent} from '../calendar-wrapper/calendar-wrapper.component';\nimport {Observable} from 'rxjs';\n\n// ** Date range wrapper component */\n@Component({\n selector: 'hc-date-range-picker-overlay',\n templateUrl: './picker-overlay.component.html',\n styleUrls: ['./picker-overlay.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class PickerOverlayComponent implements OnInit, AfterViewInit {\n options$: Observable;\n set _fromDate(fd: D | undefined) { this.__fromDate = fd; this.cd.markForCheck(); }\n get _fromDate(): D | undefined { return this.__fromDate; }\n set _toDate(td: D | undefined) { this.__toDate = td; this.cd.markForCheck(); }\n get _toDate(): D | undefined { return this.__toDate; }\n set _selectedPreset(s: number | null ) { this.__selectedPreset = s; this.cd.markForCheck(); }\n get _selectedPreset(): number | null { return this.__selectedPreset; }\n set _rangeIsInvalid(isInvalid: boolean) { this.__rangeIsInvalid = isInvalid; this.cd.markForCheck(); }\n get _rangeIsInvalid(): boolean { return this.__rangeIsInvalid; }\n get _invalidRangeErrorMessage(): string | null { return this.__invalidRangeErrorMessage; }\n _presetValues: PresetItem[] | undefined;\n _skipRangeCheck = false;\n\n __fromDate: D | undefined;\n __toDate: D | undefined;\n __selectedPreset: number | null;\n __rangeIsInvalid = false; // if true, the fromDate is after the toDate and save will not be allowed\n __invalidRangeErrorMessage: string | null;\n _fromDateIsRequired?: boolean = true;\n _toDateIsRequired?: boolean = true;\n\n __startDatePrefix: string | undefined;\n __endDatePrefix: string | undefined;\n\n readonly _dismissed: EventEmitter = new EventEmitter();\n\n @ViewChildren(CalendarWrapperComponent)\n calendarWrappers: QueryList;\n\n constructor(public configStoreService: ConfigStoreService, private overlayRef: OverlayRef, private cd: ChangeDetectorRef) {\n this.options$ = configStoreService.dateRangeOptions$;\n }\n\n ngOnInit(): void {\n this.options$.subscribe((options: DateRangeOptions) => {\n this._fromDateIsRequired = options.startDateIsRequired;\n this._toDateIsRequired = options.endDateIsRequired;\n this.__startDatePrefix = options.startDatePrefix;\n this.__endDatePrefix = options.endDatePrefix;\n this._presetValues = options.presets;\n this.cd.markForCheck();\n });\n this.configStoreService.rangeUpdate$.subscribe((dateRange: DateRange) => {\n if (dateRange) {\n this._fromDate = dateRange.fromDate;\n this._toDate = dateRange.toDate;\n } else {\n this._fromDate = undefined;\n this._toDate = undefined;\n }\n this._validateRange();\n });\n this.configStoreService.presetUpdate$.subscribe((presetIndex: number | DateRange) => {\n if (typeof presetIndex === 'number') {\n this._selectedPreset = presetIndex;\n this._updateRangeByPreset( presetIndex );\n }\n });\n }\n\n ngAfterViewInit(): void {\n if (this.calendarWrappers.first) {\n this.calendarWrappers.first.focusInput();\n }\n }\n\n _updateFromDate(date?: D): void {\n if ( !this._skipRangeCheck ) {\n this._fromDate = date;\n this._isRangePreset();\n }\n\n if (this._rangeIsInvalid) {\n this._validateRange();\n }\n }\n\n _updateToDate(date?: D): void {\n if ( !this._skipRangeCheck ) {\n this._toDate = date;\n this._isRangePreset();\n }\n\n if (this._rangeIsInvalid) {\n this._validateRange();\n }\n }\n\n _updateRangeByPreset(index: number): void {\n if (this._presetValues && index < this._presetValues.length && index >= 0 ) {\n // Prevent the system from assigning a preset if one has specifically been selected\n this._skipRangeCheck = true;\n this._fromDate = this._presetValues[index].range.fromDate;\n this._toDate = this._presetValues[index].range.toDate;\n\n setTimeout(() => {\n if ( this._fromDate ) {\n this.calendarWrappers.first.hcCalendar.activeDate = this._fromDate;\n }\n if ( this._toDate ) {\n this.calendarWrappers.last.hcCalendar.activeDate = this._toDate;\n }\n this._skipRangeCheck = false;\n });\n }\n }\n\n _isRangePreset(): void {\n this._selectedPreset = null;\n if (this._presetValues) {\n for (let i = 0; i < this._presetValues.length; i++) {\n const radioRange: DateRange = this._presetValues[i].range;\n if (this._fromDate && radioRange.fromDate && this._toDate && radioRange.toDate) {\n if ( this._fromDate.toDateString() === radioRange.fromDate.toDateString() &&\n this._toDate.toDateString() === radioRange.toDate.toDateString() ) {\n this._selectedPreset = i;\n }\n }\n }\n }\n }\n\n _applyNewDates(): void {\n this._validateRange();\n if (this._rangeIsInvalid) { return; }\n this.configStoreService.updateRange({fromDate: this._fromDate, toDate: this._toDate});\n if (this._selectedPreset !== null) {\n this.configStoreService.updatePreset(this._selectedPreset);\n } else {\n this.configStoreService.updatePreset({fromDate: this._fromDate, toDate: this._toDate});\n }\n this._dismissed.emit( true );\n this.overlayRef.dispose();\n }\n\n _validateRange(): void {\n let startLabel = this.__startDatePrefix ?? \"Start date\";\n if (startLabel.endsWith(\":\")) {\n startLabel = startLabel.slice(0,-1);\n }\n\n let endLabel = this.__endDatePrefix ?? \"End date\";\n if (endLabel.endsWith(\":\")) {\n endLabel = endLabel.slice(0,-1);\n }\n\n const bothDatesNull = !this._fromDate && !this._toDate;\n const isDateRequired = !!this._fromDateIsRequired || !!this._toDateIsRequired\n\n if (bothDatesNull && isDateRequired) {\n this._rangeIsInvalid = true;\n this.__invalidRangeErrorMessage = \"You must choose a date.\";\n } else if (!!this._fromDate && !!this._toDate) {\n this._rangeIsInvalid = this._fromDate > this._toDate;\n this.__invalidRangeErrorMessage = `${startLabel} cannot be after ${endLabel}.`;\n } else if (this._fromDateIsRequired && !this._fromDate) {\n this._rangeIsInvalid = true;\n this.__invalidRangeErrorMessage = `${startLabel} cannot be blank.`;\n } else if (this._toDateIsRequired && !this._toDate) {\n this._rangeIsInvalid = true;\n this.__invalidRangeErrorMessage = `${endLabel} cannot be blank.`;\n } else {\n this._rangeIsInvalid = false;\n this.__invalidRangeErrorMessage = null;\n } \n }\n\n _discardNewDates(): void {\n this._dismissed.emit( false );\n this.overlayRef.dispose();\n }\n}\n","@if (options$ | async; as options) {\n
\n
\n \n
\n
\n \n
\n
\n
\n \n @for (p of options.presets; track p; let i = $index) {\n \n {{ p.presetLabel }}\n \n }\n \n
\n \n \n {{ options.applyLabel }}\n \n
\n @if (_rangeIsInvalid) {\n \n \n {{ _invalidRangeErrorMessage }}\n \n }\n
\n
\n
\n}\n","import {Injectable, ElementRef, Injector, EventEmitter, OnDestroy} from '@angular/core';\nimport {Overlay, OverlayConfig, OverlayRef} from '@angular/cdk/overlay';\nimport {ComponentPortal} from '@angular/cdk/portal';\nimport {PickerOverlayComponent} from '../picker-overlay/picker-overlay.component';\nimport {Subject} from 'rxjs';\nimport {takeUntil} from 'rxjs/operators';\n\n@Injectable()\nexport class CalendarOverlayService implements OnDestroy {\n private hostElemRef: ElementRef;\n\n readonly _dismissed: EventEmitter = new EventEmitter();\n private unsubscribe$ = new Subject();\n\n constructor(private overlay: Overlay, private injector: Injector) {}\n\n open(hostElemRef: ElementRef, center?: boolean): OverlayRef {\n this.hostElemRef = hostElemRef;\n const overlayRef = this._createOverlay(center);\n const portalInjector = this._createInjector(overlayRef);\n const calendarPortal = new ComponentPortal(PickerOverlayComponent, null, portalInjector);\n const compRef = overlayRef.attach(calendarPortal);\n\n overlayRef.backdropClick().pipe(takeUntil(this.unsubscribe$)).subscribe(() => {\n this._dismissed.emit( false );\n overlayRef.dispose();\n });\n\n compRef.instance._dismissed.pipe(takeUntil(this.unsubscribe$)).subscribe( saved => {\n this._dismissed.emit( saved );\n });\n\n return overlayRef;\n }\n\n private _createOverlay(center): OverlayRef {\n const overlayConfig = this._getOverlayConfig(center);\n return this.overlay.create(overlayConfig);\n }\n\n private _getOverlayConfig(center): OverlayConfig {\n let positionStrategy;\n\n if (center) {\n positionStrategy = this.overlay\n .position()\n .global()\n .centerHorizontally()\n .centerVertically();\n } else {\n positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(this.hostElemRef)\n .withFlexibleDimensions(false)\n .withViewportMargin(8)\n .withDefaultOffsetY(12)\n .withLockedPosition()\n .withPositions([\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top'\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom'\n },\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top'\n },\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom'\n }\n ]);\n }\n\n const overlayConfig = new OverlayConfig({\n hasBackdrop: true,\n backdropClass: 'hc-overlay-transparent-backdrop',\n panelClass: 'hc-date-range-overlay',\n scrollStrategy: this.overlay.scrollStrategies.block(),\n positionStrategy\n });\n\n return overlayConfig;\n }\n\n private _createInjector(overlayRef: OverlayRef): Injector {\n return Injector.create({\n providers: [\n { provide: OverlayRef, useValue: overlayRef }\n ],\n parent: this.injector\n });\n }\n\n ngOnDestroy(): void {\n this.unsubscribe$.next();\n this.unsubscribe$.complete();\n }\n}\n","import {Output, EventEmitter, Input, OnDestroy, ElementRef, Directive, HostListener, OnChanges, SimpleChanges, forwardRef} from '@angular/core';\nimport {DatePipe} from '@angular/common';\nimport {OverlayRef} from '@angular/cdk/overlay';\nimport {CalendarOverlayService} from '../services/calendar-overlay.service';\nimport {DateRange, DateRangeOptions} from '../model/model';\nimport {ConfigStoreService} from '../services/config-store.service';\nimport {Subject} from 'rxjs';\nimport {takeUntil} from 'rxjs/operators';\nimport {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';\n\n/** Trigger the date range selector using the `hcDateRange` directive on a button or other clickable element */\n@Directive({\n selector: '[hcDateRange]',\n providers: [{\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => DateRangeDirective),\n multi: true\n }, CalendarOverlayService, ConfigStoreService, DatePipe],\n standalone: false\n})\nexport class DateRangeDirective implements OnDestroy, OnChanges, ControlValueAccessor {\n /** Emits when date range is been changed. */\n @Output()\n readonly selectedDateRangeChanged: EventEmitter = new EventEmitter();\n\n /** Sets the selected date range. Accepts either a `DateRange` or a numerical index for preset. */\n @Input()\n selectedDate: number | DateRange;\n\n /** Emits either a numerical index for the selected preset, or a `DateRange` if the selected value is not a preset */\n @Output()\n readonly selectedPresetChanged: EventEmitter = new EventEmitter();\n\n /** Emits after the popover is closed; returns `null` on cancel or dismiss and a `DateRange` on apply */\n @Output()\n readonly closed: EventEmitter = new EventEmitter();\n\n /** Configuration to setup behavior of component. */\n @Input()\n options: DateRangeOptions;\n\n /** If disabled, clicks to the element will not trigger the date range popover. */\n @Input()\n disabled = false;\n\n private _touched = false;\n private _overlayRef: OverlayRef;\n private unsubscribe$ = new Subject();\n\n constructor(\n private _elementRef: ElementRef,\n private calendarOverlayService: CalendarOverlayService,\n public _configStoreService: ConfigStoreService\n ) {\n _configStoreService.rangeUpdate$.pipe(takeUntil(this.unsubscribe$)).subscribe((daterange: DateRange) => {\n this.selectedDateRangeChanged.emit(daterange);\n this.onChange( daterange );\n });\n _configStoreService.presetUpdate$.pipe(takeUntil(this.unsubscribe$)).subscribe((preset: number | DateRange) => {\n this.selectedPresetChanged.emit(preset);\n this.onChange( preset );\n });\n calendarOverlayService._dismissed.pipe(takeUntil(this.unsubscribe$)).subscribe( saved => {\n this.closed.emit( saved ? this._configStoreService.currentSelection() : null );\n });\n }\n\n ngOnDestroy(): void {\n this.unsubscribe$.next();\n this.unsubscribe$.complete();\n\n if (this._overlayRef) {\n this._overlayRef.detach();\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['options']) {\n const options: DateRangeOptions = changes['options'].currentValue;\n this._configStoreService.updateDateRangeOptions(options);\n }\n if (changes['selectedDate']) {\n const selectedDate: number | DateRange = changes['selectedDate'].currentValue;\n this._updateSelected( selectedDate );\n }\n }\n\n writeValue(value: number | DateRange): void {\n // Prevent the form control from trying to write a value when removing the control\n if ( this.onChange.name !== 'noop' ) {\n this._updateSelected( value );\n }\n }\n\n _updateSelected( selectedDate: number | DateRange ): void {\n if ( typeof selectedDate === 'number' ) {\n this._configStoreService.updatePreset(selectedDate);\n } else {\n this._configStoreService.updateRange(selectedDate);\n }\n\n this.onChange( selectedDate );\n\n if (!this._touched) {\n this.onTouch();\n this._touched = true;\n }\n }\n\n @HostListener('click')\n _onClick(): void {\n if ( !this.disabled ) {\n this._overlayRef = this.calendarOverlayService.open(this._elementRef, this.options.center);\n }\n }\n\n public onChange: (value: number | DateRange) => void = () => undefined;\n public onTouch: () => unknown = () => undefined;\n public registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n public registerOnTouched(fn: () => unknown): void {\n this.onTouch = fn;\n }\n\n setDisabledState(disabled: boolean): void {\n this.disabled = disabled;\n }\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {RadioButtonComponent, RadioGroupDirective} from './radio';\n\n@NgModule({\n imports: [CommonModule],\n exports: [RadioButtonComponent, RadioGroupDirective],\n declarations: [RadioButtonComponent, RadioGroupDirective],\n providers: []\n})\nexport class RadioButtonModule {}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {DateRangeDirective} from './date-range/date-range.directive';\nimport {PickerOverlayComponent} from './picker-overlay/picker-overlay.component';\nimport {OverlayModule} from '@angular/cdk/overlay';\nimport {CalendarWrapperComponent} from './calendar-wrapper/calendar-wrapper.component';\nimport {FormsModule} from '@angular/forms';\nimport {HcNativeDateModule} from '../datepicker/datetime/datetime.module';\nimport {DatepickerModule} from '../datepicker/datepicker.module';\nimport {FormFieldModule} from '../form-field/hc-form-field.module';\nimport {InputModule} from '../input/input.module';\nimport {ButtonModule} from '../button/button.module';\nimport {RadioButtonModule} from '../radio-button/radio-button.module';\nimport {ChipModule} from '../chip/chip.module';\n\n@NgModule({\n imports: [\n CommonModule,\n ChipModule,\n FormFieldModule,\n DatepickerModule,\n HcNativeDateModule,\n InputModule,\n ButtonModule,\n RadioButtonModule,\n OverlayModule,\n FormsModule\n ],\n declarations: [DateRangeDirective, CalendarWrapperComponent, PickerOverlayComponent],\n exports: [DateRangeDirective]\n})\nexport class DateRangeModule {}\n","import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n HostBinding,\n HostListener,\n Input,\n Output,\n ViewEncapsulation\n} from '@angular/core';\nimport {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';\nimport {parseBooleanAttribute} from '../util';\nimport {filter, map} from 'rxjs/operators';\nimport {Observable} from 'rxjs';\n\n/** Result of opening or closing the drawer */\nexport class DrawerPromiseResult {\n constructor(public type: 'open' | 'close') {}\n}\n\nconst supportedModes = ['over', 'push', 'side'];\n\nexport function validateModeInput(inputStr: string): void {\n if (supportedModes.indexOf(inputStr) < 0) {\n throw Error('Unsupported drawer mode value: ' + inputStr);\n }\n}\n\nconst supportedAligns = ['left', 'right'];\n\nexport function validateAlignInput(inputStr: string): void {\n if (supportedAligns.indexOf(inputStr) < 0) {\n throw Error('Unsupported drawer alignment value: ' + inputStr);\n }\n}\n\nconst openStateAnimation = '0.3s ease';\nconst closeStateAnimation = '0.25s .05s ease';\n\n/** Drawer that can be opened or closed on the drawer container */\n@Component({\n selector: 'hc-drawer',\n template: '',\n styleUrls: ['drawer.component.scss'],\n encapsulation: ViewEncapsulation.None,\n animations: [\n trigger('openState', [\n state('open-left, open-right, open-instant', style({\n visibility: 'visible'\n })),\n state('void, close-instant', style({\n 'box-shadow': 'none',\n // overflow override included to prevent Safari from still showing the scrollbar when the drawer is closed\n 'overflow-y': 'hidden',\n visibility: 'hidden'\n })),\n transition('void => open-instant', animate('0ms')),\n transition('open-instant => close-instant', animate('0ms')),\n transition('open-left => close-instant', animate('0ms')),\n transition('open-right => close-instant', animate('0ms')),\n transition('open-instant => void', animate(openStateAnimation)),\n transition('void => open-left', [\n animate('0ms', style({ transform: 'translate3d(-100%, 0, 0)' })),\n animate(closeStateAnimation)\n ]),\n transition('open-left => void', [\n animate(openStateAnimation, style({ transform: 'translate3d(-100%, 0, 0)' }))\n ]),\n transition('void => open-right', [\n animate('0ms', style({ transform: 'translate3d(100%, 0, 0)' })),\n animate(closeStateAnimation)\n ]),\n transition('open-right => void', [\n animate(openStateAnimation, style({ transform: 'translate3d(100%, 0, 0)' }))\n ])\n ])\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class Drawer implements AfterContentInit {\n private _mode = 'push';\n private _align = 'left';\n _animated = true;\n\n /** Defaults to false. Set to true to disable the closure of drawer by pressing the escape key. */\n @Input() ignoreEscapeKey = false;\n\n /** Mode of the drawer: `over`, `push` or `side` */\n @Input()\n get mode(): string {\n return this._mode;\n }\n\n set mode(modeType: string) {\n validateModeInput(modeType);\n this._mode = modeType;\n }\n\n /** Side the drawer is attached to: `left` or `right` */\n @Input()\n get align(): string {\n return this._align;\n }\n\n set align(alignType: string) {\n validateAlignInput(alignType);\n this._align = alignType;\n }\n\n /** Event emitted when drawer has started to open */\n @Output()\n get openStart(): Observable {\n return this._animationStarted.pipe(\n filter(event => (event.fromState === 'void' || event.fromState === 'close-instant') && event.toState.startsWith('open-') ),\n map(() => {\n // do nothing.\n })\n );\n }\n\n /** Event emitted when drawer has started to close */\n @Output()\n get closeStart(): Observable {\n return this._animationStarted.pipe(\n filter(event => event.fromState.startsWith('open-') && (event.toState === 'void' || event.toState === 'close-instant')),\n map(() => {\n // do nothing.\n })\n );\n }\n\n /* Allows for two-way binding of the `opened` property */\n @Output() openedChange = new EventEmitter();\n\n /** Tabindex of the element */\n @HostBinding()\n tabindex = -1;\n @HostBinding('class.hc-drawer')\n _drawerClass = true;\n\n readonly _animationStarted = new EventEmitter();\n\n private _animationDisabled = true;\n private _drawerOpened = false;\n private _animationPromise: Promise | null;\n private _resolveAnimationPromise: () => void = () => {\n // do nothing.\n };\n\n /** Whether the drawer is opened. */\n @Input()\n get opened(): boolean {\n return this._drawerOpened;\n }\n\n set opened(opened: boolean) {\n if ( opened !== this._drawerOpened ) {\n this.toggle(parseBooleanAttribute(opened));\n }\n }\n\n get _width(): number {\n return this.elementRef.nativeElement.offsetWidth;\n }\n\n @HostBinding('class.hc-drawer-opened')\n get _isOpened(): boolean {\n return this._drawerOpened && !this._animationPromise;\n }\n\n @HostBinding('class.hc-drawer-opening')\n get _isOpening(): boolean {\n return this._drawerOpened && !!this._animationPromise;\n }\n\n @HostBinding('class.hc-drawer-closed')\n get _isClosed(): boolean {\n return !this._drawerOpened && !this._animationPromise;\n }\n\n @HostBinding('class.hc-drawer-closing')\n get _isClosing() : boolean{\n return !this._drawerOpened && !!this._animationPromise;\n }\n\n @HostBinding('class.hc-drawer-right')\n get _isRight(): boolean {\n return this._align === 'right';\n }\n\n @HostBinding('@openState')\n get _openState(): 'void' | 'open-instant' | 'close-instant'| 'open-left' | 'open-right' {\n if (this._drawerOpened) {\n if (this._animationDisabled || !this._animated) {\n return 'open-instant';\n }\n\n return this._align === 'right' ? 'open-right' : 'open-left';\n }\n return this._animated ? 'void' : 'close-instant';\n }\n\n @HostListener('@openState.start', ['$event'])\n _onAnimationStart(event: AnimationEvent): void {\n this._animationStarted.emit(event);\n }\n\n @HostListener('@openState.done')\n _onAnimationEnd(): void {\n this.openedChange.next(this.opened);\n\n if (this._animationPromise) {\n this._resolveAnimationPromise();\n this._resolveAnimationPromise = () => {\n // do nothing.\n };\n this._animationPromise = null;\n }\n }\n\n @HostListener('keydown', ['$event'])\n _onKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Escape' && !this.ignoreEscapeKey) {\n this.toggleClose();\n event.stopPropagation();\n }\n }\n\n constructor(protected elementRef: ElementRef) {}\n\n ngAfterContentInit(): void {\n if (this._animationPromise) {\n this._resolveAnimationPromise();\n this._resolveAnimationPromise = () => {\n // do nothing.\n };\n this._animationPromise = null;\n }\n this._animationDisabled = false;\n }\n\n /** Toggles the drawer open */\n toggleOpen(): Promise {\n return this.toggle(true);\n }\n\n /** Toggles the drawer closed */\n toggleClose(): Promise {\n return this.toggle(false);\n }\n\n /** Toggles the drawer */\n toggle(isOpen = !this.opened): Promise {\n // If the current state of the drawer matches the desired state of the drawer,\n // then return an already-resolved Promise whose result matches the current drawer\n // state. Ideally, we'd punt and return null here, instead, but that would break the\n // API contract defined by the Drawer, and that would be bad.\n if (isOpen === this._drawerOpened) {\n return Promise.resolve(new DrawerPromiseResult(isOpen ? 'open' : 'close'));\n }\n\n if (!this._animationPromise) {\n this._drawerOpened = isOpen;\n\n this._animationPromise = new Promise(resolve => {\n this._resolveAnimationPromise = () => resolve(new DrawerPromiseResult(isOpen ? 'open' : 'close'));\n });\n }\n return this._animationPromise;\n }\n}\n","import {Component, EventEmitter, HostBinding, HostListener, Input, Output, ViewEncapsulation} from '@angular/core';\nimport {animate, state, style, transition, trigger} from '@angular/animations';\n\n@Component({\n selector: 'hc-backdrop',\n template: '',\n encapsulation: ViewEncapsulation.None,\n styles: [\n `\n .hc-backdrop {\n background-color: #000;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: 0.5;\n display: block;\n }\n `\n ],\n animations: [\n trigger('fadeInOut', [\n state('in', style({ opacity: 0.5 })),\n transition('void <=> *', [\n style({\n opacity: 0\n }),\n animate('0.2s ease-in-out')\n ])\n ])\n ],\n standalone: false\n})\nexport class BackdropComponent {\n @Input()\n _ignoreEscapeKey = false;\n\n @Output() onClose = new EventEmitter();\n\n @HostBinding('class.hc-backdrop') _hostClass = true;\n @HostBinding('style.z-index') zIndex = 940;\n\n @HostBinding('@fadeInOut')\n _fadeInOut(): string | unknown {\n return state;\n }\n\n @HostListener('click')\n _onClick() {\n this.onClose.emit();\n }\n\n @HostListener('document:keyup.escape')\n _escapeKey(): void {\n if (!this._ignoreEscapeKey) {\n this.onClose.emit();\n }\n }\n}\n","/* eslint-disable @angular-eslint/directive-selector */\nimport { ComponentRef, Directive, EventEmitter, Input, OnDestroy, Output, ViewContainerRef } from \"@angular/core\";\nimport { BackdropComponent } from \"./backdrop.component\";\nimport { Subject } from \"rxjs\";\nimport { takeUntil } from \"rxjs/operators\";\n\n@Directive({\n selector: '[backdropHost]',\n standalone: false\n})\nexport class BackdropHostDirective implements OnDestroy {\n private _ignoreEscapeKey = false;\n private _currentBackdrop: ComponentRef | null = null;\n\n @Input()\n get ignoreEscapeKey(): boolean {\n return this._ignoreEscapeKey;\n }\n set ignoreEscapeKey(ignoreEscapeKey: boolean) {\n this._ignoreEscapeKey = ignoreEscapeKey;\n if (this._currentBackdrop) {\n this._currentBackdrop.instance._ignoreEscapeKey = ignoreEscapeKey;\n }\n }\n\n @Output() onClose = new EventEmitter();\n\n private _destroyed = new Subject();\n\n constructor(public viewContainerRef: ViewContainerRef) {}\n\n showBackdrop(): ComponentRef {\n this.hideBackdrop();\n\n const backdropRef = this.viewContainerRef.createComponent(BackdropComponent);\n backdropRef.instance._ignoreEscapeKey = this._ignoreEscapeKey;\n backdropRef.instance.onClose\n .pipe(takeUntil(this._destroyed))\n .subscribe(() => this.onClose.emit());\n\n this._currentBackdrop = backdropRef;\n return backdropRef;\n }\n\n hideBackdrop(): void {\n if (!this._currentBackdrop) {\n return;\n }\n\n const overlayNativeElement = this._currentBackdrop.location.nativeElement;\n overlayNativeElement.parentNode?.removeChild(overlayNativeElement);\n this._currentBackdrop.destroy();\n this._currentBackdrop = null;\n }\n\n ngOnDestroy(): void {\n this._destroyed.next();\n this._destroyed.complete();\n }\n}\n","import {\n AfterContentInit,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n DoCheck,\n ElementRef,\n HostBinding,\n Input,\n NgZone,\n OnDestroy,\n Renderer2,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport type {QueryList} from '@angular/core';\nimport {Drawer, DrawerPromiseResult} from './drawer.component';\nimport {debounceTime, filter, startWith, takeUntil} from 'rxjs/operators';\nimport {AnimationEvent} from '@angular/animations';\nimport {Subject} from 'rxjs';\nimport {parseBooleanAttribute} from '../util';\nimport { BackdropHostDirective } from '../backdrop/backdrop-host.directive';\n\nfunction throwDrawerContainerError(align: string) {\n throw new Error(`A drawer was already declared for 'align=\"${align}\"'`);\n}\n\n/** Parent component that houses one or two `` that applies content styling */\n@Component({\n selector: 'hc-drawer-container',\n templateUrl: 'drawer-container.component.html',\n styleUrls: ['drawer.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class DrawerContainer implements AfterContentInit, DoCheck, OnDestroy {\n @ContentChildren(Drawer)\n _drawers: QueryList;\n\n @ViewChild(BackdropHostDirective, {static: true}) _backdropHost: BackdropHostDirective;\n\n private _leftDrawer: Drawer;\n private _rightDrawer: Drawer;\n private _animated = true;\n private _useBackdrop = false;\n\n _contentMargins = {left: 0, right: 0};\n\n private readonly _doCheckSubject = new Subject();\n private readonly _destroyed = new Subject();\n\n @HostBinding('class.hc-drawer-container')\n _hostClass = true;\n\n /** Defaults to true. Whether the content and drawers slide or snap open and closed. */\n @Input()\n get animated(): boolean {\n return this._animated;\n }\n\n set animated(val: boolean) {\n this._animated = parseBooleanAttribute(val);\n if ( this._drawers ) {\n this._drawers.forEach((drawer: Drawer) => drawer._animated = this._animated);\n }\n }\n\n /** Whether to use a backdrop, which closes the drawer when clicked */\n @Input()\n get useBackdrop(): boolean {\n return this._useBackdrop;\n }\n\n set useBackdrop(useBackdrop: boolean) {\n this._useBackdrop = useBackdrop;\n }\n\n constructor(\n private _elementRef: ElementRef,\n private _renderer: Renderer2,\n private _ngZone: NgZone,\n private _changeDetector: ChangeDetectorRef\n ) {}\n\n // If drawer size changes through some async action this will cause it to resize the margins\n ngDoCheck(): void {\n // Run outside of angular's scope because debounceTime will cause infinite loop\n this._ngZone.runOutsideAngular(() => this._doCheckSubject.next());\n }\n\n ngAfterContentInit(): void {\n this._drawers.forEach((drawer: Drawer) => drawer._animated = this.animated);\n\n // debounceTime allows the component to render before the margins are calculated\n this._doCheckSubject\n .pipe(\n debounceTime(10), // arbitrarily small value is used to quickly render the component so incorrect margins aren't shown\n takeUntil(this._destroyed)\n )\n .subscribe(() => this._calculateContentMargins());\n\n // startWith used to cause first iteration\n this._drawers.changes.pipe(startWith(null)).subscribe(() => {\n this._validateDrawers();\n\n this._drawers.forEach((drawer: Drawer) => {\n drawer._animationStarted\n .pipe(\n takeUntil(this._drawers.changes),\n filter((event: AnimationEvent) => event.fromState !== event.toState)\n )\n .subscribe(() => {\n this._calculateContentMargins();\n });\n drawer.openedChange.pipe(takeUntil(this._drawers.changes)).subscribe(isOpen => {\n if (isOpen) {\n this._setContainerClass(true);\n } else {\n this._setContainerClass(false);\n }\n });\n drawer.openStart.pipe(takeUntil(this._drawers.changes)).subscribe(() => this._showBackdrop(drawer));\n drawer.closeStart.pipe(takeUntil(this._drawers.changes)).subscribe(() => this._hideBackdrop());\n });\n\n if (!this._drawers.length || this._isDrawerOpen(this._leftDrawer) || this._isDrawerOpen(this._rightDrawer)) {\n this._calculateContentMargins();\n }\n });\n }\n\n private _isDrawerOpen(drawer: Drawer): boolean {\n return drawer != null && drawer.opened;\n }\n\n /** Open all drawers */\n open(): Promise {\n return Promise.all([this._leftDrawer, this._rightDrawer].map(drawer => drawer && drawer.toggleOpen()));\n }\n\n /** Close all drawers */\n close(): Promise {\n return Promise.all([this._leftDrawer, this._rightDrawer].map(drawer => drawer && drawer.toggleClose()));\n }\n\n private _calculateContentMargins(): void {\n let left = 0;\n let right = 0;\n\n if (this._leftDrawer && this._leftDrawer.opened) {\n if (this._leftDrawer.mode === 'side') {\n left += this._leftDrawer._width;\n } else if (this._leftDrawer.mode === 'push') {\n left += this._leftDrawer._width;\n }\n }\n\n if (this._rightDrawer && this._rightDrawer.opened) {\n if (this._rightDrawer.mode === 'side') {\n right += this._rightDrawer._width;\n } else if (this._rightDrawer.mode === 'push') {\n right += this._rightDrawer._width;\n }\n }\n\n if (left !== this._contentMargins.left || right !== this._contentMargins.right) {\n this._contentMargins = {left, right};\n\n this._ngZone.run(() => this._changeDetector.markForCheck());\n }\n }\n\n _validateDrawers(): void {\n for (const drawer of this._drawers.toArray()) {\n if (drawer.align === 'right') {\n if (this._rightDrawer != null) {\n throwDrawerContainerError('right');\n }\n this._rightDrawer = drawer;\n } else {\n if (this._leftDrawer != null) {\n throwDrawerContainerError('left');\n }\n this._leftDrawer = drawer;\n }\n }\n }\n\n private _setContainerClass(isOpen: boolean): void {\n if (isOpen) {\n this._renderer.addClass(this._elementRef.nativeElement, 'hc-drawer-opened');\n } else {\n this._renderer.removeClass(this._elementRef.nativeElement, 'hc-drawer-opened');\n }\n }\n\n _showBackdrop(drawer: Drawer): void {\n if (!this._useBackdrop) {\n return;\n }\n\n this._backdropHost.ignoreEscapeKey = drawer.ignoreEscapeKey;\n this._backdropHost.onClose.pipe(takeUntil(this._destroyed)).subscribe(() => drawer.toggleClose());\n this._backdropHost.showBackdrop();\n }\n\n _hideBackdrop(): void {\n this._backdropHost.hideBackdrop();\n }\n\n ngOnDestroy(): void {\n this._destroyed.next();\n this._destroyed.complete();\n this._doCheckSubject.complete();\n }\n}\n","\n\n\n \n \n\n","import {Directive, HostBinding} from '@angular/core';\n\n/* MenuDrawer toolbar that is fixed to the top */\n@Directive({\n selector: '[hcDrawerToolbar]',\n standalone: false\n})\nexport class DrawerToolbar {\n @HostBinding('class.hc-drawer-toolbar')\n _hostClass = true;\n}\n","import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n forwardRef,\n HostBinding,\n Input,\n Renderer2,\n ViewEncapsulation\n} from '@angular/core';\nimport {Drawer} from '../drawer.component';\nimport {animate, state, style, transition, trigger} from '@angular/animations';\nimport {DrawerToolbar} from './drawer-header.directive';\n\nconst drawerThemes = ['dark-theme'];\n\nexport function validateMenuDrawerTheme(menuTheme: string): void {\n if (!drawerThemes.some(theme => theme === menuTheme)) {\n throw new Error('Unsupported menuTheme: ' + menuTheme);\n }\n}\n\nconst openStateAnimation = '0.3s ease';\nconst closeStateAnimation = '0.25s .05s ease';\n\n/** Menu drawer that provides default themes */\n@Component({\n selector: 'hc-menu-drawer',\n templateUrl: 'menu-drawer.component.html',\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['../drawer.component.scss', 'menu-drawer.component.scss'],\n animations: [\n trigger('openState', [\n state('open-left, open-right, open-instant', style({\n transform: 'translate3d(0, 0, 0)',\n visibility: 'visible'\n })),\n state('void, close-instant', style({\n 'box-shadow': 'none',\n visibility: 'hidden'\n })),\n transition('void => open-instant', animate('0ms')),\n transition('open-instant => void', animate(openStateAnimation)),\n transition('open-instant => close-instant', animate('0ms')),\n transition('open-left => close-instant', animate('0ms')),\n transition('open-right => close-instant', animate('0ms')),\n transition('void => open-left', [\n animate('0ms', style({ transform: 'translate3d(-100%, 0, 0)' })),\n animate(closeStateAnimation)\n ]),\n transition('open-left => void', [\n animate(openStateAnimation, style({ transform: 'translate3d(-100%, 0, 0)' }))\n ]),\n transition('void => open-right', [\n animate('0ms', style({ transform: 'translate3d(100%, 0, 0)' })),\n animate(closeStateAnimation)\n ]),\n transition('open-right => void', [\n animate(openStateAnimation, style({ transform: 'translate3d(100%, 0, 0)' }))\n ])\n ])\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: Drawer, useExisting: forwardRef(() => MenuDrawer) }],\n standalone: false\n})\nexport class MenuDrawer extends Drawer implements AfterContentInit {\n private _previousTheme: string | null = null;\n\n @ContentChild(DrawerToolbar)\n toolbar: DrawerToolbar;\n\n /** Sets menu style of the drawer. Choose from: `'dark-theme'` */\n @Input()\n get menuTheme(): string {\n return this._menuTheme;\n }\n\n set menuTheme(menuStyle: string) {\n validateMenuDrawerTheme(menuStyle);\n\n this._setThemeClass(this._themeClass(menuStyle));\n this._previousTheme = this._menuTheme;\n this._menuTheme = menuStyle;\n }\n\n private _menuTheme: string;\n\n @HostBinding('class.hc-menu-drawer')\n _hostClass = true;\n\n constructor(elementRef: ElementRef, private renderer: Renderer2) {\n super(elementRef);\n this.menuTheme = 'dark-theme';\n }\n\n ngAfterContentInit(): void {\n super.ngAfterContentInit();\n\n if (this.toolbar != null) {\n this.renderer.addClass(this.elementRef.nativeElement, 'hc-drawer-toolbar-visible');\n } else {\n this.renderer.removeClass(this.elementRef.nativeElement, 'hc-drawer-toolbar-visible');\n }\n }\n\n private _themeClass(menuStyle: string) {\n return `hc-menu-drawer-${menuStyle}`;\n }\n\n private _setThemeClass(className: string) {\n if (this._previousTheme !== className) {\n if (this._previousTheme || this._menuTheme) {\n this.renderer.removeClass(this.elementRef.nativeElement, this._previousTheme || this.menuTheme);\n }\n this.renderer.addClass(this.elementRef.nativeElement, className);\n }\n }\n}\n","
\n \n
\n
\n
\n \n
\n
\n","import {Component, ViewEncapsulation} from '@angular/core';\n\n/* Represents a menu item for the MenuDrawer component */\n@Component({\n selector: 'hc-drawer-item',\n template: `\n
\n \n
\n
\n `,\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class DrawerItem {}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { BackdropComponent } from \"./backdrop.component\";\nimport { BackdropHostDirective } from \"./backdrop-host.directive\";\n\n@NgModule({\n imports: [CommonModule],\n declarations: [BackdropComponent, BackdropHostDirective],\n exports: [BackdropComponent, BackdropHostDirective]\n})\nexport class BackdropModule {}","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {Drawer} from './drawer.component';\nimport {DrawerContainer} from './drawer-container.component';\nimport {MenuDrawer} from './menu-drawer/menu-drawer.component';\nimport {DrawerItem} from './menu-drawer/drawer-item.component';\nimport {DrawerToolbar} from './menu-drawer/drawer-header.directive';\nimport { BackdropModule } from '../backdrop/backdrop.module';\n\nconst exportedComponents = [Drawer, DrawerContainer, MenuDrawer, DrawerItem, DrawerToolbar];\n\n@NgModule({\n imports: [CommonModule, BackdropModule],\n declarations: exportedComponents,\n exports: exportedComponents\n})\nexport class DrawerModule {}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {Component, Input, OnChanges, SimpleChanges, ViewEncapsulation} from '@angular/core';\n\n/** Interface for making/receiving assignments */\nexport interface DragDropAssignment {\n /** The target awaiting an option assignment. */\n target: any;\n\n /** The assigned option. */\n assignment: any | null;\n\n /** When `true` prevents modification. Use this if you have an assignment you want to lock. */\n locked?: boolean;\n}\n\n/** A control for making assignments with drag-drop functionality */\n@Component({\n selector: 'hc-drag-list',\n templateUrl: './drag-list.component.html',\n host: {\n class: 'hc-drag-list'\n },\n styleUrls: ['./drag-list.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class DragListComponent implements OnChanges {\n /** Current assignments, refer to the `DragDropAssignment` interface. Pass in your targets and their current assignments with this. */\n @Input() assignments: DragDropAssignment[] = [];\n\n /** The `id` or \"key\" property of your targets (`options` are assigned to `targets`). Defaults to `id`. */\n @Input() targetIdField = 'id';\n\n /** The display name property of your targets. Defaults to `name`. */\n @Input() targetDisplayNameField = 'name';\n\n /** The tooltip or title property of your targets. Defaults to `title`. */\n @Input() targetHoverTextField = 'title';\n\n /** The available options to assign to your targets. */\n @Input() options: any[] = [];\n\n /** The `id` or \"key\" property of your options (`options` are assigned to `targets`). Defaults to `id`. */\n @Input() optionIdField = 'id';\n\n /** The display name property of your options. Defaults to `name`. */\n @Input() optionDisplayNameField = 'name';\n\n /** The tooltip or title property of your options. Defaults to `title`. */\n @Input() optionHoverTextField = 'title';\n\n /** The placeholder text for unassigned targets. Empty by default. */\n @Input() targetPlaceholder = '';\n\n /** The target area label. Defaults to \"Targets\". */\n @Input() targetHelperText = 'Targets';\n\n /** The tooltip text for the target area label, if defined an info icon will be displayed to the right. Empty by default. */\n @Input() targetTooltip = '';\n\n /** The help text for unassigned options. Defaults to \"Drag values to desired location in the left pane\". */\n @Input() optionsHelperText = 'Drag values to desired location in the left pane';\n\n /** The help text for locked options. Defaults to \"This assignment is locked and cannot be changed.\". */\n @Input() optionLockedText = 'This assignment is locked and cannot be changed.';\n\n /** When set to `true`, all targets must have an assignment before the `submissionAllowed` property will return `true`. Defaults to `false`. */\n @Input() requireAllAssignments = false;\n\n _modifiedAssignments: DragDropAssignment[] = [];\n _targetsById: {[id: string]: any} = {};\n _optionsById: {[id: string]: any} = {};\n _optionIsAssigned: {[id: string]: boolean} = {};\n _tooltipsByOptionId: {[id: string]: string} = {};\n\n get _unassignedOptions(): any {\n return this.options.filter(o => !this._optionIsAssigned[o[this.optionIdField]]);\n }\n\n /** Returns `true` is selections are valid. */\n get submissionAllowed(): boolean {\n let hasChanges = false;\n\n for (let i = 0; i < this._modifiedAssignments.length; i++) {\n const ma = this._modifiedAssignments[i];\n const oa = this.assignments[i];\n\n if (((ma || {}).assignment || {})[this.optionIdField] !== ((oa || {}).assignment || {})[this.optionIdField]) {\n hasChanges = true;\n break;\n }\n }\n\n if (!hasChanges) {\n return false;\n }\n\n if (this.requireAllAssignments) {\n return this._modifiedAssignments.every(a => !!a.assignment) || Object.values(this._optionIsAssigned).every(o => o === true);\n } else {\n return true;\n }\n }\n\n /** Returns assignments. */\n get selections(): DragDropAssignment[] {\n return this._modifiedAssignments;\n }\n\n private _dragData: {optionId: string | null; targetId: string | null} = {optionId: null, targetId: null};\n\n ngOnChanges(changes: SimpleChanges): void {\n this._modifiedAssignments = (changes.assignments.currentValue || []).map(a => ({...a}));\n this._tooltipsByOptionId = this._indexByExt(\n changes.options.currentValue || [],\n (o: any) => o[this.optionIdField],\n (o: any) => {\n if (o[this.optionHoverTextField]) {\n return o[this.optionHoverTextField];\n }\n return o[this.optionDisplayNameField];\n }\n );\n this._optionsById = this._indexBy(changes.options.currentValue || [], o => o[this.optionIdField]);\n this._targetsById = this._indexBy(\n (this._modifiedAssignments || []).map(a => a.target),\n o => o[this.targetIdField]\n );\n\n this._setOptionIsAssigned(this._modifiedAssignments, changes.options.currentValue);\n }\n\n private _indexBy(arr: T[], propFn: (item: T) => string): {[id: string]: T} {\n return (arr || []).reduce((obj, item) => {\n obj[propFn(item)] = item;\n return obj;\n }, {});\n }\n\n private _indexByExt(\n arr: T[],\n propFn: (item: T) => string,\n valFn: (item: T) => V = it => (it as unknown) as V\n ): {[id: string]: V} {\n return (arr || []).reduce((obj, item) => {\n obj[propFn(item)] = valFn(item);\n return obj;\n }, {});\n }\n\n private _setOptionIsAssigned(assignments: DragDropAssignment[], options: any[]): void {\n (options || []).forEach(o => {\n this._optionIsAssigned[o[this.optionIdField]] = false;\n });\n (assignments || [])\n .filter(a => !!a.assignment)\n .forEach(a => {\n this._optionIsAssigned[a.assignment[this.optionIdField]] = true;\n });\n }\n\n _makeAssignment(ev: any): void {\n ev.preventDefault();\n\n if (!!ev && !!ev.target) {\n const optionId = this._dragData.optionId === null ? null : parseInt(this._dragData.optionId, 10);\n const target = this._findNearestWithClass(ev.target, 'hc-drag-list-assignment');\n\n if (!target || !target.dataset) {\n return;\n }\n\n const targetId =\n target.dataset.targetId === undefined || target.dataset.targetId === null ? null : parseInt(target.dataset.targetId, 10);\n const oldOptionId =\n target.dataset.optionId === undefined || target.dataset.optionId === null ? null : parseInt(target.dataset.optionId, 10);\n\n if (optionId === null || targetId === null) {\n return;\n }\n\n this._modifiedAssignments.forEach(a => {\n // If this is the target drop zone\n if (a.target[this.targetIdField] === targetId) {\n // Make assignment\n a.assignment = this._optionsById[optionId!];\n } else if (!!a.assignment && a.assignment[this.optionIdField] === optionId) {\n if (oldOptionId !== null) {\n // Swap\n a.assignment = this._optionsById[oldOptionId];\n } else {\n // Clear\n a.assignment = null;\n }\n }\n });\n\n this._setOptionIsAssigned(this._modifiedAssignments, this.options);\n }\n }\n\n _returnToOptionsList(ev: any): void {\n ev.preventDefault();\n\n if (!!ev && !!ev.target) {\n const optionId = this._dragData.optionId === null ? null : parseInt(this._dragData.optionId, 10);\n const oldTargetId = this._dragData.targetId === null ? null : parseInt(this._dragData.targetId, 10);\n\n if (optionId !== null && oldTargetId !== null) {\n this._modifiedAssignments.forEach(a => {\n if (a.target[this.targetIdField] === oldTargetId) {\n // Clear assignment\n a.assignment = null;\n }\n });\n\n this._setOptionIsAssigned(this._modifiedAssignments, this.options);\n }\n }\n }\n\n _unassign(assignment: DragDropAssignment): void {\n assignment.assignment = null;\n this._setOptionIsAssigned(this._modifiedAssignments, this.options);\n }\n\n _findNearestWithClass(e: HTMLElement | null, className: string): HTMLElement | null {\n if (e === null) {\n return e;\n }\n\n return e.classList.contains(className) ? e : e.parentElement === null ? e : this._findNearestWithClass(e.parentElement, className);\n }\n\n _dragover(ev: any): void {\n ev.preventDefault();\n }\n\n _dragstart(ev: any): void {\n if (!!ev && !!ev.target && !!ev.target.dataset) {\n this._dragData.optionId = ev.target.dataset.optionId;\n this._dragData.targetId = ev.target.dataset.targetId;\n }\n }\n\n _dragenter(ev: any): void {\n ev.target.classList.add('hc-drag-list-target-hover');\n }\n\n _dragleave(ev: any): void {\n ev.target.classList.remove('hc-drag-list-target-hover');\n }\n\n /** Marks control as pristine. Typically called after saving modifications. */\n setPristine(): void {\n this.assignments = (this._modifiedAssignments || []).map(a => ({...a}));\n }\n\n /** Resets assigments to original values. */\n resetChanges(): void {\n this._modifiedAssignments = (this.assignments || []).map(a => ({...a}));\n this._setOptionIsAssigned(this._modifiedAssignments, this.options);\n }\n}\n","
\n
\n
\n {{ targetHelperText }}\n @if (!!targetTooltip) {\n \n }\n \n
{{ targetTooltip }}
\n \n
\n
\n @for (assignment of _modifiedAssignments; track assignment) {\n
\n
\n @if (!assignment.locked) {\n \n } @if (!!assignment.locked) {\n \n }\n {{ optionLockedText }}\n {{ assignment.target[targetDisplayNameField] }}\n
\n @if (!assignment.assignment && !assignment.locked) {\n \n {{ targetPlaceholder }}\n
\n } @if (!!assignment.assignment && !assignment.locked) {\n \n \n
\n {{ assignment.assignment[optionDisplayNameField] }}\n
\n
\n \n \n \n
\n
\n
\n } @if (!!assignment.assignment && !!assignment.locked) {\n
\n \n
\n {{ assignment.assignment[optionDisplayNameField] }}\n
\n
\n
\n }\n \n }\n \n \n
\n
{{ optionsHelperText }}
\n
\n @for (option of _unassignedOptions; track option) {\n \n
\n {{ option[optionDisplayNameField] }}\n
\n \n
\n }\n
\n \n\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {DragListComponent} from './drag-list.component';\nimport {IconModule} from '../icon/icon.module';\nimport {PopModule} from '../pop/popover.module';\n\n@NgModule({\n imports: [CommonModule, IconModule, PopModule],\n exports: [DragListComponent],\n declarations: [DragListComponent]\n})\nexport class DragListModule {}\n","export interface IMetadataEnvironment {\n /** A unique identifier for the environment. */\n id: number;\n /** An identifier representing a given tenant. (For example, a particular client.) */\n tenantCode: string;\n /** The full name of environment. */\n name: string;\n /** An abbreviated environment name. Used in environment badge ui element. */\n shortName: string;\n /** Describes the environment. */\n description: string;\n /** Hex code for the color associated with an environment. Used in the environment badge ui element.\n * Color options include: `\"#ffffff\", \"#7acb91\", \"#00acac\", \"#00a859\", \"#e7c447\", \"#ebba82\", \"#f89012\", \"#f13c45\", \"#eea2C0\", \"#a94c9d\", \"#3194fe\", \"#ace5ff\"`.\n * If no color (or an invalid color) is provided, will default to white (#ffffff).*/\n color: string;\n}\n\n/** Extended version of metadata environment model ready for display in the environment switcher UI */\nexport interface IMetadataEnvironmentVM extends IMetadataEnvironment {\n badgeColorClass: string;\n}\n\n/** map of color hex codes and their corresponding css classes. Allows UI to restrict which colors are used */\nexport const badgeColorClasses = {\n ffffff: 'hc-env-color-white',\n '7acb91': 'hc-env-color-light-green',\n '00acac': 'hc-env-color-forest-green',\n '00a859': 'hc-env-color-green',\n e7c447: 'hc-env-color-gold',\n ebba82: 'hc-env-color-tan',\n f89012: 'hc-env-color-orange',\n f13c45: 'hc-env-color-red',\n eea2C0: 'hc-env-color-pink',\n a94c9d: 'hc-env-color-purple',\n '3194fe': 'hc-env-color-blue',\n ace5ff: 'hc-env-color-light-blue'\n};\n","import {Component, OnDestroy, Input, ViewEncapsulation, Output, EventEmitter, ViewChild, forwardRef, HostBinding} from '@angular/core';\nimport {Subject} from 'rxjs';\n\nimport {IMetadataEnvironment, IMetadataEnvironmentVM, badgeColorClasses} from './env-switcher-interfaces';\nimport {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';\nimport {HcPopComponent} from '../pop/popover.component';\n\n@Component({\n selector: 'hc-env-switcher',\n templateUrl: './env-switcher.component.html',\n styleUrls: ['./env-switcher.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EnvSwitcherComponent),\n multi: true\n }\n ],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class EnvSwitcherComponent implements OnDestroy, ControlValueAccessor {\n @HostBinding('class.hc-env-switcher-container') _hostClass = true;\n\n /** The currently active metadata environments.\n * NgModel/FormValue is bound to just the environment IDs, but you can access this property for an array with the entire environment model. */\n public get selectedEnvironments(): IMetadataEnvironment[] {\n const envs = new Array();\n this._activeEnvIds.forEach(id => {\n const matchingEnv = this.environmentOptions.find(e => e.id === id);\n if (matchingEnv) {\n envs.push(matchingEnv);\n }\n });\n return envs;\n }\n /** When disabled, the environment switcher cannot be opened. *Defaults to false.* */\n public get disabled(): boolean {\n return this._disabled;\n }\n private _disabled = false;\n\n /** The ids of the selected metadata environments */\n public _activeEnvIds = new Array();\n /** In multiselect mode, track the ids of selected environments in this 'staging' model (and then actually apply them when the user is done) */\n public _stagedActiveEnvIds = new Array();\n /** Text to show in the badge shown in the navbar. */\n public _badgeText = 'None';\n /** Tooltip shown when a user hover over the badge in the navbar. */\n public _badgeTooltip = 'None selected';\n /** Color of the badge in the navbar. */\n public _badgeColor = 'hc-badge-color-white';\n /** collection of allowed colors mapped to their matching css classes */\n private readonly _colorClassesMap = badgeColorClasses;\n\n private _onChange = (_: unknown) => _;\n private _destroy$ = new Subject();\n\n /** Reference to the popover containing the environment selection menu. */\n @ViewChild('envSwitcherPop') pop: HcPopComponent;\n\n /** Set to true while waiting for environments to load from MDS. *Defaults to false.* */\n @Input() public loading = false;\n\n /** Set to true if unable to load environments from MDS. A \"Failed to load\" message will be shown in the switcher. *Defaults to false.* */\n @Input() public failedToLoad = false;\n\n /** Header to display above the expanded list of environments. *Defaults to 'Environments'.* */\n @Input() public listHeader = \"Environments\";\n\n /** If true, will allow multiple environments to be selected at once. *Defaults to false.* */\n @Input()\n get canSelectMultiple(): boolean {\n return this._canSelectMultiple;\n }\n\n set canSelectMultiple(canSelectMultiple: boolean) {\n // if switching from multiselect to single, make sure just one is selected\n if (!canSelectMultiple && this._canSelectMultiple && this._activeEnvIds?.length > 1) {\n this.setActiveEnvironments([this._activeEnvIds[0]]);\n }\n\n this._canSelectMultiple = canSelectMultiple;\n }\n private _canSelectMultiple = false;\n\n /** If true, will show an icon that allows user to click to open an environment in a new tab.\n * When clicking this icon, a `(openInNewTab)` event will be fired that the consuming app will\n * need to listen for and respond to. *Defaults to false.*\n */\n @Input()\n get canOpenInNewTab(): boolean {\n return this._canOpenInNewTab;\n }\n\n set canOpenInNewTab(canOpenInNewTab: boolean) {\n this._canOpenInNewTab = canOpenInNewTab;\n }\n private _canOpenInNewTab = false;\n\n /** The metadata environments to show in the switcher. */\n @Input() public set environmentOptions(envs: IMetadataEnvironment[]) {\n this._environmentOptionVMs = this._convertEnvsToVMs(envs);\n this.setActiveEnvironments(this._activeEnvIds);\n }\n public get environmentOptions(): IMetadataEnvironment[] {\n return this._environmentOptionVMs;\n }\n public _environmentOptionVMs: IMetadataEnvironmentVM[];\n\n /** Event that fires when model is updated. Outputs an array of the currently selected environments.\n * Consuming app will need to set appropriate environment headers refresh elements on page as needed. */\n @Output() updateEnvironments = new EventEmitter>();\n\n /** Event that fires when the \"open in new tab\" action is triggered. Outputs the selected environment.\n * Consuming app will need implement functionality to actually open a new tab with the given environment active. */\n @Output() openInNewTab = new EventEmitter();\n\n /** Event that fires when users click a link to reload environments. This link is shown if `failedToLoad` is set to true. */\n @Output() reloadEnvironments = new EventEmitter();\n\n writeValue(selectedEnvs: number[]): void {\n this.setActiveEnvironments(selectedEnvs || []);\n }\n\n registerOnChange(fn: () => null): void {\n this._onChange = fn;\n }\n\n registerOnTouched(): void {\n // do nothing\n }\n\n setDisabledState(state: boolean): void {\n this._disabled = state;\n }\n\n ngOnDestroy(): void {\n this._destroy$.next();\n this._destroy$.complete();\n }\n\n /** Manually open the app switcher menu. */\n public openMenu(): void {\n this._stagedActiveEnvIds = this.canSelectMultiple ? this._activeEnvIds.slice() : [];\n this.pop.open();\n }\n\n /** Manually close the app switcher menu. */\n public closeMenu(): void {\n this.pop.close();\n }\n\n /** Convenience method for setting the current active environment(s) by their Ids. Invalid environment Ids will not be selected. */\n public setActiveEnvironments(envs: number[]): void {\n const envsToSet = envs.filter(givenEnvId => {\n const matchingEnv = this._environmentOptionVMs.find(env => env.id === givenEnvId);\n if (matchingEnv) {\n return matchingEnv;\n } else {\n console.warn(`Attempted to set an environment as active that is not currently an option. ${givenEnvId}`);\n }\n });\n this._activeEnvIds.length = 0;\n this._activeEnvIds.push(...envsToSet);\n this._stagedActiveEnvIds = this.canSelectMultiple ? this._activeEnvIds.slice() : [];\n this._updateBadgeText();\n this._updateBadgeColor();\n }\n\n public _isEnvSelected(envId: number): boolean {\n if (this.canSelectMultiple) {\n return this._stagedActiveEnvIds.findIndex(e => e === envId) > -1;\n }\n return this._activeEnvIds.findIndex(e => e === envId) > -1;\n }\n\n public _onBadgeClick(): void {\n if (this._disabled) {\n return;\n }\n this.openMenu();\n }\n\n public _envClicked(env: IMetadataEnvironmentVM): void {\n if (this.canSelectMultiple) {\n this._envClickedForMulti(env);\n } else {\n this._envClickedForSingle(env);\n }\n }\n\n /** Used when `canSelectMultiple` is true. applies the state of the 'staging' model (`_stagedSelectedEnvs`) and closes the menu. */\n public _applyEnvs(): void {\n this._activeEnvIds.length = 0;\n this._activeEnvIds.push(...this._stagedActiveEnvIds);\n this._onEnvironmentsChanged();\n }\n\n /** Used when `canSelectMultiple` is true. toggles the environment as needed in the 'staging' model (`_stagedSelectedEnvs`). */\n private _envClickedForMulti(env: IMetadataEnvironmentVM): void {\n const idx = this._stagedActiveEnvIds.findIndex(e => e === env.id);\n if (idx > -1) {\n this._stagedActiveEnvIds.splice(idx, 1);\n } else {\n this._stagedActiveEnvIds.push(env.id);\n }\n }\n\n /** Used when `canSelectMultiple` is false. selects an environment and closes the menu */\n private _envClickedForSingle(env: IMetadataEnvironmentVM): void {\n this._activeEnvIds.length = 0;\n this._activeEnvIds.push(env.id);\n\n // go ahead and apply changes, close the dropdown for single select\n this._onEnvironmentsChanged();\n }\n\n private _onEnvironmentsChanged(): void {\n this._onChange(this._activeEnvIds);\n this.updateEnvironments.emit(this.selectedEnvironments);\n this._updateBadgeText();\n this._updateBadgeColor();\n this.pop.close();\n }\n\n /** Update the text displayed on the environment switcher badge in the navbar */\n private _updateBadgeText() {\n if (this._activeEnvIds.length === 0) {\n this._badgeText = 'None';\n this._badgeTooltip = 'None selected';\n } else if (this._activeEnvIds.length === 1) {\n this._badgeText = this.selectedEnvironments[0].shortName.trim().slice(0, 6);\n this._badgeTooltip = `Active: ${this._buildActiveEnvList()}`;\n } else if (this._activeEnvIds.length === this.environmentOptions.length) {\n this._badgeText = 'All';\n this._badgeTooltip = `${this._activeEnvIds.length} active: ${this._buildActiveEnvList()}`;\n } else if (this._activeEnvIds.length > 1) {\n this._badgeText = `${this._activeEnvIds.length} Selected`;\n this._badgeTooltip = `${this._activeEnvIds.length} active: ${this._buildActiveEnvList()}`;\n }\n }\n\n /** Returns a list of the active environments */\n private _buildActiveEnvList(): string {\n return this.selectedEnvironments.map(e => e.name).join(', ');\n }\n\n /** Set the appropriate color for environment switcher badge displayed in the navbar */\n private _updateBadgeColor(): void {\n if (this._activeEnvIds.length === 0 || this._activeEnvIds.length > 1) {\n this._badgeColor = 'hc-badge-color-white';\n } else {\n this._badgeColor = this._getBadgeColorClass(this.selectedEnvironments?.[0]);\n }\n }\n\n /** Translate an environment's color code into an appropriate css class */\n private _getBadgeColorClass(env?: IMetadataEnvironment): string {\n const defaultColor = 'ffffff';\n const color = env?.color?.toLowerCase().replace('#', '') || defaultColor;\n return this._colorClassesMap[color] || this._colorClassesMap[defaultColor];\n }\n\n /** Prepares given environment models into view models read for display in the UI. */\n private _convertEnvsToVMs(envs: IMetadataEnvironment[]): IMetadataEnvironmentVM[] {\n return envs.map(env => {\n const envVM = Object.assign({}, env) as IMetadataEnvironmentVM;\n envVM.badgeColorClass = this._getBadgeColorClass(env);\n envVM.shortName = env.shortName || this._generateShortName(env.name);\n return envVM;\n });\n }\n\n public _generateShortName(name: string): string {\n if (!name) {\n return 'ENV';\n }\n const tokens = name.trim().split(/\\s+/g);\n\n if (tokens.length > 1) {\n return tokens\n .map(e => e.charAt(0).toLocaleUpperCase())\n .join('')\n .slice(0, 4);\n } else {\n return name.trim().slice(0, 4).toLocaleUpperCase();\n }\n }\n}\n","\n@if (!loading) {\n\n {{ _badgeText }}\n\n}\n\n\n@if (loading) {\n
\n \n
\n}\n\n\n\n
\n @if (!loading) { @if (!failedToLoad) { @if (_environmentOptionVMs?.length > 0) {\n

{{ listHeader }}

\n @for (env of _environmentOptionVMs; track env) {\n \n \n {{ env.shortName }}\n {{ env.name }}\n \n \n @if (env.description) {\n \n } @if (canOpenInNewTab) {\n \n }\n \n
\n } @if (canSelectMultiple) {\n \n } }\n \n @if (_environmentOptionVMs?.length === 0) {\n
\n \n No options available.\n
\n } }\n \n @if (failedToLoad) {\n
\n \n Failed to load.\n \n
\n } }\n\n \n @if (loading) {\n
\n \n
\n }\n \n\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';\n\nimport {EnvSwitcherComponent} from './env-switcher.component';\nimport {PopModule} from '../pop/popover.module';\nimport {ProgressIndicatorsModule} from '../progress-indicators/progress-indicators.module';\nimport {PipesModule} from '../pipes/pipes.module';\nimport {IconModule} from '../icon/icon.module';\nimport {CheckboxModule} from '../checkbox/checkbox.module';\nimport {ButtonModule} from '../button/button.module';\n\n@NgModule({ declarations: [EnvSwitcherComponent],\n exports: [EnvSwitcherComponent], imports: [CommonModule, PopModule, PipesModule, IconModule, ProgressIndicatorsModule, CheckboxModule, ButtonModule], providers: [provideHttpClient(withInterceptorsFromDi())] })\nexport class EnvSwitcherModule {}\n","import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, OnDestroy, Optional, Output, Self, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { FormGroupDirective, NgControl, NgForm } from '@angular/forms';\nimport { Subject } from 'rxjs';\nimport { delay, takeUntil } from 'rxjs/operators';\nimport { HcFormControlComponent } from '../form-field/hc-form-control.component';\nimport { parseBooleanAttribute } from '../util';\n\nlet nextUploaderId = 1;\n\n/** Standard front-end for uploading files from the users local environment */\n@Component({\n selector: 'hc-file-uploader',\n templateUrl: './file-uploader.component.html',\n styleUrls: ['./file-uploader.component.scss'],\n encapsulation: ViewEncapsulation.None,\n providers: [{ provide: HcFormControlComponent, useExisting: forwardRef(() => FileUploaderComponent) }],\n standalone: false\n})\nexport class FileUploaderComponent extends HcFormControlComponent implements AfterViewInit, OnDestroy {\n @ViewChild('dropZone') _dropZone!: ElementRef;\n @ViewChild('fileInput') _fileInputElement: ElementRef;\n private _form: NgForm | FormGroupDirective | null;\n private _unsubscribe = new Subject();\n private _uniqueId = `hc-file-uploader-${nextUploaderId++}`;\n _fileIcon = '';\n _fileTypes = '*';\n _fileNames: string[] = [];\n _multiple = false;\n _disabled = false;\n _isRequired = false;\n _fileList: FileList;\n _subtext: string;\n\n @HostBinding('class.hc-file-uploader')\n _baseClass = true;\n\n /** Fires a `FileList` when files have been selected by the uploader */\n @Output() filesAdded = new EventEmitter();\n\n /** Unique id for the file uploader element. If none is supplied, one will be auto-generated. */\n @Input()\n get id(): string {\n return this._componentId || this._uniqueId;\n }\n\n set id(idVal: string) {\n this._componentId = idVal ? idVal : this._uniqueId;\n }\n\n /** File types that the uploader will accept (eg. \"image/png, image/jpeg\"). Defaults to \"*\". */\n @Input()\n get fileTypes(): string {\n return this._fileTypes;\n }\n set fileTypes(value: string) {\n this._fileTypes = value;\n }\n\n /** Allow for multiple files to be selected. Defaults to false. */\n @Input()\n get multiple(): boolean {\n return this._multiple;\n }\n set multiple(value: boolean | string ) {\n this._multiple = parseBooleanAttribute( value );\n }\n\n /** Apply tight styling that condenses the controller to one line. Defaults to false. */\n @Input()\n get tight(): boolean {\n return this._tight;\n }\n set tight(value: boolean | string ) {\n this._tight = parseBooleanAttribute( value );\n }\n\n /** Whether the uploader is disabled. */\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(val: boolean | string) {\n this._disabled = parseBooleanAttribute(val);\n }\n\n /** Sets whether this is a required form element */\n @Input()\n get required(): boolean {\n return this._isRequired;\n }\n\n set required( requiredVal: boolean | string ) {\n this._isRequired = parseBooleanAttribute(requiredVal);\n }\n\n /** Displays an optional string of text below the browse button - typically used for instructions or info about file constraints */\n @Input()\n get subtext(): string {\n return this._subtext;\n }\n\n set subtext( val: string ) {\n this._subtext = val;\n }\n\n ngAfterViewInit(): void {\n if ( this._ngControl?.statusChanges ) {\n // delay() is necessary to make sure any form or control state changes have been applied before rechecking error states\n this._ngControl.statusChanges.pipe(delay(0), takeUntil(this._unsubscribe)).subscribe(() => this._updateErrorState());\n }\n if ( this._form ) {\n this._form.ngSubmit.pipe(takeUntil(this._unsubscribe)).subscribe(() => this._updateErrorState());\n }\n\n /** Monkey patching the markAsTouched function to call error state checking because there is not an event for touched changes */\n if ( this._ngControl && this._ngControl.control ) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const self = this;\n const originalMarkMethod = this._ngControl.control.markAsTouched;\n this._ngControl.control.markAsTouched = function () {\n // eslint-disable-next-line prefer-rest-params\n originalMarkMethod.apply(this, arguments);\n self._updateErrorState();\n };\n\n const originalMarkAllMethod = this._ngControl.control.markAllAsTouched;\n this._ngControl.control.markAllAsTouched = function () {\n // eslint-disable-next-line prefer-rest-params\n originalMarkAllMethod.apply(this, arguments);\n self._updateErrorState();\n };\n }\n }\n\n constructor(\n @Optional() _parentForm: NgForm,\n @Optional() _parentFormGroup: FormGroupDirective,\n @Optional() @Self() public _ngControl: NgControl,\n private _changeRef: ChangeDetectorRef\n ) {\n super();\n\n this._form = _parentForm || _parentFormGroup;\n if (this._ngControl != null) {\n this._ngControl.valueAccessor = this;\n }\n }\n\n writeValue(value: FileList): void {\n // Prevent the form control from trying to write a value on removing the control\n if ( this.onChange.name !== 'noop' ) {\n this._fileList = value;\n }\n }\n\n public onChange: (value: FileList) => void = () => undefined;\n public onTouch: () => unknown = () => undefined;\n public registerOnChange(fn: (value: FileList) => void): void {\n this.onChange = fn;\n }\n public registerOnTouched(fn: () => FileList): void {\n this.onTouch = fn;\n }\n\n setDisabledState(disabledVal: boolean): void {\n this.disabled = disabledVal;\n }\n\n private _updateErrorState() {\n const oldState = this._errorState;\n\n // TODO: this could be abstracted out as an @Input() if we need this to be configurable\n const newState = !!(\n this._ngControl &&\n this._ngControl.invalid &&\n (this._ngControl.touched || (this._form && this._form.submitted))\n );\n\n if (oldState !== newState) {\n this._errorState = newState;\n this._changeRef.detectChanges();\n }\n }\n\n /** Triggers the system file selection dialog to open */\n browseFiles(): void {\n this._fileInputElement.nativeElement.dispatchEvent(new MouseEvent('click', {bubbles: true}));\n }\n\n /** Clears any selected files and returns to the initial state */\n reset(): void {\n this._fileInputElement.nativeElement.value = '';\n this._fileList = this._fileInputElement.nativeElement.files;\n this._fileNames = [];\n }\n\n _fileSelected(): void {\n const selectedFiles: FileList = this._fileInputElement.nativeElement.files;\n this._fileNames = [];\n for (let i = 0; i < selectedFiles.length; i++) {\n this._fileNames.push( selectedFiles[i].name );\n }\n\n this._fileList = selectedFiles;\n this.onChange( this._fileList );\n this.onTouch();\n this.filesAdded.emit( selectedFiles );\n\n this._determineFileIcon();\n }\n\n _onFileDrop(event: DragEvent): void {\n event.preventDefault();\n this._unhighlight();\n let selectedFiles: FileList;\n const files = event?.dataTransfer?.files;\n if (!files) {\n return;\n }\n\n // Can't prevent a user from dropping multiple files; if multiple files are not supported, only take the first one\n if ( !this.multiple && files.length > 1 ) {\n const dt = new DataTransfer();\n dt.items.add(files[0]);\n this._fileInputElement.nativeElement.files = dt.files;\n const trimmedFiles = this._fileInputElement.nativeElement.files;\n selectedFiles = trimmedFiles;\n } else {\n selectedFiles = files;\n }\n\n this._fileNames = [];\n for (let i = 0; i < selectedFiles.length; i++) {\n this._fileNames.push( selectedFiles[i].name );\n }\n\n this._fileList = selectedFiles;\n this.onChange( this._fileList );\n this.filesAdded.emit(selectedFiles);\n\n this._determineFileIcon();\n }\n\n _determineFileIcon(): void {\n const mimeType = this._fileList[0].type;\n\n if ( mimeType.includes('image') ) {\n this._fileIcon = 'hc-image-file-icon';\n } else if ( mimeType.includes('pdf') ) {\n this._fileIcon = 'hc-pdf-file-icon';\n } else if ( mimeType.includes('csv') ) {\n this._fileIcon = 'hc-csv-file-icon';\n } else if ( mimeType.includes('msword') ) {\n this._fileIcon = 'hc-doc-file-icon';\n } else if ( this._fileList[0].name.includes('.docx') ) {\n this._fileIcon = 'hc-docx-file-icon';\n } else if ( this._fileList[0].name.includes('.xls') ) {\n this._fileIcon = 'hc-xls-file-icon';\n } else if ( mimeType.includes('xml') ) {\n this._fileIcon = 'hc-xml-file-icon';\n } else if ( mimeType === 'text/plain' ) {\n this._fileIcon = 'hc-text-file-icon';\n } else if ( mimeType.includes('text/') ) {\n this._fileIcon = 'hc-text-clipping-file-icon';\n } else {\n this._fileIcon = 'hc-generic-file-icon';\n }\n }\n\n _allowDrop(event: Event): void {\n event.preventDefault();\n this._highlight();\n }\n\n _highlight(): void {\n this._dropZone?.nativeElement.classList.add('hc-file-uploader-drag-target-over');\n }\n\n _unhighlight(): void {\n this._dropZone?.nativeElement.classList.remove('hc-file-uploader-drag-target-over');\n }\n\n ngOnDestroy(): void {\n this._unsubscribe.next();\n this._unsubscribe.complete();\n }\n}\n","\n @if (_fileNames.length === 0 && !tight) {\n
\n
\n
\n {{ multiple ? 'Drag files here to select them.' : 'Drag a file here to select it.' }}\n
\n
\n } @if (_fileNames.length === 0 && tight) {\n
\n
\n
\n {{ multiple ? 'Drag files here to select them' : 'Drag a file here to select it' }} or\n \n @if (_subtext) {\n ({{ subtext }})\n }.\n
\n
\n } @if (_fileNames.length > 0 && tight) {\n
\n
\n
\n {{\n _fileNames.length > 1\n ? 'Multiple files (' + _fileNames.length + ') selected. Drag files here to replace'\n : _fileNames[0] + ' selected. Drag a file here to replace'\n }}\n or\n \n @if (_subtext) {\n ({{ subtext }})\n }.\n
\n
\n } @if (_fileNames.length === 1 && !tight) {\n
\n
\n
\n
\n
\n {{ _fileNames[0] }}\n
\n
File selected. Drag a file here to replace.
\n
\n } @if (_fileNames.length > 1 && !tight) {\n
\n
\n
\n
\n
\n
\n
\n
Multiple Files
\n
Files ({{ _fileNames.length }}) selected. Drag files here to replace.
\n
\n } @if (!tight) {\n
OR
\n } @if (!tight) {\n
\n \n @if (_subtext) {\n
{{ subtext }}
\n }\n
\n }\n \n\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { FileUploaderComponent } from './file-uploader.component';\nimport { FormFieldModule } from '../form-field';\nimport { InputModule } from '../input';\nimport { ButtonModule } from '../button';\n\n@NgModule({\n imports: [CommonModule, FormFieldModule, InputModule, ButtonModule, FormsModule, ReactiveFormsModule],\n exports: [FileUploaderComponent],\n declarations: [FileUploaderComponent]\n})\nexport class FileUploaderModule {}\n","import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';\n\n/**\n * Helper component for creating a container which automatically\n * overflows components into a more menu.\n */\n@Component({\n selector: 'hc-measurable',\n templateUrl: './measurable.component.html',\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class MeasurableComponent {\n\n private _width = 0;\n private _height = 0;\n\n _isShown = false;\n _itemKey: string | null;\n\n @ViewChild('measurableItem')\n _targetItem: ElementRef;\n\n /**\n * The unique key of the item displayed inside this measurable component.\n */\n @Input()\n get itemKey(): string {\n if (this._itemKey) {\n return this._itemKey\n }\n\n throw new Error('The current item is missing its unique key.');\n }\n\n set itemKey(itemKeyVal: string) {\n this._itemKey = itemKeyVal;\n }\n\n /**\n * Calculates and returns the measured width of this container.\n * The width is cached for future calls to this property.\n */\n get width(): number {\n if (!this._width) {\n const shouldShow = this._isShown;\n this.show();\n\n this._width = this._targetItem?.nativeElement?.scrollWidth ?? 0;\n\n if (!shouldShow) {\n this.hide();\n }\n }\n\n return this._width;\n }\n\n /**\n * Calculates and returns the measured height of this container.\n * The height is cached for future calls to this property.\n */\n get height(): number {\n if (!this._height) {\n const shouldShow = this._isShown;\n this.show();\n\n this._height = this._targetItem?.nativeElement?.scrollHeight ?? 0;\n\n if (!shouldShow) {\n this.hide();\n }\n }\n\n return this._height;\n }\n\n constructor(private ref: ChangeDetectorRef) {}\n\n /**\n * Shows the contents of this container, forcing a change detection\n * cycle to run.\n */\n show(): void {\n this._isShown = true;\n this.ref.detectChanges();\n }\n\n /**\n * Hides the contents of this container, forcing a change detection\n * cycle to run.\n */\n hide(): void {\n this._isShown = false;\n this.ref.detectChanges();\n }\n\n reset(): void {\n this._width = 0;\n this._height = 0;\n }\n}\n","@if (_isShown) {\n
\n \n
\n}\n","import { Injectable } from \"@angular/core\";\nimport { MeasurableComponent } from \".\";\n\n/**\n * This service provides the logic to fill up a container\n * with components contained inside Measurable Components.\n */\n@Injectable()\nexport class MeasurableService {\n\n /**\n * Fills a container with as many components as will fit. See usage for more details.\n *\n * @param components The array of components to try and fill the container.\n * @param availableSize The available width or height in the container to fill with the given components.\n * @param moreSize The width or height of a more control.\n * @param direction Which way to fill the container, either horizontally or vertically.\n * @param showFunc Additional actions to take on a component that is shown. *Defaults to a function that does nothing.*\n * @param hideFunc Additional actions to take on a component that is hidden. *Defaults to a function that does nothing.*\n * @returns A set containing all of the keys of components that were hidden.\n */\n fillContainer(\n components: MeasurableComponent[],\n availableSize: number,\n moreSize: number,\n direction: 'horizontal' | 'vertical' = 'horizontal',\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n showFunc: (component: MeasurableComponent) => void = (_component) => void(0),\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n hideFunc: (component: MeasurableComponent) => void = (_component) => void(0)\n ): Set {\n const moreKeys = new Set();\n let currentSize = 0;\n\n const getDirection = direction == 'horizontal'\n ? (c: MeasurableComponent) => c.width\n : (c: MeasurableComponent) => c.height;\n\n const totalComponentSize = components.reduce((prev, curr) => prev + getDirection(curr), 0);\n const currentMoreSize = totalComponentSize > availableSize ? moreSize : 0;\n\n components.forEach(component => {\n currentSize += getDirection(component);\n\n if (currentSize + currentMoreSize < availableSize) {\n component.show();\n showFunc(component);\n } else {\n component.hide();\n moreKeys.add(component.itemKey);\n hideFunc(component);\n }\n })\n\n return moreKeys;\n }\n}\n\n\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MeasurableComponent } from './measurable.component';\nimport { MeasurableService } from './measurable.service';\n\n\n\n@NgModule({\n declarations: [\n MeasurableComponent\n ],\n imports: [\n CommonModule\n ],\n exports: [\n MeasurableComponent\n ],\n providers: [\n MeasurableService\n ]\n})\nexport class MeasurableModule { }\n","import { animate, state, style, transition, trigger } from '@angular/animations';\nimport {\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnDestroy,\n Output,\n QueryList,\n ViewChild,\n ViewChildren,\n ViewEncapsulation,\n AfterViewInit\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { map, takeUntil } from 'rxjs/operators';\nimport { MeasurableService } from '../measurable';\nimport { MeasurableComponent } from '../measurable/measurable.component';\nimport { HcPopoverAnchorDirective } from '../pop';\nimport { IInstance, IInstanceSwitcherTooltipText } from './instance-switcher-interfaces';\nimport { parseBooleanAttribute } from '../util';\nimport { FormControl } from '@angular/forms';\n\ntype InstanceSwitcherTooltipConfig = IInstanceSwitcherTooltipText & {\n addTrigger: string;\n closeTrigger: string;\n};\n\n/**\n * `hc-instance-switcher` is used to manage multiple instances of the same page.\n */\n@Component({\n selector: 'hc-instance-switcher',\n templateUrl: './instance-switcher.component.html',\n styleUrls: ['./instance-switcher.component.scss'],\n animations: [\n trigger('openState', [\n state('open', style({\n height: '*'\n })),\n state('void', style({\n height: '0px',\n visibility: 'hidden'\n })),\n transition('void <=> open', animate('400ms ease'))\n ]),\n trigger('moreOpenState', [\n state('open', style({\n transform: 'rotate(180deg)'\n })),\n state('closed', style({\n transform: 'rotate(0deg)'\n })),\n transition('open <=> closed', animate('500ms cubic-bezier(0.25, 0.8, 0.25, 1)'))\n ])\n ],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class InstanceSwitcherComponent implements OnDestroy, AfterViewInit {\n _instances: IInstance[] = [];\n _moreInstances: IInstance[] = [];\n _selectedKey: string | null = null;\n _editKey: string | null = null;\n _previouslySelected: string[] = [];\n _closable = true;\n _isOpen = true;\n _openState: 'void' | 'open' = 'open';\n _tooltipText: InstanceSwitcherTooltipConfig = {\n addTrigger: 'none',\n closeTrigger: 'none'\n };\n _renameInstanceControl = new FormControl('');\n _renameInstanceSize$ = this._renameInstanceControl.valueChanges.pipe(\n map((instanceName: string) => Math.max(instanceName.length + 2, 4))\n );\n\n private _unsubscribe$ = new Subject();\n private _animationFrameCount = 0;\n private _blurActive = false;\n _instanceContextKey: string | null = null;\n _instanceContextValue: string | null = null\n private _baseSize: number;\n\n public _collapse = false;\n public _moreList: Array = [];\n\n /**\n * The instances to display on the Instance Switcher. *Required.*\n */\n @Input()\n get instances(): IInstance[] {\n return this._instances;\n }\n\n set instances(instancesVal: IInstance[]) {\n this._instances = instancesVal;\n this._ref.detectChanges();\n this.refreshInstances();\n }\n\n /**\n * Controls whether or not to display the close button\n * on the Instance Switcher. *Defaults to true.*\n */\n @Input()\n get closable(): boolean {\n return this._closable;\n }\n\n set closable(closableVal: boolean) {\n this._closable = parseBooleanAttribute(closableVal);\n this._ref.detectChanges();\n this.refreshInstances();\n }\n\n /**\n * Controls whether or not the instance chips are\n * editable. *Defaults to true.*\n */\n @Input()\n editable = false;\n\n /**\n * Sets the Instance Switcher to either open or closed. *Defaults to true. Required if `closable` is also true.*\n */\n @Input()\n get isOpen(): boolean {\n return this._isOpen;\n }\n\n set isOpen(isOpenVal: boolean) {\n this._isOpen = parseBooleanAttribute(isOpenVal);\n this._openState = this._isOpen ? 'open' : 'void';\n }\n\n /**\n * Sets which instance is selected.\n */\n @Input()\n get selectedKey(): string | null {\n return this._selectedKey;\n }\n\n set selectedKey(selectedKeyVal: string | null) {\n if (this._selectedKey !== selectedKeyVal) {\n this._selectedKey = selectedKeyVal;\n this._ref.detectChanges();\n this.refreshInstances();\n }\n }\n\n /**\n * Configures the tooltip text that shows up on the various\n * controls.\n */\n @Input()\n get tooltipText(): IInstanceSwitcherTooltipText {\n return this._tooltipText;\n }\n\n set tooltipText(toolTipVal: IInstanceSwitcherTooltipText) {\n this._tooltipText = {\n ...toolTipVal,\n addTrigger: toolTipVal.addText ? 'hover' : 'none',\n closeTrigger: toolTipVal.closeText ? 'hover' : 'none'\n };\n }\n\n get _moreOpenState(): 'open' | 'closed' {\n return this._instancesMore?.isPopoverOpen() ? 'open' : 'closed';\n }\n\n /** Configure the max width for the instance names. Default to fit content or `none`; use maxWidth to constrain and truncate the content to a fixed width (e.g. `150px`)*/\n @Input()\n chipMaxWidth = 'none';\n\n /**\n * Value emitted when an instance tab is clicked. The value\n * is the unique key assigned to the instance.\n */\n @Output()\n selected = new EventEmitter();\n\n /**\n * Empty event emitted when the add instance button is clicked.\n */\n @Output()\n added = new EventEmitter();\n\n @Output()\n edited = new EventEmitter();\n\n /**\n * Value emitted when the close button is clicked on an\n * instance tab. The value is the unique key assigned to the\n * instance.\n */\n @Output()\n removed = new EventEmitter();\n\n /**\n * Empty event emitted when the close button is clicked on the\n * instance switcher.\n */\n @Output()\n closed = new EventEmitter();\n\n @ViewChildren(MeasurableComponent)\n _instanceChips: QueryList;\n\n @ViewChild('moreInstances')\n _instancesMore: HcPopoverAnchorDirective;\n\n @ViewChildren('instanceTooltip')\n _instancesTooltips: QueryList;\n\n @ViewChild('instancesContainer')\n _instancesContainer: ElementRef;\n\n @ViewChild('instanceEditInput')\n _instanceEditInput: ElementRef;\n\n @ViewChildren('instance')\n _instancePopovers: QueryList;\n\n /**\n * Recalculates which instances should be shown, and which\n * ones should be moved to the more menu.\n */\n refreshInstances(): void {\n if (this._instancesMore) {\n this._instancesMore.closePopover();\n }\n\n if (!this._instanceChips) {\n return;\n }\n\n const selectedInstance = this._instanceChips\n .find(instance => instance.itemKey === this._selectedKey);\n\n selectedInstance?.show();\n\n const selectedSize = selectedInstance?.width ?? 0;\n\n const moreKeys = this._measurableService.fillContainer(\n this._instanceChips.filter(instance => instance.itemKey !== this._selectedKey),\n this._calculateAvailableSize() - selectedSize,\n 112);\n\n this._moreInstances = this._instances.filter(instance => moreKeys.has(instance.instanceKey));\n\n this._ref.detectChanges();\n }\n\n constructor(\n private _measurableService: MeasurableService,\n private _ref: ChangeDetectorRef\n ) {}\n\n ngAfterViewInit(): void {\n this.checkContainerSize();\n }\n\n @HostListener('window:resize')\n _updateContainerSize(): void {\n this._baseSize = this._instancesContainer.nativeElement.clientWidth;\n }\n\n /**\n * Checks the container size a few times to see if the instances can be refreshed for the first\n * time. For more information about this approach, see the Usage tab on the website.\n */\n private checkContainerSize(): void {\n // If the clientWidth is zero, then the container element has not yet been rendered to the DOM.\n // This will try requesting a new animation frame 60 times, or until the element has been\n // rendered, whichever comes first.\n if (this._instancesContainer.nativeElement.clientWidth === 0 && this._animationFrameCount++ < 60) {\n requestAnimationFrame(() => this.checkContainerSize());\n } else {\n this._updateContainerSize();\n // If the container element is loaded, or we have exceeded the try count, then refresh instances.\n this.refreshInstances();\n\n this._instanceChips.changes.pipe(\n takeUntil(this._unsubscribe$)\n ).subscribe(() => this.refreshInstances());\n }\n }\n\n ngOnDestroy(): void {\n this._unsubscribe$.next();\n this._unsubscribe$.complete();\n }\n\n _isSelected(key: string, isMore: boolean, index: number): boolean {\n return this.selectedKey === key\n || (!isMore && index === 0 && !this.selectedKey);\n }\n\n _contextTrigger(): string {\n return this._instances.length === 1 && !this.editable ? 'none' : 'rightclick';\n }\n\n _isEditable(key: string): boolean {\n return this.editable && this._editKey === key;\n }\n\n _inputWidth(charCount: number): number {\n return Math.max(charCount, 4);\n }\n\n _closeClick(): void {\n this.isOpen = false;\n this.closed.emit();\n }\n\n _instanceClick(key: string): void {\n if (key !== this._selectedKey && this._selectedKey) {\n this._previouslySelected.push(this._selectedKey);\n }\n\n this.selectedKey = key;\n this.selected.emit(key);\n }\n\n _instanceContextOpened(key: string, value: string): void {\n this._instanceContextKey = key;\n this._instanceContextValue = value;\n }\n\n _instanceEdit(key: string | null, value: string | null, clickEvent?: MouseEvent): void {\n if (this.editable && key && value) {\n if (clickEvent) {\n clickEvent.stopPropagation();\n }\n\n const instancePopover = this._instancePopovers.first;\n\n this._editKey = key;\n\n setTimeout(() => {\n this._renameInstanceControl.setValue(value);\n this._renameInstanceControl.updateValueAndValidity();\n if (instancePopover) {\n instancePopover.closePopover();\n }\n\n setTimeout(() => {\n this._instanceEditInput.nativeElement.focus();\n this._blurActive = true;\n\n if (this._instancesTooltips) {\n this._instancesTooltips.forEach(tooltip => {\n tooltip.closePopover();\n });\n }\n }, 0);\n }, 0);\n }\n }\n\n _cancelEdit(): void {\n this._editKey = null;\n }\n\n _instanceBlur(key: string): void {\n if (!this._blurActive) {\n return;\n }\n\n this._blurActive = false;\n\n const value = this._renameInstanceControl.value\n if(value === '') {\n this._cancelEdit();\n return;\n }\n\n if (value) {\n if (key === this._editKey) {\n this._editKey = null;\n }\n\n this.instances = this._instances.map(instance => {\n if (instance.instanceKey === key) {\n return {\n ...instance,\n displayText: value\n };\n }\n\n return instance\n });\n\n const editedInstance = this.instances.find(instance => instance.instanceKey === key);\n\n this.edited.emit(\n editedInstance\n );\n\n this._instanceChips\n .find(instance => instance.itemKey === key)\n ?.reset();\n\n this.refreshInstances();\n }\n }\n\n _instanceClose(key: string, event?: MouseEvent): void {\n event?.stopPropagation();\n\n this._instances = this._instances.filter(instance => instance.instanceKey !== key);\n this._previouslySelected = this._previouslySelected.filter(prevKey => prevKey !== key);\n\n if (this._previouslySelected.length > 0) {\n this.selectedKey = this._previouslySelected.pop() ?? null;\n } else if (this._instances.length > 0) {\n this.selectedKey = this._instances[0].instanceKey;\n } else {\n this.selectedKey = null;\n }\n\n this.selected.emit(this.selectedKey);\n\n this.removed.emit(key);\n }\n\n _instanceAdd(): void {\n this.added.emit();\n }\n\n _calculateAvailableSize(): number {\n return this._baseSize - 45;\n }\n\n _instanceTrackBy(index: number, instance: IInstance): string {\n return `${instance.instanceKey}|${instance.displayText}`;\n }\n}\n","
\n
\n @for (instance of instances; track _instanceTrackBy(i, instance); let i = $index) {\n \n \n \n @if (_isEditable(instance.instanceKey)) {\n \n } @else {\n {{ instance.displayText }}\n }\n \n @if (instances.length > 1) {\n \n }\n
\n \n } @if (_moreInstances && _moreInstances.length) {\n \n }\n \n \n \n
\n @if (_closable) {\n \n \n \n }\n\n\n\n
\n @for (moreInstance of _moreInstances; track _instanceTrackBy(i, moreInstance); let i = $index) {\n \n }\n
\n\n\n\n
\n @if (this._instances.length > 1) {\n \n } @if (editable) {\n \n }\n
\n\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\nimport { ButtonModule } from \"../button/button.module\";\nimport { ChipModule } from \"../chip/chip.module\";\nimport { IconModule } from \"../icon/icon.module\";\nimport { InputModule } from \"../input\";\nimport { MeasurableModule } from \"../measurable/measurable.module\";\nimport { InstanceSwitcherComponent } from \"./instance-switcher.component\";\n\n@NgModule({\n declarations: [\n InstanceSwitcherComponent\n ],\n imports: [\n CommonModule,\n ChipModule,\n ButtonModule,\n IconModule,\n MeasurableModule,\n InputModule,\n ReactiveFormsModule\n ],\n exports: [\n InstanceSwitcherComponent\n ]\n })\n export class InstanceSwitcherModule { }\n","import {Component, HostBinding, ViewEncapsulation} from '@angular/core';\n\n/** Parent component that can house multiple `` and applies Cashmere list styling */\n@Component({\n selector: 'hc-list',\n templateUrl: './list.component.html',\n styleUrls: ['./list.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ListComponent {\n @HostBinding('class.hc-list')\n _hostClass = true;\n}\n","\n","import {Component, HostBinding, ViewEncapsulation} from '@angular/core';\n\n/**\n * Represents a row within a ``. Multiple `[hcListLine]` can be used\n * per ``. You can also prefix a `[hcListAvatar]` or `[hcListIcon]`\n * to the beginning of the ``.\n */\n@Component({\n selector: 'hc-list-item',\n templateUrl: './list-item.component.html',\n styleUrls: ['./list-item.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ListItemComponent {\n @HostBinding('class.hc-list-item')\n _hostClass = true;\n}\n","
\n \n
\n \n
\n \n
\n\n\n","import {Directive, HostBinding} from '@angular/core';\n\n/** Prepends an avatar styled element to the beginning of a ``. */\n@Directive({\n selector: '[hcListAvatar]',\n standalone: false\n})\nexport class ListAvatarDirective {\n @HostBinding('class.hc-list-avatar')\n get _hostClass(): boolean {\n return true;\n }\n}\n","import {Directive, HostBinding} from '@angular/core';\n\n/** Prefixes an icon to the beginning of a ``. */\n@Directive({\n selector: '[hcListIcon]',\n standalone: false\n})\nexport class ListIconDirective {\n @HostBinding('class.hc-list-icon')\n _hostClass = true;\n}\n","import {Directive, HostBinding} from '@angular/core';\n\n/** Represents a line within a `hc-list-item` row. Multiple can be used within `hc-list-item`. */\n@Directive({\n selector: '[hcListLine]',\n standalone: false\n})\nexport class ListLineDirective {\n @HostBinding('class.hc-list-line')\n _hostClass;\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {ListComponent} from './list.component';\nimport {ListItemComponent} from './list-item/list-item.component';\nimport {ListAvatarDirective} from './list-item/directives/list-avatar.directive';\nimport {ListIconDirective} from './list-item/directives/list-icon.directive';\nimport {ListLineDirective} from './list-item/directives/list-line.directive';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [ListComponent, ListItemComponent, ListAvatarDirective, ListIconDirective, ListLineDirective],\n exports: [ListComponent, ListItemComponent, ListAvatarDirective, ListIconDirective, ListLineDirective]\n})\nexport class ListModule {}\n","// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class ActiveModal {\n /** Data that was passed in through ModalOptions */\n public data?: T;\n /** Closes the modal with an optional result.\n * Use this close method when opening a modal using a component. When doing so,\n * ActiveModal must be injected in order to get access to the close method.\n * To dismiss a modal that was created from a TemplateRef, use the dismiss method\n * on HcModal */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n public close(_result?: U): void {\n // do nothing.\n }\n /** Dismisses the modal with no result.\n * Use this dismiss method when opening a modal using a component. When doing so,\n * ActiveModal must be injected in order to get access to the dismiss method.\n * To dismiss a modal that was created from a TemplateRef, use the dismiss method\n * on HcModal */\n public dismiss(): void {\n // do nothing.\n }\n}\n","import {Component, ElementRef, HostBinding, ViewEncapsulation} from '@angular/core';\n\n@Component({\n selector: 'hc-modal-body',\n template: `\n \n `,\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ModalBodyComponent {\n @HostBinding('class.hc-modal-body')\n _modalBodyClass = true;\n\n constructor(public elementRef: ElementRef) {}\n}\n","import {Component, HostBinding, Input, ViewEncapsulation} from '@angular/core';\n\n@Component({\n selector: 'hc-modal-footer',\n template: `\n \n `,\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ModalFooterComponent {\n @HostBinding('class.hc-modal-footer')\n _modalFooterClass = true;\n\n /** Removes all padding and displays the footer as a 15px high cap to the bottom of the modal.\n * Useful when you anticipate scrollable modal content to account for the rounded edges of the modal container.\n */\n @Input()\n @HostBinding('class.hc-modal-footer-minimal')\n minimal = false;\n}\n","import {Component, HostBinding, ViewEncapsulation} from '@angular/core';\n\n@Component({\n selector: 'hc-modal-header',\n template: `\n \n `,\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ModalHeaderComponent {\n @HostBinding('class.hc-modal-header')\n _modalHeaderClass = true;\n}\n","import {AfterContentInit, Component, ContentChild, HostBinding, ViewEncapsulation} from '@angular/core';\nimport { ModalBodyComponent } from './modal-body.component';\nimport { ModalFooterComponent } from './modal-footer.component';\nimport { ModalHeaderComponent } from './modal-header.component';\n\n@Component({\n selector: 'hc-modal',\n template: `\n \n `,\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ModalComponent implements AfterContentInit {\n @HostBinding('class.hc-modal-content')\n _modalWrapperClass = true;\n\n /* For resizable modals - dynamically set the min-height based on whether the modal has a header, footer, and/or body */\n @HostBinding('style.min-height')\n _modalMinHeight = 'auto';\n\n /** Checks for header/footer/body */\n @ContentChild(ModalHeaderComponent)\n _modalHeader: ModalHeaderComponent;\n\n @ContentChild(ModalBodyComponent)\n _modalBody: ModalBodyComponent;\n\n @ContentChild(ModalFooterComponent)\n _modalFooter: ModalFooterComponent;\n\n ngAfterContentInit(): void {\n let minHeight = 0;\n\n if ( this._modalHeader ) {\n minHeight += 55;\n this._modalMinHeight = minHeight + 'px';\n }\n if ( this._modalBody ) {\n minHeight += 120;\n this._modalMinHeight = minHeight + 'px';\n }\n if ( this._modalFooter ) {\n minHeight += 55;\n this._modalMinHeight = minHeight + 'px';\n }\n }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport {animate, state, style, transition, trigger} from '@angular/animations';\nimport {ConfigurableFocusTrap, ConfigurableFocusTrapFactory} from '@angular/cdk/a11y';\n\nimport {Component, ElementRef, HostBinding, HostListener, Inject, Optional, ViewChild, ViewEncapsulation, DOCUMENT} from '@angular/core';\nimport {ActiveModal} from './active-modal';\nimport {ButtonComponent} from '../button';\n\n// hcmodal[0].setAttribute('class', options.isResizable ? `hc-modal-resizable hc-modal-${options.size}` : `hc-modal-static hc-modal-${options.size}`);\n\n@Component({\n selector: 'hc-modal-window',\n template: `\n \n @if (_isDraggable) {\n
\n } @if (_closeIcon) {\n \n }\n \n \n `,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['./modal-window.component.scss'],\n animations: [\n trigger('fadeInOut', [\n state('in', style({opacity: 1})),\n transition('void <=> *', [\n style({\n opacity: 0\n }),\n animate('0.2s ease-in-out')\n ])\n ])\n ],\n standalone: false\n})\nexport class ModalWindowComponent {\n _ignoreOverlayClick = false;\n _isDraggable = false;\n _isResizable = false;\n _size = 'auto';\n _tight = false;\n _closeIcon = false;\n _disableFullScreen = false;\n _restoreFocus = true;\n _autoFocus = false;\n _previouslyFocusedElement: HTMLElement | null;\n _focusTrap: ConfigurableFocusTrap | undefined;\n\n @HostBinding('class.hc-modal-window') _hostClass = true;\n\n constructor(\n private activeModal: ActiveModal,\n private el: ElementRef,\n @Optional() @Inject(DOCUMENT) private _document: any,\n private _focusTrapFactory: ConfigurableFocusTrapFactory\n ) {}\n\n /** Reference to the element to build a focus trap around. */\n @ViewChild('focusTrapElement')\n private _focusTrapElement: ElementRef;\n\n /** Reference to the close button. */\n @ViewChild('closeBtn')\n private _closeBtn: ButtonComponent;\n\n @HostBinding('@fadeInOut')\n _fadeInOut(): unknown {\n return state;\n }\n\n @HostListener('mousedown', ['$event'])\n _overlayClick(event: unknown): void {\n let modalContentNotPresent = true;\n const path = this._eventPath(event);\n const modalWindowTargetIncluded = path.findIndex(p => p === this.el.nativeElement) > -1;\n const classList: (DOMTokenList | undefined)[] = path.map(p => p.classList);\n for (const cl of classList) {\n if (cl) {\n if (cl.contains('hc-modal-content')) {\n modalContentNotPresent = false;\n }\n }\n }\n\n /* The hc-modal has 100% height (although not completely visible).\n To enable closing the modal while clicking above or below the modal (in\n addition to the sides) this function will check to see if the click\n event includes:\n 1. This window element\n 2. Not the hc-modal-content and\n 3. the overlay click option is disabled. */\n if (!this._ignoreOverlayClick && modalContentNotPresent && modalWindowTargetIncluded) {\n this.activeModal.dismiss();\n }\n }\n\n // Serves as a polyfill for Event.composedPath() or Event.Path\n _eventPath(evt: any): typeof globalThis[] {\n const path = (evt.composedPath && evt.composedPath()) || evt.path,\n target = evt.target;\n\n if (path != null) {\n // Safari doesn't include Window, but it should.\n return path.indexOf(window) < 0 ? path.concat(window) : path;\n }\n\n if (target === window) {\n return [window];\n }\n\n function _getParents(node, memo?) {\n memo = memo || [];\n const parentNode = node.parentNode;\n\n if (!parentNode) {\n return memo;\n } else {\n return _getParents(parentNode, memo.concat(parentNode));\n }\n }\n\n return [target].concat(_getParents(target), window);\n }\n\n /** Save a reference to the element focused before the modal was opened. */\n _savePreviouslyFocusedElement(): void {\n if (this._document) {\n this._previouslyFocusedElement = this._document.activeElement as HTMLElement;\n }\n }\n\n /** Move the focus inside the focus trap and remember where to return later. */\n _trapFocus(): void {\n if (!this._focusTrapElement) {\n return;\n }\n\n this._savePreviouslyFocusedElement();\n\n if (!this._focusTrap && this._focusTrapElement) {\n this._focusTrap = this._focusTrapFactory.create(this._focusTrapElement.nativeElement);\n }\n\n if (this._autoFocus && this._focusTrap) {\n this._focusTrap.focusInitialElementWhenReady().then(() => {\n this._avoidInitialFocusOnCloseButton();\n });\n }\n }\n\n _avoidInitialFocusOnCloseButton() {\n if (this._closeBtn && this._closeBtn.elementRef.nativeElement === document.activeElement) {\n this._closeBtn.elementRef.nativeElement.blur();\n }\n }\n\n /** Dismiss the modal from a click on the close icon */\n _dismiss(): void {\n this.activeModal.dismiss();\n }\n}\n","import {Component, HostBinding, HostListener, Input, ViewEncapsulation} from '@angular/core';\nimport {ActiveModal} from './active-modal';\nimport {animate, state, style, transition, trigger} from '@angular/animations';\n\n@Component({\n selector: 'hc-modal-overlay',\n template: '',\n encapsulation: ViewEncapsulation.None,\n styles: [\n `\n .hc-modal-overlay {\n background-color: #000;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: 0.5;\n display: block;\n }\n `\n ],\n animations: [\n trigger('fadeInOut', [\n state('in', style({ opacity: 0.5 })),\n transition('void <=> *', [\n style({\n opacity: 0\n }),\n animate('0.2s ease-in-out')\n ])\n ])\n ],\n standalone: false\n})\nexport class ModalOverlayComponent {\n @Input()\n _ignoreEscapeKey = false;\n\n @HostBinding('class.hc-modal-overlay') _hostClass = true;\n\n constructor(private activeModal: ActiveModal) {}\n\n @HostBinding('@fadeInOut')\n _fadeInOut(): string | unknown {\n return state;\n }\n\n @HostListener('document:keyup.escape')\n _escapeKey(): void {\n if (!this._ignoreEscapeKey) {\n this.activeModal.dismiss();\n }\n }\n}\n","import {ModalOverlayComponent} from './modal-overlay.component';\nimport {ComponentRef, EventEmitter} from '@angular/core';\nimport {ModalWindowComponent} from './modal-window.component';\nimport {Subject, Observable} from 'rxjs';\n\nexport class HcModal {\n /** Allows direct access to the component used to create the modal. Null when TemplateRef is used */\n componentRef: ComponentRef | null;\n\n /** Allows direct access to overlay component which holds the component/template */\n overlay: ComponentRef | null;\n\n /** Allows direct access to window component which holds the component/template */\n window: ComponentRef | null;\n\n /** Subscribe to result in order to get access to modal result values passed in ActiveModal.close() */\n get result(): Observable {\n return this._result.asObservable();\n }\n\n private _result: Subject = new Subject();\n\n _removeOpenClass: (() => void) | null;\n\n _modalClose = new EventEmitter();\n\n /** Data that was passed in through ModalOptions */\n data?: unknown;\n\n /** Closes the modal with a result.\n * Use this close method when opening a modal using a TemplateRef.\n * To close a modal that was created from a Component, inject ActiveModal and use the close method\n * on ActiveModal */\n close(result?: unknown): void {\n this.removeModalElements();\n this._result.next(result);\n }\n\n /** Dismisses the modal with no result.\n * Use this dismiss method when opening a modal using a TemplateRef.\n * To dismiss a modal that was created from a Component, inject ActiveModal and use the dismiss method\n * on ActiveModal */\n dismiss(): void {\n this.removeModalElements();\n }\n\n private removeModalElements() {\n if (this.window) {\n const windowNativeElement = this.window.location.nativeElement;\n windowNativeElement.parentNode.removeChild(windowNativeElement);\n this.window.destroy();\n }\n\n if (this.overlay) {\n const overlayNativeElement = this.overlay.location.nativeElement;\n overlayNativeElement.parentNode.removeChild(overlayNativeElement);\n this.overlay.destroy();\n }\n\n if (this.componentRef) {\n const componentNativeElement = this.componentRef.location.nativeElement;\n componentNativeElement.parentNode.removeChild(componentNativeElement);\n this.componentRef.destroy();\n }\n\n if (this._removeOpenClass) {\n this._removeOpenClass();\n }\n\n this._modalClose.emit();\n\n this.window = null;\n this.overlay = null;\n this.componentRef = null;\n this._removeOpenClass = null;\n }\n}\n","import { ModalOptions } from \"../modal-options\";\n\n/** Used with ModalService's `alert()`, `confirm()`, and `confirmDestructive()` functions, which generate a\n * quick alert or confirmation modal. */\nexport class SimpleModalOptions {\n /** Message to show in the body of the modal. */\n message?: string;\n /** Message to show in the body of the modal that includes HTML markup.\n * **WARNING:** You are responsible to sanitize any unsafe user input. */\n messageHTML?: string;\n /** Text to show in the header of the modal. */\n headerText?: string;\n /** Main icon to show. Appears to the left of the header text, or in the body of the modal if there is no header.*/\n icon?: string;\n /** Text to show for the modal's cancel button. Leave empty for no cancel button */\n cancelButtonText?: string;\n /** Text to show for the modal's confirm button. */\n confirmButtonText?: string;\n /** Icon to show in the button. */\n confirmButtonIcon?: string;\n /** True if the modal's button should be colored to designate a destructive action. *Defaults to false.* */\n confirmButtonIsDestructive? = false;\n /** Sets style of confirmation button. Overrides confirmButtonIsDestructive.\n * Choose from: `'primary' | 'primary-alt' | 'destructive' |\n * 'neutral' | 'secondary' | 'minimal' | link' | 'link-inline'`. If needed, colors from\n * the primary or secondary palette may be used as well (e.g. 'pink', 'red-orange', etc) */\n confirmButtonStyle?: string;\n /** Sets style of cancel button. Choose from: `'primary' | 'primary-alt' | 'destructive' |\n * 'neutral' | 'secondary' | 'minimal' | link' | 'link-inline'`. If needed, colors from\n * the primary or secondary palette may be used as well (e.g. 'pink', 'red-orange', etc) */\n cancelButtonStyle? = false;\n /** Text for an optional informational tooltip that will be in the footer. */\n footerTooltipText?: string;\n /** If true, will preserve white-space in the message of the modal */\n preserveMessageWhitespace? = false;\n}\n\n// Default options for the content of a confirmation modal\nexport function getDefaultConfirmationOptions(): SimpleModalOptions {\n return {\n message: 'Are you sure?',\n icon: 'hc-ico-question',\n cancelButtonText: 'Cancel',\n confirmButtonText: 'Confirm',\n confirmButtonIsDestructive: false,\n };\n}\n\n// Default options for the content of a delete confirmation modal\nexport function getDefaultDestructiveOptions(): SimpleModalOptions {\n return {\n message: 'Are you sure you want to delete this item?',\n headerText: 'Delete item?',\n icon: 'hc-ico-trash',\n confirmButtonText: 'Delete item',\n confirmButtonIsDestructive: true,\n };\n}\n\n// Default options for the content of an alert modal\nexport function getDefaultAlertOptions(): SimpleModalOptions {\n return {\n icon: 'hc-ico-warn',\n cancelButtonText: '',\n confirmButtonText: 'OK',\n };\n}\n\n// default options for the modal window itself\nexport function getDefaultModalOptions(): ModalOptions {\n return {\n ignoreOverlayClick: true,\n size: 'md'\n };\n}\n","import { Component, OnInit } from '@angular/core';\nimport { ActiveModal } from '../active-modal';\nimport { SimpleModalOptions } from './simple-modal-options.model';\n\n@Component({\n selector: 'hc-simple-modal',\n templateUrl: './simple-modal.component.html',\n styleUrls: ['./simple-modal.component.scss'],\n standalone: false\n})\nexport class SimpleModalComponent implements OnInit {\n public options: SimpleModalOptions;\n constructor(private activeModal: ActiveModal) {}\n\n ngOnInit(): void {\n this.options = this.activeModal.data;\n }\n\n cancel(): void {\n this.activeModal.close(false);\n }\n\n confirm(): void {\n this.activeModal.close(true);\n }\n}\n","\n @if (options.headerText) {\n \n \n @if (options.icon) {\n \n }\n {{ options.headerText }}\n \n \n }\n \n
\n @if (options.icon && !options.headerText) {\n \n } @if (options.messageHTML) {\n
\n } @if (!options.messageHTML) {\n
{{ options.message }}
\n }\n
\n \n \n
\n @if (options.footerTooltipText) {\n \n }\n
\n
\n @if (options.cancelButtonText) {\n \n }\n \n @if (options.confirmButtonIcon) {\n \n }\n {{ options.confirmButtonText }}\n \n
\n \n\n","import {ModalWindowComponent} from './modal-window.component';\nimport {ModalOverlayComponent} from './modal-overlay.component';\nimport {HcModal} from './modal';\nimport {\n ApplicationRef,\n ComponentFactoryResolver,\n ComponentRef,\n Injectable,\n Injector,\n Renderer2,\n RendererFactory2,\n TemplateRef,\n Type\n} from '@angular/core';\nimport {ModalOptions} from './modal-options';\nimport {ActiveModal} from './active-modal';\nimport { getDefaultAlertOptions, getDefaultConfirmationOptions, getDefaultDestructiveOptions, getDefaultModalOptions, SimpleModalOptions } from './simple-modal/simple-modal-options.model';\nimport { Observable } from 'rxjs';\nimport { SimpleModalComponent } from './simple-modal/simple-modal.component';\nimport { map } from 'rxjs/operators';\n\nexport type ModalContentType = Type | TemplateRef;\n\n@Injectable()\nexport class ModalService {\n /** Defaults to false. Restricts multiple modals from being opened on top of each other\n * (an error will be thrown if attempted). It's generally considered bad practice to open multiple\n * models at once, so only change this with good reason.\n */\n allowMultiple = false;\n\n // start at 2000 (reserved range for modals, see _variables.scss)\n private _zIndexBase = 2000;\n private _zIndexCounter = this._zIndexBase;\n private _renderer: Renderer2;\n private _modalsOpen = 0;\n\n constructor(\n private _componentFactory: ComponentFactoryResolver,\n private _injector: Injector,\n private _applicationRef: ApplicationRef,\n _rendererFactory: RendererFactory2\n ) {\n this._renderer = _rendererFactory.createRenderer(null, null);\n }\n\n /** Opens a new modal either from a Component or a TemplateRef with the options specified in ModalOptions\n * In order to use a component, it must be specified in your module's EntryComponents.\n */\n open(modalContent: ModalContentType, modalOptions?: ModalOptions): HcModal {\n if (!this.allowMultiple && this._modalsOpen !== 0) {\n throw new Error(`Multiple modals may not be opened at the same time\n when the allowMultiple property on ModalService is set to false.`);\n }\n\n let container = document.querySelector('body') as HTMLElement;\n\n const defaultOptions = {\n container,\n data: {},\n ignoreEscapeKey: false,\n size: 'auto',\n tight: false,\n ignoreOverlayClick: false,\n isDraggable: false,\n isResizable: false,\n disableFullScreen: false,\n restoreFocus: true,\n autoFocus: false,\n closeIcon: false\n };\n const options = {...defaultOptions, ...modalOptions};\n if (options.container) {\n container = options.container;\n }\n\n if (!container) {\n throw new Error('Modal requires that a container be set in the modal options');\n }\n\n // TODO: HcModal and ActiveModal essentially are the same object with HcModal having refs. Might as well merge them to simplify\n const modal = new HcModal();\n const activeModalRef = new ActiveModal();\n modal.data = options.data;\n activeModalRef.data = options.data;\n\n const modalInjector = Injector.create({\n providers: [{provide: ActiveModal, useValue: activeModalRef}],\n parent: this._injector\n });\n\n // disable scrolling when overlay is present\n this._renderer.addClass(container, 'hc-modal-open');\n modal._removeOpenClass = () => this._renderer.removeClass(container, 'hc-modal-open');\n\n // if multiple modals are allowed, make sure the newest is always on top\n if ( this.allowMultiple ) {\n this._zIndexCounter = this._zIndexBase + (this._modalsOpen * 2);\n }\n\n // Create, attach, and append overlay to container\n const overlay = this._componentFactory.resolveComponentFactory(ModalOverlayComponent).create(modalInjector);\n this._renderer.setStyle(overlay.location.nativeElement, 'z-index', this._zIndexCounter);\n overlay.instance._ignoreEscapeKey = options.ignoreEscapeKey;\n\n this._applicationRef.attachView(overlay.hostView);\n container.appendChild(overlay.location.nativeElement);\n modal.overlay = overlay;\n\n // Create and attach content views; prepare nodes to be\n // transcluded with the window ComponentRef\n let projectableNodes;\n if (modalContent instanceof TemplateRef) {\n const embeddedViewRef = modalContent.createEmbeddedView(activeModalRef);\n this._applicationRef.attachView(embeddedViewRef);\n projectableNodes = [embeddedViewRef.rootNodes];\n } else {\n const componentRef = this._componentFactory.resolveComponentFactory(modalContent).create(modalInjector);\n\n // Set host component style to 100% to allow collapsing of body but not header/footer\n this._renderer.addClass(componentRef.location.nativeElement, 'hc-modal-center-component');\n this._applicationRef.attachView(componentRef.hostView);\n modal.componentRef = >componentRef;\n projectableNodes = [[componentRef.location.nativeElement]];\n }\n\n // Create, attach, and append Window to container\n // Apply options\n const window = this._componentFactory.resolveComponentFactory(ModalWindowComponent).create(modalInjector, projectableNodes);\n this._renderer.setStyle(window.location.nativeElement, 'z-index', this._zIndexCounter + 1);\n window.instance._ignoreOverlayClick = options.ignoreOverlayClick;\n window.instance._isDraggable = options.isDraggable;\n window.instance._isResizable = options.isResizable;\n window.instance._size = options.size;\n window.instance._tight = options.tight;\n window.instance._closeIcon = options.closeIcon;\n window.instance._disableFullScreen = options.disableFullScreen;\n window.instance._autoFocus = options.autoFocus;\n window.instance._restoreFocus = options.restoreFocus;\n\n this._applicationRef.attachView(window.hostView);\n container.appendChild(window.location.nativeElement);\n modal.window = window;\n\n setTimeout(() => {\n window.instance._trapFocus();\n });\n\n activeModalRef.close = (result: unknown) => {\n modal.close(result);\n };\n\n activeModalRef.dismiss = () => modal.dismiss();\n\n this._modalsOpen++;\n modal._modalClose.subscribe(() => {\n this._modalsOpen--;\n modal._modalClose.unsubscribe();\n\n if ( modal.window ) {\n this._restoreFocusAndDestroyTrap( modal.window.instance );\n }\n\n });\n\n return modal;\n }\n\n /**\n * Opens a confirmation modal pre-populated with default options for a destructive action.\n * @param contentOptions Options to configure the content of the confirmation modal\n * @param modalOptions Options to configure the modal window itself\n * @returns True if the user confirmed the action, false if they cancelled\n */\n confirmDestructive(contentOptions: SimpleModalOptions, modalOptions?: ModalOptions): Observable {\n const mergedDeleteContentOptions = Object.assign(getDefaultDestructiveOptions(), contentOptions);\n return this.confirm(mergedDeleteContentOptions, modalOptions);\n }\n\n /**\n * Opens a simple confirmation modal with a confirm and cancel button.\n * @param contentOptions Options to configure the content of the confirmation modal\n * @param modalOptions Options to configure the modal window itself\n * @returns True if the user confirmed the action, false if they cancelled\n */\n confirm(contentOptions: SimpleModalOptions, modalOptions?: ModalOptions): Observable {\n const mergedContentOptions = Object.assign(getDefaultConfirmationOptions(), contentOptions);\n return this._openSimpleModal(mergedContentOptions, modalOptions);\n }\n\n /**\n * Opens a simple alert modal\n * @param contentOptions Options to configure the content of the confirmation modal\n * @param modalOptions Options to configure the modal window itself\n * @returns True when the user confirms\n */\n alert(contentOptions: SimpleModalOptions, modalOptions?: ModalOptions): Observable {\n const mergedContentOptions = Object.assign(getDefaultAlertOptions(), contentOptions);\n const mergedModalOptions = Object.assign({size: 'sm'}, modalOptions);\n return this._openSimpleModal(mergedContentOptions, mergedModalOptions);\n }\n\n /** Convenience function for opening a simple alert or confirmation modal w/ minimal boilerplate */\n _openSimpleModal(contentOptions: SimpleModalOptions, modalOptions?: ModalOptions): Observable {\n const mergedContentOptions = Object.assign(getDefaultConfirmationOptions(), contentOptions);\n\n const mergedModalOptions = Object.assign(getDefaultModalOptions(), modalOptions);\n mergedModalOptions.data = mergedContentOptions;\n\n const modalRef = this.open(SimpleModalComponent, mergedModalOptions);\n return modalRef.result.pipe(map(result => result as boolean));\n }\n\n /** Restore focus to the element focused before the popover opened. Also destroy trap. */\n _restoreFocusAndDestroyTrap( modalWindow: ModalWindowComponent ): void {\n const toFocus = modalWindow._previouslyFocusedElement;\n\n // Must check active element is focusable for IE sake\n if (toFocus && 'focus' in toFocus && modalWindow._restoreFocus) {\n toFocus.focus();\n }\n\n if (modalWindow._focusTrap) {\n modalWindow._focusTrap.destroy();\n }\n }\n}\n","import {ModalFooterComponent} from './modal-footer.component';\nimport {ModalWindowComponent} from './modal-window.component';\nimport {ModalOverlayComponent} from './modal-overlay.component';\nimport {ModalService} from './modal.service';\nimport {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {ModalHeaderComponent} from './modal-header.component';\nimport {ModalBodyComponent} from './modal-body.component';\nimport {ModalComponent} from './modal.component';\nimport {DragDropModule} from '@angular/cdk/drag-drop';\nimport { SimpleModalComponent } from './simple-modal/simple-modal.component';\nimport { ButtonModule } from '../button/button.module';\n\n@NgModule({\n imports: [CommonModule, DragDropModule, ButtonModule],\n declarations: [\n ModalOverlayComponent,\n ModalWindowComponent,\n ModalHeaderComponent,\n ModalBodyComponent,\n ModalFooterComponent,\n ModalComponent,\n SimpleModalComponent\n ],\n exports: [ModalHeaderComponent, ModalBodyComponent, ModalFooterComponent, ModalComponent],\n providers: [ModalService]\n})\nexport class ModalModule {}\n","import {Component, forwardRef, HostBinding, Input, ViewEncapsulation} from '@angular/core';\nimport {HcFormControlComponent} from '../form-field/hc-form-control.component';\nimport {parseBooleanAttribute} from '../util';\n\nlet uniqueMultiselectId = 1;\n\n/** Cashmere wrapper for the ng-select component */\n@Component({\n selector: 'hc-multiselect',\n template: `\n \n `,\n encapsulation: ViewEncapsulation.None,\n providers: [{ provide: HcFormControlComponent, useExisting: forwardRef(() => MultiselectComponent) }],\n standalone: false\n})\nexport class MultiselectComponent extends HcFormControlComponent {\n private _uniqueInputId = `hc-multiselect-${uniqueMultiselectId++}`;\n _componentId = this._uniqueInputId; // contains id for the hc-multiselect component\n\n @HostBinding('class.hc-multiselect')\n _hostClass = true;\n\n /** Element id */\n @Input()\n get id(): string {\n return this._componentId || this._uniqueInputId;\n }\n\n set id(idVal: string) {\n this._componentId = idVal ? idVal : this._uniqueInputId;\n }\n\n /** Whether the slider is valid; triggers error messages in `hc-form-field` */\n @Input()\n get valid(): boolean {\n return !this._errorState;\n }\n\n set valid( val: boolean | string ) {\n this._errorState = !parseBooleanAttribute(val);\n }\n\n /** Sets whether this is a required form element */\n @Input()\n get required(): boolean {\n return this._isRequired;\n }\n\n set required( requiredVal: boolean | string ) {\n this._isRequired = parseBooleanAttribute(requiredVal);\n }\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MultiselectComponent } from './multiselect.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [MultiselectComponent],\n declarations: [MultiselectComponent]\n})\nexport class MultiselectModule {}\n","import {ChangeDetectorRef, Component, ElementRef, Input, ViewEncapsulation} from '@angular/core';\nimport {parseBooleanAttribute} from '../../util';\n\n/** Primary navigation links */\n@Component({\n selector: 'hc-navbar-link',\n templateUrl: './navbar-link.component.html',\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class NavbarLinkComponent {\n _active: boolean | null;\n\n /** Forces active state. Overrides router state when set; to remove the override set to null. *Default is `null`.* */\n @Input()\n get active(): boolean | null {\n return this._active;\n }\n set active(value: boolean | null) {\n this._active = value !== null ? parseBooleanAttribute(value): null;\n }\n\n /** RouterLink uri. See https://angular.io/api/router/RouterLink */\n @Input()\n uri: string;\n\n /** The text to display. This can also optionally be the contents within the element */\n @Input()\n linkText: string;\n\n /** Sets the RouterLinkActive options to match the url exactly to set active state. *Default is false.*\n * See https://angular.io/api/router/RouterLinkActive#description\n */\n @Input()\n exact = false;\n\n _hidden = false;\n\n constructor(private el: ElementRef, private ref: ChangeDetectorRef) {}\n\n /** Disable visibility of component from view */\n hide(): void {\n this._hidden = true;\n this.ref.detectChanges();\n }\n\n /** Enable visibility of component from view */\n show(): void {\n this._hidden = false;\n this.ref.detectChanges();\n }\n\n _getWidth(): number {\n return this.el.nativeElement.scrollWidth;\n }\n}\n","@if (!_hidden) {\n\n {{ linkText }}\n \n\n}\n","import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { Component, ViewEncapsulation } from '@angular/core';\n\n/** Navigation dropdown for small screen sizes */\n@Component({\n selector: 'hc-navbar-mobile-menu',\n templateUrl: './navbar-mobile-menu.component.html',\n styleUrls: ['./navbar-mobile-menu.component.scss'],\n animations: [\n trigger('openClose', [\n state('open', style({\n top: '0'\n })),\n state('closed', style({\n top: '-100vh'\n })),\n transition('open <=> closed', [\n animate('0.7s ease')\n ])\n ])\n ],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class NavbarMobileMenuComponent {\n _openState = 'closed';\n\n /** Slide the mobile menu down from under the navbar */\n show(): void {\n this._openState = 'open';\n }\n\n /** Slide the mobile menu back up under the navbar */\n hide(): void {\n this._openState = 'closed';\n }\n}\n","
\n \n
\n","import {\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n HostListener,\n Input,\n ViewChild,\n ViewEncapsulation,\n OnDestroy,\n AfterViewInit\n} from '@angular/core';\nimport type {QueryList} from '@angular/core';\nimport {HcPopoverAnchorDirective} from '../pop/directives/popover-anchor.directive';\nimport {HcPopComponent} from '../pop/popover.component';\nimport {MoreItem} from './more-item';\nimport {NavbarLinkComponent} from './navbar-link/navbar-link.component';\nimport {NavbarMobileMenuComponent} from './navbar-mobile-menu/navbar-mobile-menu.component';\nimport {Subject} from 'rxjs';\nimport {takeUntil} from 'rxjs/operators';\nimport {HcIcon} from '../icon/icon.component';\nimport {NavbarDropdownComponent} from './navbar-dropdown/navbar-dropdown.component';\n\n/** The navbar is a wrapper that positions branding, navigation, and other elements in a concise header. */\n@Component({\n selector: 'hc-navbar',\n templateUrl: './navbar.component.html',\n styleUrls: ['./navbar.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class NavbarComponent implements AfterViewInit, OnDestroy {\n /** Display name of current user */\n @Input()\n user = '';\n\n /** Url to application logo image file */\n @Input()\n appIcon = '';\n\n /** Either url to brand icon image file or HcIcon object for a font glyph */\n @Input()\n brandIcon: string | HcIcon = '';\n\n /** Router link triggered when home icon is clicked */\n @Input()\n homeUri: unknown[] | string = '';\n\n /** Fixes the position of navbar to the top of the page. *Default is false.* */\n @Input()\n fixedTop = false;\n\n @ContentChildren(NavbarMobileMenuComponent)\n _mobileMenu: QueryList;\n\n @ContentChildren(NavbarLinkComponent)\n _navLinks: QueryList;\n\n @ViewChild('navbar') _navbarContent: ElementRef;\n @ViewChild('navlinks') _navContent: ElementRef;\n\n @ViewChild('moreLink')\n _navbarMore: HcPopoverAnchorDirective;\n\n @ViewChild('navbarMore')\n _morePop: HcPopComponent;\n\n private unsubscribe$ = new Subject();\n\n private _menuOpen = false;\n private _linkWidths: Array = [];\n private _linksTotalWidth = 0;\n public _collapse = false;\n public _moreList: Array = [];\n\n /** Runs the initial calculation of navlink widths after the page has fully rendered */\n @HostListener('window:load')\n _setupNavLinks(): void {\n setTimeout(() => {\n this.refreshNavLinks();\n });\n }\n\n /** Subscribes to the changes to the set of links to refresh the More menu widths */\n ngAfterViewInit(): void {\n // If links are added dynamically, recheck the navbar link sizing\n this._navLinks.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this.refreshNavLinks());\n }\n\n /** Forces a recalculation of the navbar links to determine how many should be rolling into a More menu.\n * Call this if you've updated the contents of any navbar links. */\n @HostListener('window:resize')\n refreshNavLinks(): void {\n if (this._navbarMore) {\n this._navbarMore.closePopover();\n }\n if ( this._linksTotalWidth === 0 || this._linkWidths.length !== this._navLinks.length ) {\n this._collectNavLinkWidths();\n }\n\n this._moreList = [];\n this._collapse = false;\n\n // If links is zero the page is smaller than the first responsive breakpoint\n if (this._navbarContent.nativeElement.clientWidth <= 0) {\n return;\n }\n\n const linksContainerWidth: number = this._navContent.nativeElement.offsetWidth;\n let curLinks = 0;\n\n // Step through the links until we hit the end of the container, then collapse the\n // remaining into a more menu\n this._navLinks.forEach((t, i) => {\n curLinks += this._linkWidths[i];\n\n const moreWidth: number = this._linksTotalWidth > linksContainerWidth ? 116 : 0;\n if (curLinks + moreWidth < linksContainerWidth) {\n t.show();\n // Reset the parent and positioning of any dropdown popovers that aren't in the More menu\n const tempDrop = t as NavbarDropdownComponent;\n if ( tempDrop._menuPop ) {\n tempDrop._menuPop.horizontalAlign = 'start';\n tempDrop._menuPop.verticalAlign = 'below';\n tempDrop._menuPop.parent = null;\n }\n } else {\n t.hide();\n this._collapse = true;\n const tempDrop = t as NavbarDropdownComponent;\n // Translate any navbar dropdown menus into secondary menus in the More dropdown\n if ( tempDrop._menuPop ) {\n tempDrop._menuPop.horizontalAlign = 'after';\n tempDrop._menuPop.verticalAlign = 'start';\n tempDrop._menuPop.parent = this._morePop;\n this._moreList.push({name: t.linkText, uri: t.uri, dropdown: tempDrop._menuPop});\n } else {\n this._moreList.push({name: t.linkText, uri: t.uri});\n }\n }\n });\n\n this.ref.detectChanges();\n }\n\n constructor(private ref: ChangeDetectorRef) {}\n\n private _collectNavLinkWidths() {\n this._linkWidths = [];\n this._linksTotalWidth = 0;\n this._navLinks.forEach(t => {\n const isHidden = t._hidden;\n t.show();\n this._linksTotalWidth += t._getWidth();\n this._linkWidths.push(t._getWidth());\n if (isHidden) {\n t.hide();\n }\n });\n }\n\n ngOnDestroy(): void {\n this.unsubscribe$.next();\n this.unsubscribe$.complete();\n }\n\n _toggleMobileMenu(): void {\n if (this._menuOpen) {\n this._mobileMenu.first.hide();\n this._menuOpen = false;\n } else {\n this._mobileMenu.first.show();\n this._menuOpen = true;\n }\n }\n\n _menuClick(event: Event): void {\n const clickTarget: string = event?.target?.['outerHTML'];\n\n // Verify that the click in the mobile menu came from a navigation item\n if (clickTarget.indexOf('hclistline') >= 0 && clickTarget.indexOf('menu-dropdown') === -1) {\n this._toggleMobileMenu();\n }\n }\n\n get _mobileMenuIcon(): string {\n return this._menuOpen ? 'hc-navbar-mobile-ico-times' : 'hc-navbar-mobile-ico-bars';\n }\n\n _moreClick(): void {\n if (this._navbarMore) {\n this._navbarMore.closePopover();\n }\n }\n\n _brandIconType(): string {\n return typeof this.brandIcon;\n }\n\n _brandIconSet(): string {\n if (this.brandIcon && typeof this.brandIcon !== 'string') {\n return this.brandIcon.fontSet;\n } else {\n return '';\n }\n }\n\n _brandIconGlyph(): string {\n if (this.brandIcon && typeof this.brandIcon !== 'string') {\n return this.brandIcon.fontIcon;\n } else {\n return '';\n }\n }\n\n _brandIconSize(): string {\n if (this.brandIcon && typeof this.brandIcon !== 'string' && this.brandIcon.fontSize) {\n return this.brandIcon.fontSize + 'px';\n }\n return '37px';\n }\n}\n","\n
\n \n
\n\n\n
\n @for (item of _moreList; track item; let i = $index) { @if (!item.dropdown) {\n \n {{ item.name }}\n \n } @if (item.dropdown) {\n \n } @if (i != _moreList.length - 1) {\n
\n } }\n
\n\n","import { Component, ViewEncapsulation, ViewChild, forwardRef, ContentChildren, AfterViewInit } from '@angular/core';\nimport type { QueryList } from '@angular/core';\nimport { NavbarLinkComponent } from '../navbar-link/navbar-link.component';\nimport { HcPopComponent } from '../../pop/popover.component';\nimport { MenuItemDirective } from '../../pop/directives/menu-item.directive';\n\n/** A dropdown menu in a `hc-navbar` */\n@Component({\n selector: 'hc-navbar-dropdown',\n templateUrl: './navbar-dropdown.component.html',\n encapsulation: ViewEncapsulation.None,\n providers: [{ provide: NavbarLinkComponent, useExisting: forwardRef(() => NavbarDropdownComponent) }],\n standalone: false\n})\nexport class NavbarDropdownComponent extends NavbarLinkComponent implements AfterViewInit {\n @ViewChild('menuPop')\n _menuPop: HcPopComponent;\n\n /** Reference to hcMenuItems (if the content contains them) */\n @ContentChildren(MenuItemDirective, {descendants: true}) _menuItems: QueryList;\n\n ngAfterViewInit(): void {\n // Update the popover's reference to menu items included in this component's content\n this._menuPop._menuItems = this._menuItems;\n }\n}\n","@if (!_hidden) {\n\n {{ linkText }}\n \n\n}\n\n\n \n\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { Component, ViewEncapsulation, Input, HostBinding } from '@angular/core';\n\n/** Element to add a co-branding image to the right of the navbar */\n@Component({\n selector: 'hc-navbar-cobrand',\n template: ``,\n styleUrls: ['./navbar-cobrand.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class NavbarCobrandComponent {\n _color: 'light' | 'dark' = 'light';\n _imgHeight = '37px';\n _imgWidth = 'auto';\n\n @HostBinding('class') _hostClass = 'hc-navbar-cobrand-' + this.color;\n\n /** Defines the path for the co-branding image.\n * The image should be in landscape (horizontal) format; it will automatically be scaled to fit the navbar. */\n @Input()\n src: string;\n\n /** Sets the background for co-branding; use `light` for images that require a white background. Defaults to `light` */\n @Input()\n get color(): 'light' | 'dark' {\n return this._color;\n }\n set color( val: 'light' | 'dark' ) {\n this._color = val;\n this._hostClass = 'hc-navbar-cobrand-' + val;\n }\n\n /** Validate that the image will not be wider than 200px when scaled to 37px height; if not, scale the width rather than the height */\n _checkRatio(evt: any): void {\n const width = evt.srcElement.width;\n const height = evt.srcElement.height;\n const ratio = width / height;\n\n if ( ratio * 37 > 200 ) {\n this._imgWidth = '200px';\n this._imgHeight = 'auto';\n }\n }\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {NavbarComponent} from './navbar.component';\nimport {NavbarDropdownComponent} from './navbar-dropdown/navbar-dropdown.component';\nimport {NavbarLinkComponent} from './navbar-link/navbar-link.component';\nimport {NavbarMobileMenuComponent} from './navbar-mobile-menu/navbar-mobile-menu.component';\nimport {NavbarCobrandComponent} from './navbar-cobrand/navbar-cobrand.component';\nimport {RouterModule} from '@angular/router';\nimport {IconModule} from '../icon/icon.module';\nimport {PopModule} from '../pop/popover.module';\n\n@NgModule({\n imports: [CommonModule, RouterModule, IconModule, PopModule],\n declarations: [NavbarComponent, NavbarDropdownComponent, NavbarLinkComponent, NavbarMobileMenuComponent, NavbarCobrandComponent],\n exports: [NavbarComponent, NavbarDropdownComponent, NavbarLinkComponent, NavbarMobileMenuComponent, NavbarCobrandComponent]\n})\nexport class NavbarModule {}\n","import {Subscriber, Observable} from 'rxjs';\n\n/** Abstract class for common initialization functionality */\nexport abstract class Initializable {\n /** Whether this directive has been marked as initialized. */\n _isInitialized = false;\n\n /**\n * List of subscribers that subscribed before the directive was initialized. Should be notified\n * during _markInitialized. Set to null after pending subscribers are notified, and should\n * not expect to be populated after.\n */\n _pendingSubscribers: Subscriber[] | null = [];\n\n /**\n * Observable stream that emits when the directive initializes. If already initialized, the\n * subscriber is stored to be notified once _markInitialized is called.\n * @docs-private\n */\n initialized = new Observable(subscriber => {\n // If initialized, immediately notify the subscriber. Otherwise store the subscriber to notify\n // when _markInitialized is called.\n if (this._isInitialized) {\n this._notifySubscriber(subscriber);\n } else {\n this._pendingSubscribers?.push(subscriber);\n }\n });\n\n /**\n * Marks the state as initialized and notifies pending subscribers. Should be called at the end\n * of ngOnInit.\n * @docs-private\n */\n _markInitialized(): void {\n if (this._isInitialized) {\n throw Error('This directive has already been marked as initialized and should not be called twice.');\n }\n\n this._isInitialized = true;\n\n this._pendingSubscribers?.forEach(this._notifySubscriber);\n this._pendingSubscribers = null;\n }\n\n /** Emits and completes the subscriber stream (should only emit once). */\n _notifySubscriber(subscriber: Subscriber): void {\n subscriber.next();\n subscriber.complete();\n }\n}\n","import {EventEmitter, Input, Output, OnInit, Component} from '@angular/core';\nimport {coerceNumberProperty} from '@angular/cdk/coercion';\nimport {Initializable} from '../shared/initializable';\nimport {PageEvent} from './page-event';\n\n/**\n * Base Pagination class for shared functionality\n * */\n@Component({\n template: '',\n standalone: false\n})\nexport class BasePaginationComponent extends Initializable implements OnInit {\n public static _DEFAULT_PAGE_SIZE = 20;\n private _inputCheckTimeoutSet = false;\n\n /**\n * The total number of items to be paged through\n */\n get length(): number {\n return this._length;\n }\n @Input()\n set length(value: number) {\n this._length = coerceNumberProperty(value);\n this.ensureInputCheckTimeoutSet();\n }\n private _length = 0;\n\n private _prevPageNumber?: number;\n private _pageNumber = 1;\n /** The currently displayed page. *Defaults to 1.* */\n get pageNumber(): number {\n return this._pageNumber;\n }\n @Input()\n set pageNumber(value: number) {\n this._pageNumber = coerceNumberProperty(value);\n this.ensureInputCheckTimeoutSet();\n }\n\n /** Number of items to display on a page. *Defaults to 20.* */\n get pageSize(): number {\n return this._pageSize;\n }\n @Input()\n set pageSize(value: number) {\n this._pageSize = coerceNumberProperty(value);\n this._pageSizeUpdated();\n this.ensureInputCheckTimeoutSet();\n }\n private _prevPageSize?: number;\n private _pageSize: number = BasePaginationComponent._DEFAULT_PAGE_SIZE;\n\n /** Event emitted when the paginator changes the page size or page index. */\n @Output()\n readonly page: EventEmitter = new EventEmitter();\n\n /** Emits the new page number when the page number changes. */\n @Output()\n readonly pageNumberChange: EventEmitter = new EventEmitter();\n /** Emits the new page size when the page size changes. */\n @Output()\n readonly pageSizeChange: EventEmitter = new EventEmitter();\n\n ngOnInit(): void {\n this._markInitialized();\n }\n\n private ensureInputCheckTimeoutSet(): void {\n if (this._inputCheckTimeoutSet) {\n return;\n }\n\n this._inputCheckTimeoutSet = true;\n\n setTimeout(() => {\n this._pageNumber = this._sanitizePageNumber(this._pageNumber);\n const hasPageNumberChanges: boolean = this.shouldEmitPageNumberChangeEvent();\n const hasPageSizeChanges: boolean = this.shouldEmitPageSizeChangeEvent();\n\n if (hasPageNumberChanges) {\n this.pageNumberChange.emit(this._pageNumber);\n }\n\n if (hasPageSizeChanges) {\n this.pageSizeChange.emit(this.pageSize);\n }\n\n if (hasPageNumberChanges || hasPageSizeChanges) {\n this._emitPageEvent(this._prevPageNumber);\n }\n\n this._prevPageNumber = this._pageNumber;\n this._prevPageSize = this._pageSize;\n\n this._inputCheckTimeoutSet = false;\n });\n }\n\n private shouldEmitPageNumberChangeEvent(): boolean {\n const firstPageNumberToBeSet: boolean = this._prevPageNumber === undefined;\n const pageNumberHasChanged: boolean = this._prevPageNumber !== this._pageNumber;\n return !firstPageNumberToBeSet && pageNumberHasChanged;\n }\n\n private shouldEmitPageSizeChangeEvent(): boolean {\n const firstPageSizeToBeSet: boolean = this._prevPageSize === undefined;\n const pageSizeHasChanged: boolean = this._prevPageSize !== this._pageSize;\n return !firstPageSizeToBeSet && pageSizeHasChanged;\n }\n\n /**\n * The computed total number of pages\n */\n get totalPages(): number {\n return Math.ceil(this._length / this._pageSize);\n }\n\n get _isFirstPage(): boolean {\n return this._pageNumber === 1;\n }\n\n get _isLastPage(): boolean {\n return !!(this.totalPages && this._pageNumber === this.totalPages);\n }\n\n /**\n * Changes the page size so that the first item displayed on the page will still be\n * displayed using the new page size.\n *\n * For example, if the page size is 10 and on the second page (items indexed 11-20) then\n * switching so that the page size is 5 will set the third page as the current page so\n * that the 11th item will still be displayed.\n */\n _changePageSize(pageSize: number): void {\n // Current page needs to be updated to reflect the new page size. Navigate to the page\n // containing the previous page's first item.\n const startIndex = (this.pageNumber - 1) * this.pageSize;\n this.pageSize = pageSize;\n this.pageNumber = Math.ceil(startIndex / pageSize) + 1;\n }\n\n _pageSizeUpdated(): void {\n // do nothing.\n }\n\n private _sanitizePageNumber(pageNumber: number): number {\n const positivePageNumber = Math.max(pageNumber, 1);\n const upperBound: number = Math.max(this.totalPages, 1);\n return positivePageNumber > upperBound ? upperBound : positivePageNumber;\n }\n\n private _emitPageEvent(previousPageNumber: number) {\n this.page.emit({\n previousPageNumber,\n pageNumber: this.pageNumber,\n pageSize: this.pageSize,\n length: this.length\n });\n }\n}\n","import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';\nimport {coerceNumberProperty} from '@angular/cdk/coercion';\nimport {BasePaginationComponent} from './base-pagination';\nimport {FormControl} from '@angular/forms';\n\n/** The pagination control enables the user to navigate across paged content.\n * Although commonly used with tables and data grids, this control may be used any place where paged data is used.\n * */\n@Component({\n selector: 'hc-pagination',\n templateUrl: './pagination.component.html',\n styleUrls: ['./pagination.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class PaginationComponent extends BasePaginationComponent implements OnInit {\n /** The set of provided page size options to display to the user. *Defaults to [10, 20, 50].* */\n @Input()\n get pageSizeOptions(): number[] {\n return this._pageSizeOptions;\n }\n set pageSizeOptions(value: number[]) {\n this._pageSizeOptions = (value || []).map(p => coerceNumberProperty(p));\n this._updateDisplayedPageSizeOptions();\n }\n private _pageSizeOptions: number[] = [10, 20, 50];\n\n isFocused = false;\n _pageSizeControl = new FormControl( this.pageSize, {nonNullable: true} );\n\n /** Displayed set of page size options. Will be sorted and include current page size. */\n _displayedPageSizeOptions: number[] = [];\n\n /** Sets the controller to a specific width type - `lg`, `md`, or `sm`. Typically adjusted in a window\n * resize listener for responsive layouts. *Defaults to lg.* */\n @Input()\n displayWidth: 'lg' | 'md' | 'sm' = 'lg';\n\n /** Whether to hide the page size selection UI from the user. *Defaults to false.* */\n @Input()\n get hidePageSize(): boolean {\n return this._hidePageSize;\n }\n set hidePageSize(value: boolean) {\n this._hidePageSize = !!value;\n }\n private _hidePageSize = false;\n\n /** If true, remove all default padding and margin. *Defaults to `false`.* */\n @Input() tight = false;\n\n ngOnInit(): void {\n this._updateDisplayedPageSizeOptions();\n super.ngOnInit();\n }\n\n get _visiblePages(): Array {\n /*\n * if there aren't any pages, don't display any\n */\n if (!this.totalPages) {\n return [];\n }\n\n /*\n * if there are less than nine pages, display them all\n */\n if (this.totalPages <= 9) {\n const visiblePages: number[] = [];\n for (let i = 1; i <= this.totalPages; i++) {\n visiblePages.push(i);\n }\n return visiblePages;\n }\n\n /*\n * There should always be exactly nine elements in the paging control.\n * Let n = total pages, p = current page, ... are non-clickable ellipses\n * If the current page number is less than 6, display 1, 2, 3, 4, 5, 6, ..., n-1, n\n * If the current page number within is within 4 of the max, display 1, 2, ..., n-5, n-4, n-3, n-2, n-1, n\n * Otherwise, display 1, 2, ..., p-1, p, p+1, ..., n-1, n\n */\n const n = this.totalPages;\n const p = this.pageNumber || 1;\n\n if (p < 6) {\n return [1, 2, 3, 4, 5, 6, null, n - 1, n];\n } else if (p >= n - 4) {\n return [1, 2, null, n - 5, n - 4, n - 3, n - 2, n - 1, n];\n } else {\n return [1, 2, null, p - 1, p, p + 1, null, n - 1, n];\n }\n }\n\n get _collapsedVisiblePages(): Array {\n /*\n * if there aren't any pages, don't display any\n */\n if (!this.totalPages) {\n return [];\n }\n\n /*\n * if there are less than five pages, display them all\n */\n if (this.totalPages <= 5) {\n const visiblePages: number[] = [];\n for (let i = 1; i <= this.totalPages; i++) {\n visiblePages.push(i);\n }\n return visiblePages;\n }\n\n /*\n * There should always be exactly five elements in the paging control when collapsed.\n * Let n = total pages, p = current page, ... are non-clickable ellipses\n * If the current page number is less than 4, display 1, 2, 3, ..., n\n * If the current page number within is within 2 of the max, display 1, ..., n-2, n-1, n\n * Otherwise, display 1, ..., p, ..., n\n */\n const n = this.totalPages;\n const p = this.pageNumber || 1;\n\n if (p < 4) {\n return [1, 2, 3, null, n];\n } else if (p >= n - 2) {\n return [1, null, n - 2, n - 1, n];\n } else {\n return [1, null, p, null, n];\n }\n }\n\n _pageSizeUpdated(): void {\n this._updateDisplayedPageSizeOptions();\n this._pageSizeControl.setValue( this.pageSize );\n }\n\n _previousPage(): void {\n if (this._isFirstPage) {\n return;\n }\n this._goToPage((this.pageNumber || 1) - 1);\n }\n\n _goToPage(pageNum: number): number {\n this.pageNumber = pageNum;\n return this.pageNumber;\n }\n\n _nextPage(): void {\n if (this._isLastPage) {\n return;\n }\n this._goToPage((this.pageNumber || 1) + 1);\n }\n\n /**\n * Changes the page size so that the first item displayed on the page will still be\n * displayed using the new page size.\n *\n * For example, if the page size is 10 and on the second page (items indexed 11-20) then\n * switching so that the page size is 5 will set the third page as the current page so\n * that the 11th item will still be displayed.\n */\n _changePageSize(pageSize: number): void {\n // Current page needs to be updated to reflect the new page size. Navigate to the page\n // containing the previous page's first item.\n const startIndex = (this.pageNumber - 1) * this.pageSize + 1;\n this.pageSize = pageSize;\n this.pageNumber = Math.ceil(startIndex / pageSize) || 1;\n }\n\n /**\n * Updates the list of page size options to display to the user. Includes making sure that\n * the page size is an option and that the list is sorted.\n */\n private _updateDisplayedPageSizeOptions() {\n // If no page size is provided, use the first page size option or the default page size.\n if (!this.pageSize) {\n this.pageSize = this.pageSizeOptions.length !== 0 ? this.pageSizeOptions[0] : BasePaginationComponent._DEFAULT_PAGE_SIZE;\n }\n\n this._displayedPageSizeOptions = this.pageSizeOptions.slice();\n if (this._displayedPageSizeOptions.indexOf(this.pageSize) === -1) {\n this._displayedPageSizeOptions.push(this.pageSize);\n }\n\n // Sort the numbers using a number-specific sort function.\n this._displayedPageSizeOptions.sort((a, b) => a - b);\n }\n}\n","
\n @if (!hidePageSize) {\n
\n \n \n @for (pageSizeOption of _displayedPageSizeOptions; track pageSizeOption) {\n \n }\n \n \n
\n }\n\n
\n \n \n PREV\n \n \n @if (displayWidth === 'lg') { @for (page of _visiblePages; track page) {\n \n @if (!!page) {\n {{ page }}\n } @if (!page) {\n \n }\n \n } }\n \n @if (displayWidth === 'md') { @for (page of _collapsedVisiblePages; track page) {\n \n @if (!!page) {\n {{ page }}\n } @if (!page) {\n \n }\n \n } }\n \n NEXT\n \n \n
\n
\n","import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';\nimport {supportedStyles} from '../button/button.component';\nimport {BasePaginationComponent} from './base-pagination';\nimport { supportedColors } from '../utils/supported-colors';\nimport { validateInput } from '../util';\n\n/** A simple \"load more\" pagination button. */\n@Component({\n selector: 'hc-load-more-pagination',\n templateUrl: './load-more-pagination.component.html',\n styleUrls: ['./load-more-pagination.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class LoadMorePaginationComponent extends BasePaginationComponent implements OnInit {\n /**\n * Text to show on the button. *Defaults to 'Load more'.*\n */\n @Input()\n buttonText = 'Load more';\n\n /** Sets style of button. Choose from: `'primary' | 'primary-alt' | 'destructive' | 'neutral' | 'secondary' | 'link' | 'link-inline'`.\n * *Defaults to `'secondary'`.*\n */\n @Input()\n get buttonStyle(): string {\n return this._style;\n }\n\n set buttonStyle(btnStyle: string) {\n validateInput(btnStyle, supportedColors.concat(supportedStyles), 'buttonStyle', 'LoadMorePaginationComponent');\n this._style = btnStyle;\n }\n private _style = 'secondary';\n\n _loadNextPage(): void {\n if (this._isLastPage) {\n return;\n }\n this.pageNumber = this.pageNumber + 1;\n }\n}\n","","/**\n * Change event object that is emitted when the user selects a\n * different page size or navigates to another page.\n */\nexport class PageEvent {\n /** The current page index */\n pageNumber: number;\n\n /** Index of the page that was selected previously */\n previousPageNumber?: number;\n\n /** The current page size */\n pageSize: number;\n\n /** The current total number of items being paged */\n length: number;\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {ButtonModule} from '../button/button.module';\nimport {SelectModule} from '../select/select.module';\nimport {IconModule} from '../icon/icon.module';\nimport {PaginationComponent} from './pagination.component';\nimport {LoadMorePaginationComponent} from './load-more-pagination.component';\nimport {BasePaginationComponent} from './base-pagination';\nimport {ReactiveFormsModule} from '@angular/forms';\n\n@NgModule({\n imports: [CommonModule, ButtonModule, IconModule, SelectModule, ReactiveFormsModule],\n declarations: [PaginationComponent, LoadMorePaginationComponent, BasePaginationComponent],\n exports: [PaginationComponent, LoadMorePaginationComponent, BasePaginationComponent]\n})\nexport class PaginationModule {}\n","import {Observable} from 'rxjs';\n\n/**\n * @type\n * @docs-private\n */\nexport type PicklistValueType = 'values' | 'valuesets' | 'both';\n\n/** Represents a simple picklist option. */\nexport interface IValueOption {\n /** Any unique string identifier. */\n code: string;\n /** The name of the option that will be displayed in the UI. */\n title: string;\n}\n\n/** Represents a collection or bundle of picklist options. */\nexport interface IValueSetOption extends IValueOption {\n /** Number of subvalues. Required because of the fact that `subValues` isn't always preloaded. */\n subValueCount: number;\n /** Collection of values in this value set. The code and title of each subvalue should match what\n * is used by the value when used outside of a valueset. Note: The `subValues` array can initially be\n * empty if the `getValuesForValueset` callback function is provided. */\n subValues: IValueOption[];\n}\n\nexport interface IPicklistOptions {\n /** A collection of values. */\n values: IValueOption[];\n /** A collection of value sets, which may or may not be pre-seeded with its subvalues. */\n valueSets: IValueSetOption[];\n}\n\nexport interface IPicklistSettings {\n /** True if code is considered important. If so, search and sorting will use the code. *Defaults to false.* */\n codeIsSignificant?: boolean;\n /** Set to true to use valuesets. *Defaults to false.* */\n useValuesets?: boolean;\n /** Set to true to show text in the header. *Defaults to true.* */\n showHeaderText?: boolean;\n /** Text for left header. *Defaults to \"Available\".* */\n leftHeaderText?: string;\n /** Text for right header. *Defaults to \"Selected\".* */\n rightHeaderText?: string;\n /** How to sort options in the pane. Options: `asc` | `desc` | `none`; *Defaults to `none`.* */\n sort?: string;\n /** Pre-seed the modal with selected options. */\n selected?: IPicklistOptions;\n /** Available options in the picklist. Set with local values or callbacks to retrieve remote values. */\n options?: IPicklistOptionsSource;\n}\n\nexport interface IPicklistOptionsSource {\n /** Collection of values to select from. */\n values?: IValueOption[];\n /** Collection of value sets to select from. */\n valueSets?: IValueSetOption[];\n /** Will the results from the server be paged? *Defaults to false.* Not used without `getOptions` callback. */\n isPaged?: boolean;\n /** What size results will be returned from the server? *Defaults to 100.* Not used without `getOptions` callback. */\n pageSize?: number;\n /** Callback function retrieve values. */\n getOptions?: (params: PicklistRemoteQueryOptions) => Observable;\n /** Callback function to retrieve values for a value set. */\n getValuesForValueset?: (code: string) => Observable;\n}\n\n/**\n * @docs-private\n */\nexport class PicklistOptionsSource implements IPicklistOptionsSource {\n public values = new Array();\n public valueSets = new Array();\n public isPaged = false;\n public pageSize = 100;\n public getOptions?: (params: PicklistRemoteQueryOptions) => Observable;\n public getValuesForValueset?: (code: string) => Observable;\n\n public optionsAreLocal(): boolean {\n return !this.getOptions;\n }\n}\n\n/**\n * @docs-private\n */\nexport class PicklistSettings implements IPicklistSettings {\n public codeIsSignificant = false;\n public useValuesets = false;\n public showHeaderText = true;\n public leftHeaderText = 'Available';\n public rightHeaderText = 'Selected';\n public sort = 'none';\n public selected = {values: new Array(), valueSets: new Array()}; // options selected in modal\n public options = new PicklistOptionsSource(); // options available for choosing\n}\n\n/** Interface to be used as part of the response when loading values over HTTP. */\nexport interface IPagedCollection {\n /** Page being returned in the response, and the number of items per page. */\n pagerSettings: IPageSettings;\n /** Total number of items, including those already on the client or included in this response. */\n totalItems: number;\n /** Total number of pages. */\n totalPages: number;\n /** An array of `IValueOption` or `IValuesetOption`. */\n values: IT[];\n}\n\nexport interface IPageSettings {\n /** Current page of the request or response. */\n currentPage: number;\n /** Total number of items on a page */\n itemsPerPage: number;\n}\n\n/** Interface to be used for the response when loading values over HTTP. This the type your `getOptions()` callback should return. */\nexport interface IPicklistRemoteQueryResponse {\n /** Paged collection of `IValueOptions`. Only used if this picklist has `optionSource.isPaged` set to true. */\n pagedValues?: IPagedCollection;\n /** Paged collection of `IValueSetOptions`. Only used if this picklist has `optionSource.isPaged` set to true. */\n pagedValueSets?: IPagedCollection;\n /** An array of `{ code: string, title: string}`. Only used if this picklist has `optionSource.isPaged` set to false. */\n values?: Array;\n /** An array of `{ code: string, title: string, subValueCount: number, subValues: IValueOption[]}`.\n * Only used if this picklist has `optionSource.isPaged` set to false. Note: The `subValues` array can\n * initially be empty if the `getValuesForValueset` callback function is provided. */\n valueSets?: Array;\n}\n\n/** An instance of this class will be sent to the `getOptions()` callback if loading values over HTTP. */\nexport class PicklistRemoteQueryOptions {\n /** Page and number of items per page requested for values. */\n valuePageSettings?: IPageSettings;\n /** Page and number of items per page requested for value sets. */\n valueSetPageSettings?: IPageSettings;\n\n constructor(\n /** The settings for this picklist. Particularly, `codeIsSignificant`, `useValuesets`,\n * and selected values will be useful in obtaining the needed values & value sets. */\n public picklist: IPicklistSettings,\n /** Search term entered by the user that triggered the request. */\n public searchTerm: string,\n /** Which types of values should we be getting? */\n public valueTypeToQuery: PicklistValueType\n ) {}\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport {from, Observable} from 'rxjs';\nimport {IValueOption, IValueSetOption} from '../picklist-old.model';\n\nexport class FilterableSelectList {\n public selectedOptions = new Map();\n public lastClickedOption: T | null = null;\n public filteredOptions = new Array();\n public isActive = true;\n\n public additionalRemoteOptions = 0;\n public loadingOptions: Observable = from([]);\n public appendingOptions: Observable = from([]);\n public codeIsSignificant = false;\n public sort: string;\n constructor(public options = new Map()) {}\n}\n\nexport class SubSelectList extends FilterableSelectList {\n constructor(public parentValueSet: ValueSetListOption, public options = new Map()) {\n super(options);\n }\n}\n\nexport function isSubList(model: FilterableSelectList): model is SubSelectList {\n const subList = model;\n return subList && subList.parentValueSet !== undefined;\n}\n\nexport class SelectListOption {\n public selected: boolean;\n\n constructor(public option: any, public code: string) {\n this.selected = false;\n }\n}\n\nexport class ValueListOption extends SelectListOption {\n constructor(option: IValueOption, code: string) {\n super(option, code);\n }\n}\n\nexport class ValueSetListOption extends SelectListOption {\n public subValuesSelectList: SubSelectList;\n public showValues = false;\n public loadingValues = false;\n\n constructor(option: IValueSetOption, code: string) {\n super(option, code);\n this.subValuesSelectList = new SubSelectList(this);\n }\n}\n\nexport class PicklistValueOptions {\n public values = new Map();\n public valueSets = new Map();\n}\n","import {Injectable} from '@angular/core';\nimport {FilterableSelectList, SelectListOption} from '../pane/picklist-pane.model';\n\n@Injectable()\nexport class PicklistFilterLocalService {\n public filter(list: FilterableSelectList, searchTokens: string[]): void {\n list.filteredOptions = [];\n list.options.forEach(item => {\n if (this.itemHasSearchTokens(list, item, searchTokens)) {\n list.filteredOptions.push(item);\n }\n });\n if (list.sort !== \"none\") {\n list.filteredOptions.sort(this.getSortFunc(list));\n }\n }\n\n public itemHasSearchTokens(list: FilterableSelectList, item: T, searchTokens: string[]): boolean {\n const valuesToSearchIn = [item.option.title, list.codeIsSignificant ? item.option.code : ''];\n valuesToSearchIn.filter(val => !!val);\n return searchTokens.every(token => valuesToSearchIn.some(value => value.toLocaleLowerCase().indexOf(token) > -1));\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private getSortFunc(list: FilterableSelectList): (a: any, b: any) => number {\n const sortField = list.codeIsSignificant ? 'code' : 'title';\n return (a, b) => a.option[sortField].localeCompare(b.option[sortField]) * (list.sort === \"asc\" ? -1 : 1);\n }\n}\n","import {Injectable} from '@angular/core';\n\nimport {IValueOption, IValueSetOption, PicklistOptionsSource, PicklistSettings} from '../picklist-old.model';\nimport {FilterableSelectList, SelectListOption, ValueListOption, ValueSetListOption} from '../pane/picklist-pane.model';\nimport {PicklistPaneComponent} from '../pane/picklist-pane.component';\nimport {PicklistFilterLocalService} from './picklist-filter-local.service';\n\n@Injectable()\nexport class PicklistStateService {\n public pane: PicklistPaneComponent;\n public picklist = new PicklistSettings();\n public optionsSource = new PicklistOptionsSource();\n public valueList = new FilterableSelectList();\n public valueSetList = new FilterableSelectList();\n\n public constructor(private localFilterService: PicklistFilterLocalService) {}\n\n public reset(settings: PicklistSettings, optionsSource: PicklistOptionsSource, pane: PicklistPaneComponent): void {\n this.picklist = settings;\n this.pane = pane;\n this.optionsSource = optionsSource;\n this.clearList(this.valueList);\n this.clearList(this.valueSetList);\n }\n\n public updateValueList(options: IValueOption[], searchTokens: string[] = []): void {\n const listOptions = options.map(v => new ValueListOption(v, v.code));\n const companionList = this.pane.companion ? this.pane.companion.valueList : null;\n this.valueList.sort = this.picklist.sort;\n this.updateList(listOptions, this.valueList, companionList, searchTokens);\n }\n\n public updateValueSetList(options: IValueSetOption[], searchTokens: string[] = []): void {\n const listOptions = new Array();\n const companionList = this.pane.companion ? this.pane.companion.valueSetList : null;\n options.forEach(v => {\n const listOption = new ValueSetListOption(v, v.code);\n if (v.subValues && v.subValues.length > 0) {\n const subValueListOptions = v.subValues.map((sv: IValueOption) => new ValueListOption(sv, sv.code));\n this.updateList(subValueListOptions, listOption.subValuesSelectList, null, searchTokens);\n }\n listOptions.push(listOption);\n });\n this.updateList(listOptions, this.valueSetList, companionList, searchTokens);\n }\n\n public clearList(list: FilterableSelectList): void {\n list.options.clear();\n list.filteredOptions.length = 0;\n list.selectedOptions.clear();\n list.lastClickedOption = null;\n list.additionalRemoteOptions = 0;\n }\n\n private updateList(\n options: T[],\n list: FilterableSelectList,\n companionList: FilterableSelectList | null = null,\n searchTokens: string[] = []\n ) {\n if (!this.optionsSource.isPaged && this.pane.shouldExcludeCompanion && companionList) {\n options = options.filter(o => !companionList.options.get(o.code));\n }\n options.forEach(o => {\n list.options.set(o.code, o);\n list.filteredOptions.push(o);\n });\n this.localFilterService.filter(list, searchTokens);\n }\n}\n","import {from, Observable, of, Subject, Subscription} from 'rxjs';\n\nimport {takeUntil} from 'rxjs/operators';\nimport {Injectable} from '@angular/core';\n\nimport {PicklistFilterService} from './picklist-filter.service';\nimport {PicklistStateService} from './picklist-state.service';\nimport {FilterableSelectList, ValueListOption, ValueSetListOption} from '../pane/picklist-pane.model';\nimport {\n IPagedCollection,\n IPicklistRemoteQueryResponse,\n IValueOption,\n IValueSetOption,\n PicklistRemoteQueryOptions,\n PicklistValueType\n} from '../picklist-old.model';\n\n@Injectable()\nexport class PicklistFilterRemoteService {\n public filterService?: PicklistFilterService;\n public get valueList(): FilterableSelectList {\n return this.stateService.valueList;\n }\n public get valueSetList(): FilterableSelectList {\n return this.stateService.valueSetList;\n }\n public get searchTerm(): string {\n return this.filterService ? this.filterService.searchTerm : '';\n }\n public currentValuePage = 1;\n public currentValueSetPage = 1;\n private cancelSearch = new Subject();\n private get cancelSearch$(): Observable {\n return this.cancelSearch.asObservable();\n }\n private options$: Observable = from([]);\n\n public constructor(private stateService: PicklistStateService) {}\n\n public reset(filterService: PicklistFilterService): void {\n this.filterService = filterService;\n this.currentValuePage = 1;\n this.currentValueSetPage = 1;\n }\n\n public filter(type: PicklistValueType = 'both', shouldAppend = false, selectAllCount: number | null = null): Subscription {\n if (!this.stateService.optionsSource.getOptions) {\n console.warn('Remote query callback not provided for this picklist.');\n return from([]).subscribe();\n }\n\n if (this.options$) {\n this.cancelSearch.next();\n }\n const params = this.buildRemoteQueryParams(type, selectAllCount);\n if (!shouldAppend) {\n this.clearFilteredOptions(type);\n }\n this.resetPagingForSelectAllIfNeeded(selectAllCount);\n this.options$ = this.stateService.optionsSource.getOptions(params).pipe(takeUntil(this.cancelSearch$));\n\n return this.options$.subscribe(\n options => {\n this.processIncomingRemoteOptions(options, type, shouldAppend);\n },\n () => {\n console.warn('Unable to filter options');\n this.clearLists('both');\n return of({});\n },\n () => {\n this.options$ = of({});\n }\n );\n }\n\n private processIncomingRemoteOptions(options: IPicklistRemoteQueryResponse, type: PicklistValueType = 'both', shouldAppend = false) {\n if (!shouldAppend) {\n this.clearLists(type);\n }\n\n if (this.stateService.optionsSource.isPaged) {\n if (options.pagedValues) {\n this.processPagedValues(options.pagedValues);\n }\n if (options.pagedValueSets) {\n this.processPagedValueSets(options.pagedValueSets);\n }\n } else {\n if (options.values) {\n this.stateService.updateValueList(options.values);\n }\n if (options.valueSets) {\n this.stateService.updateValueSetList(options.valueSets);\n }\n this.valueList.additionalRemoteOptions = 0;\n this.valueSetList.additionalRemoteOptions = 0;\n }\n }\n\n private processPagedValues(pagedValues: IPagedCollection) {\n this.stateService.updateValueList(pagedValues.values);\n this.valueList.additionalRemoteOptions = pagedValues.totalItems - this.valueList.options.size;\n }\n\n private processPagedValueSets(pagedValueSets: IPagedCollection) {\n this.stateService.updateValueSetList(pagedValueSets.values);\n this.valueSetList.additionalRemoteOptions = pagedValueSets.totalItems - this.valueSetList.options.size;\n }\n\n private buildRemoteQueryParams(type: PicklistValueType, selectAllCount: number | null = null): PicklistRemoteQueryOptions {\n const params = new PicklistRemoteQueryOptions(this.stateService.picklist, this.searchTerm, type);\n if (type === 'values' || type === 'both') {\n params.valuePageSettings = this.buildPageSettings(this.currentValuePage, selectAllCount);\n }\n\n if (type === 'valuesets' || type === 'both') {\n params.valueSetPageSettings = this.buildPageSettings(this.currentValueSetPage, selectAllCount);\n }\n return params;\n }\n\n private buildPageSettings(currentPage: number, selectAllCount: number | null) {\n const pagerSettings = {currentPage: 1, itemsPerPage: this.stateService.optionsSource.pageSize};\n pagerSettings.currentPage = selectAllCount ? 1 : currentPage;\n pagerSettings.itemsPerPage = selectAllCount || pagerSettings.itemsPerPage;\n return pagerSettings;\n }\n\n private resetPagingForSelectAllIfNeeded(selectAllCount: number | null = null) {\n if (selectAllCount) {\n this.currentValuePage = Math.floor(selectAllCount / this.stateService.optionsSource.pageSize);\n }\n }\n\n private clearLists(type: PicklistValueType) {\n if (type === 'both' || type === 'values') {\n this.stateService.clearList(this.valueList);\n }\n if (type === 'both' || type === 'valuesets') {\n this.stateService.clearList(this.valueSetList);\n }\n }\n\n private clearFilteredOptions(type: PicklistValueType) {\n if (type === 'both' || type === 'values') {\n this.valueList.filteredOptions.length = 0;\n }\n if (type === 'both' || type === 'valuesets') {\n this.valueSetList.filteredOptions.length = 0;\n }\n }\n}\n","import {Injectable} from '@angular/core';\nimport {Observable, Subscription} from 'rxjs';\n\nimport {FilterableSelectList, SelectListOption, ValueListOption, ValueSetListOption} from '../pane/picklist-pane.model';\nimport {PicklistValueType} from '../picklist-old.model';\nimport {WorkTrackerService} from '../../shared/work-tracker.service';\nimport {PicklistFilterRemoteService} from './picklist-filter-remote.service';\nimport {PicklistFilterLocalService} from './picklist-filter-local.service';\nimport {PicklistStateService} from './picklist-state.service';\n\n@Injectable()\nexport class PicklistFilterService {\n public get valueList(): FilterableSelectList {\n return this.stateService.valueList;\n }\n public get valueSetList(): FilterableSelectList {\n return this.stateService.valueSetList;\n }\n public get searchTokens(): string[] {\n return this.searchTerm\n .toLocaleLowerCase()\n .replace(/\\s+/g, ' ')\n .split(' ');\n }\n public searchTerm = '';\n\n constructor(\n private workTracker: WorkTrackerService,\n private stateService: PicklistStateService,\n private remoteFilterService: PicklistFilterRemoteService,\n private localFilterService: PicklistFilterLocalService\n ) {}\n\n public reset(): void {\n this.remoteFilterService.reset(this);\n this.searchTerm = '';\n }\n\n public runFilter(searchTerm: string): void {\n this.searchTerm = searchTerm;\n if (!this.stateService.optionsSource.isPaged) {\n this.localFilterService.filter(this.valueList, this.searchTokens);\n this.localFilterService.filter(this.valueSetList, this.searchTokens);\n } else {\n this.remoteFilterService.currentValuePage = 1;\n this.remoteFilterService.currentValueSetPage = 1;\n const workTracker = this.workTracker.startObservable(() => this.remoteFilterService.filter());\n this.showListLoadingIndicators(workTracker, 'both');\n }\n }\n\n public filterOptionsRemote(type: PicklistValueType = 'both', shouldAppend = false, selectAllCount: number | null = null): Subscription {\n return this.remoteFilterService.filter(type, shouldAppend, selectAllCount);\n }\n\n public loadMore(type: PicklistValueType = 'both', autoLoadMore = false): void {\n if (type === 'both' || type === 'values') {\n this.remoteFilterService.currentValuePage++;\n }\n if (type === 'both' || type === 'valuesets') {\n this.remoteFilterService.currentValueSetPage++;\n }\n const loading$ = this.workTracker.startObservable(() => this.filterOptionsRemote(type, true));\n this.showListLoadingIndicators(loading$, type, !autoLoadMore);\n }\n\n public loadForSelectAll(numberToLoad: number): Observable {\n const loading$ = this.workTracker.startObservable(() => this.filterOptionsRemote('values', false, numberToLoad));\n this.showListLoadingIndicators(loading$, 'values');\n return loading$;\n }\n\n public reloadIfEmpty(): void {\n const valuesNeedReload = this.valueList.options.size === 0 && this.valueList.additionalRemoteOptions > 0;\n const valueSetsNeedReload = this.valueSetList.options.size === 0 && this.valueSetList.additionalRemoteOptions > 0;\n if (valuesNeedReload || valueSetsNeedReload) {\n this.runFilter(this.searchTerm);\n }\n }\n\n public preFilterOptionsForRemoteMode(valuesMap: Map, list: FilterableSelectList): void {\n // if server is handling filtering, but I want to avoid the round trip to the server when moving options\n // I need to double check that those options belong before adding them, or risk errant option counts\n valuesMap.forEach(v => {\n if (!this.localFilterService.itemHasSearchTokens(list, v, this.searchTokens)) {\n valuesMap.delete(v.code);\n }\n });\n }\n\n public showListLoadingIndicators(workTracker: Observable, type: PicklistValueType = 'both', isAppending = false): void {\n if (type === 'both' || type === 'values') {\n this.showLoadingIndicatorForList(this.valueList, workTracker, isAppending);\n }\n if (type === 'both' || type === 'valuesets') {\n this.showLoadingIndicatorForList(this.valueSetList, workTracker, isAppending);\n }\n }\n\n private showLoadingIndicatorForList(list: FilterableSelectList, tracker: Observable, isAppending = false) {\n if (isAppending) {\n list.appendingOptions = tracker;\n } else {\n list.loadingOptions = tracker;\n }\n }\n}\n","import {Injectable} from '@angular/core';\n\nimport {PicklistFilterService} from './picklist-filter.service';\nimport {PicklistPaneComponent} from '../pane/picklist-pane.component';\nimport {FilterableSelectList, PicklistValueOptions, ValueListOption, ValueSetListOption} from '../pane/picklist-pane.model';\nimport {PicklistStateService} from './picklist-state.service';\nimport {IValueOption} from '../picklist-old.model';\n\n@Injectable()\nexport class PicklistValuesetMovingService {\n public get valueList(): FilterableSelectList {\n return this.stateService.valueList;\n }\n public get valueSetList(): FilterableSelectList {\n return this.stateService.valueSetList;\n }\n\n public constructor(private filterService: PicklistFilterService, private stateService: PicklistStateService) {}\n\n public moveOutValuesets(optionsToMove: PicklistValueOptions, pane: PicklistPaneComponent, shouldBreakValuesets = false): void {\n this.valueSetList.selectedOptions.forEach(v => {\n v.showValues = false;\n optionsToMove.valueSets.set(v.code, v);\n this.valueSetList.options.delete(v.code);\n });\n\n this.valueSetList.filteredOptions.forEach(valueset => {\n if (valueset.selected || valueset.subValuesSelectList.selectedOptions.size < 1) {\n return;\n }\n\n if (shouldBreakValuesets) {\n this.breakValueset(valueset, optionsToMove, pane.companion);\n } else {\n this.moveSubValues(valueset.subValuesSelectList.selectedOptions, pane);\n }\n });\n }\n\n private breakValueset(valueset: ValueSetListOption, optionsToMove: PicklistValueOptions, companionPane: PicklistPaneComponent | null) {\n valueset.showValues = false;\n optionsToMove.valueSets.set(valueset.code, valueset);\n this.valueSetList.options.delete(valueset.code);\n\n const unselectedSubValues = new Map();\n valueset.subValuesSelectList.filteredOptions\n .filter(o => !o.selected)\n .forEach(o => {\n unselectedSubValues.set(o.code, new ValueListOption(o.option as IValueOption, o.code));\n });\n\n if (!companionPane) {\n return;\n }\n this.moveSubValues(unselectedSubValues, companionPane);\n }\n\n private moveSubValues(valuesMap: Map, sourcePane: PicklistPaneComponent) {\n this.removeValuesFromPane(valuesMap, sourcePane);\n if (!sourcePane.companion) {\n return;\n }\n valuesMap.forEach(o => {\n sourcePane.companion?.valueList.options.set(o.code, new ValueListOption(o.option as IValueOption, o.code));\n });\n }\n\n /**\n * Handles complex logic for when one pane is paged, and we want to keep the \"x of y\" counts accurate without a round trip to the server\n */\n private removeValuesFromPane(valuesMap: Map, pane: PicklistPaneComponent) {\n if (pane.isPaged) {\n // don't bother trying to remove values or decrement count for options that are already filtered out\n this.filterService.preFilterOptionsForRemoteMode(valuesMap, pane.valueList);\n }\n\n valuesMap.forEach(v => {\n const optionDeleted = pane.valueList.options.delete(v.code);\n const optionAlreadyInCompanionList = pane.companion ? pane.companion.valueList.options.has(v.code) : false;\n if (!optionDeleted && pane.isPaged && !optionAlreadyInCompanionList) {\n pane.valueList.additionalRemoteOptions--;\n }\n });\n }\n}\n","import {Injectable} from '@angular/core';\n\nimport {WorkTrackerService} from '../../shared/work-tracker.service';\nimport {PicklistFilterService} from './picklist-filter.service';\nimport {PicklistValuesetMovingService} from './picklist-valueset-moving.service';\nimport {PicklistFilterLocalService} from './picklist-filter-local.service';\nimport {PicklistStateService} from './picklist-state.service';\nimport {PicklistPaneComponent} from '../pane/picklist-pane.component';\nimport {PicklistOptionsSource, PicklistSettings} from '../picklist-old.model';\nimport {FilterableSelectList, PicklistValueOptions, ValueListOption, ValueSetListOption} from '../pane/picklist-pane.model';\n\n/**\n * Handles loading + moving items to/from list\n */\n@Injectable()\nexport class PicklistOldService {\n public get pane(): PicklistPaneComponent {\n return this.stateService.pane;\n }\n public get picklist(): PicklistSettings {\n return this.stateService.picklist;\n }\n public get optionsSource(): PicklistOptionsSource {\n return this.stateService.optionsSource;\n }\n public get valueList(): FilterableSelectList {\n return this.stateService.valueList;\n }\n public get valueSetList(): FilterableSelectList {\n return this.stateService.valueSetList;\n }\n public get totalValuesCount(): number {\n return this.valueList.options.size + this.valueList.additionalRemoteOptions;\n }\n public get totalValueSetsCount(): number {\n return this.valueSetList.options.size + this.valueSetList.additionalRemoteOptions;\n }\n\n constructor(\n private workTracker: WorkTrackerService,\n private filterService: PicklistFilterService,\n private localFilterService: PicklistFilterLocalService,\n private valuesetMovingService: PicklistValuesetMovingService,\n private stateService: PicklistStateService\n ) {}\n\n public reset(settings: PicklistSettings, optionsSource: PicklistOptionsSource, pane: PicklistPaneComponent): void {\n this.stateService.reset(settings, optionsSource, pane);\n this.filterService.reset();\n\n if (this.optionsSource.optionsAreLocal()) {\n this.stateService.updateValueList(this.optionsSource.values);\n this.stateService.updateValueSetList(this.optionsSource.valueSets);\n this.localFilterService.filter(this.valueList, this.filterService.searchTokens);\n this.localFilterService.filter(this.valueSetList, this.filterService.searchTokens);\n } else {\n const loading$ = this.workTracker.startObservable(() => this.filterService.filterOptionsRemote());\n this.valueList.loadingOptions = loading$;\n this.valueSetList.loadingOptions = loading$;\n }\n }\n\n public addOptions(listOptions: PicklistValueOptions): void {\n if (!this.optionsSource.optionsAreLocal()) {\n this.filterService.preFilterOptionsForRemoteMode(listOptions.values, this.valueList);\n this.filterService.preFilterOptionsForRemoteMode(listOptions.valueSets, this.valueSetList);\n }\n\n listOptions.values.forEach(o => {\n this.valueList.options.set(o.code, o);\n });\n listOptions.valueSets.forEach(o => {\n this.valueSetList.options.set(o.code, o);\n });\n this.localFilterService.filter(this.valueList, this.filterService.searchTokens);\n this.localFilterService.filter(this.valueSetList, this.filterService.searchTokens);\n this.pane.selectNone();\n }\n\n public moveOutSelectedOptions(shouldBreakValuesets = false): PicklistValueOptions {\n const optionsToMove = new PicklistValueOptions();\n this.valueList.selectedOptions.forEach(o => {\n optionsToMove.values.set(o.code, o);\n this.valueList.options.delete(o.code);\n });\n\n this.valuesetMovingService.moveOutValuesets(optionsToMove, this.pane, shouldBreakValuesets);\n\n this.localFilterService.filter(this.valueList, this.filterService.searchTokens);\n this.localFilterService.filter(this.valueSetList, this.filterService.searchTokens);\n this.pane.selectNone();\n return optionsToMove;\n }\n\n public loadValuesForValueset(valueset: ValueSetListOption): void {\n valueset.loadingValues = true;\n if (!this.optionsSource.getValuesForValueset) {\n return;\n }\n this.optionsSource.getValuesForValueset(valueset.option.code).subscribe(\n values => {\n valueset.subValuesSelectList.filteredOptions.length = 0;\n values.forEach(v => {\n valueset.subValuesSelectList.filteredOptions.push(new ValueListOption(v, v.code));\n });\n },\n () => {\n console.warn('Unable to load values for valueset');\n valueset.showValues = false;\n },\n () => {\n valueset.loadingValues = false;\n }\n );\n }\n}\n","import {Injectable} from '@angular/core';\nimport {FilterableSelectList, isSubList, SelectListOption, ValueListOption, ValueSetListOption} from '../pane/picklist-pane.model';\nimport {PicklistOldService} from './picklist-old.service';\n\n@Injectable()\nexport class PicklistActionService {\n public get valueList(): FilterableSelectList {\n return this.listService.valueList;\n }\n public get valueSetList(): FilterableSelectList {\n return this.listService.valueSetList;\n }\n public constructor(private listService: PicklistOldService) {}\n\n public onItemClicked(event: MouseEvent, index: number, list: FilterableSelectList, item: T): void {\n if (event.shiftKey && list.lastClickedOption && !(item.code === list.lastClickedOption.code)) {\n this.shiftClick(index, list, item, list.lastClickedOption);\n } else if (event.ctrlKey) {\n this.ctrlClick(list, item);\n } else {\n // regular click\n this.selectNone();\n this.selectItem(list, item);\n list.lastClickedOption = item;\n }\n }\n\n public onItemDoubleClicked(event: MouseEvent, list: FilterableSelectList, item: T): void {\n this.selectNone();\n this.selectItem(list, item);\n }\n\n public onValuesetCaretClicked(event: MouseEvent, valueset: ValueSetListOption): void {\n if (!valueset.showValues && valueset.subValuesSelectList.filteredOptions.length === 0) {\n this.listService.loadValuesForValueset(valueset);\n }\n valueset.showValues = !valueset.showValues;\n }\n\n public selectAll(): void {\n this.valueSetList.filteredOptions.forEach(v => {\n this.clearListSelection(v.subValuesSelectList);\n }); // deselect sublist items\n this.selectAllInList(this.valueList);\n this.selectAllInList(this.valueSetList);\n }\n\n public selectNone(): void {\n this.valueSetList.filteredOptions.forEach(v => {\n this.clearListSelection(v.subValuesSelectList);\n });\n this.clearListSelection(this.valueList);\n this.clearListSelection(this.valueSetList);\n }\n\n public selectAllInList(list: FilterableSelectList): void {\n if (!list.isActive) {\n return;\n }\n\n list.selectedOptions.clear();\n list.lastClickedOption = null;\n\n list.filteredOptions.forEach(item => {\n item.selected = true;\n list.selectedOptions.set(item.code, item);\n });\n }\n\n private clearListSelection(list: FilterableSelectList) {\n list.selectedOptions.clear();\n list.lastClickedOption = null;\n\n list.filteredOptions.forEach(item => {\n item.selected = false;\n });\n }\n\n private shiftClick(index: number, list: FilterableSelectList, item: T, lastClickedItem: T) {\n const lastIndex = list.filteredOptions.indexOf(lastClickedItem);\n const largeIndex = Math.max(index, lastIndex);\n const smallIndex = Math.min(index, lastIndex);\n\n const formerLastClicked = list.lastClickedOption;\n this.selectNone();\n list.lastClickedOption = formerLastClicked;\n\n for (let i = smallIndex; i <= largeIndex; i++) {\n this.selectItem(list, list.filteredOptions[i]);\n }\n }\n\n private ctrlClick(list: FilterableSelectList, item: T) {\n // if ctrl clicking a sub value of a valueset that is selected (such that all subvalues appear selected)\n if (isSubList(list) && list.parentValueSet.selected) {\n this.selectAllInList(list);\n this.deselectItem(this.valueSetList, list.parentValueSet);\n this.deselectItem(list, item);\n } else {\n this.toggleItemSelection(list, item);\n }\n\n list.lastClickedOption = item;\n }\n\n private deselectItem(list: FilterableSelectList, item: T) {\n item.selected = false;\n list.selectedOptions.delete(item.code);\n }\n\n private selectItem(list: FilterableSelectList, item: T) {\n item.selected = true;\n list.selectedOptions.set(item.code, item);\n }\n\n private toggleItemSelection(list: FilterableSelectList, item: T) {\n if (item.selected) {\n this.deselectItem(list, item);\n } else {\n this.selectItem(list, item);\n }\n }\n}\n","import {debounceTime, distinctUntilChanged} from 'rxjs/operators';\nimport {Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core';\nimport {Subject} from 'rxjs';\n\nimport {PicklistOldService} from '../services/picklist-old.service';\nimport {PicklistActionService} from '../services/picklist-action.service';\nimport {PicklistFilterService} from '../services/picklist-filter.service';\nimport {PicklistFilterRemoteService} from '../services/picklist-filter-remote.service';\nimport {PicklistFilterLocalService} from '../services/picklist-filter-local.service';\nimport {PicklistStateService} from '../services/picklist-state.service';\nimport {PicklistValuesetMovingService} from '../services/picklist-valueset-moving.service';\nimport {WorkTrackerService} from '../../shared/work-tracker.service';\nimport {PicklistOptionsSource, PicklistSettings, PicklistValueType} from '../picklist-old.model';\nimport {FilterableSelectList, SelectListOption, ValueListOption, ValueSetListOption} from './picklist-pane.model';\n\n@Component({\n selector: 'hc-picklist-pane',\n templateUrl: 'picklist-pane.component.html',\n styleUrls: ['picklist-pane.component.scss'],\n providers: [\n PicklistOldService,\n PicklistStateService,\n PicklistValuesetMovingService,\n PicklistActionService,\n PicklistFilterService,\n PicklistFilterRemoteService,\n PicklistFilterLocalService,\n WorkTrackerService\n ],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class PicklistPaneComponent {\n @Input()\n public emptyMsg = 'No options';\n @Output()\n public moveSelectedItems = new EventEmitter();\n @ViewChild('listContainer')\n public listContainerEl: ElementRef | undefined;\n @ViewChild('search')\n public searchInputEl: ElementRef | undefined;\n public companion: PicklistPaneComponent | null = null;\n public shouldExcludeCompanion = false;\n public codeIsSignificant = false;\n public searchTerm = '';\n public searchTermStream = new Subject();\n public selectAllWasLastClicked = false;\n public selectAllLimit = 2000;\n\n constructor(\n public listService: PicklistOldService,\n public actionService: PicklistActionService,\n public filterService: PicklistFilterService\n ) {}\n\n public reset(source: PicklistOptionsSource, settings: PicklistSettings, companion: PicklistPaneComponent, excludeCompanion = false): void {\n this.companion = companion;\n this.shouldExcludeCompanion = excludeCompanion;\n this.codeIsSignificant = settings.codeIsSignificant;\n this.selectAllWasLastClicked = false;\n this.searchTerm = '';\n this.wireUpSearch();\n this.listService.reset(settings, source, this);\n }\n\n public get valueList(): FilterableSelectList {\n return this.listService.valueList;\n }\n public get valueSetList(): FilterableSelectList {\n return this.listService.valueSetList;\n }\n public get isPaged(): boolean {\n return this.listService.optionsSource.isPaged;\n }\n public get optionsAvailableCount(): number {\n return this.PicklistValueOptionsTotal + this.valueSetOptionsTotal;\n }\n public get PicklistValueOptionsTotal(): number {\n return this.valueList.isActive ? this.listService.totalValuesCount : 0;\n }\n public get valueSetOptionsTotal(): number {\n return this.valueSetList.isActive ? this.listService.totalValueSetsCount : 0;\n }\n public get optionsShowingCount(): number {\n const valueListShowing = this.valueList.isActive ? this.valueList.filteredOptions.length : 0;\n const valueSetListShowing = this.valueSetList.isActive ? this.valueSetList.filteredOptions.length : 0;\n return valueListShowing + valueSetListShowing;\n }\n\n public get showTooManyToSelectAllMsg(): boolean {\n const serverMatches = this.valueList.additionalRemoteOptions;\n return (\n this.selectAllWasLastClicked &&\n Number.isFinite(serverMatches) &&\n serverMatches + this.valueList.options.size > this.selectAllLimit\n );\n }\n\n public shouldShowList(list: FilterableSelectList): boolean {\n return list.isActive && (list.filteredOptions.length > 0 || list.additionalRemoteOptions > 0);\n }\n\n public listIsFilteredToEmpty(list: FilterableSelectList): boolean {\n return list.options.size > 0 && list.filteredOptions.length === 0 && list.isActive;\n }\n\n public isAnySelected(): boolean {\n const topLevelListHasSelection = this.valueList.selectedOptions.size > 0 || this.valueSetList.selectedOptions.size > 0;\n const subListHasSelection = this.valueSetList.filteredOptions.some(o => o.subValuesSelectList.selectedOptions.size > 0);\n return topLevelListHasSelection || subListHasSelection;\n }\n\n public focusSearch(): void {\n if (this.searchInputEl) {\n this.searchInputEl.nativeElement.focus();\n }\n }\n\n public scrollToTop(): void {\n if (this.listContainerEl) {\n this.listContainerEl.nativeElement.scrollTop = 0;\n }\n }\n\n public onSearchKeyup(): void {\n this.selectNone();\n this.searchTermStream.next(this.searchTerm);\n }\n\n public onItemClicked(event: MouseEvent, index: number, list: FilterableSelectList, item: T): void {\n this.selectAllWasLastClicked = false;\n event.stopPropagation();\n this.actionService.onItemClicked(event, index, list, item);\n }\n\n public preventIEHighlightBug(): void {\n // for IE: https://stackoverflow.com/questions/1527751/disable-text-selection-while-pressing-shift\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (document as any).onselectstart = function() {\n return false;\n };\n setTimeout(function() {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (document as any).onselectstart = () => null;\n }, 0);\n }\n\n public onValuesetCaretClicked(event: MouseEvent, valueset: ValueSetListOption): void {\n this.selectAllWasLastClicked = false;\n event.stopPropagation();\n this.actionService.onValuesetCaretClicked(event, valueset);\n }\n\n public triggerLoadMore(type: PicklistValueType): void {\n this.selectAllWasLastClicked = false;\n this.filterService.loadMore(type);\n }\n\n public onItemDoubleClicked(event: MouseEvent, list: FilterableSelectList, item: T): void {\n this.selectAllWasLastClicked = false;\n event.stopPropagation();\n this.actionService.onItemDoubleClicked(event, list, item);\n this.moveSelectedItems.emit(this);\n }\n\n public selectAll(): void {\n this.selectAllWasLastClicked = true;\n const shouldLoadMoreBeforeSelectAll = this.valueList.additionalRemoteOptions && this.valueList.options.size < this.selectAllLimit;\n if (this.pagingValueList() && shouldLoadMoreBeforeSelectAll) {\n const totalMatches = this.valueList.additionalRemoteOptions + this.valueList.options.size;\n const numberToLoad = totalMatches > this.selectAllLimit ? this.selectAllLimit : totalMatches;\n this.loadAndSelectAll(numberToLoad);\n } else {\n this.actionService.selectAll();\n }\n }\n\n public selectNone(): void {\n this.selectAllWasLastClicked = false;\n this.actionService.selectNone();\n }\n\n private loadAndSelectAll(numberToLoad: number) {\n this.filterService.loadForSelectAll(numberToLoad).subscribe(() => {\n this.actionService.selectAllInList(this.valueList);\n });\n }\n\n private pagingValueList(): boolean {\n return this.isPaged && this.shouldShowList(this.valueList) && !this.shouldShowList(this.valueSetList);\n }\n\n private wireUpSearch() {\n this.searchTermStream.pipe(debounceTime(300), distinctUntilChanged()).subscribe(t => {\n this.filterService.runFilter(t);\n this.selectNone();\n });\n }\n}\n","
\n
\n \n \n \n \n
\n
Showing {{ optionsShowingCount.toLocaleString() }} of {{ optionsAvailableCount.toLocaleString() }}
\n
\n \n Select All\n \n \n
\n
\n
\n\n
\n \n @if (valueSetList.isActive && (valueSetList.loadingOptions | async)) {\n
\n } @if (shouldShowList(valueSetList) && !(valueSetList.loadingOptions | async)) {\n \n \n \n @if (shouldShowList(valueSetList) && shouldShowList(valueList)) {\n \n }\n \n @for (item of valueSetList.filteredOptions; track item; let idx = $index) {\n \n \n \n }\n \n @if (isPaged && optionsShowingCount < optionsAvailableCount) {\n \n @if (!(valueSetList.appendingOptions | async)) {\n Load More\n } @if (valueSetList.appendingOptions | async) {\n \n }\n \n }\n \n
Value Sets
\n
\n \n \n \n \n \n {{ item.option.title || 'Untitled' }} ({{ item.option.subValueCount }})\n
\n
\n \n @if (item.showValues) {\n \n \n @if (item.loadingValues) {\n \n } @for (subItem of item.subValuesSelectList.filteredOptions; track subItem; let idx = $index) {\n \n \n \n }\n \n
\n @if (codeIsSignificant) {\n {{ subItem.option.code }}\n }\n {{ subItem.option.title || 'Untitled' }}\n
\n }\n
\n
\n }\n\n \n @if (valueList.isActive && (valueList.loadingOptions | async)) {\n
\n } @if (shouldShowList(valueList) && !(valueList.loadingOptions | async)) {\n \n \n \n @if (shouldShowList(valueSetList) && shouldShowList(valueList)) {\n \n }\n \n @if (showTooManyToSelectAllMsg) {\n \n \n \n }\n \n @for (item of valueList.filteredOptions; track item; let idx = $index) {\n \n @if (codeIsSignificant) {\n \n }\n \n \n }\n \n @if (isPaged && optionsShowingCount < optionsAvailableCount) {\n \n @if (!(valueList.appendingOptions | async)) {\n Load More\n } @if (valueList.appendingOptions | async) {\n \n }\n \n }\n \n
Individual Values
\n {{ valueList.selectedOptions.size }} Selected.\n Too many results to select all.\n
{{ item.option.code }}{{ item.option.title || 'Untitled' }}
\n }\n\n \n @if (!shouldShowList(valueSetList) && !shouldShowList(valueList) && !(valueList.loadingOptions | async) &&\n !(valueSetList.loadingOptions | async)) {\n
\n @if (listIsFilteredToEmpty(valueList) || listIsFilteredToEmpty(valueSetList)) {\n Nothing matches your search.\n } @else {\n {{ emptyMsg }}\n }\n \n
\n }\n
\n
\n","import {Component, EventEmitter, forwardRef, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core';\nimport {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';\nimport {PicklistPaneComponent} from './pane/picklist-pane.component';\nimport {IPicklistOptions, IPicklistSettings, IValueOption, PicklistOptionsSource, PicklistSettings} from './picklist-old.model';\n\nconst supportedSortModes = ['asc', 'desc', 'none'];\nexport function validateSortInput(inputStr: string): void {\n if (supportedSortModes.indexOf(inputStr) < 0) {\n throw Error('Unsupported sort input value: ' + inputStr);\n }\n}\n\n@Component({\n selector: 'hc-picklist-old',\n templateUrl: 'picklist-old.component.html',\n styleUrls: ['picklist-old.component.scss'],\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PicklistOldComponent),\n multi: true\n }\n ],\n standalone: false\n})\nexport class PicklistOldComponent implements ControlValueAccessor {\n /**\n * Settings for the picklist. Internally, this will trigger a call to `reset()`.\n */\n @Input()\n public set settings(settings: PicklistSettings) {\n this.reset(settings);\n }\n public get settings(): PicklistSettings {\n return this.picklistSettings;\n }\n /**\n * An array of unique strings to be used as the picklist options.\n */\n @Input()\n public set simpleOptions(options: Array | null) {\n this.updateStateFromStringOptions(options);\n }\n public get simpleOptions(): Array | null {\n return this.stringOptions;\n }\n /**\n * Set to true to show text in the header. *Defaults to true.*\n */\n @Input()\n public set showHeaderText(shouldShow: boolean) {\n this.update({showHeaderText: shouldShow});\n }\n public get showHeaderText(): boolean {\n return this.picklistSettings.showHeaderText;\n }\n /**\n * Text for left header. *Defaults to \"Available\".*\n */\n @Input()\n public set leftHeaderText(text: string) {\n this.update({leftHeaderText: text});\n }\n public get leftHeaderText(): string {\n return this.picklistSettings.leftHeaderText;\n }\n /**\n * Text for right header. *Defaults to \"Selected\".*\n */\n @Input()\n public set rightHeaderText(text: string) {\n this.update({rightHeaderText: text});\n }\n public get rightHeaderText(): string {\n return this.picklistSettings.rightHeaderText;\n }\n\n /**\n * How to sort options in the pane. Options: `asc` | `desc` | `none`; *Defaults to `none`.*\n */\n @Input()\n public set sort(sort: string) {\n validateSortInput(sort);\n this.update({sort: sort});\n }\n public get sort(): string {\n return this.picklistSettings.sort;\n }\n\n @ViewChild('availableList', {static: true})\n public _available: PicklistPaneComponent | undefined;\n @ViewChild('confirmedList', {static: true})\n public _confirmed: PicklistPaneComponent | undefined;\n /** Fired when a change is made to the picklist selection. */\n @Output()\n public changed = new EventEmitter();\n private picklistSettings = new PicklistSettings();\n public get _leftToRightMoveBtnIsDisabled(): boolean {\n return this._available ? !this._available.isAnySelected() : false;\n }\n private stringOptions: Array | null = null;\n\n /**\n * Current selected value of the picklist. Will be either `IPicklistOptions` or `string[]` depending on the type of options provided.\n */\n public set value(model: IPicklistOptions | string[]) {\n const selectedValues: IPicklistOptions = {values: [], valueSets: []};\n if (this.picklistModelisArray(model)) {\n const selected = this.convertStringsToValueOptions(model);\n selectedValues.values = selected || [];\n } else {\n selectedValues.values = model.values || [];\n selectedValues.valueSets = model.valueSets || [];\n }\n this.update({selected: selectedValues});\n }\n public get value(): IPicklistOptions | string[] {\n if (this.stringOptions) {\n return this.picklistSettings.selected.values.map(v => v.title);\n } else {\n return this.picklistSettings.selected;\n }\n }\n public onChange: (value: unknown) => void = () => undefined;\n public onTouch: () => unknown = () => undefined;\n public registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n public registerOnTouched(fn: () => unknown): void {\n this.onTouch = fn;\n }\n public writeValue(value: IPicklistOptions | string[]): void {\n if (value) {\n this.value = value;\n }\n }\n\n /**\n * Will update the picklist with the given settings, maintaining any previous settings that have not been overridden.\n */\n public update(settings: IPicklistSettings): void {\n const updatedSettings = Object.assign(this.picklistSettings, settings);\n this.reset(updatedSettings);\n }\n\n /**\n * Will reset the picklist settings with the given settings. (Clears out any previous settings.)\n */\n public reset(settings: IPicklistSettings = new PicklistSettings()): void {\n this.picklistSettings = Object.assign(new PicklistSettings(), settings);\n this.resetPanes();\n this.setActiveValueType(this.picklistSettings.useValuesets ? 'valueSets' : 'values');\n this.applyChangeToModel();\n }\n\n /**\n * Will change the active tab. (Will do nothing if `settings.useValuesets` is false.)\n */\n public setActiveValueType(type: 'values' | 'valueSets'): void {\n if (!this._available) {\n console.warn('Available picklist pane not available yet.');\n return;\n }\n if (!this.settings.useValuesets) {\n type = 'values';\n }\n\n this._available.valueList.isActive = type === 'values';\n this._available.valueSetList.isActive = type === 'valueSets';\n this._available.selectNone();\n this._available.scrollToTop();\n }\n\n /**\n * Will move all selected items from the given pane into its companion pane. Used internally by the left and right arrow buttons.\n * @param pane the pane from which we are moving items out of\n */\n public moveSelectedItems(pane: PicklistPaneComponent): void {\n const shouldBreakValuesets = pane === this._confirmed;\n const selectedOptions = pane.listService.moveOutSelectedOptions(shouldBreakValuesets);\n if (pane.companion) {\n pane.companion.listService.addOptions(selectedOptions);\n } else {\n console.warn('This pane does not have a companion pane to move the select options in to.');\n }\n pane.filterService.reloadIfEmpty();\n this.applyChangeToModel();\n }\n\n private updateStateFromStringOptions(options: Array | null) {\n const valueOptions = this.convertStringsToValueOptions(options);\n this.stringOptions = options;\n this.update({options: {values: valueOptions || []}});\n }\n\n private resetPanes() {\n if (!(this._available && this._confirmed)) {\n console.warn('Picklist panes not available yet.');\n return;\n }\n\n const confirmedSource = new PicklistOptionsSource();\n confirmedSource.values = this.picklistSettings.selected.values.slice(0);\n confirmedSource.valueSets = this.picklistSettings.selected.valueSets.slice(0);\n confirmedSource.getValuesForValueset = this.picklistSettings.options.getValuesForValueset;\n this._confirmed.reset(confirmedSource, this.picklistSettings, this._available, false);\n\n const availableSource = Object.assign(new PicklistOptionsSource(), this.picklistSettings.options);\n this._available.reset(availableSource, this.picklistSettings, this._confirmed, true);\n }\n\n private applyChangeToModel() {\n if (!(this._available && this._confirmed)) {\n console.warn('Picklist panes not available yet.');\n return;\n }\n\n this.picklistSettings.selected.values.length = 0;\n this.picklistSettings.selected.valueSets.length = 0;\n this._confirmed.valueList.options.forEach(e => this.picklistSettings.selected.values.push(e.option));\n this._confirmed.valueSetList.options.forEach(e => this.picklistSettings.selected.valueSets.push(e.option));\n\n this.changed.emit();\n this.onChange(this.value);\n this.onTouch();\n }\n\n private convertStringsToValueOptions(vals: Array | null): IValueOption[] | null {\n return vals ? vals.map(o => ({code: `${o}`, title: `${o}`})) : null;\n }\n\n private picklistModelisArray(model: IPicklistOptions | Array): model is Array {\n const array = >model;\n return array && array.length !== undefined;\n }\n}\n","
\n
\n
\n @if (settings.showHeaderText) {\n

{{ settings.leftHeaderText }}

\n } @if (settings.useValuesets) {\n
\n \n Value Sets\n \n \n Values\n \n
\n }\n
\n \n
\n\n
\n \n \n \n \n \n \n
\n\n
\n
\n @if (settings.showHeaderText) {\n

{{ settings.rightHeaderText }}

\n }\n
\n \n
\n
\n","import {NgModule} from '@angular/core';\nimport {FormsModule} from '@angular/forms';\nimport {CommonModule} from '@angular/common';\nimport {PicklistPaneComponent} from './pane/picklist-pane.component';\nimport {PicklistOldComponent} from './picklist-old.component';\nimport {ButtonModule} from '../button/button.module';\nimport {IconModule} from '../icon/icon.module';\nimport {InputModule} from '../input/input.module';\nimport {FormFieldModule} from '../form-field/hc-form-field.module';\nimport {ProgressIndicatorsModule} from '../progress-indicators/progress-indicators.module';\n\nexport {PicklistPaneComponent} from './pane/picklist-pane.component';\nexport {PicklistOldComponent} from './picklist-old.component';\nexport {\n IPicklistSettings,\n IValueOption,\n IValueSetOption,\n IPicklistOptions,\n IPicklistOptionsSource,\n PicklistRemoteQueryOptions,\n IPicklistRemoteQueryResponse,\n IPageSettings,\n IPagedCollection\n} from './picklist-old.model';\n\n@NgModule({\n imports: [CommonModule, FormsModule, ButtonModule, IconModule, InputModule, FormFieldModule, ProgressIndicatorsModule],\n declarations: [PicklistPaneComponent, PicklistOldComponent],\n exports: [PicklistPaneComponent, PicklistOldComponent]\n})\nexport class PicklistOldModule {}\n","import { Directive, ElementRef, Input, OnChanges, TemplateRef } from '@angular/core';\nimport { escapeHTML } from '../util';\n\n/** @docs-private */\n@Directive({\n selector: '[hcPickItemLabel]',\n standalone: false\n})\nexport class PickItemLabelDirective implements OnChanges {\n @Input() hcPickItemLabel: string;\n @Input() escape = true;\n\n constructor(private element: ElementRef) { }\n\n ngOnChanges(): void {\n this.element.nativeElement.innerHTML = this.escape ?\n escapeHTML(this.hcPickItemLabel) :\n this.hcPickItemLabel;\n }\n}\n\n/** @docs-private */\n@Directive({\n selector: '[hcPaneHeaderLeftTmp]',\n standalone: false\n})\nexport class PickPaneHeaderLeftTemplateDirective {\n constructor(public template: TemplateRef) { }\n}\n\n/** @docs-private */\n@Directive({\n selector: '[hcPaneHeaderRightTmp]',\n standalone: false\n})\nexport class PickPaneHeaderRightTemplateDirective {\n constructor(public template: TemplateRef) { }\n}\n\n/** @docs-private */\n@Directive({\n selector: '[hcPickOptionTmp]',\n standalone: false\n})\nexport class PickOptionTemplateDirective {\n constructor(public template: TemplateRef) { }\n}\n\n/** @docs-private */\n@Directive({\n selector: '[hcPickOptgroupTmp]',\n standalone: false\n})\nexport class PickOptgroupTemplateDirective {\n constructor(public template: TemplateRef) { }\n}\n\n/** @docs-private */\n@Directive({\n selector: '[hcPaneToolbarTmp]',\n standalone: false\n})\nexport class PickPaneToolbarTemplateDirective {\n constructor(public template: TemplateRef) { }\n}\n\n/** @docs-private */\n@Directive({\n selector: '[hcPaneFooterTmp]',\n standalone: false\n})\nexport class PickPaneFooterTemplateDirective {\n constructor(public template: TemplateRef) { }\n}\n\n/** @docs-private */\n@Directive({\n selector: '[hcPickCustomItemTmp]',\n standalone: false\n})\nexport class PickCustomItemTemplateDirective {\n constructor(public template: TemplateRef) { }\n}\n","import {\n AfterViewChecked,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Input,\n OnChanges,\n OnDestroy,\n SimpleChanges\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nexport interface PickOptionStateChange { value: boolean; disabled: boolean; label?: string; }\n\n/** Component used to add options to a picklist in declarative way. `` */\n@Component({\n selector: 'hc-pick-option',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: ``,\n standalone: false\n})\nexport class PickOptionComponent implements OnChanges, AfterViewChecked, OnDestroy {\n /** Value for this option. */\n @Input() value: boolean;\n /** If true, the option cannot be selected. */\n @Input() set disabled(value: boolean) { this._disabled = this._isDisabled(value); }\n get disabled(): boolean { return this._disabled; }\n\n readonly _stateChange$ = new Subject();\n\n private _disabled = false;\n private _previousLabel: string;\n\n constructor(\n /** Reference to underlying HTML element. */\n public elementRef: ElementRef) { }\n\n /** Getter. Returns the text used as the label for this option. */\n get label(): string { return (this.elementRef.nativeElement.textContent || '').trim(); }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.disabled) {\n this._stateChange$.next({\n value: this.value,\n disabled: this._disabled\n });\n }\n }\n\n ngAfterViewChecked(): void {\n if (this.label !== this._previousLabel) {\n this._previousLabel = this.label;\n this._stateChange$.next({\n value: this.value,\n disabled: this._disabled,\n label: this.elementRef.nativeElement.textContent || undefined\n });\n }\n }\n\n ngOnDestroy(): void {\n this._stateChange$.complete();\n }\n\n private _isDisabled(value) {\n return value != null && `${value}` !== 'false';\n }\n}\n","import { Injectable } from '@angular/core';\nimport { PickPaneComponent } from './pane/pick-pane.component';\nimport { isDefined } from '../util';\n\n@Injectable()\n/** @docs-private */\nexport class PicklistService {\n availablePane: PickPaneComponent;\n selectedPane: PickPaneComponent;\n public reset(availablePane: PickPaneComponent, selectedPane: PickPaneComponent): void {\n this.availablePane = availablePane;\n this.selectedPane = selectedPane;\n }\n\n /** When the option/items are updated, update corresponding selected options in the selected pane.\n * Make sure they aren't duplicated in the available pane */\n public mapIncomingOptionsToSelected(bindValue?: string): void {\n if (!isDefined(this.availablePane) || !isDefined(this.selectedPane)) { return; }\n const selectedItems = this.selectedPane.itemsList.items.filter(i => !i.isParent);\n selectedItems.forEach(selected => {\n const value = bindValue ?\n this.selectedPane.itemsList.resolveNested(selected.value, bindValue) : selected.value;\n const item = isDefined(value) ? this.availablePane.itemsList.findOption(value) : null;\n if (item) { this.availablePane.itemsList.removeOption(item); }\n this.selectedPane.itemsList.removeOption(selected);\n this.selectedPane.itemsList.addOption(item || selected);\n });\n this.availablePane.itemsList.reIndex();\n this.selectedPane.itemsList.reIndex();\n }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { InjectionToken } from '@angular/core';\nimport { SelectionModelFactory } from './pane/selection-model';\n\n/** @docs-private */\nexport class PickOption {\n [name: string]: unknown;\n /** zero-based position in the list */\n index?: number;\n /** used as the id for the DOM element representing this option */\n htmlId?: string;\n /** true if the option is highlighted in its pane */\n selected?: boolean;\n /** true if the option should not be available for interaction */\n disabled?: boolean;\n /** true if the option currently has focus in the list */\n marked?: boolean;\n /** the display name for the option */\n label?: string;\n /** the option given to the form or NgModel for this option */\n value?: any;\n /** reference to this option's parent option */\n parent?: PickOption;\n\n // for HcOption groups only\n /** identifier for the group. typically a string, but can be an HcOption if items provided to the\n * component were grouped before being passed in */\n groupKey?: string | PickOption;\n /** collection of nested HcOptions */\n children?: PickOption[];\n /** true if this group should be collapsed in the UI*/\n isClosed = false;\n\n get isChild(): boolean { return !!this.parent; }\n get isParent(): boolean { return !!this.children; }\n\n constructor(config: IPickOption) {\n Object.assign(this, config);\n }\n\n toggleOpenState(event: MouseEvent): void {\n event.stopPropagation();\n this.isClosed = !this.isClosed;\n }\n}\n\nexport type IPickOption = Partial;\n\nexport enum KeyCode {\n Tab = 9,\n Enter = 13,\n Esc = 27,\n Space = 32,\n ArrowUp = 38,\n ArrowDown = 40,\n Backspace = 8\n}\n\nexport const SELECTION_MODEL_FACTORY = new InjectionToken('ng-select-selection-model');\nexport type AddCustomItemFn = ((term: string) => any | Promise);\nexport type CompareWithFn = (a: any, b: any) => boolean;\nexport type GroupValueFn = (key: string | Record, children: any[]) => string | Record;\nexport type GroupByFn = (item: any) => any;\nexport type SortFn = (a: PickOption, b: PickOption) => number;\nexport type SearchFn = (term: string, item: any) => boolean;\nexport type TrackByFn = (index: number, item: U) => U;\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { PickPaneComponent } from './pick-pane.component';\nimport { GroupByFn, PickOption } from '../pick.types';\nimport { PickSelectionModel } from './selection-model';\nimport { isDefined, isFunction, isObject } from '../../util';\n\nexport function newId(): string {\n // First character is an 'a', it's good practice for unique id to begin with a letter\n return 'axxxxxxxxxxx'.replace(/[x]/g, function () {\n const val = Math.random() * 16 | 0;\n return val.toString(16);\n });\n}\n\n/** Keys may be a unique string or an HcOption itself. HcOption will be used as a key when the developer provides pregrouped options. */\ntype ChildrenByGroupKeyMap = Map>;\n\n/** Helps manage the state of the list */\nexport class ItemsList {\n constructor(private _pickPane: PickPaneComponent, private _selectionModel: PickSelectionModel) {}\n\n get itemsShownCountStr(): string { return this._itemsShownCountStr; }\n private _itemsShownCountStr = '';\n\n get itemsTotalCountStr(): string { return this._itemsTotalCountStr; }\n private _itemsTotalCountStr = '';\n\n get itemsTotalCount(): number { return this._itemsTotalCount; }\n private _itemsTotalCount = 0;\n\n /** containts all items in the list, including parent items */\n get items(): Array { return this._items; }\n private _items = new Array();\n\n get filteredItems(): Array { return this._filteredItems; }\n private _filteredItems = new Array();\n\n private _optionGroups = new Array();\n private readonly DEFAULT_GROUP_KEY = 'HC_PICK_PANE_DEFAULT_GROUP_KEY';\n private _markedIndex = -1;\n\n /** Represents the \"focused\" item */\n get markedIndex(): number { return this._markedIndex; }\n /** Return true if some item in the list should have focus. -1 means nothing is focused. */\n get hasMarkedItem(): boolean { return this._markedIndex !== -1; }\n /** The highlighted options in this list */\n get selectedItems(): Array { return this._selectionModel.value; }\n /** The HcOption that currently has focus */\n get markedItem(): PickOption { return this._filteredItems[this._markedIndex]; }\n /** The last option in the list to be highlighted */\n get lastSelectedItem(): PickOption | null {\n let i = this.selectedItems.length - 1;\n for (; i >= 0; i--) {\n const item = this.selectedItems[i];\n if (!item.disabled) {\n return item;\n }\n }\n return null;\n }\n\n /** Remove all options from the list */\n clearList(): void {\n this._items = [];\n this._filteredItems = [];\n this._optionGroups = [];\n }\n\n /** Converts an array of raw values into HcOptions and set them on the list */\n setItems(items: any[]): void {\n const hcOptionItems = items.map((item, index) => this._createHcOption(item, index));\n this._optionGroups = this._groupItems(hcOptionItems, this._pickPane.groupBy);\n this._items = this.sortAndIndex(this._optionGroups);\n this._filteredItems = [...this._items];\n this.updateCounts();\n }\n\n /** Reset the indexes on each HcOption */\n reIndex(): void {\n this._items.forEach((o, index) => o.index = index);\n }\n\n /** Highlight a given option in the list */\n select(item: PickOption): void {\n if (item.selected) { return; }\n if (item.children) {\n const availableChildren = item.children.filter(i => this._filteredItems.some(fi => fi.htmlId === i.htmlId && !i.disabled));\n availableChildren.forEach(child => this._selectionModel.select(child));\n } else {\n this._selectionModel.select(item);\n }\n }\n\n /** Remove highlight from a given option in the list */\n unselect(item: PickOption): void {\n if (!item.selected) { return; }\n this._selectionModel.unselect(item);\n }\n\n /**\n * Find the option in this list for a given value\n */\n // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\n findOption(value: any): PickOption | undefined {\n let findBy: (item: PickOption) => boolean;\n if (this._pickPane.compareWith) {\n findBy = item => this._pickPane.compareWith(item.value, value);\n } else if (this._pickPane.bindValue) {\n findBy = item => !item.children && this.resolveNested(item.value, this._pickPane.bindValue) === value;\n } else {\n findBy = item => item.value === value ||\n !item.children && !!item.label && item.label === this.resolveNested(value, this._pickPane.bindLabel);\n }\n return this._items.filter(i => !i.isParent).find(item => findBy(item));\n }\n\n /** Adds an existing HcOption to the list. */\n addOption(option: PickOption): void {\n if (option.isParent) { throw new Error(`Trying to add an option that has children: ${option}`); }\n if (!option.parent) { throw new Error(`Trying to add an option that does not have a parent: ${option}`); }\n const parentKey = option.parent.groupKey;\n const parentGroup = this._optionGroups.find(pg => pg.groupKey === parentKey);\n if (parentGroup) {\n parentGroup?.children?.push(option);\n option.parent = parentGroup;\n } else {\n const newParentGroup = new PickOption({\n groupKey: parentKey,\n label: option.parent.label,\n children: [option],\n parent: undefined,\n disabled: option.parent.disabled,\n htmlId: newId(),\n isClosed: option.parent.isClosed,\n value: option.parent.value\n });\n option.parent = newParentGroup;\n this._optionGroups.push(newParentGroup);\n }\n\n this._items = this.sortAndIndex(this._optionGroups);\n }\n\n /** Removes an existing HcOption from the list */\n removeOption(option: PickOption): void {\n if (!option.parent) { throw new Error(`Trying to remove an option that does not have a parent: ${option}`); }\n this._deleteItem(option, this._items);\n\n const parentGroup = this._optionGroups.find(pg => pg.groupKey === option?.parent?.groupKey);\n this._deleteItem(option, parentGroup?.children || []);\n if (parentGroup?.children?.length === 0) {\n this._deleteItem(parentGroup, this._items);\n this._deleteItem(parentGroup, this._optionGroups);\n }\n\n this._items = this.sortAndIndex(this._optionGroups);\n }\n\n /** Create a new HcOption and add it to the list from a given raw value. Also returns the newly created option */\n addNewOption(item: unknown): PickOption {\n const newOption = this._createHcOption(item);\n this._groupItems([newOption], this._pickPane.groupBy);\n this.addOption(newOption);\n return newOption;\n }\n\n /** Maps the given raw value into an HcOption. */\n // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\n _createHcOption(item: any, index?: number): PickOption {\n // $hcOptionLabel and $hcOptionValue will be used in the case of components\n const label = isDefined(item.$hcOptionLabel) ? item.$hcOptionLabel : this.resolveNested(item, this._pickPane.bindLabel);\n const value = isDefined(item.$hcOptionValue) ? item.$hcOptionValue : item;\n index = Number.isFinite(index) ? index : this._items.length;\n return new PickOption({\n index: index,\n label: isDefined(label) ? label.toString() : '',\n value: value,\n disabled: item.disabled,\n htmlId: `${this._pickPane.paneId}-${index}`,\n });\n }\n\n private _deleteItem(item: PickOption, list: Array) {\n const findIndexFunc = (i: PickOption) => i.index === item.index;\n const indexToRemove = list.findIndex(findIndexFunc);\n if (indexToRemove === -1) { console.error(`Couldn't find the item to remove: ${item}`); return; }\n list.splice(indexToRemove, 1);\n }\n\n /** Create item groups. If we're not grouping, everything just gets placed in one default group. */\n private _groupItems(items: Array, groupBy: string | GroupByFn | undefined): Array {\n const childOptsGroupedByKey = this._groupBy(items, groupBy);\n return this._createParentHcOptions(childOptsGroupedByKey);\n }\n\n /** If a sort function was provided, sort at the child and group level*/\n private _sortOptions(groups: Array) {\n if (!this._pickPane.sortFn) { return; }\n groups.forEach(g => { g.children?.sort(this._pickPane.sortFn); });\n groups.sort(this._pickPane.sortFn);\n\n // if default group exists, sort it at the bottom\n const defaultGroupIndex = groups.findIndex(g => g.groupKey === this.DEFAULT_GROUP_KEY);\n if (defaultGroupIndex === -1) { return; }\n const defaultGroup = groups.splice(defaultGroupIndex, 1);\n groups.push(...defaultGroup);\n }\n\n /**\n * Removed highlight from all items in the list.\n * @param keepDisabled if true, don't deselect any options that are currently disabled\n */\n clearSelected(keepDisabled = false): void {\n this._selectionModel.clear(keepDisabled);\n this._items.forEach(item => {\n item.selected = keepDisabled && item.selected && item.disabled;\n item.marked = false;\n });\n }\n\n /** Highlight all the items in the list */\n selectAll(): void {\n this._selectionModel.selectAll(this._filteredItems, this._pickPane.canSelectGroup);\n }\n\n /** Find an item in the list by its label */\n findByLabel(term: string): PickOption | undefined {\n term = term.toLocaleLowerCase();\n return this.filteredItems.find(item => {\n const label = item.label?.toLocaleLowerCase();\n return label?.substr(0, term.length) === term;\n });\n }\n\n /** Filter the options in the list with the given search term */\n filter(term: string): void {\n if (!term) { this.resetFilteredItems(); return; }\n this._filteredItems = [];\n term = this._pickPane.searchFn ? term : term.toLocaleLowerCase();\n const searchFn = this._pickPane.searchFn || this._defaultSearchFn;\n\n this._optionGroups.forEach(pg => {\n const matchedItems = new Array();\n pg.children?.forEach(item => {\n const searchItem = this._pickPane.searchFn ? item.value : item;\n if (searchFn(term, searchItem)) {\n matchedItems.push(item);\n }\n });\n if (matchedItems.length > 0) {\n this._filteredItems.push(...[pg, ...matchedItems]);\n }\n });\n this.updateCounts();\n }\n\n resetFilteredItemsForCustomOptionAdded(isRemoteFilter: boolean, searchTerm: string): void {\n if (isRemoteFilter) {\n this._filteredItems = [...this._items];\n this.updateCounts();\n } else {\n this.filter(searchTerm);\n }\n }\n\n /** Unfilter the list */\n resetFilteredItems(): void {\n if (this._filteredItems.length === this._items.length) { this.updateCounts(); return; }\n this._filteredItems = [...this._items];\n this.updateCounts();\n }\n\n /** Wipe out selection state and marked state, then mark the first selectable option */\n resetListSelectionState(): void {\n this.clearSelected();\n this.markFirst();\n }\n\n /** Remove focus from any of the options */\n unmark(): void {\n this._markedIndex = -1;\n }\n\n /** Move focus up or down in the list */\n markNextItem(stepIsDown: boolean): void {\n this._stepToItem(stepIsDown ? 1 : -1);\n }\n\n /** Focus the given item in the list */\n markItem(item: PickOption): void {\n this._markedIndex = this._filteredItems.indexOf(item);\n }\n\n /** Focus on the last selected item, or the first item in the list */\n markSelectedOrDefault(): void {\n if (this._filteredItems.length === 0) { return; }\n const lastMarkedIndex = this._getLastMarkedIndex();\n if (lastMarkedIndex > -1) {\n this._markedIndex = lastMarkedIndex;\n } else {\n this.markFirst();\n }\n }\n\n /** Unmarks what ever is currently marked and then marks the first selectable item */\n markFirst(): void {\n this.unmark();\n this.markNextItem(true);\n }\n\n /** Obtain a nested value from a given object. It could be a direct property, or a nested property */\n // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\n resolveNested(option: any, key: string): any {\n if (!isObject(option)) { return option; }\n if (!key || key.indexOf('.') === -1) {\n return option[key];\n } else {\n const keys: string[] = key.split('.');\n let value = option;\n for (let i = 0, len = keys.length; i < len; ++i) {\n if (value == null) {\n return null;\n }\n value = value[keys[i]];\n }\n return value;\n }\n }\n\n /** Update the 'Showing x of y' counts */\n updateCounts(): void {\n this._itemsShownCountStr = this.filteredItems.filter(i => !i.isParent).length.toLocaleString();\n this._itemsTotalCount = this.items.filter(i => !i.isParent).length;\n this._itemsTotalCountStr = this._itemsTotalCount.toLocaleString();\n }\n\n /** If picklist is not configured with a search function, use this one. */\n private _defaultSearchFn(searchTerm: string, opt: PickOption): boolean {\n const label = opt.label?.toLocaleLowerCase() || \"\";\n return label.indexOf(searchTerm) > -1;\n }\n\n /** Get index of an item a given number of steps above or below the current focus item */\n private _getNextItemIndex(steps: number): number {\n if (steps > 0) {\n return (this._markedIndex === this._filteredItems.length - 1) ? 0 : (this._markedIndex + 1);\n }\n return (this._markedIndex <= 0) ? (this._filteredItems.length - 1) : (this._markedIndex - 1);\n }\n\n /** Move focus a certain number of steps above or below the current focused item */\n private _stepToItem(steps: number) {\n if (this._filteredItems.every(x => x.disabled)) { this.unmark(); return; }\n this._markedIndex = this._getNextItemIndex(steps);\n if (this.markedItem.disabled) { this._stepToItem(steps); }\n }\n\n /** Find the index of the item in the list was marked most recently */\n private _getLastMarkedIndex(): number {\n if (this._markedIndex > -1 && this.markedItem === undefined) { return -1; }\n\n const selectedIndex = this._filteredItems.indexOf(this.lastSelectedItem as PickOption);\n if (this.lastSelectedItem && selectedIndex < 0) { return -1; }\n return Math.max(this.markedIndex, selectedIndex);\n }\n\n /** Group the items in the list as configured */\n private _groupBy(items: Array, groupBy: string | GroupByFn | undefined): ChildrenByGroupKeyMap {\n const groups: ChildrenByGroupKeyMap = new Map>();\n if (items.length === 0) { return groups; }\n\n // if not asked to group, everything goes into a hidden default group\n if (!groupBy) { groups.set(this.DEFAULT_GROUP_KEY, items); return groups; }\n\n // Check if items are already grouped by given key.\n if (Array.isArray((items[0].value as Record)?.[groupBy])) {\n for (const item of items) {\n const children = ((item.value as Record)?.[groupBy] || []).map((x: unknown, index: number | undefined) => this._createHcOption(x, index));\n groups.set(item, children);\n }\n return groups;\n }\n\n // Generate groups by given key or grouper function\n const isFnKey = isFunction(this._pickPane.groupBy);\n const keyFn = (item: PickOption) => {\n const key = isFnKey ? (groupBy)(item.value) : (item.value as Record)?.[groupBy];\n return isDefined(key) ? key : this.DEFAULT_GROUP_KEY;\n };\n\n // Group items by key.\n for (const item of items) {\n const key = keyFn(item);\n const group = groups.get(key);\n if (group) {\n group.push(item);\n } else {\n groups.set(key, [item]);\n }\n }\n return groups;\n }\n\n /** Creates parent HcOption as needed */\n private _createParentHcOptions(groups: ChildrenByGroupKeyMap): Array {\n const isGroupByFn = isFunction(this._pickPane.groupBy);\n const parentOptions = new Array();\n for (const key of Array.from(groups.keys())) {\n const isObjectKey = isObject(key);\n const parent = this.createOptionGroup(key, isObjectKey);\n const keyForGroupVal = isGroupByFn ? this._pickPane.bindLabel : this._pickPane.groupBy;\n const groupValue = this._pickPane.groupValue || (() => {\n if (isObjectKey) { return (key).value; }\n return { [keyForGroupVal]: this.getStringForKey(key) };\n });\n const children = groups.get(key)?.map(x => {\n x.parent = parent;\n x.children = undefined;\n return x;\n });\n parent.children = children;\n parent.value = groupValue(key, children?.map(x => x.value) || []);\n parentOptions.push(parent);\n }\n return parentOptions;\n }\n\n private createOptionGroup(key: string | PickOption, isObjectKey = false): PickOption {\n return new PickOption({\n groupKey: key,\n label: isObjectKey ? '' : this.getStringForKey(key),\n children: undefined,\n parent: undefined,\n disabled: !this._pickPane.canSelectGroup,\n htmlId: newId(),\n isClosed: !!this._pickPane.groupBy && this._pickPane.canCloseGroup && this._pickPane.closeGroupsByDefault\n });\n }\n\n private getStringForKey(key: any) {\n if (key === this.DEFAULT_GROUP_KEY) {\n return this._pickPane.orphanItemsGroupName;\n } else {\n return key.toString();\n }\n }\n\n private sortAndIndex(groups: Array): Array {\n const flattenedSortedItems = new Array();\n this._sortOptions(groups);\n\n groups.forEach(group => {\n let i = flattenedSortedItems.length;\n group.index = i++;\n flattenedSortedItems.push(group);\n group.children?.forEach(childItem => {\n childItem.index = i++;\n flattenedSortedItems.push(childItem);\n });\n });\n\n return flattenedSortedItems;\n }\n}\n","import { Injectable } from '@angular/core';\nexport interface ItemsRangeResult {\n scrollHeight: number;\n topPadding: number;\n start: number;\n end: number;\n}\n\nexport interface PanelDimensions {\n itemHeight: number;\n panelHeight: number;\n itemsPerViewport: number;\n}\n\n@Injectable()\n/** Performs calculations for virtual scrolling.\n * @docs-private\n*/\nexport class PickPaneListService {\n\n private _dimensions: PanelDimensions = {\n itemHeight: 0,\n panelHeight: 0,\n itemsPerViewport: 0\n };\n\n get dimensions(): PanelDimensions {\n return this._dimensions;\n }\n\n calculateItems(scrollPos: number, itemsLength: number, buffer: number): ItemsRangeResult {\n const d = this._dimensions;\n const scrollHeight = d.itemHeight * itemsLength;\n\n const scrollTop = Math.max(0, scrollPos);\n const indexByScrollTop = scrollTop / scrollHeight * itemsLength;\n let end = Math.min(itemsLength, Math.ceil(indexByScrollTop) + (d.itemsPerViewport + 1));\n\n const maxStartEnd = end;\n const maxStart = Math.max(0, maxStartEnd - d.itemsPerViewport);\n let start = Math.min(maxStart, Math.floor(indexByScrollTop));\n\n let topPadding = d.itemHeight * Math.ceil(start) - (d.itemHeight * Math.min(start, buffer));\n topPadding = !isNaN(topPadding) ? topPadding : 0;\n start = !isNaN(start) ? start : -1;\n end = !isNaN(end) ? end : -1;\n start -= buffer;\n start = Math.max(0, start);\n end += buffer;\n end = Math.min(itemsLength, end);\n\n return {\n topPadding,\n scrollHeight,\n start,\n end\n };\n }\n\n setDimensions(itemHeight: number, panelHeight: number): void {\n const itemsPerViewport = Math.max(1, Math.floor(panelHeight / itemHeight));\n this._dimensions = {\n itemHeight,\n panelHeight,\n itemsPerViewport\n };\n }\n\n getScrollTo(itemTop: number, itemHeight: number, lastScroll: number): number | null {\n const { panelHeight } = this.dimensions;\n const itemBottom = itemTop + itemHeight;\n const top = lastScroll;\n const bottom = top + panelHeight;\n\n if (panelHeight >= itemBottom && lastScroll === itemTop) {\n return null;\n }\n\n if (itemBottom > bottom) {\n return top + itemBottom - bottom;\n } else if (itemTop <= top) {\n return itemTop;\n }\n\n return null;\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n SimpleChanges,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { animationFrameScheduler, asapScheduler, fromEvent, Subject } from 'rxjs';\nimport { auditTime, takeUntil } from 'rxjs/operators';\nimport { PickPaneListService, PanelDimensions } from './pick-pane-list.service';\nimport { PickOption } from '../pick.types';\nimport { isDefined } from '../../util';\n\nconst SCROLL_SCHEDULER = typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n selector: 'hc-pick-pane-list',\n template: `\n
\n
\n
\n \n
\n
\n `,\n standalone: false\n})\n/** Component that contains that displays options list and manages virtual scroll as needed.\n * @docs-private\n*/\nexport class PickPaneListComponent implements OnInit, OnChanges, OnDestroy {\n @Input() items: PickOption[] = [];\n @Input() markedItem: PickOption;\n @Input() bufferAmount: number;\n @Input() virtualScroll = false;\n @Input() filterValue: string;\n @Output() update = new EventEmitter();\n @Output() scroll = new EventEmitter<{ start: number; end: number }>();\n @Output() scrollToEnd = new EventEmitter();\n @ViewChild('content', { read: ElementRef, static: true }) contentElementRef: ElementRef;\n @ViewChild('scroll', { read: ElementRef, static: true }) scrollElementRef: ElementRef;\n @ViewChild('padding', { read: ElementRef, static: true }) paddingElementRef: ElementRef;\n\n public readonly _panel: HTMLElement;\n private readonly _destroy$ = new Subject();\n private _virtualPadding: HTMLElement;\n private _scrollablePanel: HTMLElement;\n private _contentPanel: HTMLElement;\n private _scrollToEndFired = false;\n private _updateScrollHeight = false;\n private _lastScrollPosition = 0;\n\n constructor(private _zone: NgZone, private _panelService: PickPaneListService, _elementRef: ElementRef) {\n this._panel = _elementRef.nativeElement;\n }\n\n private _itemsLength: number;\n\n private get itemsLength() {\n return this._itemsLength;\n }\n\n private set itemsLength(value: number) {\n if (value !== this._itemsLength) {\n this._itemsLength = value;\n this._onItemsLengthChanged();\n }\n }\n\n private get _startOffset() {\n if (this.markedItem) {\n const { itemHeight, panelHeight } = this._panelService.dimensions;\n const offset = (this.markedItem.index || 0) * itemHeight;\n return panelHeight > offset ? 0 : offset;\n }\n return 0;\n }\n\n ngOnInit(): void {\n this._virtualPadding = this.paddingElementRef.nativeElement;\n this._scrollablePanel = this.scrollElementRef.nativeElement;\n this._contentPanel = this.contentElementRef.nativeElement;\n this._handleScroll();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.items) {\n const change = changes.items;\n this._onItemsChange(change.currentValue, change.firstChange);\n }\n }\n\n ngOnDestroy(): void {\n this._destroy$.next();\n this._destroy$.complete();\n this._destroy$.unsubscribe();\n }\n\n scrollTo(option: PickOption, startFromOption = false): void {\n if (!option) {\n return;\n }\n\n const index = this.items.indexOf(option);\n if (index < 0 || index >= this.itemsLength) {\n return;\n }\n\n let scrollTo: number | null;\n if (this.virtualScroll) {\n const itemHeight = this._panelService.dimensions.itemHeight;\n scrollTo = this._panelService.getScrollTo(index * itemHeight, itemHeight, this._lastScrollPosition);\n } else {\n const item: HTMLElement | null = this._panel.querySelector(`#${option.htmlId}`);\n const lastScroll = startFromOption ? item?.offsetTop || 0 : this._lastScrollPosition;\n scrollTo = this._panelService.getScrollTo(item?.offsetTop || 0, item?.clientHeight || 0, lastScroll);\n }\n\n if (scrollTo || scrollTo === 0) {\n this._scrollablePanel.scrollTop = scrollTo;\n }\n }\n\n scrollToCustomOption(): void {\n const panel = this._scrollablePanel;\n panel.scrollTop = panel.scrollHeight - panel.clientHeight;\n }\n\n public refreshListLayout(isInitialList: boolean): void {\n if (this.virtualScroll) {\n this._updateItemsRange(isInitialList);\n } else {\n this._setVirtualHeight();\n this._updateItems(isInitialList);\n }\n }\n\n private _handleScroll() {\n this._zone.runOutsideAngular(() => {\n fromEvent(this.scrollElementRef.nativeElement, 'scroll')\n .pipe(takeUntil(this._destroy$), auditTime(0, SCROLL_SCHEDULER))\n .subscribe((e: { path, composedPath, target }) => {\n const path = e.path || (e.composedPath && e.composedPath());\n const scrollTop = path.length === 0 ? e.target.scrollTop : path[0].scrollTop;\n this._onContentScrolled(scrollTop);\n });\n });\n }\n\n private _onItemsChange(items: PickOption[], firstChange: boolean) {\n this.items = items || [];\n this._scrollToEndFired = false;\n this.itemsLength = items.length;\n\n this.refreshListLayout(firstChange);\n }\n\n private _updateItems(firstChange: boolean) {\n this.update.emit(this.items);\n if (firstChange === false) {\n return;\n }\n\n this._zone.runOutsideAngular(() => {\n Promise.resolve().then(() => {\n const panelHeight = this._scrollablePanel.clientHeight;\n this._panelService.setDimensions(0, panelHeight);\n this.scrollTo(this.markedItem, firstChange);\n });\n });\n }\n\n private _updateItemsRange(firstChange: boolean) {\n this._zone.runOutsideAngular(() => {\n this._measureDimensions().then(() => {\n if (firstChange) {\n this._renderItemsRange(this._startOffset);\n } else {\n this._renderItemsRange();\n }\n });\n });\n }\n\n private _onContentScrolled(scrollTop: number) {\n if (this.virtualScroll) {\n this._renderItemsRange(scrollTop);\n }\n this._lastScrollPosition = scrollTop;\n this._fireScrollToEnd(scrollTop);\n }\n\n private _updateVirtualHeight(height: number) {\n if (this._updateScrollHeight) {\n this._virtualPadding.style.height = `${height}px`;\n this._updateScrollHeight = false;\n }\n }\n\n private _setVirtualHeight() {\n if (!this._virtualPadding) { return; }\n this._virtualPadding.style.height = `0px`;\n }\n\n private _onItemsLengthChanged() {\n this._updateScrollHeight = true;\n }\n\n private _renderItemsRange(scrollTop: number | null = null) {\n if (scrollTop && this._lastScrollPosition === scrollTop) { return; }\n\n scrollTop = scrollTop || this._scrollablePanel.scrollTop;\n const range = this._panelService.calculateItems(scrollTop, this.itemsLength, this.bufferAmount);\n this._updateVirtualHeight(range.scrollHeight);\n this._contentPanel.style.transform = `translateY(${range.topPadding}px)`;\n\n this._zone.run(() => {\n this.update.emit(this.items.slice(range.start, range.end));\n this.scroll.emit({ start: range.start, end: range.end });\n });\n\n if (isDefined(scrollTop) && this._lastScrollPosition === 0) {\n this._scrollablePanel.scrollTop = scrollTop;\n this._lastScrollPosition = scrollTop;\n }\n }\n\n private _measureDimensions(): Promise {\n if (this._panelService.dimensions.itemHeight > 0 || this.itemsLength === 0) {\n return Promise.resolve(this._panelService.dimensions);\n }\n\n const [first] = this.items.filter(i => !i.isParent);\n this.update.emit([first]);\n\n return Promise.resolve().then(() => {\n const option = this._panel.querySelector(`#${first.htmlId}`);\n const optionHeight = option?.clientHeight || 0;\n this._virtualPadding.style.height = `${optionHeight * this.itemsLength}px`;\n const panelHeight = this._scrollablePanel.clientHeight;\n this._panelService.setDimensions(optionHeight, panelHeight);\n\n return this._panelService.dimensions;\n });\n }\n\n private _fireScrollToEnd(scrollTop: number) {\n if (this._scrollToEndFired || scrollTop === 0) { return; }\n\n const padding = this.virtualScroll ?\n this._virtualPadding :\n this._contentPanel;\n\n if (scrollTop + this._panel.clientHeight >= padding.clientHeight) {\n this._zone.run(() => this.scrollToEnd.emit());\n this._scrollToEndFired = true;\n }\n }\n}\n","import { Injectable } from '@angular/core';\nimport { ItemsList } from './items-list';\nimport { PickPaneComponent } from './pick-pane.component';\nimport { PickOption } from '../pick.types';\n\n@Injectable()\n/** Contains logic for dragging and dropping items between picklist panes.\n * @docs-private\n */\nexport class PickPaneDragService {\n private pane: PickPaneComponent;\n\n public reset(pane: PickPaneComponent): void {\n this.pane = pane;\n }\n\n public drag(event: DragEvent, list: ItemsList, item: PickOption): void {\n event.stopPropagation();\n if (!item.selected) { list.clearSelected(true); }\n list.select(item);\n this.pane._isDragging = true;\n }\n\n public allowDrop(event: DragEvent): void {\n if (!this.pane._isDragging) {\n event.preventDefault();\n this.pane._willAcceptDrop = true;\n }\n }\n\n public drop(event: DragEvent): void {\n if (this.pane._willAcceptDrop) {\n event.preventDefault();\n this.pane._companionPane.triggerMove.emit();\n }\n\n this.dragLeave();\n this.dragEnd();\n }\n\n public dragEnd(): void {\n this.pane._isDragging = false;\n this.pane._companionPane._isDragging = false;\n }\n\n public dragLeave(): void {\n this.pane._willAcceptDrop = false;\n this.pane._companionPane._willAcceptDrop = false;\n this.pane.detectChanges();\n this.pane._companionPane.detectChanges();\n }\n}\n","import {\n Component,\n forwardRef,\n ChangeDetectorRef,\n Input,\n Output,\n EventEmitter,\n TemplateRef,\n ViewEncapsulation,\n ViewChild,\n ElementRef,\n ChangeDetectionStrategy,\n Inject,\n OnChanges,\n SimpleChanges,\n HostBinding\n} from '@angular/core';\nimport { Subject } from 'rxjs';\n\nimport { isDefined, isFunction, isPromise, isObject } from '../../util';\nimport { ItemsList, newId } from './items-list';\nimport { PickOption, KeyCode, SearchFn, GroupByFn, TrackByFn } from '../pick.types';\nimport { PickPaneListComponent } from './pick-pane-list.component';\nimport { SelectionModelFactory } from './selection-model';\nimport { PickPaneListService } from './pick-pane-list.service';\nimport { PicklistService } from '../picklist.service';\nimport { PickPaneDragService } from './pick-pane-drag.service';\nimport { SortFn, GroupValueFn, CompareWithFn, AddCustomItemFn, SELECTION_MODEL_FACTORY } from '../pick.types';\n\n/** @docs-private */\n@Component({\n selector: 'hc-pick-pane',\n templateUrl: './pick-pane.component.html',\n providers: [PickPaneListService, PickPaneDragService],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\n/** A single pane containing the searchbar, toolbar, items list, and footer.\n*/\nexport class PickPaneComponent implements OnChanges {\n @Input() _isLeftPane = false;\n @Input() bindLabel: string;\n @Input() bindValue: string;\n @Input() addCustomItem: boolean | AddCustomItemFn | undefined = false;\n @Input() addCustomItemText: string;\n @Input() groupBy: string | GroupByFn | undefined;\n @Input() groupValue: GroupValueFn | undefined;\n @Input() canSelectGroup = false;\n @Input() canCloseGroup = false;\n @Input() closeGroupsByDefault = true;\n @Input() orphanItemsGroupName: string;\n @Input() virtualScroll: boolean;\n @Input() bufferAmount = 4;\n @Input() trackByFn: TrackByFn;\n @Input() sortFn: SortFn | undefined;\n @Input() readonly = false;\n @Input() hasSearch = true;\n @Input() searchPlaceholder: string;\n @Input() searchFn: SearchFn | undefined;\n @Input() searchWhileComposing = true;\n @Input() externalSearchTermMinLength = 0;\n @Input() externalSearchSubject: Subject;\n @Input() externalTotalOptionCount: number;\n @Input() notFoundText: string;\n @Input() loading = false;\n @Input() hasToolbar = true;\n @Input() hasFooter = true;\n @Input() escapeHTML = true;\n @Input() get items(): unknown[] { return this._items; }\n set items(value: unknown[]) { this._items = value; }\n @Input() get compareWith(): CompareWithFn { return this._compareWith; }\n set compareWith(fn: CompareWithFn) {\n if (isDefined(fn) && !isFunction(fn)) { throw Error('`compareWith` must be a function.'); }\n this._compareWith = fn;\n }\n\n // custom templates\n @Input() optionTemplate: TemplateRef;\n @Input() optgroupTemplate: TemplateRef;\n @Input() toolbarTemplate: TemplateRef;\n @Input() footerTemplate: TemplateRef;\n @Input() customItemTemplate: TemplateRef;\n\n /** Fires when option are being moved via an enter keypress. */\n @Output() triggerMove = new EventEmitter();\n /** Fires when search is triggered on the pane. */\n @Output() search = new EventEmitter<{ term: string, items: unknown[] }>();\n /** Fires when pane is scrolled. */\n @Output() scroll = new EventEmitter<{ start: number; end: number }>();\n /** Fires when pane has been scrolled to the bottom. */\n @Output() scrollToEnd = new EventEmitter();\n\n @ViewChild(forwardRef(() => PickPaneListComponent)) dropdownPanel: PickPaneListComponent;\n @ViewChild('searchInput', { static: true }) searchInput: ElementRef;\n\n /** Object that manages the state of the list. */\n itemsList: ItemsList;\n /** items displayed in the viewport. important for virtual scrolling */\n viewPortItems: PickOption[] = [];\n /** what this pane is being filtered by */\n searchTerm: string;\n /** unique identifier used as the HTML id on the list element */\n paneId = newId();\n element: HTMLElement;\n /** true if an item is being dragged from this pane */\n _isDragging = false;\n /** true if the pane has an item being dragged over it from another pane */\n _willAcceptDrop = false;\n /** true if the item list has focus.\n * using this property and adding a css class works more smoothly than relying on :focus psuedo selector */\n _paneHasFocus = false;\n public get disabled(): boolean { return this.readonly || this._disabled; }\n public get externalOptionCountStr(): string | null {\n return Number.isFinite(this.externalTotalOptionCount) ? this.externalTotalOptionCount.toLocaleString() : null; }\n public get _companionPane(): PickPaneComponent {\n return this._isLeftPane ? this.picklistService.selectedPane : this.picklistService.availablePane; }\n\n @HostBinding('class.hc-pick-pane') useDefaultClass = true;\n\n private _items = new Array();\n private _disabled: boolean;\n private _defaultLabel = 'label';\n private _primitive;\n private _compareWith: CompareWithFn;\n private _isComposing = false;\n\n constructor(\n @Inject(SELECTION_MODEL_FACTORY) newSelectionModel: SelectionModelFactory,\n _elementRef: ElementRef,\n private picklistService: PicklistService,\n private _cd: ChangeDetectorRef,\n public dragService: PickPaneDragService\n ) {\n this.itemsList = new ItemsList(this, newSelectionModel());\n this.element = _elementRef.nativeElement;\n this.dragService.reset(this);\n }\n\n get selectedItems(): PickOption[] { return this.itemsList.selectedItems; }\n get selectedValues(): unknown { return this.selectedItems.map(x => x.value); }\n get hasSelectedItems(): boolean { return this.selectedItems.length > 0; }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.items) {\n this._setItems(changes.items.currentValue || []);\n this.picklistService.mapIncomingOptionsToSelected(this.bindValue);\n this.filter();\n this.detectChanges();\n }\n }\n\n /** Called when a key is pressed in the search input box */\n onSearchKeydown($event: KeyboardEvent): void {\n if ($event.which === KeyCode.ArrowDown || $event.which === KeyCode.Enter) {\n $event.preventDefault();\n if (this.addCustomOptionIsMarked) {\n this.addAndSelectCustomOption();\n } else {\n this.panelFocus();\n }\n }\n }\n\n /** Called when a key is pressed while the list has focus */\n onPanelKeydown($event: KeyboardEvent): void {\n switch ($event.which) {\n case KeyCode.ArrowDown:\n this._handlePanelArrowKeyPress($event, true);\n break;\n case KeyCode.ArrowUp:\n this._handlePanelArrowKeyPress($event, false);\n break;\n case KeyCode.Enter:\n if (this.addCustomOptionIsMarked) {\n this.addAndSelectCustomOption();\n } else {\n this.triggerMove.emit();\n }\n break;\n case KeyCode.Esc:\n this.itemsList.resetListSelectionState();\n this.panelBlur();\n break;\n }\n }\n\n /** Place focus on the list pane */\n panelFocus(): void {\n this.dropdownPanel._panel.focus();\n if (!this.hasSelectedItems) {\n this._jumpFocusToFirstItem();\n }\n }\n\n /** Remove focus from the list pane */\n panelBlur(): void {\n this.dropdownPanel._panel.blur();\n }\n\n /** Focus on the first item in the list, scrolling as needed */\n private _jumpFocusToFirstItem() {\n if (this.itemsList.filteredItems.length === 0) { return; }\n this.itemsList.resetListSelectionState();\n this._selectAndScrollToItem(this.itemsList.markedItem);\n }\n\n /** Moves focus, or moves or expands the highlighted options in the list */\n private _handlePanelArrowKeyPress($event: KeyboardEvent, isDown: boolean) {\n if (this._nextItemIsCustomItem(isDown)) {\n this.itemsList.unmark();\n this.itemsList.clearSelected();\n this._scrollToCustomItem();\n } else {\n this.itemsList.markNextItem(isDown);\n if (!$event.shiftKey && !$event.ctrlKey) { this.itemsList.clearSelected(); }\n const nextItem = this.itemsList.markedItem;\n this._selectAndScrollToItem(nextItem);\n }\n $event.preventDefault();\n }\n\n /** Selects a given item, scrolling to keep it in the viewport as needed */\n private _selectAndScrollToItem(item: PickOption) {\n if (!item) { return; }\n this.itemsList.select(item);\n this._scrollToMarked();\n }\n\n /** Remove highlight from all items in the list */\n deselectAll(): void {\n this.itemsList.resetListSelectionState();\n this._cd.detectChanges();\n }\n\n /** Highlight all items in the list */\n selectAll(): void {\n this.itemsList.selectAll();\n this._cd.detectChanges();\n }\n\n /**\n * Shift + click selects a range\n * Ctrl + click adds to current selection\n * Regular click clears current selection and selects anew\n */\n onItemClick($event: MouseEvent, item: PickOption): void {\n if (!item) { return; }\n const lastMarkedIndex = this.itemsList.markedIndex;\n if (!$event.ctrlKey) { this.itemsList.clearSelected(); }\n if (!$event.shiftKey) { this.itemsList.markItem(item); }\n\n if ($event.shiftKey) {\n const indexOfItemClicked = this.itemsList.filteredItems.findIndex(i => i === item);\n const start = Math.min(lastMarkedIndex, indexOfItemClicked);\n const end = Math.max(lastMarkedIndex, indexOfItemClicked);\n for (let i = start; i <= end; i++) {\n // don't shift + click select a group, as it will select all its children, and that's not likely what is wanted\n if (this.itemsList.filteredItems[i].isParent) { continue; }\n this.select(this.itemsList.filteredItems[i]);\n }\n } else {\n if ($event.ctrlKey && item.selected) {\n this.unselect(item);\n } else {\n this.select(item);\n }\n }\n\n this._cd.detectChanges();\n }\n\n /** Selects items as needed, and moves options to the companion pane */\n onItemDoubledClicked($event: MouseEvent, item: PickOption): void {\n if (!$event.shiftKey) { this.itemsList.clearSelected(); }\n this.select(item);\n this.triggerMove.emit();\n }\n\n /** If not already selected, selects a given item if that option or the entire pane are not disabled */\n select(item: PickOption): void {\n if (!item || item.disabled || this.disabled || item.selected) { return; }\n this.itemsList.select(item);\n }\n\n /** If not already unselected, unselects a given item if that option or the entire pane are not disabled */\n unselect(item: PickOption): void {\n if (!item || item.disabled || this.disabled || !item.selected) { return; }\n this.itemsList.unselect(item);\n }\n\n /** Place focus in the searchbar, or the list if searchbar is not available */\n focus(): void {\n if (this.hasSearch) {\n this.searchInput.nativeElement.focus();\n } else {\n this.panelFocus();\n }\n }\n\n /** Remove focus from searchbar and list */\n blur(): void {\n this.searchInput.nativeElement.blur();\n this.panelBlur();\n }\n\n /** Create as custom item from a search term that didn't match available options from either pane */\n addAndSelectCustomOption(): void {\n let customItem: unknown;\n const hasAddCustomItemFunc = isFunction(this.addCustomItem);\n if (hasAddCustomItemFunc) {\n customItem = (this.addCustomItem)(this.searchTerm);\n } else if (!hasAddCustomItemFunc && this.bindValue && this.bindValue !== this.bindLabel) {\n throw new Error(`Attempting to add a custom option, but because the [bindValue] & [bindLabel] Input() params don't match,\n you'll need to also supply a function to the [addCustomItem] Input() to create an appropriate value for the new option.\n This function should return an object that matches the shape of the options passed into the [items] array.`);\n } else {\n customItem = this._primitive ? this.searchTerm : { [this.bindLabel]: this.searchTerm };\n }\n\n if (isPromise(customItem)) {\n (customItem as Promise).then(i => this._selectNewCustomOption(i)).catch((e) => { console.error(e); });\n } else if (customItem) {\n this._selectNewCustomOption(customItem);\n }\n }\n\n /** Convert the given custom item into an HcOption, add it to the list, and then highlight it */\n _selectNewCustomOption(customItem: unknown): void {\n const newOption = this.itemsList.addNewOption(customItem);\n this.itemsList.resetFilteredItemsForCustomOptionAdded(this._isUsingSearchSubject, this.searchTerm);\n this.itemsList.markItem(newOption);\n this._selectAndScrollToItem(newOption);\n }\n\n /** Used in the ngFor of the list to maximize DOM reusage */\n trackByOption = (_: number, item: PickOption): PickOption => {\n if (this.trackByFn) { return this.trackByFn(_, item.value as PickOption); }\n return item;\n };\n\n /** If true, the \"add custom\" option should be displayed */\n get showAddCustomOption(): boolean | AddCustomItemFn | undefined {\n if (!this._validTerm) { return false; }\n const term = this.searchTerm.toLowerCase().trim();\n return this.addCustomItem &&\n !this.itemsList.items.some(x => x.label?.toLowerCase() === term) &&\n !this._companionPane.itemsList.items.some(x => x.label?.toLowerCase() === term) &&\n !this.loading;\n }\n\n /** If true, the \"add custom\" option currently has focus */\n get addCustomOptionIsMarked(): boolean | undefined {\n return this.showAddCustomOption && !this.itemsList.markedItem;\n }\n\n /** If true, the empty pane message should be displayed */\n get showNoItemsFound(): boolean | string {\n const empty = this.itemsList.filteredItems.length === 0;\n return ((empty && !this._isUsingSearchSubject && !this.loading) ||\n (empty && this._isUsingSearchSubject && this._validTerm && !this.loading)) &&\n !this.showAddCustomOption;\n }\n\n /** Called when user begins typing in the searchbox */\n _onCompositionStart(): void {\n this._isComposing = true;\n }\n\n /** Called when user finsihes typing in the searchbox */\n _onCompositionEnd(term: string): void {\n this._isComposing = false;\n if (this.searchWhileComposing) { return; }\n this.filter(term);\n }\n\n /** Search the items in the list */\n filter(term: string = this.searchTerm): void {\n if (this._isComposing && !this.searchWhileComposing) { return; }\n\n if (this._isUsingSearchSubject && !term || this.searchTerm === term) { this.itemsList.resetFilteredItems(); }\n if (this._isUsingSearchSubject && (this._validTerm || this.externalSearchTermMinLength === 0)) {\n this.externalSearchSubject.next(term);\n this.itemsList.updateCounts();\n }\n\n this.searchTerm = term;\n if (!this._isUsingSearchSubject) {\n this.itemsList.filter(this.searchTerm);\n }\n this.itemsList.markSelectedOrDefault();\n this.search.emit({ term, items: this.itemsList.filteredItems.map(x => x.value) });\n }\n\n /** Force change detection to refresh the UI */\n detectChanges(): void {\n if (!(this._cd)['destroyed']) {\n this._cd.detectChanges();\n }\n }\n\n /** Refreshes the dimensions of the virtual scroll container and the items displayed within */\n refreshScrollArea(): void {\n this.dropdownPanel.refreshListLayout(true);\n }\n\n /** Creates HcOptions according to the configured options, sets them on this list, and selects the first option. */\n _setItems(items: unknown[]): void {\n const firstItem = items[0];\n this.bindLabel = this.bindLabel || this._defaultLabel;\n this._primitive = isDefined(firstItem) ? !isObject(firstItem) : this._primitive || this.bindLabel === this._defaultLabel;\n this.itemsList.setItems(items);\n if (isDefined(this.searchTerm) && !this._isUsingSearchSubject) {\n this.itemsList.filter(this.searchTerm);\n }\n\n this.itemsList.markSelectedOrDefault();\n }\n\n /** Clear out search term if any and refresh the list */\n clearSearch(): void {\n if (!this.searchTerm) { return; }\n this._changeSearch(\"\");\n this.itemsList.resetFilteredItems();\n }\n\n /** Update search term and notify external search as needed */\n private _changeSearch(searchTerm: string) {\n this.searchTerm = searchTerm;\n if (this._isUsingSearchSubject) {\n this.externalSearchSubject.next(searchTerm);\n }\n }\n\n /** Scroll the list to he currently \"focused\" item. */\n private _scrollToMarked() {\n this.dropdownPanel.scrollTo(this.itemsList.markedItem);\n }\n\n /** Scroll the list to the option a user can select to create a custom option */\n private _scrollToCustomItem() {\n this.dropdownPanel.scrollToCustomOption();\n }\n\n /** Returns true if the next item that would be highlighted is the \"add custom\" option */\n private _nextItemIsCustomItem(nextStepIsDown: boolean): boolean {\n const nextStep = nextStepIsDown ? 1 : -1;\n const nextIndex = this.itemsList.markedIndex + nextStep;\n return !!this.addCustomItem && !!this.searchTerm\n && this.itemsList.markedItem\n && (nextIndex < 0 || nextIndex === this.itemsList.filteredItems.length);\n }\n\n /** Returns true if external search is being used */\n private get _isUsingSearchSubject() {\n return this.externalSearchSubject && this.externalSearchSubject.observers.length > 0;\n }\n\n /** Returns true if the search term is long enough to be considered valid */\n private get _validTerm() {\n const term = this.searchTerm && this.searchTerm.trim();\n return term && term.length >= this.externalSearchTermMinLength;\n }\n}\n","
\n \n \n @if (searchTerm?.length > 0) {\n \n }\n \n \n
\n\n@if (hasToolbar) {\n
\n \n
\n @if (!loading) { Showing {{ itemsList.itemsShownCountStr }} of {{ externalOptionCountStr || itemsList.itemsTotalCountStr }}\n } @if (loading) { Loading... }\n
\n @if (!disabled) {\n
\n \n Select All\n \n \n Select None\n \n
\n }\n \n \n
\n}\n\n\n @if (!loading) { @for (item of viewPortItems; track trackByOption($index, item); let first = $first) {\n \n \n \n \n \n
\n @if (canCloseGroup) {\n \n }\n \n
\n \n \n \n } @if (showAddCustomOption) {\n \n \n \n {{ addCustomItemText }}\n \"{{ searchTerm }}\"\n \n \n \n \n } } @if (!loading && showNoItemsFound) {\n
\n {{ notFoundText }}\n
\n } @if (loading) {\n \n }\n\n\n@if (hasFooter) {\n
\n \n {{ itemsList.selectedItems.length?.toLocaleString() || 0 }} selected\n \n \n
\n}\n","/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n Component,\n OnDestroy,\n AfterViewInit,\n forwardRef,\n ChangeDetectorRef,\n Input,\n Output,\n EventEmitter,\n ContentChild,\n TemplateRef,\n ViewEncapsulation,\n HostBinding,\n ViewChild,\n ElementRef,\n ChangeDetectionStrategy,\n ContentChildren,\n QueryList,\n Attribute\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { takeUntil, startWith } from 'rxjs/operators';\nimport { Subject, merge } from 'rxjs';\n\nimport {\n PickOptionTemplateDirective,\n PickPaneToolbarTemplateDirective,\n PickPaneFooterTemplateDirective,\n PickOptgroupTemplateDirective,\n PickCustomItemTemplateDirective,\n PickPaneHeaderRightTemplateDirective,\n PickPaneHeaderLeftTemplateDirective\n} from './pick-templates.directive';\nimport { isDefined, isFunction, isObject } from '../util';\nimport { PickOptionComponent, PickOptionStateChange } from './pick-option.component';\nimport { PickPaneComponent } from './pane/pick-pane.component';\nimport { PicklistService } from './picklist.service';\nimport { SortFn, GroupValueFn, CompareWithFn, AddCustomItemFn, SearchFn, GroupByFn } from './pick.types';\n\n/** Control for selecting multiple items from a very large set of options. `` */\n@Component({\n selector: 'hc-picklist',\n templateUrl: './picklist.component.html',\n styleUrls: ['./picklist.component.scss'],\n providers: [{\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PicklistComponent),\n multi: true\n }, PicklistService],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class PicklistComponent implements OnDestroy, AfterViewInit, ControlValueAccessor {\n /** If options are objects, this matches the object property to use for display in the list.\n * Can use nested properties. Example: `'property.nestedProperty'`. *Defaults to `'label'`.* */\n @Input() bindLabel: string;\n /** If options are objects, this matches the object property to use for the selected model.\n * Can use nested properties. Example: `'property.nestedProperty'`. *By default, binds to whole object.* */\n @Input() bindValue: string;\n /** When addCustomItem is true, this changes the default message for adding a new item. *Defaults to `\"Add custom option.\"`* */\n @Input() addCustomItemText = 'Add custom option.';\n /** True if user should be able to add custom items. The button to add an option will appear when a search term is not exactly\n * matched. Can optionally provide a function that will generate a value for the custom option based on the given search term.\n * *Defaults to false.* If a function is provided, must follow this signature: `((term: string) => any | Promise)`. The\n * function is passed the search term string and returns a value that should match the type of options in the picklist. */\n @Input() addCustomItem: boolean | AddCustomItemFn = false;\n /** Group items by property or function expression. If a function is provided, must follow this signature: `((item: any) => any)`. The\n * function is passed an option and returns a value to represent the identifier for the group that option should belong to.\n * *Grouping is off by default.* */\n @Input() groupBy: string | GroupByFn;\n /** Function expression to provide group value: `(key: string | object, children: any[]) => string | object`. Same as\n * described in ng-select component. https://ng-select.github.io/ng-select#/grouping */\n @Input() groupValue: GroupValueFn;\n /** True if group should be clickable. Clicking the group will select all its children. *Defaults to false.* */\n @Input() canSelectGroup = false;\n /** True if group can be closed to hide its child options. *Defaults to false.* */\n @Input() canCloseGroup = false;\n /** True if groups should be closed to begin with. Must have `canCloseGroup` set to true to use. *Defaults to true.* */\n @Input() closeGroupsByDefault = true;\n /** Items that cannot be grouped are placed in an orphan group.\n * This property sets a name for that group. *Defaults to `\"Other Items\"`* */\n @Input() orphanItemsGroupName = 'Other Items';\n /** True to enable virtual scroll for better performance when rendering a lot of data. *Defaults to false.* */\n @Input() virtualScroll = false;\n /** When using virtual scroll, determines how many extra items on top and bottom should be rendered outside the viewport.\n * *Defaults to 4.* */\n @Input() bufferAmount = 4;\n /** Provide custom trackBy function for better DOM reusage by Angular's *ngFor in the items list. */\n @Input() trackByFn = null;\n /** Function used to sort the groups and items in the list: `(a: PickOption, b: PickOption) => number`. If the function\n * result is negative, a is sorted before b. If it's positive, b is sorted before a. If the result is 0, no changes are\n * done with the sort order of the two values. *By default, options are not sorted.* */\n @Input() sortFn: SortFn;\n /** If true, items can be viewed but not highlighted or moved from pane to pane. Same as adding `disabled` attribute.\n * *Defaults to false.* */\n @Input() readonly = false;\n /** True if search bar should be present. *Defaults to true.* */\n @Input() hasSearch = true;\n /** Placeholder for the search input. *Defaults to 'Search'.* */\n @Input() searchPlaceholder = 'Search';\n /** A custom search function: `(term: string, item: any) => boolean`. *Default function does a simple scan for entire\n * given term within the options label.* */\n @Input() searchFn: SearchFn;\n /** True if items should be filtered while user is still typing. *Defaults to true.* */\n @Input() searchWhileComposing = true;\n /** Number of characters required for search to be fired. Only applies when using `externalSearchSubject`.\n * *Defaults to 0.* */\n @Input() externalSearchTermMinLength = 0;\n /** A subject through which an updated search term will be sent. Use for advanced searching functionality,\n * like searching over http. */\n @Input() externalSearchSubject: Subject;\n /** For the left pane, force the 'Showing x of y' message to be the given number. Useful when using external search\n * and you want to display the total number of items available on the server rather than just those currently\n * available in the component. */\n @Input() externalTotalOptionCount: number;\n /** Message shown in each pane when empty. *Defaults to 'No options to show.'* */\n @Input() notFoundText = 'No options to show.';\n /** Text for left pane header. Ignored if `hcPaneHeaderLeftTmp` is used. *Defaults to 'Available'.* */\n @Input() leftHeaderText = 'Available';\n /** Text for right pane header. Ignored if `hcPaneHeaderRightTmp` is used. *Defaults to 'Selected'.* */\n @Input() rightHeaderText = 'Selected';\n /** True when left pane should show as loading. *Defaults to false.* */\n @Input() leftPaneLoading = false;\n /** True when right pane should show as loading. *Defaults to false.* */\n @Input() rightPaneLoading = false;\n /** True if each pane should have a header. *Defaults to true.* */\n @Input() hasHeader = true;\n /** True if each pane should have a toolbar section. *Defaults to true.* */\n @Input() hasToolbar = true;\n /** True if each pane should have a footer section. *Defaults to true.* */\n @Input() hasFooter = true;\n /** Set a limit to the number of selected items.\n * Note: This will not prevent more than limit from being added to the model outside the component.\n * *No limit by default.* */\n @Input() maxSelectedItems: number;\n /** Total height of the picklist control. Should be passed as a string, including the\n * unit (pixels, percentage, rem, etc). *Defaults to '400px'.* */\n @Input() height = '400px';\n\n /** An array of options for the picklist. Options can be of any type, and the array can be an observable stream.\n * Can alternatively use `` components to pass in options. */\n @Input() get items(): unknown[] { return this._items; }\n set items(value: unknown[]) {\n this._itemsAreUsed = true;\n this._items = value;\n }\n /** A function to compare the option values with the selected values. `(a: any, b: any) => boolean;`\n * The first argument is a value from an option. The second is a value from the selection (model).\n * A boolean should be returned.\n * Same as used by https://angular.io/api/forms/SelectControlValueAccessor */\n @Input() get compareWith(): CompareWithFn { return this._compareWith; }\n set compareWith(fn: CompareWithFn) {\n if (!isFunction(fn)) {\n throw Error('`compareWith` must be a function.');\n }\n this._compareWith = fn;\n }\n\n /** Fires when model is updated. Sends an array of the currently selected values. */\n @Output() change = new EventEmitter|undefined>>();\n /** Fires when options are added. Sends an array of the values being added. */\n @Output() add = new EventEmitter|undefined>>();\n /** Fires when options are removed. Sends an array of the values being removed. */\n @Output() remove = new EventEmitter|undefined>>();\n\n // custom templates\n @ContentChild(PickOptionTemplateDirective, { read: TemplateRef }) _optionTemplate: TemplateRef;\n @ContentChild(PickOptgroupTemplateDirective, { read: TemplateRef }) _optgroupTemplate: TemplateRef;\n @ContentChild(PickPaneToolbarTemplateDirective, { read: TemplateRef }) _toolbarTemplate: TemplateRef;\n @ContentChild(PickPaneFooterTemplateDirective, { read: TemplateRef }) _footerTemplate: TemplateRef;\n @ContentChild(PickCustomItemTemplateDirective, { read: TemplateRef }) _customItemTemplate: TemplateRef;\n @ContentChild(PickPaneHeaderRightTemplateDirective, { read: TemplateRef }) _paneHeaderRightTemplate: TemplateRef;\n @ContentChild(PickPaneHeaderLeftTemplateDirective, { read: TemplateRef }) _paneHeaderLeftTemplate: TemplateRef;\n\n /** A template-based/declarative way to pass options available in the picklist. */\n @ContentChildren(PickOptionComponent, { descendants: true }) _ngOptions: QueryList;\n\n @ViewChild('available', { static: true }) _availablePane: PickPaneComponent;\n @ViewChild('selected', { static: true }) _selectedPane: PickPaneComponent;\n /** Getter. Returns true if readonly property is true, or if disabled attribute is present on the control. */\n @HostBinding('class.hc-picklist-disabled') get disabled(): boolean { return this.readonly || this._disabled; }\n\n /** whether or not we should escape HTML in default option templates. will be set to false if\n * using instead of passing in an items array */\n _escapeHTML = true;\n _el: HTMLElement;\n private _items = new Array();\n private _itemsAreUsed: boolean;\n private _defaultLabel = 'label';\n private _disabled: boolean;\n private readonly _destroy$ = new Subject();\n private _compareWith: CompareWithFn;\n private _onChange = (_: unknown) => _;\n private _onTouched = () => null;\n\n constructor(\n _elementRef: ElementRef,\n private picklistService: PicklistService,\n private _cd: ChangeDetectorRef,\n @Attribute('autofocus') private autoFocus: any) {\n this._el = _elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n this.picklistService.reset(this._availablePane, this._selectedPane);\n if (!this._itemsAreUsed) { this._setItemsFromHcPickOptions(); this._escapeHTML = false; }\n if (isDefined(this.autoFocus)) { this._availablePane.focus(); }\n this._detectChanges();\n }\n\n ngOnDestroy(): void {\n this._destroy$.next();\n this._destroy$.complete();\n }\n\n writeValue(value: unknown | unknown[]): void {\n this._selectedPane.itemsList.clearList();\n this._handleWriteValue(value);\n this._cd.markForCheck();\n }\n\n registerOnChange(fn: () => null): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => null): void {\n this._onTouched = fn;\n }\n\n setDisabledState(state: boolean): void {\n this._disabled = state;\n this._cd.markForCheck();\n }\n\n /** Getter. Returns true if any items are selected. */\n get hasValue(): boolean {\n return this._selectedPane.itemsList.items.length > 0;\n }\n\n /** Getter. Returns true if the number of selected items matches or exceeds the maximum number. Useful if you'd like to show a custom\n * warning label.\n */\n get hasMaxItemsSelected(): boolean {\n return Number.isFinite(this.maxSelectedItems) && this._selectedPane.itemsList.itemsTotalCount >= this.maxSelectedItems;\n }\n\n /** Getter. Returns true if the number of selected items exceeds the maximum number. UI won't normally allow this, but the model can\n * be manipulated or set outside of the component to cause this. */\n get hasExceededMaxItemsSelected(): boolean {\n return Number.isFinite(this.maxSelectedItems) && this._selectedPane.itemsList.itemsTotalCount > this.maxSelectedItems;\n }\n\n /** Getter. Returns true if the \"Available\" pane is empty. */\n get leftPaneIsEmpty(): boolean {\n return this._availablePane.itemsList.items.length === 0;\n }\n\n /** Move highlighted items from the left pane over to the right pane. */\n moveLeftToRight(): void {\n this._move(this._availablePane, this._selectedPane, true);\n }\n\n /** Move highlighted items from the right pane over to the left pane. */\n moveRightToLeft(): void {\n this._move(this._selectedPane, this._availablePane);\n }\n\n /** Move selected (highlighted) options from one pane to the other */\n _move(source: PickPaneComponent, destination: PickPaneComponent, isAdding = false): void {\n let maxLimitEnforced = false;\n let overLimitBy = 0;\n if (isAdding && this.maxSelectedItems) {\n overLimitBy = this._selectedPane.itemsList.itemsTotalCount + source.selectedItems.length - this.maxSelectedItems;\n maxLimitEnforced = overLimitBy > 0;\n }\n const optionsToMove = maxLimitEnforced ? source.selectedItems.slice(0, source.selectedItems.length - overLimitBy)\n : source.selectedItems;\n optionsToMove.filter(i => !i.disabled).slice().forEach(i => {\n source.itemsList.removeOption(i);\n destination.itemsList.addOption(i);\n });\n\n const eventToFire = isAdding ? this.add : this.remove;\n eventToFire.emit(optionsToMove.map(x => x.value));\n source.itemsList.reIndex();\n this._availablePane.itemsList.clearSelected();\n this._selectedPane.itemsList.clearSelected();\n this.refreshPanes();\n this._updateNgModel();\n this._onTouched();\n }\n\n /** Refreshes the dimensions of the virtual scroll container and the items displayed within. Helpful when using virtual scrolling and\n * the window changes such that the picklist was resized.\n */\n public refreshScrollArea(): void {\n this._availablePane.refreshScrollArea();\n this._selectedPane.refreshScrollArea();\n }\n\n /** Manually trigger change detection to update the UI. */\n _detectChanges(): void {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!(this._cd).destroyed) {\n this._cd.detectChanges();\n }\n this._availablePane.detectChanges();\n this._selectedPane.detectChanges();\n }\n\n /** Convert components into HcOptions */\n private _setItemsFromHcPickOptions() {\n const mapNgOptions = (options: QueryList) => {\n const items = options.map(option => ({\n $hcOptionValue: option.value,\n $hcOptionLabel: option.elementRef.nativeElement.innerHTML,\n disabled: option.disabled\n }));\n this._availablePane.itemsList.setItems(items);\n if (this.hasValue) {\n this.picklistService.mapIncomingOptionsToSelected(this.bindValue);\n }\n };\n\n const handleOptionChange = () => {\n const changedOrDestroyed = merge(this._ngOptions.changes, this._destroy$);\n merge(...this._ngOptions.map(option => option._stateChange$))\n .pipe(takeUntil(changedOrDestroyed))\n .subscribe((option: PickOptionStateChange) => {\n const item = this._availablePane.itemsList.findOption(option.value);\n if (item) {\n item.disabled = option.disabled;\n item.label = option.label || item.label;\n }\n this._detectChanges();\n });\n };\n\n this._ngOptions.changes\n .pipe(startWith(this._ngOptions), takeUntil(this._destroy$))\n .subscribe(options => {\n this.bindLabel = this._defaultLabel;\n mapNgOptions(options);\n handleOptionChange();\n this._detectChanges();\n });\n }\n\n /** Apply value passed in from ngModel as the current selection in the component */\n private _handleWriteValue(ngModel: unknown[] | unknown) {\n if (!this._isValidWriteValue(ngModel)) { return; }\n\n const select = (val: unknown) => {\n const alreadySelected = this._selectedPane.itemsList.findOption(val);\n if (alreadySelected) { return; }\n\n const availableItem = this._availablePane.itemsList.findOption(val);\n if (availableItem) {\n this._availablePane.itemsList.removeOption(availableItem);\n this._selectedPane.itemsList.addOption(availableItem);\n this._availablePane.itemsList.reIndex();\n } else {\n // where possible, handle cases where we're adding something to the model that's not an existing option\n if (this.bindValue) { throw new Error(`Attempting to set a value (${val}) in the model that does not exist in the available options.\n This is not allowed when the [bindValue] Input() is used. You'll need to add the option to the [items] Input().`); }\n this._selectedPane.itemsList.addNewOption(val);\n }\n };\n\n (ngModel as [])?.forEach(item => select(item));\n this.refreshPanes();\n }\n\n /** Rerun filters and grouping logic in each pane, than force UI refresh. */\n private refreshPanes() {\n this._availablePane.filter();\n this._selectedPane.filter();\n this._detectChanges();\n }\n\n private _isValidWriteValue(value: unknown): boolean {\n if (!isDefined(value) || value === '') {\n return false;\n }\n\n if (!Array.isArray(value)) {\n console.warn('ngModel should be array.');\n return false;\n }\n return value.every(item => this.validateBinding(item));\n }\n\n private validateBinding = (item: unknown): boolean => {\n if (!isDefined(this.compareWith) && isObject(item) && this.bindValue) {\n const msg = `Setting object(${JSON.stringify(item)}) as your model with bindValue is not allowed unless [compareWith] is used.`;\n console.warn(msg);\n return false;\n }\n return true;\n };\n\n private _updateNgModel() {\n const model = new Array();\n const selectedItems = this._selectedPane.itemsList.items.filter(i => !i.children);\n selectedItems.forEach(i => {\n const value = this.bindValue ? this._selectedPane.itemsList.resolveNested(i.value, this.bindValue) : i.value;\n model.push(value);\n });\n\n const selected = selectedItems.map(x => x.value);\n this._onChange(model);\n this.change.emit(selected);\n this._cd.markForCheck();\n }\n}\n","
\n
\n @if (hasHeader) {\n
\n \n

{{ leftHeaderText }}

\n \n \n
\n }\n\n \n
\n\n
\n \n \n \n \n \n \n
\n\n
\n @if (hasHeader) {\n
\n \n

\n {{ rightHeaderText }}\n @if (maxSelectedItems) {\n \n *Select up to {{ maxSelectedItems }} options.@if (hasExceededMaxItemsSelected) { Limit exceeded. }\n \n }\n

\n \n \n
\n }\n \n
\n
\n","import { PickOption } from '../pick.types';\n\nexport type SelectionModelFactory = () => PickSelectionModel;\n\nexport function DefaultSelectionModelFactory(): DefaultSelectionModel {\n return new DefaultSelectionModel();\n}\n\n/** @docs-private */\nexport interface PickSelectionModel {\n value: PickOption[];\n select(item: PickOption);\n unselect(item: PickOption);\n clear(keepDisabled: boolean);\n selectAll(items: Array, canSelectGroup: boolean);\n}\n\n/** @docs-private */\nexport class DefaultSelectionModel implements PickSelectionModel {\n private _selected: PickOption[] = [];\n\n get value(): PickOption[] { return this._selected; }\n\n select(item: PickOption): void {\n item.selected = true;\n if (!item.isParent) {\n this._selected.push(item);\n }\n if (item.isChild && item.parent) {\n item.parent.selected = item.parent.children?.every(x => x.selected);\n } else if (item.isParent && item.children) {\n this._setChildrenSelectedState(item.children, true);\n this._removeChildren(item);\n this._selected = [...this._selected, ...item.children.filter(x => !x.disabled)];\n }\n }\n\n unselect(item: PickOption): void {\n this._selected = this._selected.filter(x => x !== item);\n item.selected = false;\n if (item.isChild && item?.parent?.selected) {\n const children = item.parent.children || [];\n this._removeParent(item.parent);\n this._removeChildren(item.parent);\n this._selected.push(...children.filter(x => x !== item && !x.disabled));\n item.parent.selected = false;\n } else if (item.isParent) {\n this._setChildrenSelectedState(item.children || [], false);\n this._removeChildren(item);\n }\n }\n\n clear(keepDisabled: boolean): void {\n this._selected = keepDisabled ? this._selected.filter(x => x.disabled) : [];\n }\n\n selectAll(items: Array, canSelectGroup: boolean): void {\n this._selected = items.filter(i => !i.disabled && !i.children);\n items.filter(i => !i.disabled && (canSelectGroup || !i.children)).forEach(i => i.selected = true);\n }\n\n private _setChildrenSelectedState(children: PickOption[], selected: boolean) {\n for (const child of children) {\n if (child.disabled) {\n continue;\n }\n child.selected = selected;\n }\n }\n\n private _removeChildren(parent: PickOption) {\n this._selected = [\n ...this._selected.filter(x => x.parent !== parent),\n ...parent.children?.filter(x => x.parent === parent && x.disabled && x.selected) || []\n ];\n }\n\n private _removeParent(parent: PickOption) {\n this._selected = this._selected.filter(x => x !== parent);\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { PicklistComponent } from './picklist.component';\nimport { PickOptionComponent } from './pick-option.component';\nimport { PickPaneComponent } from './pane/pick-pane.component';\nimport { SELECTION_MODEL_FACTORY } from './pick.types';\nimport {\n PickPaneFooterTemplateDirective,\n PickPaneToolbarTemplateDirective,\n PickOptgroupTemplateDirective,\n PickOptionTemplateDirective,\n PickPaneHeaderLeftTemplateDirective,\n PickPaneHeaderRightTemplateDirective,\n PickCustomItemTemplateDirective,\n PickItemLabelDirective\n} from './pick-templates.directive';\nimport { DefaultSelectionModelFactory } from './pane/selection-model';\nimport { PickPaneListComponent } from './pane/pick-pane-list.component';\nimport {ButtonModule} from '../button/button.module';\nimport {InputModule} from '../input/input.module';\nimport {FormFieldModule} from '../form-field/hc-form-field.module';\nimport {ProgressIndicatorsModule} from '../progress-indicators/progress-indicators.module';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n declarations: [\n PickPaneComponent,\n PicklistComponent,\n PickOptionComponent,\n PickOptgroupTemplateDirective,\n PickOptionTemplateDirective,\n PickPaneHeaderLeftTemplateDirective,\n PickPaneHeaderRightTemplateDirective,\n PickPaneToolbarTemplateDirective,\n PickPaneFooterTemplateDirective,\n PickCustomItemTemplateDirective,\n PickPaneListComponent,\n PickItemLabelDirective\n ],\n imports: [\n CommonModule,\n FormsModule,\n ButtonModule,\n InputModule,\n FormFieldModule,\n ProgressIndicatorsModule\n ],\n exports: [\n PickPaneComponent,\n PicklistComponent,\n PickOptionComponent,\n PickOptgroupTemplateDirective,\n PickOptionTemplateDirective,\n PickPaneHeaderLeftTemplateDirective,\n PickPaneHeaderRightTemplateDirective,\n PickPaneToolbarTemplateDirective,\n PickPaneFooterTemplateDirective,\n PickCustomItemTemplateDirective,\n PickPaneListComponent,\n PickItemLabelDirective\n ],\n providers: [\n { provide: SELECTION_MODEL_FACTORY, useValue: DefaultSelectionModelFactory }\n ]\n})\nexport class PicklistModule {}\n","import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core';\nimport { ActiveModal } from '../modal/active-modal';\nimport { ReleaseNotesModalData } from './release-notes.model';\n\n@Component({\n selector: 'hc-release-notes-modal',\n templateUrl: './release-notes-modal.component.html',\n styleUrls: ['./release-notes-modal.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class ReleaseNotesModalComponent implements OnInit {\n public _data: ReleaseNotesModalData;\n constructor(private activeModal: ActiveModal) {}\n\n\n _onReleaseOpened(releaseIndex: number, modalBody: ElementRef, accordion: ElementRef): void {\n this._data.releaseNotes.forEach((rn, index) => {\n rn.isOpen = index === releaseIndex;\n });\n // scroll open accordion to the top of the modal body\n setTimeout(() => {\n const top = accordion.nativeElement.offsetTop - modalBody.nativeElement.offsetTop;\n modalBody.nativeElement.scroll({ top: top, behavior: 'smooth' });\n }, 500);\n }\n\n ngOnInit(): void {\n this._data = this.activeModal.data;\n }\n\n /** Close the modal */\n close(): void {\n this.activeModal.close(true);\n }\n}\n","\n \n

\n \n What's New {{ _data.appName ? 'in ' + _data.appName : '' }}\n

\n @if (_data.headerLinkUrl) {\n \n {{ _data.headerLinkText }}\n \n \n }\n \n \n @for (release of _data.releaseNotes; track release; let index = $index) {\n \n \n
\n {{ release.version }} Release\n {{ release.releaseDateStr }}\n
\n \n
\n \n }\n \n \n @if (_data.showNotice) {\n To view these changes again, click “What’s New” in the help menu\n }\n \n \n\n","export interface IReleaseNotesModalData {\n appName: string;\n headerLinkText?: string;\n headerLinkUrl?: string;\n releaseNotes: IReleaseNote[];\n showNotice?: boolean;\n}\n\nexport interface IReleaseNote {\n version: string;\n notesHTML: string;\n releaseMonth?: number;\n releaseYear?: number;\n releaseDay?: number;\n}\n\n/** Configuration data passed to the Release Notes modal */\nexport class ReleaseNotesModalData implements IReleaseNotesModalData {\n /** Name of the application */\n appName: string;\n /** Text shown as a link in the header. Defaults to 'More on HC Community'. We recommend linking to the release notes page on Health Catalyst Community for your web app, but the link text and url can be configured however you would like. */\n headerLinkText?: string = 'More on HC Community';\n /** URL for link in the header. We recommend linking to the release notes page on Health Catalyst Community for your web app, but the link text and url can be configured however you would like. */\n headerLinkUrl?: string = '';\n /** Collection of release notes by version. UI will be slightly simplified if only one version is given. */\n releaseNotes: ReleaseNote[];\n /** True to show notice about where to find this window again. Some apps like to open this window automatically the first time the app is loaded after a new release. In those cases, it's helpful to show a message in the footer explaining how to find this window again later. Default is to show those message. */\n showNotice?: boolean = true;\n}\n\n/** Notes for a single release */\nexport class ReleaseNote implements IReleaseNote {\n /** True if this release note accordion should be open */\n public isOpen = false;\n /** Merges the release day, month and year into a string: \"DD MMM YYYY\" */\n public get releaseDateStr(): string { return this._releaseDateStr; }\n private _releaseDateStr: string;\n constructor(\n /** Release version. Semantic versioning recommended. */\n public version: string,\n /** Release notes for the given version.\n * **WARNING:** You are responsible to sanitize any unsafe user input. */\n public notesHTML: string,\n /** Optional. What month is the release from? [1-12] */\n public releaseMonth: number,\n /** Optional. What year is the release from? [YYYY] */\n public releaseYear: number,\n /** Optional. What day is the release from? [1-31] */\n public releaseDay: number = 0) {\n // take a number 1-12 and produce a string like 'Jan', 'Feb', etc.\n const monthStr = new Date(releaseYear, releaseMonth - 1, 1).toLocaleString('en-us', { month: 'short' });\n this._releaseDateStr = `${releaseDay ? releaseDay : ''} ${monthStr} ${releaseYear}`;\n }\n}\n","import { HcModal } from '../modal/modal';\nimport { Injectable } from '@angular/core';\nimport { ModalOptions } from '../modal/modal-options';\nimport { ModalService } from '../modal';\nimport { ReleaseNotesModalComponent } from './release-notes-modal.component';\nimport { IReleaseNotesModalData, ReleaseNote, ReleaseNotesModalData } from './release-notes.model';\n\n/** Inject this service and call `open()` to get a Cashmere-standard modal for release notes. */\n@Injectable()\nexport class ReleaseNotesService {\n constructor(private modalService: ModalService) {}\n\n /** Open the release notes modal\n * @param data Configuration data for the modal. See ReleaseNotesModalData class for details.\n * @param modalOptions Options for the modal. See ModalOptions class for details.\n * @returns A reference to the opened modal.\n */\n open(data: IReleaseNotesModalData, modalOptions?: ModalOptions): HcModal {\n const mergedModalOptions = Object.assign({ size: 'lg'}, modalOptions);\n const modalData = Object.assign(new ReleaseNotesModalData(), data);\n modalData.releaseNotes = modalData.releaseNotes.map(rn => new ReleaseNote(rn.version, rn.notesHTML, rn.releaseMonth, rn.releaseYear, rn.releaseDay));\n modalData.releaseNotes[0].isOpen = true; // open the first release notes by default\n mergedModalOptions.data = modalData;\n\n return this.modalService.open(ReleaseNotesModalComponent, mergedModalOptions);\n }\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {DragDropModule} from '@angular/cdk/drag-drop';\nimport { ButtonModule } from '../button/button.module';\nimport { ReleaseNotesService } from './release-notes.service';\nimport { ReleaseNotesModalComponent } from './release-notes-modal.component';\nimport { ModalModule } from '../modal';\nimport { AccordionModule } from '../accordion';\n\n@NgModule({\n imports: [CommonModule, DragDropModule, ButtonModule, ModalModule, AccordionModule],\n declarations: [\n ReleaseNotesModalComponent\n ],\n exports: [ReleaseNotesModalComponent],\n providers: [ReleaseNotesService]\n})\nexport class ReleaseNotesModalModule {}\n","export enum ResizablePositionOption {\n bottom = 'bottom',\n left = 'left',\n right = 'right',\n top = 'top'\n}\n\nexport type ResizablePosition = keyof typeof ResizablePositionOption;\n","export class ResizableMetadata {\n static readonly classPrefix = 'hc-resizable-handle-';\n static readonly classSelectorPrefix = 'hc-resizable-handle-selector-';\n static readonly baseClass = 'hc-resizable-handle';\n static readonly highlight = 'hc-resizable-border-highlight';\n static readonly maxHeightClass = 'hc-resizable-max-height';\n static readonly maxWidthClass = 'hc-resizable-max-width';\n static readonly regexMaxHeight = new RegExp(ResizableMetadata.maxHeightClass);\n static readonly regexMaxWidth = new RegExp(ResizableMetadata.maxWidthClass);\n}\n","import { Component, ElementRef, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';\nimport { Subscription, fromEvent } from 'rxjs';\nimport { ResizablePosition, ResizablePositionOption } from './resizable.config';\nimport { ResizableMetadata as Meta } from './resizable.meta';\nimport { parseBooleanAttribute, untilDestroyed } from '../util';\n\n/** A container that the user can resize the dimensions of */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: '[hcResizable]',\n templateUrl: './resizable.component.html',\n styleUrls: ['./resizable.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\n\nexport class ResizableComponent implements OnChanges {\n _className: string;\n _classNameSelector: string;\n\n private _mousePos: number;\n private _startSize: number;\n private _disabled = false;\n\n private _dragSubscription: Subscription;\n\n @HostBinding('class.hc-resizable-container')\n _hostClass = true;\n\n /** Removes the resizable handle from the container when set to `true` */\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: boolean | string ) {\n this._disabled = parseBooleanAttribute( value );\n }\n\n /** Determines which corner of the container the drag handle will be available on.\n * Accepts `bottom`, `left`, `right`, or `top`.*/\n @Input() position: ResizablePosition;\n\n /** The maximum value (in pixels) that the container may expand to. There is no max by default.*/\n @Input() max: number;\n\n /** The minimum value (in pixels) that the container may contract to. There is no min by default.*/\n @Input() min: number;\n\n /** Emits a `DOMRect` after a drag event is complete */\n @Output() resized = new EventEmitter();\n\n constructor(public _element: ElementRef) {}\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.disabled?.currentValue || changes.position?.currentValue) {\n this._setDefaultStyles();\n }\n if (changes.position?.currentValue) {\n this._initClassName(changes.position.currentValue);\n }\n }\n\n _dragStarted(event: MouseEvent): void {\n this._className = `${this._className} ${Meta.highlight}`;\n this._startSize = this._isVertical() ? this._element.nativeElement.getBoundingClientRect().height : this._element.nativeElement.getBoundingClientRect().width;\n this._mousePos = this._isVertical() ? event.screenY : event.screenX;\n\n event.stopPropagation();\n event.preventDefault();\n\n this._dragSubscription = fromEvent(window.document, 'mousemove')\n .pipe(untilDestroyed(this))\n .subscribe(event => this._dragMoved(event));\n this._dragSubscription.add(\n fromEvent(window.document, 'mouseup')\n .pipe(untilDestroyed(this))\n .subscribe(() => this._dragEnded())\n );\n }\n\n _dragEnded(): void {\n if (this._dragSubscription) {\n this._className = this._className.replace(Meta.highlight, '');\n this.resized.emit(this._element.nativeElement.getBoundingClientRect());\n this._dragSubscription.unsubscribe();\n }\n }\n\n _dragMoved(event: MouseEvent): void {\n if (this._isVertical()) {\n const delta = event.screenY - this._mousePos;\n this._element.nativeElement.style.height =\n this.position === ResizablePositionOption.top\n ? `${this._startSize - delta}px`\n : `${this._startSize + delta}px`;\n this._startSize = this._element.nativeElement.getBoundingClientRect().height;\n if ( this._startSize > this.max ) {\n this._element.nativeElement.style.height = this.max + 'px';\n this._startSize = this.max;\n } else if ( this._startSize < this.min ) {\n this._element.nativeElement.style.height = this.min + 'px';\n this._startSize = this.min;\n }\n this._mousePos = event.screenY;\n } else {\n const delta = event.screenX - this._mousePos;\n this._element.nativeElement.style.width =\n this.position === ResizablePositionOption.left\n ? `${this._startSize - delta}px`\n : `${this._startSize + delta}px`;\n this._startSize = this._element.nativeElement.getBoundingClientRect().width;\n if ( this._startSize > this.max ) {\n this._element.nativeElement.style.width = this.max + 'px';\n this._startSize = this.max;\n } else if ( this._startSize < this.min ) {\n this._element.nativeElement.style.width = this.min + 'px';\n this._startSize = this.min;\n }\n this._mousePos = event.screenX;\n }\n\n event.stopPropagation();\n event.preventDefault();\n }\n\n /** Resets the resizeable container to its orginal default size */\n reset(): void {\n this._element.nativeElement.style.width = '';\n this._element.nativeElement.style.height = '';\n }\n\n private _initClassName(position: ResizablePosition): void {\n this._className = `${Meta.baseClass} ${Meta.classPrefix}${position}`;\n this._classNameSelector = `${Meta.classSelectorPrefix}${position}`;\n }\n\n private _isHorizontal(): boolean {\n return this.position === ResizablePositionOption.left || this.position === ResizablePositionOption.right;\n }\n\n private _isVertical(): boolean {\n return this.position === ResizablePositionOption.bottom || this.position === ResizablePositionOption.top;\n }\n\n private _setDefaultStyles(): void {\n const classes = this._element.nativeElement.className ?? '';\n if (this._isHorizontal() && !Meta.regexMaxWidth.test(classes)) {\n this._element.nativeElement.className = `${classes} ${Meta.maxWidthClass}`;\n } else if (this._isVertical() && !Meta.regexMaxHeight.test(classes)) {\n this._element.nativeElement.className = `${classes} ${Meta.maxHeightClass}`;\n }\n }\n\n // Must be present for AOT compilation to work, even if empty\n public ngOnDestroy(): void { return; }\n}\n","@if (!disabled) {\n
\n
\n \n
\n}\n\n","import { Directive, HostBinding } from '@angular/core';\n\n/** Can be added to a sibling of a resizable element that does not need a resize handle */\n@Directive({\n selector: '[hcResizableStatic]',\n standalone: false\n})\nexport class ResizableStaticDirective {\n @HostBinding('class.hc-resizable-static')\n _hostClass = true;\n}\n","import { Directive, HostBinding, Input } from '@angular/core';\nimport { parseBooleanAttribute } from '../util';\n\n/** Can be added to the parent element containing resizable and static elements */\n@Directive({\n selector: '[hcResizableContainer]',\n standalone: false\n})\nexport class ResizableContainerDirective {\n _vertical = true;\n\n @HostBinding('class.hc-resizable-container-parent-horizontal')\n _horizontalClass = false;\n\n @HostBinding('class.hc-resizable-container-parent-vertical')\n _verticalClass = true;\n\n /** Orients the container for horizontal or vertical resizing; defaults to `true` */\n @Input()\n get vertical(): boolean {\n return this._vertical;\n }\n set vertical(value: boolean | string ) {\n this._vertical = parseBooleanAttribute( value );\n this._verticalClass = this._vertical;\n this._horizontalClass = !this._vertical;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ResizableComponent } from './resizable.component';\nimport { ResizableStaticDirective } from './resizable-static.directive';\nimport { ResizableContainerDirective } from './resizable-container.directive';\n\n@NgModule({\n imports: [CommonModule],\n exports: [ResizableComponent, ResizableStaticDirective, ResizableContainerDirective],\n declarations: [ResizableComponent, ResizableStaticDirective, ResizableContainerDirective]\n})\nexport class ResizableModule {}\n","import {Directive, HostBinding, ElementRef, Input, HostListener, Renderer2, Output, EventEmitter} from '@angular/core';\n\n/** Marks the host element as a link within an `hc-scroll-nav`. */\n@Directive({\n selector: '[hcScrollLink]',\n standalone: false\n})\nexport class ScrollNavLinkDirective {\n /** The `id` of the corresponding `hcScrollTarget` that you would like to link to. */\n @Input() public hcScrollLink: string | null;\n\n /** Emits the associated content element when a nav link is clicked */\n @Output() navClick = new EventEmitter();\n\n @HostBinding('class.hc-scroll-nav-link')\n _hostClass = true;\n\n /** The `nativeElement` of the corresponding `hcScrollTarget` that you would like to link to. */\n public nativeElement: HTMLElement;\n\n private readonly CLICKED_SUBSECTION_CLASS = 'hc-scroll-nav-clicked-subsection';\n private readonly SECTION_TAG_NAME = 'SECTION';\n\n constructor(element: ElementRef, private renderer: Renderer2) {\n if (element) {\n this.nativeElement = element.nativeElement;\n }\n }\n\n public _setDirectiveToNode(node: Node): void {\n this.nativeElement = node as HTMLElement;\n this.hcScrollLink = (node as HTMLElement).getAttribute('hcScrollLink');\n this.renderer.addClass(node, 'hc-scroll-nav-link');\n\n this.renderer.listen(node, \"click\", () => {\n if (this.hcScrollLink) {\n this.navigateToSection(this.hcScrollLink);\n }\n });\n\n this.renderer.listen(node, \"keydown.enter\", () => {\n if (this.hcScrollLink) {\n this.navigateToSection(this.hcScrollLink);\n }\n });\n }\n\n @HostListener('keydown.enter') _onEnter(): void {\n if (this.hcScrollLink) {\n this.navigateToSection(this.hcScrollLink);\n }\n }\n\n @HostListener('click') _onClick(): void {\n if (this.hcScrollLink) {\n this.navigateToSection(this.hcScrollLink);\n }\n }\n\n private navigateToSection(id: string) {\n const el = document.getElementById(id);\n \n if (!el) {\n throw new Error(`Failed to navigate. Could not find the element with the id: ${id}.`);\n } else {\n this.setSubsectionClass(el);\n\n if (!this.hasClickedSubsection(el)) {\n this.navClick.emit( el );\n }\n }\n }\n\n private setSubsectionClass(el: HTMLElement) {\n const parentElement = el.parentElement;\n\n if (parentElement && parentElement.tagName === this.SECTION_TAG_NAME) {\n el.classList.add(this.CLICKED_SUBSECTION_CLASS);\n }\n }\n\n private hasClickedSubsection(el: HTMLElement) {\n let subsectionHasBeenClicked = false;\n\n Array.from(el.children).forEach((childElement) => {\n if ((childElement.tagName === this.SECTION_TAG_NAME) && (childElement.className.includes(this.CLICKED_SUBSECTION_CLASS))) {\n subsectionHasBeenClicked = true;\n childElement.classList.remove(this.CLICKED_SUBSECTION_CLASS);\n }\n });\n\n return subsectionHasBeenClicked;\n }\n}\n","import { Component, ElementRef, ViewEncapsulation, AfterViewInit, QueryList, ContentChildren, Renderer2, ViewChild, Input, OnDestroy, Output, EventEmitter } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { some, find, map, differenceBy } from 'lodash';\nimport { ScrollNavLinkDirective } from './scroll-nav-link.directive';\nimport { CdkScrollable } from '@angular/cdk/overlay';\n\n/** Container for scroll navigation links. */\n@Component({\n selector: 'hc-scroll-nav',\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['scroll-nav.component.scss'],\n templateUrl: 'scroll-nav.component.html',\n standalone: false\n})\nexport class HcScrollNavComponent implements AfterViewInit, OnDestroy {\n /** Set to true to enable scrolling the nav link pane as the content pane scrolls */\n @Input() public scrollNavWithContent = false;\n /** Set to true to enable the component to change for dynamic content changes that might not be picked up by Angular */\n @Input() public hasDynamicContent = false;\n @Output() _scrollEvent = new EventEmitter();\n @ViewChild('scrollContainer', {read: CdkScrollable, static: false}) public _cdkScrollableElement: CdkScrollable;\n @ContentChildren(ScrollNavLinkDirective, { descendants: true }) private linkList: QueryList;\n public get _links(): Array {\n return this.linkList.toArray().map(e => e.nativeElement);\n }\n\n public isScrolling = false;\n private unsubscribe$ = new Subject();\n private previousElementPosition = 0;\n private previousList: ScrollNavLinkDirective[] = [];\n private tryRefresh = false;\n private dynamicInterval;\n\n private readonly SCROLL_LINK_ATTRIBUTE = 'hcScrollLink';\n private readonly ACTIVE_CLASS = 'hc-scroll-nav-link-active';\n private readonly INACTIVE_CLASS = 'hc-scroll-nav-link-inactive';\n private readonly ACTIVE_PARENT_SECTION_CLASS = 'hc-scroll-nav-active-parent-section-link';\n private readonly INACTIVE_PARENT_SECTION_CLASS = 'hc-scroll-nav-inactive-parent-section-link';\n private readonly SUBSECTION_CLASS = 'hc-scroll-nav-subsection-link';\n private readonly PARENT_SECTION_CLASS = 'hc-scroll-nav-parent-section-link';\n private readonly PARENT_SECTION_CONTENT_CLASS = 'hc-scroll-nav-parent-section-link-content';\n private readonly LINKS_CONTAINER_CLASS = 'hc-scroll-nav-links-container';\n private readonly UNORDERED_LIST_TAG_NAME = 'UL';\n private readonly LIST_TAG_NAME = 'LI';\n\n constructor(public _elementRef: ElementRef, private renderer: Renderer2) {}\n\n public ngOnDestroy(): void {\n if (this.dynamicInterval) {\n clearInterval(this.dynamicInterval);\n }\n this.unsubscribe$.next();\n this.unsubscribe$.complete();\n }\n\n public ngAfterViewInit(): void {\n setTimeout(() => {\n this.initializeLinks(true);\n this.previousList = this.linkList.toArray();\n }, 100);\n\n if (this.hasDynamicContent) {\n this.refreshScrollNavLinks();\n this.dynamicInterval = setInterval(() => {\n this.refreshScrollNavLinks();\n }, 300);\n }\n\n // If links are added dynamically, refresh the scrollNav\n this.linkList.changes.pipe(takeUntil(this.unsubscribe$)).subscribe((newLinkList: QueryList) => {\n if (this.previousList.length === 0) {\n this.previousList = newLinkList.toArray();\n this.initializeLinks(true);\n } else if (newLinkList.length === 0 && this.previousList.length > 0) {\n this.refreshScrollNavLinks(this.previousList);\n } else {\n this.previousList = newLinkList.toArray();\n this.initializeLinks();\n }\n });\n }\n\n /** Refresh the scroll nav links when dynamic changes have been made. updateScrollLinkArray parameter is optional */\n public refreshScrollNavLinks(updateScrollLinkArray: ScrollNavLinkDirective[] = []): void {\n if (updateScrollLinkArray.length > 0) {\n this.linkList.reset(updateScrollLinkArray);\n this.linkList.notifyOnChanges();\n\n return;\n }\n\n const scrollLinkNodeList: NodeList = this._elementRef.nativeElement.querySelectorAll(`[${this.SCROLL_LINK_ATTRIBUTE}]`);\n\n // create array to make the difference calculation off of\n const scrollLinkList: CombinedLinkList[] = [];\n scrollLinkNodeList.forEach((dynamicLink: HTMLElement) => {\n const scrollLinkAttributeValue: string | null = dynamicLink.getAttribute(this.SCROLL_LINK_ATTRIBUTE);\n if (scrollLinkAttributeValue) {\n scrollLinkList.push({ hcScrollLink: scrollLinkAttributeValue, linkElement: dynamicLink });\n }\n });\n\n if (\n this.linkList.length !== scrollLinkList.length ||\n differenceBy(scrollLinkList, this.linkList.toArray(), 'hcScrollLink').length > 0\n ) {\n const newLinkList: ScrollNavLinkDirective[] =\n map(scrollLinkList, (dynamicLink: CombinedLinkList) => {\n let rtnLink: ScrollNavLinkDirective = {};\n\n if (some(this.linkList.toArray(), ['hcScrollLink', dynamicLink.hcScrollLink])) {\n const queryDirective: ScrollNavLinkDirective | undefined =\n find(this.linkList.toArray(), [\"hcScrollLink\", dynamicLink.hcScrollLink]);\n if (queryDirective) {\n rtnLink = queryDirective;\n }\n } else {\n const scrollNavLinkDirective: ScrollNavLinkDirective =\n new ScrollNavLinkDirective({}, this.renderer);\n scrollNavLinkDirective._setDirectiveToNode(dynamicLink.linkElement);\n rtnLink = scrollNavLinkDirective;\n }\n\n rtnLink.navClick.pipe(takeUntil(this.unsubscribe$)).subscribe( element => {\n this._scrollEvent.emit( element );\n })\n\n return rtnLink;\n }\n );\n\n this.linkList.reset(newLinkList);\n this.linkList.notifyOnChanges();\n\n return;\n }\n }\n\n public _setActiveSectionById(id: string): void {\n const link = this.linkList.find(e => e.hcScrollLink === id);\n if (!link) {\n if (!this.tryRefresh) {\n this.tryRefresh = true;\n this.refreshScrollNavLinks();\n this._setActiveSectionById(id);\n } else {\n this.tryRefresh = false;\n throw new Error(`Failed to mark active section. Could not find the element with the data target for id: ${id}.`);\n }\n } else {\n this.setActiveSection(link.nativeElement);\n }\n }\n\n private initializeLinks(isInit = false): void {\n this._links.forEach((link) => {\n this.setClassesForSubsection(link);\n });\n\n if (this.linkList?.length > 0) {\n const firstScrollLink = this.linkList.first?.hcScrollLink;\n if (!firstScrollLink) {\n throw new Error(\n `Failed to mark active section. Could not find the element with the data target for id: ${firstScrollLink}.`\n );\n }\n\n this.linkList.forEach( link => {\n link.navClick.pipe(takeUntil(this.unsubscribe$)).subscribe( element => {\n this._scrollEvent.emit( element );\n });\n });\n\n if (isInit) {\n this._setActiveSectionById(firstScrollLink);\n }\n }\n }\n\n private setActiveSection(element: HTMLElement): void {\n const focusedEl = document.activeElement;\n\n // inactivate all elements before activating the passed in element\n this._links.forEach(e => {\n // remove active styles and set inactive styles\n e.classList.remove(this.ACTIVE_CLASS);\n e.classList.add(this.INACTIVE_CLASS);\n this.handleActiveParentSections(e, false);\n\n // If a nav item on the scroll list currently has focus, remove it so a highlight border doesn't persist on scroll\n if ( focusedEl === e ) {\n e.blur();\n }\n });\n\n element.classList.remove(this.INACTIVE_CLASS);\n element.classList.add(this.ACTIVE_CLASS);\n this.handleActiveParentSections(element, true);\n\n if (this.scrollNavWithContent) {\n this.scrollToElement(element);\n }\n }\n\n private scrollToElement(element: HTMLElement): void {\n let currentElementPosition = 0;\n this._links.forEach((link, index) => {\n if (link.getAttribute(this.SCROLL_LINK_ATTRIBUTE) === element.getAttribute(this.SCROLL_LINK_ATTRIBUTE)) {\n currentElementPosition = index;\n }\n });\n\n const container: HTMLElement = this._elementRef.nativeElement.querySelector(`.${this.LINKS_CONTAINER_CLASS}`);\n const offsetTop: number = element.offsetTop;\n const elementClientHeight: number = element.clientHeight;\n const scrollHeight: number = container.scrollHeight;\n const scrollTop: number = this._cdkScrollableElement.measureScrollOffset(\"top\");\n const clientHeight: number = container.clientHeight;\n\n if (!this.isScrolling) {\n if (this.previousElementPosition < currentElementPosition) { // scroll down\n if (offsetTop > clientHeight && scrollTop <= offsetTop) {\n this._cdkScrollableElement.scrollTo({ bottom: scrollHeight - offsetTop - elementClientHeight });\n }\n } else if (this.previousElementPosition > currentElementPosition) { // scroll up\n this._cdkScrollableElement.scrollTo({ bottom: scrollHeight - offsetTop - elementClientHeight });\n }\n }\n\n this.previousElementPosition = currentElementPosition;\n }\n\n private handleActiveParentSections(element: HTMLElement, isActive: boolean): void {\n if (element.parentElement) {\n if (element.className.includes(this.PARENT_SECTION_CLASS)) {\n this.setActiveParentSection(element, isActive);\n } else {\n this.setActiveParentSection(element.parentElement, isActive);\n }\n } else if (element.className.includes(this.PARENT_SECTION_CLASS)) {\n this.setActiveParentSection(element, isActive);\n }\n }\n\n private setActiveParentSection(element: HTMLElement, isActive: boolean) {\n if (element.hasAttribute(this.SCROLL_LINK_ATTRIBUTE)) {\n if (isActive && !element.className.includes(this.ACTIVE_PARENT_SECTION_CLASS)) {\n element.classList.remove(this.INACTIVE_PARENT_SECTION_CLASS);\n element.classList.add(this.ACTIVE_PARENT_SECTION_CLASS);\n } else if (!isActive && !element.className.includes(this.INACTIVE_PARENT_SECTION_CLASS)) {\n element.classList.remove(this.ACTIVE_PARENT_SECTION_CLASS);\n element.classList.add(this.INACTIVE_PARENT_SECTION_CLASS);\n }\n }\n\n if (element.parentElement && !element.parentElement.className.includes(this.LINKS_CONTAINER_CLASS)) {\n this.setActiveParentSection(element.parentElement, isActive);\n }\n }\n\n private setClassesForSubsection(element: HTMLElement): void {\n const parentElement = element.parentElement ? element.parentElement.parentElement : undefined;\n\n if (parentElement && parentElement.tagName === this.LIST_TAG_NAME && parentElement.hasAttribute(this.SCROLL_LINK_ATTRIBUTE)) {\n element.classList.add(this.SUBSECTION_CLASS);\n\n if (!parentElement.className.includes(this.PARENT_SECTION_CLASS)) {\n parentElement.classList.add(this.PARENT_SECTION_CLASS);\n parentElement.classList.add(this.INACTIVE_PARENT_SECTION_CLASS);\n\n let parentHasContent = (parentElement.childNodes[0] && parentElement.childNodes[0].nodeValue) ? true : false;\n\n Array.from(parentElement.children).forEach((child) => {\n if (!(child.tagName === this.UNORDERED_LIST_TAG_NAME &&\n child.children[0] && child.children[0].hasAttribute(this.SCROLL_LINK_ATTRIBUTE))) {\n parentHasContent = true;\n }\n });\n\n if (parentHasContent && !parentElement.className.includes(this.PARENT_SECTION_CONTENT_CLASS)) {\n parentElement.classList.add(this.PARENT_SECTION_CONTENT_CLASS);\n } else {\n parentElement.classList.remove(this.PARENT_SECTION_CONTENT_CLASS);\n }\n }\n }\n }\n}\n\nexport interface CombinedLinkList {\n hcScrollLink: string;\n linkElement: HTMLElement;\n}\n","
\n \n
","import {Directive, HostBinding, ElementRef} from '@angular/core';\n\n/** Marks the host element as a linkable section within an `hc-scroll-nav-content`.\n * Must set the `id` and link to it via an `hcScrollLink`. */\n@Directive({\n selector: '[hcScrollTarget]',\n standalone: false\n})\nexport class ScrollNavTargetDirective {\n @HostBinding('class.hc-scroll-nav-target')\n _hostClass = true;\n\n /** The `nativeElement` of the corresponding `hcScrollTarget` that you would like to link to. */\n public nativeElement: HTMLElement;\n\n constructor(element: ElementRef) {\n if (element) {\n this.nativeElement = element.nativeElement;\n }\n }\n\n public _setDirectiveToNode(node: Node): void {\n this.nativeElement = node as HTMLElement;\n this.nativeElement.classList.add('hc-scroll-nav-target');\n }\n}\n","import {\n Component,\n ViewEncapsulation,\n Input,\n AfterViewInit,\n ViewChild,\n OnDestroy,\n EventEmitter,\n Output,\n ContentChildren,\n HostListener,\n AfterViewChecked,\n ElementRef,\n Renderer2\n} from '@angular/core';\nimport type {QueryList} from '@angular/core';\nimport {CdkScrollable} from '@angular/cdk/scrolling';\nimport {Subject} from 'rxjs';\nimport {HcScrollNavComponent} from '../nav/scroll-nav.component';\nimport {takeUntil} from 'rxjs/operators';\nimport {differenceBy} from 'lodash';\nimport {ScrollNavTargetDirective} from './scroll-nav-target.directive';\n\n/** Contains scrollable content that is navigable via `hc-scroll-nav` links. */\n@Component({\n selector: 'hc-scroll-nav-content',\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['scroll-nav-content.component.scss'],\n templateUrl: 'scroll-nav-content.component.html',\n standalone: false\n})\nexport class HcScrollNavContentComponent implements AfterViewInit, AfterViewChecked, OnDestroy {\n private readonly DEFAULT_BUFFER = 0;\n /** Reference to the scroll nav component. */\n @Input() public nav: HcScrollNavComponent;\n /** If true, will force the height of the final scroll target area to be the height of the scrollable container.\n * This is helpful if you want the last target in the content area to be able to scroll to the top. You can alternatively\n * target the last item with css. *Defaults to true.* */\n @Input() public makeLastTargetFullHeight = true;\n /** Adjust the min height of the last target */\n @Input() public lastTargetMinHeightAdjustment = 0;\n /** Number in pixels, used to give a little leeway in the shifting of the active nav when scrolling. *Defaults to 0.*\n * Example: If set to 40, if showing just the bottom 40 pixels of the section before, count the next section as active. */\n @Input() public bufferSpace = this.DEFAULT_BUFFER;\n /** If true, applies smooth scrolling via css. *Defaults to true.* */\n @Input() public shouldAnimateScroll = true;\n /** Set to true to enable the component to change for dynamic content changes that might not be picked up by Angular */\n @Input() public hasDynamicContent = false;\n /** Fires when a new section is scrolled into view. Broadcasts the id of that section. */\n @Output() public newSectionInView: EventEmitter = new EventEmitter();\n @ViewChild('scrollContainer', {read: CdkScrollable, static: false}) public _cdkScrollableElement: CdkScrollable;\n @ContentChildren(ScrollNavTargetDirective, { descendants: true }) private targets: QueryList;\n /** Id of the current section scrolled into view. */\n public sectionInView: string;\n public get _scrollTargets(): Array {\n return this.targets.toArray().map(e => e.nativeElement);\n }\n\n private unsubscribe$ = new Subject();\n private minHeightForLastTargetSet = false;\n private systemScrollToElementId: string | undefined;\n private lastElementScrolledTo: HTMLElement;\n private systemScrollCount = 0;\n private dynamicInterval;\n\n private readonly SCROLL_TARGET_ATTRIBUTE = 'hcScrollTarget';\n\n constructor(private _elementRef: ElementRef, private renderer: Renderer2) {}\n\n public ngOnDestroy(): void {\n this.unsubscribe$.next();\n this.unsubscribe$.complete();\n\n if (this.dynamicInterval) {\n clearInterval(this.dynamicInterval);\n }\n }\n\n public ngAfterViewInit(): void {\n setTimeout(() => {\n this.initializeTargets();\n }, 100);\n\n if (this.hasDynamicContent) {\n this.refreshScrollNavTargets();\n this.dynamicInterval = setInterval(() => {\n this.refreshScrollNavTargets();\n }, 300);\n }\n\n // If targets are added dynamically, refresh the scrollNav\n this.targets.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {\n this.initializeTargets();\n });\n\n document.onclick = (event: MouseEvent) => {\n const element: HTMLElement | null = (event.target as HTMLElement).closest('li[hcscrolllink]');\n const scrollLinkAttribute: string | null | undefined = element?.getAttribute('hcscrolllink');\n if (scrollLinkAttribute) {\n this.systemScrollToElementId = scrollLinkAttribute;\n }\n };\n }\n\n public ngAfterViewChecked(): void {\n if (this.makeLastTargetFullHeight && !this.minHeightForLastTargetSet) {\n this.insureMinHeightForLastTarget();\n }\n }\n\n @HostListener('window:resize') _onWindowResize(): void {\n if (this.makeLastTargetFullHeight) {\n this.minHeightForLastTargetSet = false;\n }\n }\n\n /** Refresh the scroll nav targets when dynamic changes have been made. updateScrollTargetArray parameter is optional */\n public refreshScrollNavTargets(updateScrollTargetArray: ScrollNavTargetDirective[] = []): void {\n if (updateScrollTargetArray.length > 0) {\n this.targets.reset(updateScrollTargetArray);\n this.targets.notifyOnChanges();\n\n return;\n }\n\n const scrollTargetNodeList: NodeList = this._elementRef.nativeElement.querySelectorAll(`[${this.SCROLL_TARGET_ATTRIBUTE}]`);\n\n // create array to make the difference calculation off of\n const scrollTargetList: CombinedTargetList[] = [];\n scrollTargetNodeList.forEach((dynamicTarget: HTMLElement) => {\n scrollTargetList.push({ id: dynamicTarget.id, targetElement: dynamicTarget });\n });\n\n if (this.targets.length !== scrollTargetList.length || differenceBy(scrollTargetList, this._scrollTargets, 'id').length > 0) {\n const scrollTargetDirectiveArray: ScrollNavTargetDirective[] = [];\n scrollTargetList.forEach((dynamicTarget) => {\n const scrollNavTargetDirective: ScrollNavTargetDirective = new ScrollNavTargetDirective({});\n scrollNavTargetDirective._setDirectiveToNode(dynamicTarget.targetElement);\n scrollTargetDirectiveArray.push(scrollNavTargetDirective);\n });\n\n this.targets.reset(scrollTargetDirectiveArray);\n this.targets.notifyOnChanges();\n }\n }\n\n /** Scroll to top and reset the 'automatic full height for the last item' setting. */\n public refresh(): void {\n this.scrollToTop();\n this.minHeightForLastTargetSet = false;\n }\n\n /** Helper function to scroll to the top of the content area. */\n public scrollToTop(): void {\n this._cdkScrollableElement.scrollTo({top: 0});\n }\n\n /** Will update the navigation state. */\n public checkActiveSection(): void {\n if (this._scrollTargets.length > 0) {\n const offset: number = this._cdkScrollableElement.measureScrollOffset('top') + this._scrollTargets[0].offsetTop;\n\n this._scrollTargets.forEach((target, index) => {\n const el = target;\n let initialOffset = 0;\n let nextOffset = 0;\n\n if (index > 0) {\n initialOffset = (el as HTMLElement).offsetTop - this.bufferSpace;\n }\n if (index + 1 < this._scrollTargets.length) {\n const nextEl = this._scrollTargets[index + 1];\n nextOffset = (nextEl as HTMLElement).offsetTop;\n }\n\n if (\n (initialOffset && nextOffset && offset >= initialOffset && offset < nextOffset) ||\n (initialOffset && !nextOffset && offset >= initialOffset) ||\n (!initialOffset && nextOffset && offset < nextOffset)\n ) {\n this.lastElementScrolledTo = el as HTMLElement;\n this.setActiveSection((el as HTMLElement).getAttribute('id') || '');\n\n }\n });\n }\n }\n\n /** Sets the active section to passed in scrollTarget */\n public setActiveSection(scrollTarget: string): void {\n if (this.sectionInView !== scrollTarget) {\n this.sectionInView = scrollTarget;\n this.nav._setActiveSectionById(scrollTarget);\n this.newSectionInView.next(scrollTarget);\n }\n }\n\n private initializeTargets(): void {\n if (this._cdkScrollableElement) {\n this._cdkScrollableElement\n .elementScrolled()\n .pipe(takeUntil(this.unsubscribe$))\n .subscribe(() => {\n if (this.systemScrollToElementId) {\n this.nav.isScrolling = true;\n this.systemScrollCount++;\n\n setTimeout(() => {\n if (this.systemScrollCount > 1) {\n this.systemScrollCount--;\n } else {\n this.nav.isScrolling = false;\n this.systemScrollToElementId = undefined;\n this.setActiveSection(this.lastElementScrolledTo.id);\n this.systemScrollCount = 0;\n }\n }, 1500);\n }\n\n this.checkActiveSection();\n });\n }\n\n this._scrollTargets.forEach((target) => {\n if (!target.id) {\n throw Error('hcScrollTarget element needs an id.');\n }\n });\n\n this.nav._scrollEvent.pipe(takeUntil(this.unsubscribe$)).subscribe( element => {\n this._cdkScrollableElement.scrollTo({top: element.offsetTop});\n });\n\n this.insureMinHeightForLastTarget();\n }\n\n private getTargets(targets: HTMLElement[]): HTMLElement[] {\n let rtnTargets: HTMLElement[] = [];\n\n targets.forEach((target) => {\n if (target.hasAttribute('hcScrollTarget')) {\n rtnTargets.push(target);\n }\n\n if (target.children.length > 0) {\n rtnTargets = rtnTargets.concat(this.getTargets(>Array.from(target.children)));\n }\n });\n\n return rtnTargets;\n }\n\n private insureMinHeightForLastTarget() {\n if (this.makeLastTargetFullHeight) {\n const containerHeight: number = this._cdkScrollableElement.getElementRef().nativeElement.offsetHeight;\n if (containerHeight && this._scrollTargets.length > 0) {\n this._scrollTargets.forEach((target) => {\n target.style.minHeight = 'unset';\n });\n\n const targetEl = this._scrollTargets[this._scrollTargets.length - 1];\n targetEl.style.minHeight = `${containerHeight + this.lastTargetMinHeightAdjustment}px`;\n this.minHeightForLastTargetSet = true;\n }\n }\n }\n}\n\nexport interface CombinedTargetList {\n id: string;\n targetElement: HTMLElement;\n}\n","
\n \n
","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {ScrollingModule} from '@angular/cdk/scrolling';\n\nimport {HcScrollNavContentComponent} from './content/scroll-nav-content.component';\nimport {HcScrollNavComponent} from './nav/scroll-nav.component';\nimport {ScrollNavTargetDirective} from './content/scroll-nav-target.directive';\nimport {ScrollNavLinkDirective} from './nav/scroll-nav-link.directive';\n\n@NgModule({\n declarations: [HcScrollNavContentComponent, HcScrollNavComponent, ScrollNavTargetDirective, ScrollNavLinkDirective],\n exports: [HcScrollNavContentComponent, HcScrollNavComponent, ScrollNavTargetDirective, ScrollNavLinkDirective],\n imports: [CommonModule, ScrollingModule],\n providers: []\n})\nexport class ScrollNavModule {}\n","import {Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild, ViewEncapsulation} from '@angular/core';\nimport {Subject} from 'rxjs';\nimport {debounceTime, distinctUntilChanged, takeUntil} from 'rxjs/operators';\n\n@Component({\n selector: 'hc-search-bar',\n templateUrl: 'search-bar.component.html',\n styleUrls: ['search-bar.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class SearchBarComponent implements OnInit, OnDestroy, OnChanges {\n /** Placeholder text for the search bar. *Defaults to `Search`.* */\n @Input() placeholder = 'Search';\n /** If true, disables the search bar. *Defaults to `false`.* */\n @Input() disabled = false;\n /** Preseed the search bar with a particular text value. *Defaults to empty string.* */\n @Input() initialSearchTerm = '';\n /** If true, show the search icon in the right side of the search bar. *Defaults to `true`.* */\n @Input() showSearchIcon = true;\n /** If true, show a clickable clear icon in the right side of the search bar when there's a search term present. *Defaults to `true`.* */\n @Input() showClearIcon = true;\n /** If true, fire triggerSearch event on user keyup (with a built-in 100ms debounce). *Defaults to `true`.* */\n @Input() autoSearch = true;\n /** Sets whether the input should be sized for small screens (if true, overrides the `tight` param) *Defaults to `false`.* */\n @Input() mobile = false;\n /** If true, condense the default padding and reduce the font size. *Defaults to `false`.* */\n @Input() tight = false;\n /** If true, trigger search when search icon is clicked. *Defaults to `true`.* */\n @Input() triggerSearchOnSearchIcoClick = true;\n /** Sets the time in milliseconds to wait before triggering a search. *Defaults to `100`. */\n @Input()\n public debounce = 100;\n /** Fires when a search should be run. Outputs the search term. */\n @Output() triggerSearch = new EventEmitter();\n /** Fires when clear icon is clicked. */\n @Output() clearClicked = new EventEmitter();\n /** Fires when search icon is clicked. */\n @Output() searchIconClicked = new EventEmitter();\n @ViewChild('searchFilter', {static: true}) private searchBar: ElementRef;\n /** Returns the current search term. */\n public get value(): string {\n return this.searchBar.nativeElement.value;\n }\n private searchStream = new Subject();\n private destroy$ = new Subject();\n\n public ngOnDestroy(): void {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n public ngOnInit(): void {\n this.setupSearchStream();\n\n if (this.initialSearchTerm) {\n this.setValue(this.initialSearchTerm);\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.debounce) {\n this.setupSearchStream();\n }\n }\n\n /** Places focus in the search bar. */\n public focus(): void {\n this.searchBar.nativeElement.focus();\n }\n\n /** Manually set the value of the search bar. */\n public setValue(val: string): void {\n this.searchBar.nativeElement.value = val;\n }\n\n public _onKeyUp(event: KeyboardEvent, term: string): void {\n if (event.key !== 'Tab' && this.autoSearch) {\n this.searchStream.next(term);\n }\n }\n\n /** Clear out search bar and trigger search. */\n public clear(): void {\n this.searchBar.nativeElement.value = '';\n this.searchStream.next('');\n }\n\n /** Manually trigger search event. Optionally pass in a value to search for */\n public search(term = ''): void {\n term = term || this.searchBar.nativeElement.value;\n this.setValue(term);\n this.searchStream.next(term);\n }\n\n public _onEnter(term: string): void {\n this.triggerSearch.emit(term);\n }\n\n public _onSearchIconClicked(): void {\n this.focus();\n this.searchIconClicked.emit();\n if (this.triggerSearchOnSearchIcoClick) { this.search(); }\n }\n\n private setupSearchStream() {\n this.destroy$.next();\n\n this.searchStream\n .pipe(debounceTime(this.debounce), distinctUntilChanged())\n .pipe(takeUntil(this.destroy$))\n .subscribe(t => {\n this.triggerSearch.emit(t);\n });\n }\n}\n","\n \n @if (showClearIcon) {\n \n } @if (showSearchIcon) {\n \n }\n\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\n\nimport {SearchBarComponent} from './search-bar.component';\nimport {FormFieldModule} from '../form-field/hc-form-field.module';\nimport {InputModule} from '../input/input.module';\n\n@NgModule({\n declarations: [SearchBarComponent],\n exports: [SearchBarComponent],\n imports: [CommonModule, FormFieldModule, InputModule],\n providers: []\n})\nexport class SearchBarModule {}\n","import {AfterViewInit, ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, OnDestroy, Optional, Output, Self, ViewEncapsulation} from '@angular/core';\nimport {FormGroupDirective, NgControl, NgForm} from '@angular/forms';\nimport {Subject} from 'rxjs';\nimport {delay, takeUntil} from 'rxjs/operators';\nimport {HcFormControlComponent} from '../form-field/hc-form-control.component';\nimport {parseBooleanAttribute} from '../util';\n\nlet nextToggleId = 1;\n\nexport enum buttonSize {\n small = 'sm',\n medium = 'md',\n large = 'lg'\n}\nexport enum buttonStyle {\n blue = 'blue',\n purple = 'purple',\n green = 'green',\n red = 'red',\n orange = 'orange',\n rubyred = 'ruby-red',\n deepred = 'deep-red',\n redorange = 'red-orange',\n magenta = 'magenta',\n azure = 'azure',\n teal = 'teal',\n darkgreen = 'dark-green',\n yelloworange = 'yellow-orange',\n darkblue = 'dark-blue',\n}\nexport enum labelPosition {\n left = 'left',\n right = 'right'\n}\n\nexport function validateLabelType(inputStr: string): void {\n if (inputStr !== 'none' && inputStr !== 'on' && inputStr !== 'true' && inputStr !== 'yes' ) {\n throw Error('Unsupported inside label type: ' + inputStr);\n }\n}\n\n/** A boolean control that can be toggled via clicking */\n@Component({\n selector: 'hc-slide-toggle',\n templateUrl: 'slide-toggle.component.html',\n styleUrls: ['slide-toggle.component.scss'],\n encapsulation: ViewEncapsulation.None,\n providers: [{ provide: HcFormControlComponent, useExisting: forwardRef(() => SlideToggleComponent) }],\n standalone: false\n})\nexport class SlideToggleComponent extends HcFormControlComponent implements AfterViewInit, OnDestroy {\n private _uniqueId = `hc-slide-toggle-${nextToggleId++}`;\n private _form: NgForm | FormGroupDirective | null;\n private _unsubscribe = new Subject();\n _buttonState = true;\n _disabled = false;\n _insideLabel = 'on';\n _insideLabelTypes = {\n 'none': [' ',' '],\n 'on': ['ON','OFF'],\n 'true': ['TRUE','FALSE'],\n 'yes': ['YES','NO']\n };\n\n /** Unique id for the slide toggle element. If none is supplied, one will be auto-generated. */\n @Input()\n get id(): string {\n return this._componentId || this._uniqueId;\n }\n\n set id(idVal: string) {\n this._componentId = idVal ? idVal : this._uniqueId;\n }\n\n /** An optional label positioned outside of the slide toggle. Use `labelPosition` to set which side. */\n @Input() sideLabel = '';\n\n /** The text inside the toggle. Choose from: `none`, `on` (ON/OFF), `true` (TRUE/FALSE), `yes` (YES/NO). *Defaults to `on`**/\n @Input()\n get insideLabel(): string {\n return this._insideLabel;\n }\n\n set insideLabel(val: string) {\n validateLabelType(val);\n this._insideLabel = val;\n }\n\n /** Whether the individual toggle is disabled. */\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(val: boolean | string) {\n this._disabled = parseBooleanAttribute(val);\n }\n\n /** Sets whether this is a required form element */\n @Input()\n get required(): boolean {\n return this._isRequired;\n }\n\n set required( requiredVal: boolean | string ) {\n this._isRequired = parseBooleanAttribute(requiredVal);\n }\n\n /** Sets the size of slide toggle. Choose from: `'sm' | 'md' | 'lg' |`. *Defaults to `sm`.**/\n @Input() buttonSize: buttonSize = buttonSize.small;\n\n /** Sets the style of the slide toggle. Choose from: `'blue' | 'purple' | 'green' |` 'red' | 'orange' | 'ruby-red' | 'deep-red' | 'red-orange' | 'magenta' | 'azure' | 'teal' | 'dark-green' | 'yellow-orange' | 'dark-blue'. *Defaults to `blue`.**/\n @Input() buttonStyle: buttonStyle = buttonStyle.blue;\n\n /** Sets which side of slide toggle the outside label is positioned on. Choose from: `'left' | 'right' |`. *Defaults to `left`.**/\n @Input() labelPosition: labelPosition = labelPosition.left;\n\n /** Sets the on/off state of the toggle. Supports two-way binding. */\n @Input()\n get buttonState(): boolean {\n return this._buttonState;\n }\n\n set buttonState( val: boolean | string ) {\n const tempVal = parseBooleanAttribute(val);\n if ( tempVal !== this._buttonState ) {\n this._buttonState = parseBooleanAttribute(val);\n this.onChange(this._buttonState);\n this.buttonStateChanged.emit(this._buttonState);\n }\n }\n\n /** Event fired with boolean value when the toggle state is changed. */\n @Output() buttonStateChanged = new EventEmitter();\n\n ngAfterViewInit(): void {\n if ( this._ngControl?.statusChanges ) {\n // delay() is necessary to make sure any form or control state changes have been applied before rechecking error states\n this._ngControl.statusChanges.pipe(delay(0), takeUntil(this._unsubscribe)).subscribe(() => this._updateErrorState());\n }\n if ( this._form ) {\n this._form.ngSubmit.pipe(takeUntil(this._unsubscribe)).subscribe(() => this._updateErrorState());\n }\n\n /** Monkey patching the markAsTouched function to call error state checking because there is not an event for touched changes */\n if ( this._ngControl && this._ngControl.control ) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const self = this;\n const originalMarkMethod = this._ngControl.control.markAsTouched;\n this._ngControl.control.markAsTouched = function () {\n // eslint-disable-next-line prefer-rest-params\n originalMarkMethod.apply(this, arguments);\n self._updateErrorState();\n };\n\n const originalMarkAllMethod = this._ngControl.control.markAllAsTouched;\n this._ngControl.control.markAllAsTouched = function () {\n // eslint-disable-next-line prefer-rest-params\n originalMarkAllMethod.apply(this, arguments);\n self._updateErrorState();\n };\n }\n }\n\n constructor(\n @Optional() _parentForm: NgForm,\n @Optional() _parentFormGroup: FormGroupDirective,\n @Optional() @Self() public _ngControl: NgControl,\n private _changeRef: ChangeDetectorRef\n ) {\n super();\n\n this._form = _parentForm || _parentFormGroup;\n if (this._ngControl != null) {\n this._ngControl.valueAccessor = this;\n }\n }\n\n writeValue(value: unknown): void {\n // Prevent the form control from trying to write a value when removing the control\n if ( this.onChange.name !== 'noop' ) {\n this.buttonState = !!value;\n }\n }\n\n public onChange: (value: unknown) => void = () => undefined;\n public onTouch: () => unknown = () => undefined;\n public registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n public registerOnTouched(fn: () => unknown): void {\n this.onTouch = fn;\n }\n\n _onBlur(): void {\n this.onTouch();\n this._updateErrorState();\n }\n\n setDisabledState(disabledVal: boolean): void {\n this.disabled = disabledVal;\n }\n\n private _updateErrorState() {\n const oldState = this._errorState;\n\n // TODO: this could be abstracted out as an @Input() if we need this to be configurable\n const newState = !!(\n this._ngControl &&\n this._ngControl.invalid &&\n (this._ngControl.touched || (this._form && this._form.submitted))\n );\n\n if (oldState !== newState) {\n this._errorState = newState;\n this._changeRef.detectChanges();\n }\n }\n\n ngOnDestroy(): void {\n this._unsubscribe.next();\n this._unsubscribe.complete();\n }\n}\n","
\n @if (sideLabel) {\n \n {{ sideLabel }}\n \n }\n
\n
\n \n \n {{ _insideLabelTypes[insideLabel][0] }}\n \n \n {{ _insideLabelTypes[insideLabel][1] }}\n \n
\n \n
\n \n
\n
\n
\n\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {FormsModule, ReactiveFormsModule} from '@angular/forms';\nimport {SlideToggleComponent} from './slide-toggle.component';\n\n@NgModule({\n imports: [CommonModule, FormsModule, ReactiveFormsModule],\n exports: [SlideToggleComponent],\n declarations: [SlideToggleComponent]\n})\nexport class SlideToggleModule {}\n","import {Component, forwardRef, HostBinding, Input, ViewEncapsulation} from '@angular/core';\nimport {HcFormControlComponent} from '../form-field/hc-form-control.component';\nimport {parseBooleanAttribute} from '../util';\n\nlet uniqueSliderId = 1;\n\n/** Cashmere wrapper for the ngx-slider component */\n@Component({\n selector: 'hc-slider',\n styleUrls: ['slider.component.scss'],\n template: `\n \n `,\n encapsulation: ViewEncapsulation.None,\n providers: [{ provide: HcFormControlComponent, useExisting: forwardRef(() => SliderComponent) }],\n standalone: false\n})\nexport class SliderComponent extends HcFormControlComponent {\n private _uniqueInputId = `hc-slider-${uniqueSliderId++}`;\n _componentId = this._uniqueInputId; // contains id for the hc-slider component\n\n @HostBinding('class.hc-slider')\n _hostClass = true;\n\n /** Element id */\n @Input()\n get id(): string {\n return this._componentId || this._uniqueInputId;\n }\n\n set id(idVal: string) {\n this._componentId = idVal ? idVal : this._uniqueInputId;\n }\n\n /** Whether the slider is valid; triggers error messages in `hc-form-field` */\n @Input()\n get valid(): boolean {\n return !this._errorState;\n }\n\n set valid( val: boolean | string ) {\n this._errorState = !parseBooleanAttribute(val);\n }\n\n /** Sets whether this is a required form element */\n @Input()\n get required(): boolean {\n return this._isRequired;\n }\n\n set required( requiredVal: boolean | string ) {\n this._isRequired = parseBooleanAttribute(requiredVal);\n }\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {SliderComponent} from './slider.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [SliderComponent],\n declarations: [SliderComponent]\n})\nexport class SliderModule {}\n","import {Component, Input, ViewEncapsulation, EventEmitter, Output} from '@angular/core';\nimport { LinkParent, SidenavLink, SidenavLinkClickEvent, SidenavTabGroup } from './sidenav.models';\nimport { isDefined } from '../util';\n\n/** Component for standard sidebar navigation */\n@Component({\n selector: 'hc-sidenav',\n templateUrl: 'sidenav.component.html',\n styleUrls: ['sidenav.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class SidenavComponent {\n /** Add a custom css class to the sidebar container. */\n @Input() containerCssClass = '';\n /** Set width of the sidebar. Include unit. Can be pixels, rem, em, etc. Default is 260px */\n @Input() width = '260px';\n /** True for a darker sidebar navigation. *Defaults to `false`.* */\n @Input() public darkMode = false;\n /** If true, collapse the sidebar to a minimal width. Defaults to false. */\n @Input() collapsed = false;\n /** Event triggered when the sidebar is expanded or collapsed. */\n @Output() collapsedChange = new EventEmitter();\n /** If true, sidebar can toggle between collapsed and expanded. Will have an expand/collapse button. Defaults to true. */\n @Input() canToggle = true;\n /** True if nested children should be shown by default. *Defaults to `false`.* */\n @Input() set openChildrenByDefault(openByDefault: boolean) {\n this.toggleAllNestedLinks(openByDefault);\n this._openChildrenByDefault = isDefined(openByDefault) ? openByDefault : false;\n }\n get openChildrenByDefault(): boolean {\n return this._openChildrenByDefault;\n }\n private _openChildrenByDefault = false;\n /** True if nested children should be hideable. Overrides `openChildrenByDefault` and `openChildrenWhenActive`. *Defaults to `true`.* */\n @Input() set collapsibleChildren(collapsible: boolean) {\n this._collapsibleChildren = isDefined(collapsible) ? collapsible : true;\n if (!this._collapsibleChildren) {\n this.openAllNestedLinks();\n }\n }\n get collapsibleChildren(): boolean {\n return this._collapsibleChildren;\n }\n private _collapsibleChildren = true;\n\n /** True if nested children should be shown if the link is active. Overrides `openChildrenByDefault`. *Defaults to `true`.* */\n @Input() openChildrenWhenActivated = true;\n /** True to show lines of tree structure. *Defaults to `true`.* */\n @Input() showTreeLines = true\n /** Collection of objects representing the main links in the sidenav. */\n @Input() set tabs(tabs: SidenavLink[]) {\n this._tabs = tabs;\n this.activeTabKey = this.activeTabKey || tabs[0]?.key || '';\n this.hasNestedLinks = this.tabs.some(tab => tab.children?.length > 0);\n this.toggleAllNestedLinks(this.openChildrenByDefault);\n }\n get tabs(): SidenavLink[] {\n return this._tabs;\n }\n private _tabs: SidenavLink[] = [];\n\n /** Collection of tabGroups. These are styled like the main tabs, but are grouped together under a separate header. */\n @Input() set tabGroups(tabGroups: SidenavTabGroup[]) {\n this._tabGroups = tabGroups;\n }\n get tabGroups(): SidenavTabGroup[] {\n return this._tabGroups;\n }\n private _tabGroups: SidenavTabGroup[] = [];\n /** Event triggered when a tab group header is clicked. */\n @Output() tabGroupHeaderClicked = new EventEmitter();\n\n /** @docs-private */\n hasNestedLinks = false;\n\n /** True to show loading indicator for tabs. Use while data is loading to show tabs */\n @Input() isLoadingTabs = false;\n /** Event triggered when a tab is clicked. */\n @Output() tabClicked = new EventEmitter();\n /** Key of the tab that should be marked as active. */\n @Input() activeTabKey = '';\n /** If using routerLinks, routerLinkActiveClass can be used to set appropriate class for the active route.\n * If used, the `activeTabKey` property will be ignored.\n * If a class besides `active-tab` is used, you'll need to provide your own css. */\n @Input() routerLinkActiveClass = '';\n\n /** True to show scrollable favorites section. */\n @Input() showFavorites = true;\n /** Collection of objects representing user favorited items. */\n @Input() favorites: SidenavLink[] = [];\n /** True to show loading indicator for favorites. */\n @Input() isLoadingFavorites = false;\n /** Event triggered when a favorite is clicked. */\n @Output() favoriteClicked = new EventEmitter();\n /** Label for the favorites section. */\n @Input() favoritesTitleLabel = 'Favorites';\n /** Description of the favorites section for display in the UI as a tooltip */\n @Input() favoritesDescription = 'Mark favorites to pin them here.';\n /** An icon to show in the favorites header. */\n @Input() favoritesTitleIconClass = 'hc-ico-star';\n /** A clickable action icon to show next to each favorite list item. Default is a filled yellow star.*/\n @Input() favoritesItemActionIconClass = 'hc-ico-star-filled';\n /** Tooltip for a favorite's action icon. */\n @Input() favoritesItemActionIconTooltip = 'Remove from favorites';\n /** Event triggered when the action icon for a favorite list item is clicked. Typically for \"unfavoriting\" an item. */\n @Output() favoriteItemIconClicked = new EventEmitter();\n\n /** @docs-private */\n tabTooltipText = ''\n /** @docs-private */\n menuContext: {links?: SidenavLink[], title?: string, titleIco?: string, parent?: LinkParent, isFav: boolean};\n\n /** Expand the sidebar to full width. */\n open(): void {\n this.collapsed = false;\n this.collapsedChange.emit(this.collapsed);\n }\n\n /** Collapse the sidebar to a minimal width. */\n close(): void {\n this.collapsed = true;\n this.collapsedChange.emit(this.collapsed);\n }\n\n /** Toggle the sidebar's expand/collapse state. */\n toggle(): void {\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n _onRouterLinkActiveChange(isActive: boolean, tab: SidenavLink) {\n if (isActive) {\n this.activeTabKey = tab.key;\n }\n }\n\n /** @docs-private */\n onTabClick(event: MouseEvent, link: SidenavLink, isMenuHeader = false, isFavorite = false): void {\n const tabTriggersMenu = !isMenuHeader && this.collapsed && link.children?.length > 0 && !link.parent;\n if (link.disabled || !link.clickable || tabTriggersMenu) { return; }\n if (isFavorite) { this.onFavoriteClicked(event, link); return; }\n this.tabClicked.emit({event, link});\n this.activeTabKey = link.key;\n\n if (link.children?.length > 0 && this.openChildrenWhenActivated) {\n link.open = true;\n }\n\n if (!link.onClick) { return; }\n link.onClick(event, link);\n }\n\n /** @docs-private */\n onTabGroupHeaderClick(event: MouseEvent, tabGroup: SidenavTabGroup): void {\n this.tabGroupHeaderClicked.emit({event, link: tabGroup as unknown as SidenavLink});\n }\n\n /** @docs-private */\n onFavoriteClicked(event: MouseEvent, link: SidenavLink): void {\n this.favoriteClicked.emit({event, link});\n\n if (!link.onClick) { return; }\n link.onClick(event, link);\n }\n\n /** @docs-private */\n onFavoriteItemIconClicked(event: MouseEvent, link: SidenavLink): void {\n event.stopPropagation();\n this.favoriteItemIconClicked.emit({event, link});\n }\n\n /** @docs-private */\n public trackContentItem(index: number, item: SidenavLink): string | undefined {\n return item.key;\n }\n\n /** @docs-private */\n public childrenChevClicked(tab: SidenavLink, event: MouseEvent): void {\n event.stopPropagation();\n if (this.collapsibleChildren) {\n tab.open = !tab.open;\n }\n }\n\n public toggleAllNestedLinks(shouldOpen = true): void {\n this.tabs.forEach(tab => this.toggleLinkAndChildren(tab, shouldOpen));\n }\n\n public collapseAllNestedLinks(): void {\n if(!this.collapsibleChildren) {\n return;\n }\n this.toggleAllNestedLinks(false);\n }\n\n public openAllNestedLinks(): void {\n this.toggleAllNestedLinks(true);\n }\n\n private toggleLinkAndChildren(link: SidenavLink, shouldOpen: boolean): void {\n link.open = shouldOpen;\n link.children?.forEach(child => this.toggleLinkAndChildren(child, shouldOpen));\n }\n}\n","\n
\n \n \n\n \n @if (tabs.length > 0) {\n
\n @if (!isLoadingTabs) { @for (tab of tabs; track tab) {\n \n } } @if (isLoadingTabs) {\n
\n
\n
\n
\n
\n }\n
\n }\n\n \n \n\n \n @for (tabGroup of tabGroups; track tabGroup) {\n
\n @if (!collapsed || !tabGroup.hideChildrenOnCollapse) {\n
\n \n @if (collapsed && (tabGroup.collapsedTitle || tabGroup.collapsedLabelHTML)) { @if (tabGroup.collapsedLabelHTML) {\n \n } @if (!tabGroup.collapsedLabelHTML) {\n {{ tabGroup.collapsedTitle }}\n } } @else { @if (tabGroup.labelHTML) {\n \n } @if (!tabGroup.labelHTML) {\n {{ tabGroup.title }}\n } } @if (tabGroup.iconClass) {\n \n }\n
\n \n @if (!isLoadingTabs) { @for (tab of tabGroup.children; track tab) {\n \n } }\n
\n \n @if (tabGroup.children.length === 0) {\n
\n \n Nothing to show.\n
\n } }\n \n @if (collapsed && tabGroup.hideChildrenOnCollapse) {\n \n \n \n \n
\n }\n \n }\n \n\n \n @if (showFavorites) {\n
\n @if (!collapsed) { @if (favorites.length > 0 && !isLoadingFavorites) {\n
\n
\n \n {{ favoritesTitleLabel }}\n @if (!isLoadingFavorites) { ({{ favorites.length }}) }\n \n \n
\n \n @if (!isLoadingFavorites) {\n
\n @for (fav of favorites; track fav) {\n \n }\n
\n }\n
\n }\n \n @if (!isLoadingFavorites && favorites.length === 0) {\n
\n \n Nothing to show.\n {{ favoritesDescription }}\n
\n } }\n \n @if (collapsed && !isLoadingFavorites) {\n
\n \n \n \n
\n }\n \n @if (isLoadingFavorites) {\n \n }\n
\n }\n \n\n \n \n\n \n \n\n \n @if (canToggle) {\n \n \n \n }\n \n\n\n\n\n 0 && !tab.parent ? 'click' : 'none'\"\n >\n 0) || !tab.clickable ? null : tab.routerLink\"\n [routerLinkActive]=\"routerLinkActiveClass || 'active-tab'\"\n (isActiveChange)=\"_onRouterLinkActiveChange($event, tab)\"\n tabindex=\"0\"\n (keydown.enter)=\"onTabClick($event, tab, false, isFav)\"\n (click)=\"onTabClick($event, tab, false, isFav)\"\n [hcPop]=\"tabPop\"\n [trigger]=\"collapsed && !tab.parent && !isFav ? 'hover' : 'none'\"\n [context]=\"tab.title || ''\"\n >\n \n \n \n @if (tab.labelHTML) {\n \n } @if (!tab.labelHTML) {\n {{ tab.title }}\n }\n \n @if (tab.subText || tab.badgeHTML) {\n
\n {{ tab.subText }}@if (tab.badgeHTML) {\n \n }\n
\n } @if (isFav) {\n \n \n \n } @if (tab.children?.length > 0 && collapsibleChildren) {\n \n \n \n }\n \n @if (tab.children?.length > 0 && tab.open) {\n
\n @for (child of tab.children; track child) {\n \n }\n
\n }\n \n\n\n\n\n\n {{ tabTooltipText }}\n\n\n\n\n \n \n @if (menuContext?.parent?.labelHTML) {\n \n } @if (menuContext?.parent?.iconClass || menuContext?.titleIco) {\n \n } @if (!menuContext?.parent?.labelHTML) {\n {{ menuContext?.parent?.title || menuContext?.title }}\n }\n \n
\n \n @for (tab of menuContext?.links || menuContext?.parent?.children; track tab) {\n \n }\n \n @if (!((menuContext?.links || menuContext?.parent?.children)?.length > 0)) {\n
\n \n Nothing to show.\n
\n }\n
\n\n","let nextUniqueId = 0;\n\n/** @docs-private */\nexport interface LinkParent {\n iconClass?: string;\n title: string;\n description: string;\n labelHTML: string;\n children: SidenavLink[];\n parent?: LinkParent;\n tabCSSClass?: string;\n}\n\nexport class SidenavLink implements LinkParent {\n /** Name of the link. Used as the primary label in the UI. */\n public title: string;\n /** Serves as the primary label in the UI. Will override \"title\". **WARNING:** You are responsible to sanitize any unsafe user input. */\n public labelHTML: string;\n /** Unique identifier for this link. If not provided at initialization, will be auto generated. */\n public key: string;\n /** Extra detail for this link, preferably less than 10 characters. Shown as a sub label in the UI. */\n public subText?: string;\n /** Icon associated with this link */\n public iconClass?: string;\n /** Describes the link. Will be used for hover tooltips. */\n public description: string;\n /** Passed to routerLink */\n public routerLink?: string;\n /** Additional CSS class to apply */\n public tabCSSClass?: string;\n /** Instead of a route, can provide a callback function.\n * Alternative is to listen to SideNav's tabClicked or favoriteClicked `@Output` events. */\n public onClick?: (e: MouseEvent, link: SidenavLink) => void;\n /** If true, this link will not respond to clicks and will look disabled. *Defaults to `false`.* */\n public disabled = false;\n /** If false, this link will not respond to clicks. Will not look disabled, but will just serve as a non-clickable label. *Defaults to `true`.**/\n public clickable = true;\n\n /** Nested sub links. Will be displayed in a tree structure */\n public children: SidenavLink[];\n /** True if this parent link is open and children links should be shown. */\n public open = false;\n\n /** @docs-private */\n public parent: LinkParent;\n\n /** @docs-private */\n public get isLastLeafNode(): boolean {\n return this.parent?.children.indexOf(this) === this.parent?.children.length - 1;\n }\n\n /** Text or markup to be inserted into a badge.\n * **WARNING:** You are responsible to sanitize any unsafe user input.\n */\n public badgeHTML: string;\n /** Select a valid cashmere color for the badge background color (from the primary, secondary, or neutral palette. eg 'blue', 'slate-gray-300', or 'light-pink') */\n public badgeColor = 'slate-gray-200';\n\n constructor(partial: Partial) {\n Object.assign(this, partial);\n this.key = this.key || `link${nextUniqueId++}`;\n this.children?.forEach(child => {\n child.parent = this;\n });\n }\n}\n\nexport class SidenavTabGroup implements LinkParent {\n /** Icon associated with this link section */\n iconClass?: string;\n /** Name of the link section. Used as the primary label in the UI. */\n public title: string;\n /** Alternate name of the link section to show when sidenav is collapsed. */\n public collapsedTitle: string;\n /** Name of the link section. shown on hover */\n public description: string;\n /** Serves as the primary label in the UI. Will override \"title\". **WARNING:** You are responsible to sanitize any unsafe user input. */\n public labelHTML: string;\n /** Alternate markup to serve as the primary label in the UI when the sidenav is collapsed. Will override other title or label properties. **WARNING:** You are responsible to sanitize any unsafe user input. */\n public collapsedLabelHTML: string;\n /** Nested links for this section*/\n public children: SidenavLink[];\n /** If true, will put child links into popover menu when the sidenav is collapsed */\n public hideChildrenOnCollapse = true;\n /** Additional CSS class to apply */\n public tabCSSClass?: string;\n\n /** @docs-private */\n public hasNestedLinks: boolean;\n\n constructor(partial: Partial) {\n Object.assign(this, partial);\n this.hasNestedLinks = this.children.some(child => child.children?.length > 0);\n this.children?.forEach(child => child.parent = this);\n }\n}\n\nexport class SidenavLinkClickEvent {\n public event: MouseEvent;\n public link: SidenavLink;\n}\n","import {Directive} from '@angular/core';\n\n/** Apply this attribute directive to any element to have it projected into `hc-sidenav` as a header. */\n@Directive({\n selector: '[hcSidenavHeader]',\n standalone: false\n})\nexport class SidenavHeaderDirective {\n}\n","import {Directive} from '@angular/core';\n\n/** Apply this attribute directive to any element to have it projected into `hc-sidenav` as the body. */\n@Directive({\n selector: '[hcSidenavBody]',\n standalone: false\n})\nexport class SidenavBodyDirective {\n}\n","import {Directive} from '@angular/core';\n\n/** Apply this attribute directive to any element to have it projected into `hc-sidenav` as the body. */\n@Directive({\n selector: '[hcSidenavFooter]',\n standalone: false\n})\nexport class SidenavFooterDirective {\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { SidenavComponent } from './sidenav.component';\nimport { ProgressIndicatorsModule } from '../progress-indicators';\nimport { ButtonModule } from '../button';\nimport { PopModule } from '../pop';\nimport { SidenavHeaderDirective } from './sidenav-header.directive';\nimport { SidenavBodyDirective } from './sidenav-body.directive';\nimport { SidenavFooterDirective } from './sidenav-footer.directive';\n\n@NgModule({\n imports: [CommonModule, ProgressIndicatorsModule, ButtonModule, PopModule, RouterModule],\n exports: [SidenavComponent, SidenavHeaderDirective, SidenavBodyDirective, SidenavFooterDirective],\n declarations: [SidenavComponent, SidenavHeaderDirective, SidenavBodyDirective, SidenavFooterDirective]\n})\nexport class SidenavModule {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {animate, state, style, transition, trigger, keyframes, AnimationTriggerMetadata, query, animateChild} from '@angular/animations';\n\nconst animationDurationEnter = '225ms';\nconst animationCurveStandard = 'cubic-bezier(0.4,0.0,0.2,1)';\nconst SORT_ANIMATION_TRANSITION = animationDurationEnter + ' ' + animationCurveStandard;\n\n/** Animations used by HcSort. */\nexport const hcSortAnimations: {\n readonly indicator: AnimationTriggerMetadata;\n readonly leftPointer: AnimationTriggerMetadata;\n readonly rightPointer: AnimationTriggerMetadata;\n readonly arrowOpacity: AnimationTriggerMetadata;\n readonly arrowPosition: AnimationTriggerMetadata;\n readonly allowChildren: AnimationTriggerMetadata;\n} = {\n /** Animation that moves the sort indicator. */\n indicator: trigger('indicator', [\n state('active-asc, asc', style({transform: 'translateY(0px)'})),\n // 10px is the height of the sort indicator, minus the width of the pointers\n state('active-desc, desc', style({transform: 'translateY(10px)'})),\n transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION))\n ]),\n\n /** Animation that rotates the left pointer of the indicator based on the sorting direction. */\n leftPointer: trigger('leftPointer', [\n state('active-asc, asc', style({transform: 'rotate(-45deg)'})),\n state('active-desc, desc', style({transform: 'rotate(45deg)'})),\n transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION))\n ]),\n\n /** Animation that rotates the right pointer of the indicator based on the sorting direction. */\n rightPointer: trigger('rightPointer', [\n state('active-asc, asc', style({transform: 'rotate(45deg)'})),\n state('active-desc, desc', style({transform: 'rotate(-45deg)'})),\n transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION))\n ]),\n\n /** Animation that controls the arrow opacity. */\n arrowOpacity: trigger('arrowOpacity', [\n state('desc-to-active, asc-to-active, active', style({opacity: 1})),\n state('desc-to-hint, asc-to-hint, hint', style({opacity: 0.54})),\n state('hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void', style({opacity: 0})),\n // Transition between all states except for immediate transitions\n transition('* => asc, * => desc, * => active, * => hint, * => void', animate('0ms')),\n transition('* <=> *', animate(SORT_ANIMATION_TRANSITION))\n ]),\n\n /**\n * Animation for the translation of the arrow as a whole. States are separated into two\n * groups: ones with animations and others that are immediate. Immediate states are asc, desc,\n * peek, and active. The other states define a specific animation (source-to-destination)\n * and are determined as a function of their prev user-perceived state and what the next state\n * should be.\n */\n arrowPosition: trigger('arrowPosition', [\n // Hidden Above => Hint Center\n transition(\n '* => desc-to-hint, * => desc-to-active',\n animate(SORT_ANIMATION_TRANSITION, keyframes([style({transform: 'translateY(-25%)'}), style({transform: 'translateY(0)'})]))\n ),\n // Hint Center => Hidden Below\n transition(\n '* => hint-to-desc, * => active-to-desc',\n animate(SORT_ANIMATION_TRANSITION, keyframes([style({transform: 'translateY(0)'}), style({transform: 'translateY(25%)'})]))\n ),\n // Hidden Below => Hint Center\n transition(\n '* => asc-to-hint, * => asc-to-active',\n animate(SORT_ANIMATION_TRANSITION, keyframes([style({transform: 'translateY(25%)'}), style({transform: 'translateY(0)'})]))\n ),\n // Hint Center => Hidden Above\n transition(\n '* => hint-to-asc, * => active-to-asc',\n animate(SORT_ANIMATION_TRANSITION, keyframes([style({transform: 'translateY(0)'}), style({transform: 'translateY(-25%)'})]))\n ),\n state('desc-to-hint, asc-to-hint, hint, desc-to-active, asc-to-active, active', style({transform: 'translateY(0)'})),\n state('hint-to-desc, active-to-desc, desc', style({transform: 'translateY(-25%)'})),\n state('hint-to-asc, active-to-asc, asc', style({transform: 'translateY(25%)'}))\n ]),\n\n /** Necessary trigger that calls animate on children animations. */\n allowChildren: trigger('allowChildren', [transition('* <=> *', [query('@*', animateChild(), {optional: true})])])\n};\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** @docs-private */\nexport function getSortDuplicateSortableIdError(id: string): Error {\n return Error(`Cannot have two HcSortables with the same id (${id}).`);\n}\n\n/** @docs-private */\nexport function getSortHeaderNotContainedWithinSortError(): Error {\n return Error(`HcSortHeader must be placed within a parent element with the HcSort directive.`);\n}\n\n/** @docs-private */\nexport function getSortHeaderMissingIdError(): Error {\n return Error(`HcSortHeader must be provided with a unique id.`);\n}\n\n/** @docs-private */\nexport function getSortInvalidDirectionError(direction: string): Error {\n return Error(`${direction} is not a valid sort direction ('asc' or 'desc').`);\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Injectable, SkipSelf, Optional} from '@angular/core';\nimport {Subject} from 'rxjs';\n\n/**\n * To modify the labels and text displayed, create a new instance of HcSortHeaderIntl and\n * include it in a custom provider.\n */\n@Injectable({providedIn: 'root'})\nexport class HcSortHeaderIntl {\n /**\n * Stream that emits whenever the labels here are changed. Use this to notify\n * components if the labels have changed after initialization.\n */\n readonly changes: Subject = new Subject();\n\n /** ARIA label for the sorting button. */\n sortButtonLabel = (id: string): string => {\n return `Change sorting for ${id}`;\n };\n}\n/** @docs-private */\nexport function HC_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl: HcSortHeaderIntl): HcSortHeaderIntl {\n return parentIntl || new HcSortHeaderIntl();\n}\n\n/** @docs-private */\nexport const HC_SORT_HEADER_INTL_PROVIDER = {\n // If there is already an HcSortHeaderIntl available, use that. Otherwise, provide a new one.\n provide: HcSortHeaderIntl,\n deps: [[new Optional(), new SkipSelf(), HcSortHeaderIntl]],\n useFactory: HC_SORT_HEADER_INTL_PROVIDER_FACTORY\n};\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive, EventEmitter, Input, isDevMode, OnChanges, OnDestroy, OnInit, Output} from '@angular/core';\nimport {coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {SortDirection} from './sort-direction';\nimport {getSortDuplicateSortableIdError, getSortHeaderMissingIdError, getSortInvalidDirectionError} from './sort-errors';\nimport {Subject} from 'rxjs';\nimport {Initializable} from '../shared/initializable';\n\n/** Interface for a directive that holds sorting state consumed by `HcSortHeaderComponent`. */\nexport interface HcSortable {\n /** The id of the column being sorted. */\n id: string;\n\n /** Starting sort direction. */\n start: 'asc' | 'desc';\n\n /** Whether to disable clearing the sorting state. */\n disableClear: boolean;\n}\n\n/** The current sort state. */\nexport interface Sort {\n /** The id of the column being sorted. */\n active: string;\n\n /** The sort direction. */\n direction: SortDirection;\n\n /** The priority of this sort when multi-level sorting is enabled. */\n priority?: number;\n}\n\n/** Container for HcSortables to manage the sort state and provide default sort parameters. */\n@Directive({\n selector: '[hcSort]',\n exportAs: 'hcSort',\n standalone: false\n})\nexport class HcSort extends Initializable implements OnChanges, OnDestroy, OnInit {\n /** Collection of all registered sortables that this directive manages. */\n sortables = new Map();\n\n /** Used to notify any child components listening to state changes. */\n readonly _stateChanges = new Subject();\n\n /** The id of the most recently sorted HcSortable. */\n @Input('hcSortActive')\n active: string;\n\n /**\n * The direction to set when an HcSortable is initially sorted.\n * May be overriden by the HcSortable's sort start.\n */\n @Input('hcSortStart')\n start: 'asc' | 'desc' = 'asc';\n\n /** The sort direction of the currently active HcSortable. */\n @Input('hcSortDirection')\n get direction(): SortDirection {\n return this._direction;\n }\n set direction(direction: SortDirection) {\n if (isDevMode() && direction && direction !== 'asc' && direction !== 'desc') {\n throw getSortInvalidDirectionError(direction);\n }\n this._direction = direction;\n }\n private _direction: SortDirection = '';\n\n /**\n * Whether to disable the user from clearing the sort by finishing the sort direction cycle.\n * May be overriden by the HcSortable's disable clear input.\n */\n @Input('hcSortDisableClear')\n get disableClear(): boolean {\n return this._disableClear;\n }\n set disableClear(v: boolean) {\n this._disableClear = coerceBooleanProperty(v);\n }\n private _disableClear: boolean;\n\n @Input('hcSortDisabled')\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: boolean) {\n this._disabled = coerceBooleanProperty(value);\n }\n private _disabled = false;\n\n /** Whether this sort manages a primary and secondary sort. *Defaults to false.* */\n @Input('hcSortMulti')\n get multiSort(): boolean {\n return this._multiSort;\n }\n set multiSort(value: boolean | string) {\n const multiSort = coerceBooleanProperty(value);\n if (multiSort && !this._multiSort && this.active && this.direction) {\n this._sorts = [{active: this.active, direction: this.direction, priority: 1}];\n }\n this._multiSort = multiSort;\n }\n private _multiSort = false;\n\n /** The active sorts ordered from highest to lowest priority. */\n get sorts(): Sort[] {\n return this._sorts.map(sort => ({...sort}));\n }\n private _sorts: Sort[] = [];\n\n /** Event emitted when the user changes either the active sort or sort direction. */\n @Output('hcSortChange')\n readonly sortChange: EventEmitter = new EventEmitter();\n\n /**\n * Register function to be used by the contained HcSortables. Adds the HcSortable to the\n * collection of HcSortables.\n */\n register(sortable: HcSortable): void {\n if (!sortable.id) {\n throw getSortHeaderMissingIdError();\n }\n\n if (this.sortables.has(sortable.id)) {\n throw getSortDuplicateSortableIdError(sortable.id);\n }\n this.sortables.set(sortable.id, sortable);\n }\n\n /**\n * Unregister function to be used by the contained HcSortables. Removes the HcSortable from the\n * collection of contained HcSortables.\n */\n deregister(sortable: HcSortable): void {\n this.sortables.delete(sortable.id);\n }\n\n /** Sets the active sort id and determines the new sort direction. */\n sort(sortable: HcSortable): void {\n if (this.multiSort) {\n this._sortMulti(sortable);\n } else {\n this._sortSingle(sortable);\n }\n }\n\n /** Adds or replaces a secondary sort and emits the updated primary sort. */\n addSecondarySort(sortable: HcSortable, direction: SortDirection = sortable.start || this.start): void {\n if (!this.multiSort || !direction || this._sorts.some(sort => sort.active === sortable.id) || this._sorts.length >= 2) {\n return;\n }\n\n this._sorts = [...this._sorts, {active: sortable.id, direction, priority: this._sorts.length + 1}];\n this._syncPrimarySort();\n this._emitSortChange();\n }\n\n /** Sets the direction for an active sort or makes the column the primary sort. */\n setSortDirection(sortable: HcSortable, direction: 'asc' | 'desc'): void {\n if (this.multiSort) {\n this._setMultiSortDirection(sortable, direction);\n } else {\n this._setSingleSortDirection(sortable, direction);\n }\n }\n\n /** Removes a sort while keeping one active sort in place. */\n removeSort(id: string): void {\n if (!this.multiSort || this._sorts.length <= 1) {\n return;\n }\n\n this._sorts = this._sorts.filter(sort => sort.active !== id).map((sort, index) => ({...sort, priority: index + 1}));\n this._syncPrimarySort();\n this._emitSortChange();\n }\n\n /** Swaps the priority of the selected sort with the other active sort. */\n setSortPriority(id: string, priority: number): void {\n if (!this.multiSort || this._sorts.length !== 2 || priority < 1 || priority > 2) {\n return;\n }\n\n const selectedIndex = this._sorts.findIndex(sort => sort.active === id);\n if (selectedIndex === -1 || selectedIndex === priority - 1) {\n return;\n }\n\n const reordered = [...this._sorts];\n const [selected] = reordered.splice(selectedIndex, 1);\n reordered.splice(priority - 1, 0, selected);\n this._sorts = reordered.map((sort, index) => ({...sort, priority: index + 1}));\n this._syncPrimarySort();\n this._emitSortChange();\n }\n\n /** Returns the active sort for a column, if one exists. */\n getSort(id: string): Sort | undefined {\n return this._sorts.find(sort => sort.active === id);\n }\n\n /** Returns the next sort direction of the active sortable, checking for potential overrides. */\n getNextSortDirection(sortable: HcSortable): SortDirection {\n if (!sortable) {\n return '';\n }\n\n // Get the sort direction cycle with the potential sortable overrides.\n const disableClear = sortable.disableClear != null ? sortable.disableClear : this.disableClear;\n const sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear);\n\n // Get and return the next direction in the cycle\n let nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1;\n if (nextDirectionIndex >= sortDirectionCycle.length) {\n nextDirectionIndex = 0;\n }\n return sortDirectionCycle[nextDirectionIndex];\n }\n\n private _sortSingle(sortable: HcSortable): void {\n if (this.active !== sortable.id) {\n this.active = sortable.id;\n this.direction = sortable.start ? sortable.start : this.start;\n } else {\n this.direction = this.getNextSortDirection(sortable);\n }\n\n this._emitSortChange();\n }\n\n private _sortMulti(sortable: HcSortable): void {\n const currentSort = this.getSort(sortable.id);\n if (!currentSort) {\n this._sorts = [{active: sortable.id, direction: sortable.start || this.start, priority: 1}];\n } else {\n this._sorts = this._sorts.map(sort =>\n sort.active === sortable.id\n ? {...sort, direction: sort.direction === 'asc' ? 'desc' : 'asc'}\n : sort\n );\n }\n\n this._syncPrimarySort();\n this._emitSortChange();\n }\n\n private _setSingleSortDirection(sortable: HcSortable, direction: 'asc' | 'desc'): void {\n this.active = sortable.id;\n this.direction = direction;\n this._emitSortChange();\n }\n\n private _setMultiSortDirection(sortable: HcSortable, direction: 'asc' | 'desc'): void {\n const currentSort = this.getSort(sortable.id);\n this._sorts = currentSort\n ? this._sorts.map(sort => sort.active === sortable.id ? {...sort, direction} : sort)\n : [{active: sortable.id, direction, priority: 1}];\n this._syncPrimarySort();\n this._emitSortChange();\n }\n\n private _syncPrimarySort(): void {\n const primarySort = this._sorts[0];\n this.active = primarySort?.active;\n this.direction = primarySort?.direction || '';\n }\n\n private _emitSortChange(): void {\n this.sortChange.emit(this._sorts[0] || {active: this.active, direction: this.direction});\n }\n\n private _syncMultiSortFromInputs(): void {\n if (this.multiSort && this.active && this.direction) {\n this._sorts = [{active: this.active, direction: this.direction, priority: 1}];\n }\n }\n\n ngOnInit(): void {\n this._syncMultiSortFromInputs();\n this._markInitialized();\n }\n\n ngOnChanges(): void {\n this._syncMultiSortFromInputs();\n this._stateChanges.next();\n }\n\n ngOnDestroy(): void {\n this._stateChanges.complete();\n }\n}\n\n/** Returns the sort direction cycle to use given the provided parameters of order and clear. */\nfunction getSortDirectionCycle(start: 'asc' | 'desc', disableClear: boolean): SortDirection[] {\n const sortOrder: SortDirection[] = ['asc', 'desc'];\n if (start === 'desc') {\n sortOrder.reverse();\n }\n if (!disableClear) {\n sortOrder.push('');\n }\n\n return sortOrder;\n}\n","/* eslint-disable @angular-eslint/component-selector */\n/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {CdkColumnDef} from '@angular/cdk/table';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n ViewEncapsulation,\n HostBinding,\n HostListener\n} from '@angular/core';\nimport {merge, Subscription} from 'rxjs';\nimport {HcSort, HcSortable} from './sort';\nimport {hcSortAnimations} from './sort-animations';\nimport {SortDirection} from './sort-direction';\nimport {getSortHeaderNotContainedWithinSortError} from './sort-errors';\nimport {HcSortHeaderIntl} from './sort-header-intl';\n\n/**\n * Valid positions for the arrow to be in for its opacity and translation. If the state is a\n * sort direction, the position of the arrow will be above/below and opacity 0. If the state is\n * hint, the arrow will be in the center with a slight opacity. Active state means the arrow will\n * be fully opaque in the center.\n *\n * @docs-private\n */\nexport type ArrowViewState = SortDirection | 'hint' | 'active';\n\n/**\n * States describing the arrow's animated position (animating fromState to toState).\n * If the fromState is not defined, there will be no animated transition to the toState.\n * @docs-private\n */\nexport interface ArrowViewStateTransition {\n fromState?: ArrowViewState;\n toState: ArrowViewState;\n}\n\n/**\n * Applies sorting behavior (click to change sort) and styles to an element, including an\n * arrow to display the current sort direction.\n *\n * Must be provided with an id and contained within a parent HcSort directive.\n *\n * If used on header cells in a CdkTable, it will automatically default its id from its containing\n * column definition.\n */\n@Component({\n selector: '[hc-sort-header]',\n exportAs: 'hcSortHeader',\n templateUrl: 'sort-header.html',\n styleUrls: ['sort-header.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n animations: [\n hcSortAnimations.indicator,\n hcSortAnimations.leftPointer,\n hcSortAnimations.rightPointer,\n hcSortAnimations.arrowOpacity,\n hcSortAnimations.arrowPosition,\n hcSortAnimations.allowChildren\n ],\n standalone: false\n})\nexport class HcSortHeader implements HcSortable, OnDestroy, OnInit {\n private _rerenderSubscription: Subscription;\n\n /**\n * Flag set to true when the indicator should be displayed while the sort is not active. Used to\n * provide an affordance that the header is sortable by showing on focus and hover.\n */\n _showIndicatorHint = false;\n\n /**\n * The view transition state of the arrow (translation/ opacity) - indicates its `from` and `to`\n * position through the animation. If animations are currently disabled, the fromState is removed\n * so that there is no animation displayed.\n */\n _viewState: ArrowViewStateTransition;\n\n /** The direction the arrow should be facing according to the current state. */\n _arrowDirection: SortDirection = '';\n\n /**\n * Whether the view state animation should show the transition between the `from` and `to` states.\n */\n _disableViewStateAnimation = false;\n\n /**\n * ID of this sort header. If used within the context of a CdkColumnDef, this will default to\n * the column's name.\n */\n @Input('hc-sort-header')\n id: string;\n\n /** Sets the position of the arrow that displays when sorted. */\n @Input()\n arrowPosition: 'before' | 'after' = 'after';\n\n /** Overrides the sort start value of the containing HcSort for this HcSortable. */\n @Input()\n start: 'asc' | 'desc';\n\n /** Overrides the disable clear value of the containing HcSort for this HcSortable. */\n @Input()\n get disableClear(): boolean {\n return this._disableClear;\n }\n\n set disableClear(v: boolean) {\n this._disableClear = coerceBooleanProperty(v);\n }\n\n private _disableClear: boolean;\n\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(value: boolean) {\n this._disabled = coerceBooleanProperty(value);\n }\n\n @HostBinding('class.hc-sort-header')\n _hostClass = true;\n\n private _disabled = false;\n\n constructor(\n public _intl: HcSortHeaderIntl,\n changeDetectorRef: ChangeDetectorRef,\n @Optional() public _sort: HcSort,\n @Optional() public _cdkColumnDef: CdkColumnDef\n ) {\n if (!_sort) {\n throw getSortHeaderNotContainedWithinSortError();\n }\n\n this._rerenderSubscription = merge(_sort.sortChange, _sort._stateChanges, _intl.changes).subscribe(() => {\n if (this._isSorted()) {\n this._updateArrowDirection();\n }\n\n // If this header was recently active and now no longer sorted, animate away the arrow.\n if (!this._isSorted() && this._viewState && this._viewState.toState === 'active') {\n this._disableViewStateAnimation = false;\n this._setAnimationTransitionState({fromState: 'active', toState: this._arrowDirection});\n }\n\n changeDetectorRef.markForCheck();\n });\n }\n\n ngOnInit(): void {\n if (!this.id && this._cdkColumnDef) {\n this.id = this._cdkColumnDef.name;\n }\n\n // Initialize the direction of the arrow and set the view state to be immediately that state.\n this._updateArrowDirection();\n this._setAnimationTransitionState({toState: this._isSorted() ? 'active' : this._arrowDirection});\n\n this._sort.register(this);\n }\n\n ngOnDestroy(): void {\n this._sort.deregister(this);\n this._rerenderSubscription.unsubscribe();\n }\n\n /**\n * Sets the \"hint\" state such that the arrow will be semi-transparently displayed as a hint to the\n * user showing what the active sort will become. If set to false, the arrow will fade away.\n */\n _setIndicatorHintVisible(visible: boolean): void {\n // No-op if the sort header is disabled - should not make the hint visible.\n if (this._isDisabled() && visible) {\n return;\n }\n\n this._showIndicatorHint = visible;\n\n if (!this._isSorted()) {\n this._updateArrowDirection();\n if (this._showIndicatorHint) {\n this._setAnimationTransitionState({fromState: this._arrowDirection, toState: 'hint'});\n } else {\n this._setAnimationTransitionState({fromState: 'hint', toState: this._arrowDirection});\n }\n }\n }\n\n /**\n * Sets the animation transition view state for the arrow's position and opacity. If the\n * `disableViewStateAnimation` flag is set to true, the `fromState` will be ignored so that\n * no animation appears.\n */\n _setAnimationTransitionState(viewState: ArrowViewStateTransition): void {\n this._viewState = viewState;\n\n // If the animation for arrow position state (opacity/translation) should be disabled,\n // remove the fromState so that it jumps right to the toState.\n if (this._disableViewStateAnimation) {\n this._viewState = {toState: viewState.toState};\n }\n }\n\n /** Triggers the sort on this sort header and removes the indicator hint. */\n @HostListener('click')\n _handleClick(): void {\n if (this._isDisabled()) {\n return;\n }\n\n this._sort.sort(this);\n\n // Do not show the animation if the header was already shown in the right position.\n if (this._viewState.toState === 'hint' || this._viewState.toState === 'active') {\n this._disableViewStateAnimation = true;\n }\n\n // If the arrow is now sorted, animate the arrow into place. Otherwise, animate it away into\n // the direction it is facing.\n const viewState: ArrowViewStateTransition = this._isSorted()\n ? {fromState: this._arrowDirection, toState: 'active'}\n : {fromState: 'active', toState: this._arrowDirection};\n this._setAnimationTransitionState(viewState);\n\n this._showIndicatorHint = false;\n }\n\n /** Whether this HcSortHeader is currently sorted in either ascending or descending order. */\n _isSorted(): boolean {\n const sort = this._sort.getSort(this.id);\n return this._sort.multiSort\n ? !!sort && (sort.direction === 'asc' || sort.direction === 'desc')\n : this._sort.active === this.id && (this._sort.direction === 'asc' || this._sort.direction === 'desc');\n }\n\n /** Returns this header's priority when two sorts are active. */\n _getSortPriority(): number | null {\n if (!this._sort.multiSort || this._sort.sorts.length < 2) {\n return null;\n }\n\n return this._sort.getSort(this.id)?.priority || null;\n }\n\n /** Returns the animation state for the arrow direction (indicator and pointers). */\n _getArrowDirectionState(): string {\n return `${this._isSorted() ? 'active-' : ''}${this._arrowDirection}`;\n }\n\n /** Returns the arrow position state (opacity, translation). */\n _getArrowViewState(): string {\n const fromState = this._viewState.fromState;\n return (fromState ? `${fromState}-to-` : '') + this._viewState.toState;\n }\n\n /**\n * Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be\n * facing the start direction. Otherwise if it is sorted, the arrow should point in the currently\n * active sorted direction. The reason this is updated through a function is because the direction\n * should only be changed at specific times - when deactivated but the hint is displayed and when\n * the sort is active and the direction changes. Otherwise the arrow's direction should linger\n * in cases such as the sort becoming deactivated but we want to animate the arrow away while\n * preserving its direction, even though the next sort direction is actually different and should\n * only be changed once the arrow displays again (hint or activation).\n */\n _updateArrowDirection(): void {\n const sort = this._sort.getSort(this.id);\n this._arrowDirection = this._isSorted() && this._sort.multiSort\n ? sort?.direction || ''\n : this._isSorted()\n ? this._sort.direction\n : this.start || this._sort.start;\n }\n\n @HostBinding('class.hc-sort-header-disabled')\n _isDisabled(): boolean {\n return this._sort.disabled || this.disabled;\n }\n\n /**\n * Gets the aria-sort attribute that should be applied to this sort header. If this header\n * is not sorted, returns null so that the attribute is removed from the host element. Aria spec\n * says that the aria-sort property should only be present on one header at a time, so removing\n * ensures this is true.\n */\n @HostBinding('attr.aria-sort')\n get ariaSort(): string | null {\n const sort = this._sort.getSort(this.id);\n if (!this._isSorted() || (this._sort.multiSort && sort?.priority !== 1)) {\n return null;\n }\n\n const direction = this._sort.multiSort ? sort?.direction : this._sort.direction;\n return direction === 'asc' ? 'ascending' : 'descending';\n }\n}\n","
\n \n\n
\n \n \n
1 && sort.priority as priority; else multiSortIcon\" class=\"hc-sort-header-priority\">\n \n {{priority}}\n
\n \n \n
\n
\n\n\n
\n\n\n\n
\n\n\n\n","import {ChangeDetectionStrategy, Component, Input} from '@angular/core';\nimport {HcSort, HcSortable} from './sort';\n\n/** Displays standard context-menu actions for a sortable column. */\n@Component({\n selector: 'hc-sort-menu',\n templateUrl: './sort-menu.component.html',\n styleUrls: ['./sort-menu.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class HcSortMenuComponent {\n /** The sort controller that owns the column state. */\n @Input() sort?: HcSort;\n\n /** The column represented by this menu. */\n @Input() sortable?: HcSortable;\n\n /** Whether this column currently has an active sort. */\n get isSorted(): boolean {\n if (!this.sort || !this.sortable) {\n return false;\n }\n\n return this.sort.multiSort\n ? !!this.sort.getSort(this.sortable.id)\n : this.sort.active === this.sortable.id && this.sort.direction !== '';\n }\n\n /** Whether this column can be added as the secondary sort. */\n get canAddSecondarySort(): boolean {\n return !!this.sort?.multiSort && this.sort.sorts.length === 1 && !this.isSorted;\n }\n\n /** Whether this column can be removed without leaving the table unsorted. */\n get canRemoveSort(): boolean {\n return !!this.sort?.multiSort && this.sort.sorts.length === 2 && this.isSorted;\n }\n\n /** Current priority of this column, if it is sorted. */\n get priority(): number | null {\n return this._hasSortContext() ? this.sort.getSort(this.sortable.id)?.priority || null : null;\n }\n\n /** Sets ascending order for this column. */\n sortAscending(): void {\n if (this._hasSortContext()) {\n this.sort.setSortDirection(this.sortable, 'asc');\n }\n }\n\n /** Sets descending order for this column. */\n sortDescending(): void {\n if (this._hasSortContext()) {\n this.sort.setSortDirection(this.sortable, 'desc');\n }\n }\n\n /** Adds this column as the secondary sort. */\n addSecondarySort(): void {\n if (this._hasSortContext()) {\n this.sort.addSecondarySort(this.sortable);\n }\n }\n\n /** Removes this column from the active sorts. */\n removeSort(): void {\n if (this._hasSortContext()) {\n this.sort.removeSort(this.sortable.id);\n }\n }\n\n /** Changes this column's sort priority. */\n setPriority(priority: number): void {\n if (this._hasSortContext()) {\n this.sort.setSortPriority(this.sortable.id, priority);\n }\n }\n\n private _hasSortContext(): this is this & { sort: HcSort; sortable: HcSortable } {\n return !!this.sort && !!this.sortable;\n }\n}\n","
\n \n \n
\n \n
\n \n
\n Priority:\n \n \n
\n \n
\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {NgModule} from '@angular/core';\nimport {HcSortHeader} from './sort-header';\nimport {HcSort} from './sort';\nimport {HC_SORT_HEADER_INTL_PROVIDER} from './sort-header-intl';\nimport {CommonModule} from '@angular/common';\nimport {PopModule} from '../pop/popover.module';\nimport {IconModule} from '../icon/icon.module';\nimport {HcSortMenuComponent} from './sort-menu.component';\n\n@NgModule({\n imports: [CommonModule, PopModule, IconModule],\n exports: [HcSort, HcSortHeader, HcSortMenuComponent],\n declarations: [HcSort, HcSortHeader, HcSortMenuComponent],\n providers: [HC_SORT_HEADER_INTL_PROVIDER]\n})\nexport class SortModule {}\n","import {Component, Input, AfterContentInit, HostBinding, ViewEncapsulation, Output, EventEmitter} from '@angular/core';\nimport {Router, NavigationEnd, Params, UrlSerializer} from '@angular/router';\nimport {parseBooleanAttribute} from '../util';\n\nexport function throwErrorForMissingRouterLink(stepsWithoutRouterLink: StepInterface[]): void {\n const stepLabels = stepsWithoutRouterLink.map(step => step.label);\n throw Error(`Routerlink missing on ${stepLabels.join(',')}`);\n}\n\nexport interface StepInterface {\n /** The text to be displayed under the step indicator */\n label?: string;\n /** If using a router, the route this step should navigate to */\n routerLink?: string;\n /** The icon set the step's hc-icon should use. Must be set if using the icon parameter. */\n iconSet?: string;\n /** An glyph that should be displayed inside the step's circle.\n * If not set, the step number will display in the circle instead. */\n icon?: string;\n /** If true, the step will not be clickable */\n disabled?: boolean;\n /** Apply query params to the routerLink */\n queryParams?: Params;\n}\n\nexport type StepColor = 'green' | 'blue' | 'purple' | 'orange' | 'red' | 'none';\nexport type StepType = 'arrow' | 'isolated';\n\n/** Convey progress through numbered steps, providing a wizard-like workflow. */\n@Component({\n selector: 'hc-stepper',\n templateUrl: './stepper.component.html',\n styleUrls: ['./stepper.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class StepperComponent implements AfterContentInit {\n _routerEnabled = false;\n\n /** An array defining the steps in the stepper */\n @Input()\n public steps: StepInterface[];\n\n /** Sets the layout of the progress stepper. *Defaults to `arrow`.* */\n @Input()\n public type: StepType = 'arrow';\n\n /** Sets the highlight color of the progress stepper. *Defaults to `green`.* */\n @Input()\n get color(): StepColor {\n return this._color;\n }\n set color(value: StepColor) {\n this._color = value;\n this._hostClass = 'hc-stepper-' + this._color;\n }\n private _color: StepColor = 'green';\n\n /** Determines whether numerals should be displayed on each step indicator for the isolated type.\n * *Defaults to `false`.* */\n @Input()\n get showStepCount(): boolean {\n return this._showStepCount;\n }\n set showStepCount(value: boolean) {\n this._showStepCount = parseBooleanAttribute(value);\n }\n private _showStepCount = false;\n\n /** If true, include a router outlet with the component. *Defaults to `true`.* */\n @Input()\n get useRouterOutlet(): boolean {\n return this._useRouterOutlet;\n }\n set useRouterOutlet(value: boolean) {\n this._useRouterOutlet = parseBooleanAttribute(value);\n }\n private _useRouterOutlet = true;\n\n /** Get or set the currently selected zero-based index of the stepper */\n @Input()\n get activeIndex(): number | undefined {\n return this._activeIndex;\n }\n set activeIndex(value: number | undefined) {\n if (!this.steps) {\n return;\n }\n if (value !== undefined && (value < 0 || value >= this.steps.length)) {\n throw Error('The hc-stepper activeIndex value of ' + value + ' is out of bounds');\n }\n if (this._routerEnabled && value !== undefined) {\n this.router.navigate([this.steps[value].routerLink]);\n } else {\n this._activeIndex = value;\n this.activeIndexChange.emit(this._activeIndex);\n }\n }\n private _activeIndex: number | undefined = undefined;\n\n /** Emits the current zero-based index for the active step whenever it changes */\n @Output()\n activeIndexChange = new EventEmitter();\n\n @HostBinding('class') _hostClass = 'hc-stepper-' + this.color;\n\n constructor(private router: Router, private urlSerializer: UrlSerializer) {\n this.router.events.forEach(event => {\n if (event instanceof NavigationEnd) {\n this.findCurrentStep();\n }\n });\n }\n\n ngAfterContentInit(): void {\n this._checkForRouterUse();\n if (this._routerEnabled) {\n this.findCurrentStep();\n }\n }\n\n _stepClick(index: number | undefined): void {\n if (!this._routerEnabled && index !== undefined && this.steps[index].disabled !== true) {\n this._activeIndex = index;\n this.activeIndexChange.emit(this._activeIndex);\n }\n }\n\n private _checkForRouterUse() {\n const countUsingRouter = this.steps.filter(step => step.routerLink !== undefined).length;\n if (countUsingRouter > 0 && countUsingRouter < this.steps.length) {\n const stepMissingRouterLink = this.steps.filter(step => step.routerLink === undefined);\n throwErrorForMissingRouterLink(stepMissingRouterLink);\n } else {\n this._routerEnabled = countUsingRouter === this.steps.length;\n }\n }\n\n /** Can be used to activate the current step following @Input() steps routerLink or queryParams updates */\n findCurrentStep(): void {\n const foundActiveRouteIndex = this.steps.findIndex(step => {\n const urlTree = this.router.createUrlTree([step.routerLink], {queryParams: step.queryParams});\n const stepURL = this.urlSerializer.serialize(urlTree);\n return this.router.isActive(stepURL, true);\n });\n this._activeIndex = foundActiveRouteIndex > -1 ? foundActiveRouteIndex : undefined;\n this.activeIndexChange.emit(this._activeIndex);\n }\n}\n","
\n
\n \n @for (step of steps; track step; let i = $index; let isLast = $last; let isFirst = $first) {\n activeIndex),\n 'hc-step-arrow-complete': type === 'arrow' && activeIndex !== undefined && i < activeIndex - 1,\n 'hc-step-arrow-completed': type === 'arrow' && activeIndex !== undefined && i === activeIndex - 1,\n 'hc-step-isolated-active': type === 'isolated' && i === activeIndex,\n 'hc-step-isolated-incomplete': type === 'isolated' && (activeIndex === undefined || i > activeIndex),\n 'hc-step-isolated-complete': type === 'isolated' && activeIndex !== undefined && i < activeIndex - 1,\n 'hc-step-isolated-completed': type === 'isolated' && activeIndex !== undefined && i === activeIndex - 1,\n 'hc-step-last': isLast,\n 'hc-step-first': isFirst,\n 'hc-stepper-clickable': step.disabled !== undefined ? !step.disabled : true,\n 'hc-stepper-disabled': step.disabled !== undefined ? step.disabled : false\n }\"\n (click)=\"_stepClick(i)\"\n >\n \n @if (step.iconSet && step.icon) {\n \n } @else {\n {{ i + 1 }}\n }\n \n @if (showStepCount) {\n {{ i + 1 }}\n }\n {{ step.label }}\n \n
\n }\n \n
\n @if (useRouterOutlet) {\n
\n @if (_routerEnabled) {\n \n }\n
\n }\n\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {RouterModule} from '@angular/router';\nimport {StepperComponent} from './stepper.component';\nimport {IconModule} from '../icon/icon.module';\n\nexport {StepInterface} from './stepper.component';\n\n@NgModule({\n imports: [CommonModule, RouterModule, IconModule],\n exports: [StepperComponent],\n declarations: [StepperComponent]\n})\nexport class StepperModule {}\n","import {Component, HostBinding, Input, ViewEncapsulation} from '@angular/core';\n\n/** Secondary navigation bar appearing below the primary navbar */\n@Component({\n selector: 'hc-subnav',\n template: `\n \n `,\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class SubnavComponent {\n @HostBinding('class.hc-subnav')\n _hostClass = true;\n\n /** **DEPRECATED** Not compatible with notification banners, so you should set\n * the fixed position of the subnav and other header content within your app instead */\n @HostBinding('class.hc-subnav-fixed-top')\n @Input()\n public fixedTop = false;\n}\n","import {Directive, HostBinding} from '@angular/core';\n\n/** Can be added to a div or individual component to align it to the right side of the subnav */\n@Directive({\n selector: '[hcSubnavRight]',\n standalone: false\n})\nexport class SubnavRightDirective {\n @HostBinding('class.hc-subnav-right')\n _hostClass = true;\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {SubnavComponent} from './subnav.component';\nimport {SubnavRightDirective} from './subnav-right.directive';\n\n@NgModule({\n imports: [CommonModule],\n exports: [SubnavComponent, SubnavRightDirective],\n declarations: [SubnavComponent, SubnavRightDirective]\n})\nexport class SubnavModule {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {CDK_TABLE, CdkTable} from '@angular/cdk/table';\nimport {ChangeDetectionStrategy, Component, ViewEncapsulation, HostBinding, Input} from '@angular/core';\nimport {parseBooleanAttribute} from '../util';\n\n@Component({\n selector: 'hc-table, table[hc-table]',\n exportAs: 'matTable',\n template: `\n \n \n \n \n \n \n \n \n \n \n \n \n `,\n styleUrls: ['table.component.scss'],\n providers: [\n { provide: CDK_TABLE, useExisting: HcTable }\n ],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class HcTable extends CdkTable {\n /** Overrides the sticky CSS class set by the `CdkTable`. */\n protected stickyCssClass = 'hc-table-sticky';\n\n @HostBinding('class.hc-table')\n _hostHcTableClass = true;\n @HostBinding('class.hc-table-borders')\n _hostHcBordersClass = true;\n @HostBinding('class.hc-table-small')\n _hostHcTableSmall = false;\n\n /** Sets whether the table should have a 2px border around each cell (defaults to true) */\n @Input()\n get borders(): boolean {\n return this._hostHcBordersClass;\n }\n\n set borders(hasBorders: boolean) {\n this._hostHcBordersClass = parseBooleanAttribute(hasBorders);\n }\n\n /** If true, table has less padding and a smaller font size (defaults to false) */\n @Input()\n get tight(): boolean {\n return this._hostHcTableSmall;\n }\n set tight(value: boolean) {\n this._hostHcTableSmall = parseBooleanAttribute(value);\n }\n}\n","/* eslint-disable @angular-eslint/directive-selector */\n/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive, ElementRef, HostBinding, Input} from '@angular/core';\nimport {CdkCell, CdkCellDef, CdkColumnDef, CdkFooterCell, CdkFooterCellDef, CdkHeaderCell, CdkHeaderCellDef} from '@angular/cdk/table';\n\n/**\n * Cell definition for the hc-table.\n * Captures the template of a column's data row cell as well as cell-specific properties.\n */\n@Directive({\n selector: '[hcCellDef]',\n providers: [{ provide: CdkCellDef, useExisting: HcCellDef }],\n standalone: false\n})\nexport class HcCellDef extends CdkCellDef {}\n\n/**\n * Header cell definition for the hc-table.\n * Captures the template of a column's header cell and as well as cell-specific properties.\n */\n@Directive({\n selector: '[hcHeaderCellDef]',\n providers: [{ provide: CdkHeaderCellDef, useExisting: HcHeaderCellDef }],\n standalone: false\n})\nexport class HcHeaderCellDef extends CdkHeaderCellDef {}\n\n/**\n * Footer cell definition for the hc-table.\n * Captures the template of a column's footer cell and as well as cell-specific properties.\n */\n@Directive({\n selector: '[hcFooterCellDef]',\n providers: [{ provide: CdkFooterCellDef, useExisting: HcFooterCellDef }],\n standalone: false\n})\nexport class HcFooterCellDef extends CdkFooterCellDef {}\n\n/**\n * Column definition for the hc-table.\n * Defines a set of cells available for a table column.\n */\n@Directive({\n selector: '[hcColumnDef]',\n providers: [{ provide: CdkColumnDef, useExisting: HcColumnDef }],\n standalone: false\n})\nexport class HcColumnDef extends CdkColumnDef {\n private _justify = 'left';\n\n /** Unique name for this column. */\n @Input('hcColumnDef')\n get colName(): string {\n return this.name;\n }\n set colName( value: string ) {\n this.name = value;\n }\n\n /** Sets the text alignment for this column: `left` (default), `center` or `right` */\n @Input()\n get justify(): string {\n return this._justify;\n }\n\n set justify(justifyVal: string) {\n if (justifyVal === 'left' || justifyVal === 'center' || justifyVal === 'right') {\n this._justify = justifyVal;\n } else {\n throw Error('Unsupported table column alignment value: ' + justifyVal);\n }\n }\n\n /** Whether this column should be sticky positioned at the start of the row */\n @Input()\n public get sticky(): boolean {\n return super.sticky\n }\n public set sticky(value: boolean) {\n super.sticky = value;\n }\n\n /** Whether this column should be sticky positioned on the end of the row */\n @Input()\n get stickyEnd(): boolean {\n return this._stickyEnd;\n }\n set stickyEnd( value: boolean ) {\n this._stickyEnd = value;\n }\n}\n\n/** Header cell template container that adds the right classes and role. */\n@Directive({\n selector: 'hc-header-cell, th[hc-header-cell]',\n standalone: false\n})\nexport class HcHeaderCell extends CdkHeaderCell {\n @HostBinding('class.hc-header-cell') _hostClass = true;\n @HostBinding('attr.role') _role = 'columnheader';\n\n constructor(columnDef: HcColumnDef, elementRef: ElementRef) {\n super(columnDef, elementRef);\n elementRef.nativeElement.classList.add(`hc-column-${columnDef.cssClassFriendlyName}`);\n elementRef.nativeElement.classList.add(`hc-table-justify-` + columnDef.justify);\n }\n}\n\n/** Footer cell template container that adds the right classes and role. */\n@Directive({\n selector: 'hc-footer-cell, td[hc-footer-cell]',\n standalone: false\n})\nexport class HcFooterCell extends CdkFooterCell {\n @HostBinding('class.hc-footer-cell') _hostClass = true;\n @HostBinding('attr.role') _role = 'gridcell';\n\n constructor(columnDef: HcColumnDef, elementRef: ElementRef) {\n super(columnDef, elementRef);\n elementRef.nativeElement.classList.add(`hc-column-${columnDef.cssClassFriendlyName}`);\n elementRef.nativeElement.classList.add(`hc-table-justify-` + columnDef.justify);\n }\n}\n\n/** Cell template container that adds the right classes and role. */\n@Directive({\n selector: 'hc-cell, td[hc-cell]',\n standalone: false\n})\nexport class HcCell extends CdkCell {\n @HostBinding('class.hc-cell') _hostClass = true;\n @HostBinding('attr.role') _role = 'gridcell';\n\n constructor(columnDef: HcColumnDef, elementRef: ElementRef) {\n super(columnDef, elementRef);\n elementRef.nativeElement.classList.add(`hc-column-${columnDef.cssClassFriendlyName}`);\n elementRef.nativeElement.classList.add(`hc-table-justify-` + columnDef.justify);\n }\n}\n\n/** Row index cell template container that adds the right classes and role. */\n@Directive({\n selector: 'hc-index-cell, td[hc-index-cell], th[hc-index-cell]',\n standalone: false\n})\nexport class HcIndexCell extends CdkCell {\n @HostBinding('class.hc-index-cell') _hostClass = true;\n @HostBinding('attr.role') _role = 'gridcell';\n\n constructor(columnDef: HcColumnDef, elementRef: ElementRef) {\n super(columnDef, elementRef);\n elementRef.nativeElement.classList.add(`hc-column-${columnDef.cssClassFriendlyName}`);\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {ChangeDetectionStrategy, Component, Directive, HostBinding, ViewEncapsulation} from '@angular/core';\nimport {CDK_ROW_TEMPLATE, CdkFooterRow, CdkFooterRowDef, CdkHeaderRow, CdkHeaderRowDef, CdkRow, CdkRowDef} from '@angular/cdk/table';\n\n/**\n * Header row definition for the hc-table.\n * Captures the header row's template and other header properties such as the columns to display.\n */\n@Directive({\n selector: '[hcHeaderRowDef]',\n providers: [{ provide: CdkHeaderRowDef, useExisting: HcHeaderRowDef }],\n inputs: ['columns: hcHeaderRowDef', 'sticky: hcHeaderRowDefSticky'],\n standalone: false\n})\nexport class HcHeaderRowDef extends CdkHeaderRowDef {}\n\n/**\n * Footer row definition for the mat-table.\n * Captures the footer row's template and other footer properties such as the columns to display.\n */\n@Directive({\n selector: '[hcFooterRowDef]',\n providers: [{ provide: CdkFooterRowDef, useExisting: HcFooterRowDef }],\n inputs: ['columns: hcFooterRowDef', 'sticky: hcFooterRowDefSticky'],\n standalone: false\n})\nexport class HcFooterRowDef extends CdkFooterRowDef {}\n\n/**\n * Data row definition for the mat-table.\n * Captures the footer row's template and other footer properties such as the columns to display and\n * a when predicate that describes when this row should be used.\n */\n@Directive({\n selector: '[hcRowDef]',\n providers: [{ provide: CdkRowDef, useExisting: HcRowDef }],\n inputs: ['columns: hcRowDefColumns', 'when: hcRowDefWhen'],\n standalone: false\n})\nexport class HcRowDef extends CdkRowDef {}\n\n/** Footer template container that contains the cell outlet. Adds the right class and role. */\n@Component({\n selector: 'hc-header-row, tr[hc-header-row]',\n template: CDK_ROW_TEMPLATE,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n exportAs: 'hcHeaderRow',\n providers: [{ provide: CdkHeaderRow, useExisting: HcHeaderRow }],\n standalone: false\n})\nexport class HcHeaderRow extends CdkHeaderRow {\n @HostBinding('class.hc-header-row') _hostClass = true;\n @HostBinding('attr.role') _role = 'row';\n}\n\n/** Footer template container that contains the cell outlet. Adds the right class and role. */\n@Component({\n selector: 'hc-footer-row, tr[hc-footer-row]',\n template: CDK_ROW_TEMPLATE,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n exportAs: 'hcFooterRow',\n providers: [{ provide: CdkFooterRow, useExisting: HcFooterRow }],\n standalone: false\n})\nexport class HcFooterRow extends CdkFooterRow {\n @HostBinding('class.hc-footer-row') _hostClass = true;\n @HostBinding('attr.role') _role = 'row';\n}\n\n/** Data row template container that contains the cell outlet. Adds the right class and role. */\n@Component({\n selector: 'hc-row, tr[hc-row]',\n template: CDK_ROW_TEMPLATE,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n exportAs: 'hcRow',\n providers: [{ provide: CdkRow, useExisting: HcRow }],\n standalone: false\n})\nexport class HcRow extends CdkRow {\n @HostBinding('class.hc-row') _hostClass = true;\n @HostBinding('attr.role') _role = 'row';\n}\n","/* Based on an example posted by Paolo Caleffi at: https://github.com/angular/material2/issues/8312 */\n\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n HostListener,\n Input,\n OnDestroy,\n OnInit,\n Output,\n ViewEncapsulation\n} from '@angular/core';\nimport {untilDestroyed} from '../util';\nimport {fromEvent, ReplaySubject, Subscription} from 'rxjs';\n\nexport class CellResizeEvent {\n constructor(public width: number, public directionLeft: boolean) {}\n}\n\n@Component({\n selector: 'hc-cell-resizer',\n template: '
',\n styleUrls: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class HcCellResizer implements OnInit, OnDestroy {\n /**\n * Sets whether the resizer is active or not\n */\n @HostBinding('class.disabled') @Input() disabled = false;\n\n /**\n * Stores the width value for this resizer;\n * typically used with two-way binding on the cell's style.width property\n */\n @Input()\n get width(): number {\n return this._width;\n }\n set width(value: number) {\n if (value > 0) {\n this._width = value;\n }\n }\n private _width!: number;\n\n private _directionModifier = 1;\n\n private _mouseX: number;\n\n /**\n * Emits a `CellResizeEvent` when a cell has been resized\n */\n @Output() public resized = new EventEmitter();\n\n private isResizing = false;\n private isResizing$ = new ReplaySubject(1);\n\n /**\n * Emits a boolean value of true while a cell is being resized\n */\n @Output() public resizing = new EventEmitter();\n\n private dragSubscription?: Subscription;\n\n public ngOnInit(): void {\n this.isResizing$\n .pipe(\n // Skip default value\n untilDestroyed(this)\n )\n .subscribe(isResizing => {\n this.resizing.emit(isResizing);\n\n if (isResizing) {\n // We must use arrow function to avoid losing the context,\n // we cannot pass directly the functions references\n this.dragSubscription = fromEvent(window.document, 'mousemove')\n .pipe(untilDestroyed(this))\n .subscribe(event => this._resizeColumn(event));\n this.dragSubscription.add(\n fromEvent(window.document, 'mouseup')\n .pipe(untilDestroyed(this))\n .subscribe(() => this._stopResizing())\n );\n } else {\n // When resize finishes, we emit one last \"resized\" event for which\n // the corresponding \"isResizing\" value will be false.\n // This can be used to detect which is the final resizing event\n // and ignore the others\n this.resized.emit(new CellResizeEvent(this.width, this._directionModifier === -1));\n if (this.dragSubscription) {\n this.dragSubscription.unsubscribe();\n }\n }\n });\n }\n\n private _resizeColumn(event: MouseEvent) {\n const deltaX = event.screenX - this._mouseX;\n const newWidth = this.width + deltaX * this._directionModifier;\n\n this._mouseX = event.screenX;\n\n if (newWidth >= 0) {\n this.resized.emit(new CellResizeEvent(newWidth, this._directionModifier === -1));\n }\n // Prevent text selection while resizing\n event.preventDefault();\n event.stopPropagation();\n }\n\n // Same problems that mousemove listener have\n private _stopResizing() {\n this.isResizing = false;\n this.isResizing$.next(this.isResizing);\n }\n\n // isResizing can be set to true only when the component is not disabled\n @HostListener('mousedown', ['$event']) _startResizing(event: MouseEvent): void {\n this.isResizing = !this.disabled;\n this.isResizing$.next(this.isResizing);\n\n this._mouseX = event.screenX;\n\n if ((event.target).className === 'hc-cell-resizer-left') {\n this._directionModifier = -1;\n } else {\n this._directionModifier = 1;\n }\n\n // Prevent text selection while resizing\n event.preventDefault();\n event.stopPropagation();\n }\n\n // Must be present for AOT compilation to work, even if empty\n // Otherwise 'ng build --prod' will optimize away any calls to ngOnDestroy,\n // even if the method is added by the untilDestroyed operator\n public ngOnDestroy(): void { return; }\n}\n","import {Directive, ElementRef, HostBinding, Input} from '@angular/core';\n\n/** Use `hcTableContainer` to wrap around tables that have sticky headers/columns or other advanced use cases. */\n@Directive({\n selector: '[hcTableContainer]',\n standalone: false\n})\nexport class TableContainerDirective {\n private readonly onlyNumbersRegex = /^\\d+$/;\n @HostBinding('class.hc-table-container')\n _hostClass = true;\n\n @HostBinding('class.hc-table-container-gray')\n _hasGrayBg = false;\n\n @Input() set tableHeight(height: number | string) {\n this._height = height;\n const isHeightJustNumbers = this.onlyNumbersRegex.test(height.toString());\n this.elRef.nativeElement.style.height = isHeightJustNumbers ? `${height}px` : height;\n }\n get tableHeight(): string | number{\n return this._height;\n }\n private _height: string | number;\n\n @Input() set hasGrayBg(hasGrayBg: boolean) {\n this._hasGrayBg = hasGrayBg;\n }\n get hasGrayBg(): boolean {\n return this._hasGrayBg;\n }\n\n constructor(private elRef: ElementRef) {}\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {NgModule} from '@angular/core';\nimport {HcTable} from './table.component';\nimport {HcCell, HcCellDef, HcColumnDef, HcFooterCell, HcFooterCellDef, HcHeaderCell, HcHeaderCellDef, HcIndexCell} from './cell';\nimport {HcFooterRow, HcFooterRowDef, HcHeaderRow, HcHeaderRowDef, HcRow, HcRowDef} from './row';\nimport {HcCellResizer} from './cell-resizer.component';\nimport {CdkTableModule} from '@angular/cdk/table';\nimport {CommonModule} from '@angular/common';\nimport { TableContainerDirective } from './table-container.directive';\n\nconst EXPORTED_DECLARATIONS = [\n // HcTable\n HcTable,\n\n // Template defs\n HcHeaderCellDef,\n HcHeaderRowDef,\n HcColumnDef,\n HcCellDef,\n HcRowDef,\n HcFooterCellDef,\n HcFooterRowDef,\n\n // Cell directives\n HcHeaderCell,\n HcCell,\n HcFooterCell,\n HcIndexCell,\n\n // Row directions\n HcHeaderRow,\n HcRow,\n HcFooterRow,\n\n // table directive\n TableContainerDirective,\n\n // Cell resizer\n HcCellResizer\n];\n\n@NgModule({\n imports: [CdkTableModule, CommonModule],\n exports: EXPORTED_DECLARATIONS,\n declarations: EXPORTED_DECLARATIONS\n})\nexport class TableModule {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {_isNumberValue} from '@angular/cdk/coercion';\nimport {DataSource} from '@angular/cdk/table';\nimport {BehaviorSubject, combineLatest, merge, Observable, of as observableOf, Subscription} from 'rxjs';\nimport {HcSort, Sort} from '../sort/index';\nimport {map} from 'rxjs/operators';\nimport {LoadMorePaginationComponent, PageEvent} from '../pagination/index';\nimport {BasePaginationComponent} from '../pagination/base-pagination';\n\n/**\n * Corresponds to `Number.MAX_SAFE_INTEGER`. Moved out into a variable here due to\n * flaky browser support and the value not being defined in Closure's typings.\n */\nconst MAX_SAFE_INTEGER = 9007199254740991;\n\n/**\n * Use to see what kind of pager we have\n */\nexport function _isLoadMorePaginator(pager: BasePaginationComponent): pager is LoadMorePaginationComponent {\n const loadMorePager = pager;\n return loadMorePager && loadMorePager.buttonText !== undefined;\n}\n\n/**\n * Data source that accepts a client-side data array and includes native support of filtering,\n * sorting (using HcSort), and pagination (using BasePaginationComponent).\n *\n * Allows for sort customization by overriding sortingDataAccessor, which defines how data\n * properties are accessed. Also allows for filter customization by overriding filterTermAccessor,\n * which defines how row data is converted to a string for filter matching.\n */\nexport class HcTableDataSource extends DataSource {\n /** Stream that emits when a new data array is set on the data source. */\n private readonly _data: BehaviorSubject;\n\n /** Stream emitting render data to the table (depends on ordered data changes). */\n private readonly _renderData = new BehaviorSubject([]);\n\n /** Stream that emits when a new filter string is set on the data source. */\n private readonly _filter = new BehaviorSubject('');\n\n /**\n * Subscription to the changes that should trigger an update to the table's rendered rows, such\n * as filtering, sorting, pagination, or base data changes.\n */\n _renderChangesSubscription = Subscription.EMPTY;\n\n /**\n * The filtered set of data that has been matched by the filter string, or all the data if there\n * is no filter. Useful for knowing the set of data the table represents.\n * For example, a 'selectAll()' function would likely want to select the set of filtered data\n * shown to the user rather than all the data.\n */\n filteredData: T[];\n\n /** Array of data that should be rendered by the table, where each object represents one row. */\n get data(): T[] {\n return this._data.value;\n }\n set data(data: T[]) {\n this._data.next(data);\n }\n\n /**\n * Filter term that should be used to filter out objects from the data array. To override how\n * data objects match to this filter string, provide a custom function for filterPredicate.\n */\n get filter(): string {\n return this._filter.value;\n }\n set filter(filter: string) {\n this._filter.next(filter);\n }\n\n /**\n * Instance of the HcSort directive used by the table to control its sorting. Sort changes\n * emitted by the HcSort will trigger an update to the table's rendered data.\n */\n get sort(): HcSort | null {\n return this._sort;\n }\n set sort(sort: HcSort | null) {\n this._sort = sort;\n this._updateChangeSubscription();\n }\n private _sort: HcSort | null;\n\n /**\n * Instance of the PaginationComponentused by the table to control what page of the data is\n * displayed. Page changes emitted by the hc-pagination will trigger an update to the\n * table's rendered data.\n *\n * Note that the data source uses the paginator's properties to calculate which page of data\n * should be displayed. If the paginator receives its properties as template inputs,\n * e.g. `[pageLength]=100` or `[pageIndex]=1`, then be sure that the paginator's view has been\n * initialized before assigning it to this data source.\n */\n get paginator(): BasePaginationComponent | null {\n return this._paginator;\n }\n set paginator(paginator: BasePaginationComponent | null) {\n this._paginator = paginator;\n this._updateChangeSubscription();\n }\n private _paginator: BasePaginationComponent | null;\n\n /**\n * Data accessor function that is used for accessing data properties for sorting through\n * the default sortData function.\n * This default function assumes that the sort header IDs (which defaults to the column name)\n * matches the data's properties (e.g. column Xyz represents data['Xyz']).\n * Converts strings to lowercase characters\n * May be set to a custom function for different behavior.\n * @param data Data object that is being accessed.\n * @param sortHeaderId The name of the column that represents the data.\n */\n sortingDataAccessor: (data: T, sortHeaderId: string) => string | number = (data: T, sortHeaderId: string): string | number => {\n const value = data[sortHeaderId];\n\n if (_isNumberValue(value)) {\n const numberValue = Number(value);\n\n // Numbers beyond `MAX_SAFE_INTEGER` can't be compared reliably so we\n // return them as strings. For more info: https://goo.gl/y5vbSg\n return numberValue < MAX_SAFE_INTEGER ? numberValue : `${value}`;\n }\n\n // lowercase strings\n if (typeof value === 'string') {\n return value.toLocaleLowerCase();\n }\n\n // convert null/undefined to an empty string so they sort first\n if (value === null || value === undefined) {\n return '';\n }\n\n // leave dates or other values as is\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return value;\n };\n\n // sortingDataAccessor: ((data: T, sortHeaderId: string) => string) = (data: T, sortHeaderId: string): string => {\n // return `${data[sortHeaderId]}`.toLocaleLowerCase();\n // };\n\n /**\n * Gets a sorted copy of the data array based on the state of the HcSort. Called\n * after changes are made to the filtered data or when sort changes are emitted from HcSort.\n * By default, the function retrieves the active sort and its direction and compares data\n * by retrieving data using the sortingDataAccessor. May be overridden for a custom implementation\n * of data ordering.\n * @param data The array of data that should be sorted.\n * @param sort The connected HcSort that holds the current sort state.\n */\n sortData: (data: T[], sort: HcSort) => T[] = (data: T[], sort: HcSort): T[] => {\n const activeSorts = sort.multiSort && sort.sorts.length > 0 ? sort.sorts : [{active: sort.active, direction: sort.direction}];\n if (!activeSorts[0].active || activeSorts[0].direction === '') {\n return data;\n }\n\n return data.sort((a, b) => {\n for (const activeSort of activeSorts) {\n const valueA = this.sortingDataAccessor(a, activeSort.active);\n const valueB = this.sortingDataAccessor(b, activeSort.active);\n let comparatorResult = 0;\n if (valueA != null && valueB != null) {\n if (valueA > valueB) {\n comparatorResult = 1;\n } else if (valueA < valueB) {\n comparatorResult = -1;\n }\n } else if (valueA != null) {\n comparatorResult = 1;\n } else if (valueB != null) {\n comparatorResult = -1;\n }\n\n if (comparatorResult !== 0) {\n return comparatorResult * (activeSort.direction === 'asc' ? 1 : -1);\n }\n }\n\n return 0;\n });\n };\n\n /**\n * Checks if a data object matches the data source's filter string. By default, each data object\n * is converted to a string of its properties and returns true if the filter has\n * at least one occurrence in that string. By default, the filter string has its whitespace\n * trimmed and the match is case-insensitive. May be overridden for a custom implementation of\n * filter matching.\n * @param data Data object used to check against the filter.\n * @param filter Filter string that has been set on the data source.\n * @returns Whether the filter matches against the data\n */\n filterPredicate: (data: T, filter: string) => boolean = (data: T, filter: string): boolean => {\n // Transform the data into a lowercase string of all property values.\n const accumulator = (currentTerm, key) => `${currentTerm} ${data[key]}`;\n const dataStr = Object.keys(data)\n .reduce(accumulator, '')\n .toLowerCase();\n\n // Transform the filter by converting it to lowercase and removing whitespace.\n const transformedFilter = filter.trim().toLowerCase();\n\n return dataStr.indexOf(transformedFilter) !== -1;\n };\n\n constructor(initialData: T[] = []) {\n super();\n this._data = new BehaviorSubject(initialData);\n this._updateChangeSubscription();\n }\n\n /**\n * Subscribe to changes that should trigger an update to the table's rendered rows. When the\n * changes occur, process the current state of the filter, sort, and pagination along with\n * the provided base data and send it to the table for rendering.\n */\n _updateChangeSubscription(): void {\n // Sorting and/or pagination should be watched if HcSort and/or BasePaginationComponent are provided.\n // The events should emit whenever the component emits a change or initializes, or if no\n // component is provided, a stream with just a null event should be provided.\n // The `sortChange` and `pageChange` acts as a signal to the combineLatests below so that the\n // pipeline can progress to the next step. Note that the value from these streams are not used,\n // they purely act as a signal to progress in the pipeline.\n const sortChange: Observable = this._sort\n ? merge(this._sort.sortChange, this._sort.initialized)\n : observableOf(null);\n const pageChange: Observable = this._paginator\n ? merge(this._paginator.page, this._paginator.initialized)\n : observableOf(null);\n\n const dataStream = this._data;\n // Watch for base data or filter changes to provide a filtered set of data.\n const filteredData = combineLatest([dataStream, this._filter])\n .pipe(map(([data]) => this._filterData(data)));\n // Watch for filtered data or sort changes to provide an ordered set of data.\n const orderedData = combineLatest([filteredData, sortChange])\n .pipe(map(([data]) => this._orderData(data)));\n // Watch for ordered data or page changes to provide a paged set of data.\n const paginatedData = combineLatest([orderedData, pageChange])\n .pipe(map(([data]) => this._pageData(data)));\n // Watched for paged data changes and send the result to the table to render.\n this._renderChangesSubscription.unsubscribe();\n this._renderChangesSubscription = paginatedData.subscribe(data => this._renderData.next(data));\n }\n\n /**\n * Returns a filtered data array where each filter object contains the filter string within\n * the result of the filterTermAccessor function. If no filter is set, returns the data array\n * as provided.\n */\n _filterData(data: T[]): T[] {\n // If there is a filter string, filter out data that does not contain it.\n // Each data object is converted to a string using the function defined by filterTermAccessor.\n // May be overridden for customization.\n this.filteredData = !this.filter ? data : data.filter(obj => this.filterPredicate(obj, this.filter));\n\n if (this.paginator) {\n this._updatePaginator(this.filteredData.length);\n }\n\n return this.filteredData;\n }\n\n /**\n * Returns a sorted copy of the data if HcSort has a sort applied, otherwise just returns the\n * data array as provided. Uses the default data accessor for data lookup, unless a\n * sortDataAccessor function is defined.\n */\n _orderData(data: T[]): T[] {\n // If there is no active sort or direction, return the data without trying to sort.\n if (!this.sort) {\n return data;\n }\n\n return this.sortData(data.slice(), this.sort);\n }\n\n /**\n * Returns a paged splice of the provided data array according to the provided BasePaginationComponent's page\n * index and length. If there is no paginator provided, returns the data array as provided.\n */\n _pageData(data: T[]): T[] {\n const pager = this.paginator;\n if (!pager) {\n return data;\n }\n const startIndex = _isLoadMorePaginator(pager) ? 0 : (pager.pageNumber - 1) * pager.pageSize;\n const numElsToGrab = _isLoadMorePaginator(pager) ? pager.pageNumber * pager.pageSize : pager.pageSize;\n return data.slice().splice(startIndex, numElsToGrab);\n }\n\n /**\n * Updates the paginator to reflect the length of the filtered data, and makes sure that the page\n * index does not exceed the paginator's last page. Values are changed in a resolved promise to\n * guard against making property changes within a round of change detection.\n */\n _updatePaginator(filteredDataLength: number): void {\n Promise.resolve().then(() => {\n if (!this.paginator) {\n return;\n }\n\n this.paginator.length = filteredDataLength;\n\n // If the page index is set beyond the page, reduce it to the last page.\n if (this.paginator.pageNumber > 0) {\n const lastPageIndex = Math.ceil(this.paginator.length / this.paginator.pageSize) || 1;\n this.paginator.pageNumber = Math.min(this.paginator.pageNumber, lastPageIndex);\n }\n });\n }\n\n /**\n * Used by the HcTable. Called when it connects to the data source.\n * @docs-private\n */\n connect(): BehaviorSubject {\n return this._renderData;\n }\n\n /**\n * Used by the HcTable. Called when it is destroyed. No-op.\n * @docs-private\n */\n disconnect(): void { return; }\n}\n","import {Component, ViewEncapsulation, TemplateRef, ViewChild} from '@angular/core';\n\n/** Contains the HTML markup for tab titles */\n@Component({\n selector: 'hc-tab-title',\n template: '',\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class HcTabTitleComponent {\n @ViewChild('tabTitle')\n public tabTitle: TemplateRef;\n}\n","import {Component, Input, ContentChildren, AfterContentInit, Output, ViewEncapsulation, HostBinding, HostListener, ElementRef} from '@angular/core';\nimport type {QueryList} from '@angular/core';\nimport {EventEmitter, TemplateRef, ViewChild} from '@angular/core';\nimport {HcTabTitleComponent} from './tab-title.component';\nimport {Params} from '@angular/router';\nimport {parseBooleanAttribute} from '../../util';\n\n@Component({\n templateUrl: './tab.component.html',\n selector: `hc-tab`,\n styleUrls: ['./tab.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class TabComponent implements AfterContentInit {\n @HostBinding('class.hc-tab') _hostClass = true;\n @HostBinding('class.hc-tab-active') _active = false;\n\n /** Plain text title of the tab; for HTML support include a `hc-tab-title` element */\n @Input()\n tabTitle = '';\n /** Router path that the tab routes to. If one tab uses the routerLink in a tab set, all must use the router link.\n * Can be specified as '/path/2' or ['path', '2']\n */\n @Input()\n routerLink: string[] | string;\n\n /** Add queryParams to the routerLink */\n @Input()\n queryParams: Params;\n\n /** Tab widths default to fit content; use maxWidth to constrain and truncate the content to a fixed width (e.g. `150px`)*/\n @Input()\n maxWidth = 'none';\n\n /** If set to true, [routerLinkActiveOptions]=\"{exact: true}\" is added */\n @Input()\n exactRouteMatch: boolean;\n\n /** Overrides the default Angular hidden behavior to support overflow states; ngIf is also supported to hide tabs */\n @Input()\n get hidden(): boolean {\n return this._hidden || this._hideOverride;\n }\n set hidden( val: string | boolean ) {\n if ( parseBooleanAttribute( val ) ) {\n this._hide();\n this._hideOverride = true;\n } else {\n this._show();\n this._hideOverride = false;\n }\n this._tabHideChange.emit();\n }\n _hideOverride = false;\n\n @Output()\n _tabHideChange: EventEmitter = new EventEmitter();\n\n @Output()\n _routerActiveChange: EventEmitter = new EventEmitter();\n\n /** Emits when this tab is selected; use instead of `(click)` for click binding */\n @Output()\n tabClick: EventEmitter = new EventEmitter();\n\n @HostBinding('attr.tabindex')\n _hostIndex = 0;\n\n /** The template to be used when this tab is selected. Defaults to the content of this tab component.\n * Not used when the tab set uses routing. */\n @ViewChild('tabContent')\n tabContent: TemplateRef;\n\n _direction: string;\n _tight = false;\n _hidden = false;\n _htmlTitle: HcTabTitleComponent;\n\n @ContentChildren(HcTabTitleComponent)\n _tabTitle: QueryList;\n\n constructor( public _el: ElementRef ) {}\n\n ngAfterContentInit(): void {\n if (this._tabTitle) {\n this._htmlTitle = this._tabTitle.first;\n }\n }\n\n @HostListener('keydown.enter', ['$event']) _onEnter($event: KeyboardEvent): void {\n this._tabClickHandler($event);\n }\n\n _tabClickHandler(event: Event): void {\n // Prevent a tab anchor click from also calling the router on the host element\n event.preventDefault();\n event.stopPropagation();\n\n this.tabClick.emit(event);\n }\n\n _getWidth(): number {\n return this._el.nativeElement.scrollWidth;\n }\n\n // Listens for changes to routerLinkActive and reports to TabSet\n _isActiveChange( state: boolean ): void {\n if ( state ) {\n this._routerActiveChange.emit(this);\n }\n }\n\n /** Used by the overflow functionality to hide the tab */\n _hide(): void {\n this._hidden = true;\n this._hostIndex = -1;\n }\n\n /** Used by the overflow functionality to show the tab */\n _show(): void {\n this._hidden = false;\n this._hostIndex = 0;\n }\n}\n","@if (_direction && !_hidden) { @if (routerLink) {\n\n @if (_htmlTitle) {\n \n }\n {{ tabTitle }}\n\n} @else {\n\n @if (_htmlTitle) {\n \n }\n {{ tabTitle }}\n\n} }\n\n \n @if (_htmlTitle) {\n \n }\n {{ tabTitle }}\n \n\n\n \n\n","import {\n AfterContentInit,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n HostListener,\n Input,\n Output,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport type {QueryList} from '@angular/core';\nimport {EventEmitter, TemplateRef} from '@angular/core';\nimport {TabComponent} from '../tab/tab.component';\nimport {ActivatedRoute, Router} from '@angular/router';\nimport {Subject, interval, fromEvent, Subscription} from 'rxjs';\nimport {distinctUntilChanged, filter, take, takeUntil} from 'rxjs/operators';\nimport {parseBooleanAttribute} from '../../util';\nimport {HcPopoverAnchorDirective} from '../../pop';\n\n/** Object returned by a `selectedTabChange` event; a -1 index is returned if all tabs are deselected */\nexport class TabChangeEvent {\n constructor(public index: number, public tab: TabComponent | null) {}\n}\n\nexport function throwErrorForMissingRouterLink(tabsWithoutRouterLink: TabComponent[]): void {\n const tabTitles = tabsWithoutRouterLink.map(tab => tab.tabTitle);\n throw Error(`Routerlink missing on ${tabTitles.join(',')}`);\n}\n\nconst supportedDirections = ['horizontal', 'vertical'];\n\nexport function validateDirectionInput(inputStr: string): void {\n if (supportedDirections.indexOf(inputStr) < 0) {\n throw Error('Unsupported tab direction value: ' + inputStr);\n }\n}\n\nconst supportedOverflow = ['more', 'arrows', 'none'];\n\nexport function validateOverflowInput(inputStr: string): void {\n if (supportedOverflow.indexOf(inputStr) < 0) {\n throw Error('Unsupported tab overflow style: ' + inputStr);\n }\n}\n\nexport function tabComponentMissing(): Error {\n return new Error(`TabSet must contain at least one TabComponent. Make sure to add a hc-tab to the hc-tab-set element.`);\n}\n\nexport function invalidDefaultTab(tabVal: string | number): void {\n throw Error('Invalid default tab value: ' + tabVal + \". Must be 'none' or a value less than the total number of tabs in the set.\");\n}\n\n@Component({\n selector: `hc-tab-set`,\n templateUrl: './tab-set.component.html',\n styleUrls: ['./tab-set.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class TabSetComponent implements AfterContentInit {\n _routerEnabled = false;\n _routerDeselected = false;\n _tabArrowsEnabled = [true, true];\n private _direction = 'vertical';\n private _defaultTab: string | number = 0;\n private _stopTabSubscriptionSubject: Subject = new Subject();\n private _stopTabArrowSubject: Subject = new Subject();\n private _widthRecheckSub: Subscription;\n private _tabWidths: Array = [];\n private _tabsTotalWidth = 0;\n public _collapse = false;\n public _moreList: Array = [];\n private _selectedTabSubject = new Subject();\n private unsubscribe = new Subject();\n\n /** The content to be displayed for the currently selected tab.\n * This is read from the tab when it is selected.\n * Not used when this component uses routing.\n */\n tabContent: TemplateRef | null;\n\n @ContentChildren(TabComponent)\n _tabs: QueryList;\n\n @ViewChild('tabBar') _tabBar: ElementRef;\n\n @ViewChild('moreLink')\n _moreButton: HcPopoverAnchorDirective;\n\n _selectedTab: number | TabComponent;\n\n /** **Write-only**: specify which tab is currently selected. Does not fire a `selectedTabChange` emission. */\n @Input()\n set selectedTab(selected: number | TabComponent) {\n if ( typeof selected === 'string' ) {\n selected = Number(selected);\n }\n this._selectedTabSubject.next(selected);\n // Make sure _selectedTab is set even if we're not subscribed to _selectedTabSubject yet\n this._selectedTab = selected;\n }\n\n /** Emits when the selected tab is changed. Use to keep track of the currently selected tab. */\n @Output()\n selectedTabChange: EventEmitter = new EventEmitter();\n\n /** Specify direction of tabs as either `horizontal` or `vertical`. Defaults to `vertical` */\n @Input()\n get direction(): string {\n return this._direction;\n }\n\n set direction(directionType: string) {\n validateDirectionInput(directionType);\n this._direction = directionType;\n }\n\n /** Zero-based numerical value specifying which tab to select by default, setting to `none` means no tab\n * will be immediately selected. Defaults to 0 (the first tab).\n * For tabs using routing, the default tab will be set by the url and use this value as a fallback if no tab routerLinks match the url.\n * **NOTE** - if using the `selectedTab` param, it will override this value. */\n @Input()\n get defaultTab(): string | number {\n return this._defaultTab;\n }\n\n set defaultTab(tabValue: string | number) {\n if (!isNaN(+tabValue) || tabValue === 'none') {\n this._defaultTab = tabValue;\n } else {\n invalidDefaultTab(tabValue);\n }\n }\n\n /** Determines whether the tab set will create a router-outlet or ng-container for the tab content.\n * If set to false, the app will need to add its own container. Defaults to `true`. */\n @Input()\n get addContentContainer(): boolean {\n return this._addContentContainer;\n }\n\n set addContentContainer(value: boolean) {\n this._addContentContainer = parseBooleanAttribute(value);\n }\n\n _addContentContainer = true;\n\n /** If true, condense the default padding on all included tabs. *Defaults to `false`.* */\n @Input()\n get tight(): boolean {\n return this._tight;\n }\n set tight(value: boolean) {\n this._tight = parseBooleanAttribute(value);\n this.setTabDirection();\n }\n private _tight = false;\n\n /** When horzontal tabs overflow the container, specify either 'more', 'arrows', or 'none' for navigation control. Defaults to `more` */\n @Input()\n get overflowStyle(): string {\n return this._overflowStyle;\n }\n\n set overflowStyle(overflowType: string) {\n validateOverflowInput(overflowType);\n this._overflowStyle = overflowType;\n if ( this._tabBar ) {\n this._tabBar.nativeElement.scrollLeft = 0;\n }\n this.refreshTabWidths();\n }\n private _overflowStyle = 'more';\n\n constructor(private router: Router, private route: ActivatedRoute, private changeDetector: ChangeDetectorRef, private el: ElementRef) {}\n\n ngAfterContentInit(): void {\n // Listeners to support the selectedTab param\n const selectedChanged$ = this._selectedTabSubject.pipe(distinctUntilChanged(),filter(nextTab => nextTab !== this._selectedTab));\n selectedChanged$.pipe(takeUntil(this.unsubscribe)).subscribe(selectedTab => {\n setTimeout(() => {\n this.selectTab(selectedTab, false);\n this.changeDetector.detectChanges();\n });\n });\n\n this.setUpTabs(false);\n this.refreshTabWidths();\n\n // If using routing, selectedTab isn't set, and routerLinkActive hasn't set any active tabs, default to the first route\n if ( this._routerEnabled ) {\n setTimeout(() => {\n const noActiveTabs = !this._tabs.some(t => t._active);\n if ( this.defaultTab !== 'none' && noActiveTabs ) {\n const tabArray = this._tabs.toArray();\n if ( tabArray[Number(this.defaultTab)] ) {\n this.selectTab( tabArray[Number(this.defaultTab)] );\n }\n }\n });\n }\n\n // If links are added dynamically, recheck the tab widths\n this._tabs.changes.pipe(takeUntil(this.unsubscribe)).subscribe(() => {\n this.setUpTabs(true);\n setTimeout(() => {\n // Make sure all tabs are visible any time we are going to update the tab width array\n this._forceRecollect();\n });\n });\n }\n\n /** Forces a recalculation of the tabs to determine how many should be rolling into a More menu.\n * By default the function will use cached values of the tab widths;\n * if you've changed the title of a tab, set `forceRecalculate` to true to update the cache */\n @HostListener('window:resize')\n refreshTabWidths(forceRecalulate = false): void {\n if ( !this._tabs || !this._tabBar ) {\n return;\n }\n\n if (this._moreButton) {\n this._moreButton.closePopover();\n }\n\n this._moreList = [];\n this._collapse = false;\n\n // If the tab bar is hidden, we should skip calculations\n const tabStyles = getComputedStyle(this.el.nativeElement);\n if ( tabStyles.display === 'none' || tabStyles.visibility === 'hidden' ) {\n if ( this._widthRecheckSub ) {\n this._widthRecheckSub.unsubscribe();\n }\n return;\n }\n\n // for cases where we want to just show what we can and hide the rest\n if (this.overflowStyle === 'none') {\n this._tabs.forEach(t => t._show());\n return;\n }\n\n // The user is asking for an explicit recalculation of the cached tab widths\n // so we need to unhide any tabs currently in the more menu\n if ( forceRecalulate ) {\n this._forceRecollect();\n }\n\n // If the component hasn't fully rendered, start to loop to keep checking and only calculate widths when it has\n if ( this._tabWidths.length !== this._tabs.length || this._tabWidths.includes(0) ) {\n if ( !this._widthRecheckSub || this._widthRecheckSub.closed ) {\n const recheckInterval = interval(10);\n\n this._widthRecheckSub = recheckInterval.pipe(takeUntil(this.unsubscribe)).subscribe(loopCount => {\n // If it's been a second and the tabs still haven't rendered, bailout and don't loop forever\n if ( loopCount < 100 ) {\n this._collectTabWidths();\n this.refreshTabWidths();\n } else {\n this._widthRecheckSub.unsubscribe();\n }\n });\n }\n return;\n } else {\n if ( this._widthRecheckSub ) {\n this._widthRecheckSub.unsubscribe();\n }\n }\n\n const tabContainerWidth: number = this._tabBar.nativeElement.offsetWidth;\n\n\n // we'll make sure the selected tab is always shown, even if it was going to be in the overflow\n const selectedTabIndex = this._tabs.toArray().findIndex(t => t._active);\n let curLinks = selectedTabIndex > -1 ? this._tabWidths[selectedTabIndex] : 0;\n\n // Step through the links until we hit the end of the container, then collapse the\n // remaining into a more menu\n this._tabs.forEach((t, i) => {\n if (t._active) {\n t._show();\n return;\n }\n if ( !t._hideOverride ) {\n curLinks += this._tabWidths[i];\n }\n\n // Account for the width of either the more button or the two arrow buttons\n const overflowType: number = this.overflowStyle === 'more' ? 93 : 68;\n const moreWidth: number = this._tabsTotalWidth > tabContainerWidth ? overflowType : 0;\n\n if (curLinks + moreWidth < tabContainerWidth) {\n if ( !t._hideOverride ) {\n t._show();\n }\n } else {\n this._collapse = true;\n if ( this.overflowStyle === 'more' ) {\n t._hide();\n // Don't include a tab in the more menu that has its hidden param set to false\n if ( !t._hideOverride ) {\n this._moreList.push(t);\n }\n } else {\n t._show();\n }\n }\n });\n\n if ( this.overflowStyle === 'arrows' && this._collapse ) {\n setTimeout(() => {\n this._tabArrowCheck();\n });\n }\n }\n\n _moreClick(event: Event, tab: TabComponent): void {\n if (this._moreButton) {\n this._moreButton.closePopover();\n }\n\n tab._tabClickHandler( event );\n }\n\n _tabArrowInterval = interval(100);\n\n _handleTabsWheel(event: WheelEvent): void {\n const scrollDirection = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? Math.sign(event.deltaX) : Math.sign(event.deltaY);\n const scrollDistance = Math.sqrt(Math.pow(event.deltaX, 2) + Math.pow(event.deltaY, 2)) * scrollDirection;\n const scrollLeft = scrollDistance < 0 && Math.floor(this._tabBar.nativeElement.scrollLeft) > 0;\n const scrollRight = scrollDistance > 0\n && this._tabBar.nativeElement.scrollWidth - Math.ceil(this._tabBar.nativeElement.scrollLeft) > this._tabBar.nativeElement.offsetWidth;\n\n if (scrollLeft || scrollRight) {\n event.preventDefault();\n event.stopPropagation();\n\n this._tabBar.nativeElement.scrollLeft += scrollDistance;\n this._tabArrowCheck();\n }\n }\n\n _tabArrowClick( scrollRight: boolean ): void {\n this._tabBar.nativeElement.scrollLeft += scrollRight ? 40 : -40;\n this._tabArrowCheck();\n this._tabArrowInterval.pipe(takeUntil(this._stopTabArrowSubject)).subscribe(() => {\n this._tabBar.nativeElement.scrollLeft += scrollRight ? 40 : -40;\n this._tabArrowCheck();\n });\n fromEvent(window.document, 'mouseup').pipe(take(1)).subscribe(() => {\n this._stopTabArrowSubject.next();\n });\n }\n\n _tabArrowTouch( scrollRight: boolean ): void {\n this._tabBar.nativeElement.scrollLeft += scrollRight ? 40 : -40;\n this._tabArrowCheck();\n this._tabArrowInterval.pipe(takeUntil(this._stopTabArrowSubject)).subscribe(() => {\n this._tabBar.nativeElement.scrollLeft += scrollRight ? 40 : -40;\n this._tabArrowCheck();\n });\n fromEvent(window.document, 'touchend').pipe(take(1)).subscribe(() => {\n this._stopTabArrowSubject.next();\n });\n }\n\n _tabArrowCheck(): void {\n this._tabArrowsEnabled[0] = Math.floor(this._tabBar.nativeElement.scrollLeft) === 0 ? false : true;\n this._tabArrowsEnabled[1] = this._tabBar.nativeElement.scrollWidth - Math.ceil(this._tabBar.nativeElement.scrollLeft) <= this._tabBar.nativeElement.offsetWidth ? false : true;\n }\n\n private setUpTabs(changeEvent: boolean): void {\n if (this._tabs.length === 0) {\n throw tabComponentMissing();\n }\n\n this.checkForRouterUse();\n\n if (!this._routerEnabled && this.defaultTab !== 'none' && !changeEvent) {\n this.defaultToFirstTab();\n }\n\n this.setTabDirection();\n this.subscribeToTabEvents();\n }\n\n private _forceRecollect(): void {\n this._tabs.forEach(t => t._show());\n this._collectTabWidths();\n this.refreshTabWidths();\n }\n\n private _collectTabWidths(): void {\n this._tabWidths = [];\n this._tabsTotalWidth = 0;\n this._tabs.forEach(t => {\n const tabWidthVal = t._hideOverride ? 1 : t._getWidth();\n this._tabsTotalWidth += tabWidthVal;\n this._tabWidths.push(tabWidthVal);\n if (t._hideOverride) {\n t._hide();\n }\n });\n }\n\n private setTabDirection(): void {\n setTimeout(() =>\n this._tabs.forEach(t => {\n t._direction = this.direction;\n t._tight = this.tight;\n })\n );\n }\n\n private subscribeToTabEvents(): void {\n this._stopTabSubscriptionSubject.next();\n this._tabs.forEach(t => t.tabClick.pipe(takeUntil(this._stopTabSubscriptionSubject)).subscribe(() => this._setActive(t)));\n\n // If using tabs with routing, listen for changes to the routerLinkActive state\n if ( this._routerEnabled ) {\n this._tabs.forEach(t => t._routerActiveChange.pipe(takeUntil(this._stopTabSubscriptionSubject)).subscribe(tab => {\n this._setActive(tab, false);\n }));\n }\n\n // Watch for changes to a tab's [hidden] param to remove it from overflow calculations\n this._tabs.forEach(t => t._tabHideChange.pipe(takeUntil(this._stopTabSubscriptionSubject)).subscribe(() => {\n if ( t.hidden && t._active ) {\n this.selectTab(-1);\n }\n\n // Make sure all tabs are visible any time we are going to update the tab width array\n this._tabs.forEach(t => t._show());\n this._collectTabWidths();\n\n this.refreshTabWidths();\n this.changeDetector.detectChanges();\n }));\n }\n\n /** Sets the currently selected tab by either its numerical index or `TabComponent` object.\n * Passing a value of -1 or a hidden tab will deselect all tabs in the set. */\n selectTab(tab: number | TabComponent, shouldEmit = true): void {\n this._selectedTab = tab;\n const activeTab = typeof tab === 'number' ? this._tabs.toArray()[tab] : tab;\n\n if ( tab === -1 || activeTab?._hideOverride ) {\n this.tabContent = null;\n\n if ( this._routerEnabled ) {\n this._routerDeselected = true;\n }\n\n this._tabs.toArray().forEach(t => t._active = false);\n\n if (shouldEmit) {\n this.selectedTabChange.emit(new TabChangeEvent(-1, null));\n }\n } else if ( activeTab ) {\n if ( this._routerEnabled ) {\n const routeArray = Array.isArray(activeTab.routerLink) ? activeTab.routerLink : [activeTab.routerLink];\n this.router.navigate(routeArray, {relativeTo: this.route, queryParams: activeTab.queryParams});\n }\n this._setActive(activeTab, shouldEmit);\n }\n }\n\n _setActive(tab: TabComponent, shouldEmit = true): void {\n let activeIndex = 0;\n this._tabs.toArray().forEach((t, index) => {\n t._active = false;\n if (t === tab) {\n activeIndex = index;\n }\n });\n tab._active = true;\n this.tabContent = tab.tabContent;\n this._routerDeselected = false;\n\n // For horizontal tabs with arrows overflow, scroll the selected tab into view if it's outside the scroll area\n if ( this.overflowStyle === 'arrows' && this.direction === 'horizontal' && this._collapse ) {\n tab._el.nativeElement.scrollIntoView({ block: 'nearest' });\n }\n\n if (shouldEmit) {\n this.selectedTabChange.emit(new TabChangeEvent(activeIndex, tab));\n }\n\n this.refreshTabWidths();\n }\n\n private defaultToFirstTab() {\n if (!this._tabs.find(tab => tab._active)) {\n // setTimeout to avoid change after checked error\n // when ngFor is used as projected nodes are registered\n // and stored as part of the existing view, not\n // the view in which they are projected\n // embedded views are checked *before* AfterContentInit\n // is triggered\n const tabArray = this._tabs.toArray();\n // If the selectedTab param is being used, respect that value before defaultTab\n if ( this._selectedTab ) {\n this.selectTab( this._selectedTab );\n } else {\n if (tabArray[Number(this.defaultTab)]) {\n setTimeout(() => {\n this._setActive(tabArray[Number(this.defaultTab)]);\n });\n } else {\n invalidDefaultTab(this.defaultTab);\n }\n }\n }\n }\n\n private checkForRouterUse() {\n const countUsingRouter = this._tabs.filter(tab => tab.routerLink !== undefined).length;\n if (countUsingRouter > 0 && countUsingRouter < this._tabs.length) {\n const tabsMissingRouterLink = this._tabs.filter(tab => tab.routerLink === undefined);\n throwErrorForMissingRouterLink(tabsMissingRouterLink);\n }\n\n if (countUsingRouter === this._tabs.length) {\n this._routerEnabled = true;\n\n // If the selectedTab param is being used, respect that value for the initially selected tab before the url or defaultTab\n if ( this._selectedTab ) {\n this.selectTab( this._selectedTab );\n }\n }\n }\n\n ngOnDestroy(): void {\n this.unsubscribe.next();\n this.unsubscribe.complete();\n }\n}\n","
\n \n @if (_collapse && overflowStyle === 'arrows') {\n \n \n
\n }\n \n @if (_collapse) {\n
\n @if (overflowStyle === 'more') {\n
\n More\n \n
\n } @if (overflowStyle === 'arrows') {\n \n \n
\n }\n \n }\n \n \n @if (_addContentContainer) {\n
\n @if (_routerEnabled && !_routerDeselected) {\n \n } @if (!_routerEnabled && tabContent) {\n \n }\n
\n }\n\n\n\n
\n @for (item of _moreList; track item; let i = $index) {\n \n @if (i != _moreList.length - 1) {\n
\n } }\n
\n\n","import {RouterModule} from '@angular/router';\nimport {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {TabComponent} from './tab/tab.component';\nimport {HcTabTitleComponent} from './tab/tab-title.component';\nimport {TabSetComponent} from './tab-set/tab-set.component';\nimport {IconModule} from '../icon/icon.module';\nimport {PopModule} from '../pop/popover.module';\n\n@NgModule({\n imports: [CommonModule, RouterModule, IconModule, PopModule],\n declarations: [TabComponent, HcTabTitleComponent, TabSetComponent],\n exports: [TabComponent, HcTabTitleComponent, TabSetComponent]\n})\nexport class TabsModule {}\n","import {Component, Input, HostBinding, ViewEncapsulation} from '@angular/core';\nimport {parseBooleanAttribute} from '../util';\n\n/** Container element to help segment content visually against a gray background.\n * The tile will expand to the height and width of the content it contains. */\n@Component({\n selector: 'hc-tile',\n template: '',\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class TileComponent {\n @HostBinding('class.hc-tile')\n _hostClass = true;\n\n @HostBinding('class.hc-tile-tight')\n _tight = false;\n\n /** If true, compress the default padding in the tile. Defaults to false */\n @Input()\n get tight(): boolean {\n return this._tight;\n }\n set tight(value: boolean) {\n this._tight = parseBooleanAttribute(value);\n }\n}\n","import {Directive, HostBinding, Input} from '@angular/core';\n\nexport type TileHeaderType = 'blue' | 'title' | 'center';\nconst tileHeaderTypes: TileHeaderType[] = ['blue', 'title', 'center'];\n\n/** Applies one of the Cashmere standard tile header stylings to an element */\n@Directive({\n selector: '[hcTileHeader]',\n standalone: false\n})\nexport class TileHeaderDirective {\n private _type: TileHeaderType = 'blue';\n\n @HostBinding('class.hc-tile-header-blue')\n _headerBlue = true;\n\n @HostBinding('class.hc-tile-header-title')\n _headerTitle = false;\n\n @HostBinding('class.hc-tile-header-center')\n _headerCenter = false;\n\n /** Sets the styling of the header, choices include `blue`, `center`, and `title`; defaults to `blue` */\n @Input()\n get type(): TileHeaderType {\n return this._type;\n }\n\n set type(typeStr: TileHeaderType) {\n if (!tileHeaderTypes.includes(typeStr)) {\n throw new Error('Unsupported tile header type: ' + typeStr);\n }\n this._type = typeStr;\n\n this._headerBlue = typeStr === 'blue';\n this._headerTitle = typeStr === 'title';\n this._headerCenter = typeStr === 'center';\n }\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {TileComponent} from './tile.component';\nimport {TileHeaderDirective} from './tile-header.directive';\n\n@NgModule({\n imports: [CommonModule],\n exports: [TileComponent, TileHeaderDirective],\n declarations: [TileComponent, TileHeaderDirective]\n})\nexport class TileModule {}\n","import {Component, EventEmitter, ElementRef, ViewContainerRef, ComponentRef, ChangeDetectorRef, ViewEncapsulation, HostBinding} from '@angular/core';\nimport {trigger, state, style, transition, animate, AnimationEvent} from '@angular/animations';\nimport {Portal, CdkPortalOutletAttachedRef} from '@angular/cdk/portal';\nimport {BehaviorSubject} from 'rxjs';\nimport {HcIcon} from '../icon/icon.component';\n\nconst ANIMATION_TIMINGS = '400ms cubic-bezier(0.25, 0.8, 0.25, 1)';\n\n@Component({\n selector: 'hc-toaster',\n templateUrl: './hc-toast.component.html',\n styleUrls: ['./hc-toast.component.scss'],\n animations: [\n trigger('fade', [\n state('void', style({ transform: 'none', opacity: 0 })),\n state('enter', style({ transform: 'none', opacity: 1 })),\n state('leave', style({ transform: 'none', opacity: 0 })),\n transition('* => *', animate(ANIMATION_TIMINGS))\n ])\n ],\n encapsulation: ViewEncapsulation.None,\n standalone: false\n})\nexport class HcToastComponent {\n _styleType = 'success';\n _toastIcon = 'icon-check';\n _headerText: string;\n _bodyText: string;\n _animationState: 'void' | 'enter' | 'leave' = 'enter';\n _animationStateChanged = new EventEmitter();\n _closeClick = new EventEmitter();\n _canDismiss = false;\n _canClick = false;\n _toastPortal: Portal;\n _width = 300;\n _hasProgressBar = false;\n _progressVal: number;\n _progressWidth = '100%';\n _customImage: string | HcIcon;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n readonly _componentInstance = new BehaviorSubject(null);\n\n get _widthStr(): string {\n return this._width ? `${this._width}px` : 'auto';\n }\n\n @HostBinding('class.hc-toaster') _hostClass = true;\n\n constructor(public _el: ElementRef, public _viewContainerRef: ViewContainerRef, public _changeRef: ChangeDetectorRef) {}\n\n _onAnimationStart(event: AnimationEvent): void {\n this._animationStateChanged.emit(event);\n }\n\n _onAnimationDone(event: AnimationEvent): void {\n this._animationStateChanged.emit(event);\n }\n\n _startExitAnimation(): void {\n this._animationState = 'leave';\n }\n\n _dismissClick(event: MouseEvent): void {\n this._closeClick.emit(event);\n }\n\n _customComponentAttached(ref: CdkPortalOutletAttachedRef): void {\n if (ref instanceof ComponentRef) {\n this._componentInstance.next(ref.instance);\n }\n }\n\n _imgIsURL( val:string | HcIcon ): boolean {\n return typeof val === 'string';\n }\n\n _customFontSet( val: string | HcIcon ): string {\n const icon = val as HcIcon;\n return icon.fontSet;\n }\n\n _customFontIcon( val: string | HcIcon ): string {\n const icon = val as HcIcon;\n return icon.fontIcon;\n }\n}\n","\n @if (_styleType === 'custom') {\n
\n \n
\n } @if (_styleType !== 'custom') {\n
\n
\n @if (_customImage && _imgIsURL(_customImage)) {\n
\n
\n
\n } @if (_customImage && !_imgIsURL(_customImage)) {\n
\n \n
\n } @if (!_customImage) {\n
\n }\n
\n
\n
{{ _headerText }}
\n
{{ _bodyText }}
\n
\n @if (_canDismiss) {\n
\n
\n
\n }\n
\n } @if (_hasProgressBar) {\n
\n }\n\n","import {OverlayRef} from '@angular/cdk/overlay';\nimport {HcToastComponent} from './hc-toast.component';\nimport {Subject} from 'rxjs';\nimport {filter, take} from 'rxjs/operators';\nimport { Input, Injectable } from '@angular/core';\n\n@Injectable()\nexport class HcToastRef {\n private _beforeClose = new Subject();\n private _afterClosed = new Subject();\n\n _toastPosition: string;\n\n /** The HcToast component associated with the toast reference */\n componentInstance: HcToastComponent;\n\n /** If the `hasProgressBar` option is set to true in `hc-toast-options`, this 0-100 value can\n * be used to make it a determinate progress bar. If the progress bar is on but a value is not set,\n * the progress bar will be indeterminate.*/\n @Input()\n get progress(): number {\n return this.componentInstance._progressVal;\n }\n\n set progress(progVal: number) {\n if (progVal < 0) {\n progVal = 0;\n } else if (progVal > 100) {\n progVal = 100;\n }\n this.componentInstance._progressVal = progVal;\n this.componentInstance._progressWidth = progVal + '%';\n }\n\n constructor(public _overlayRef: OverlayRef) {}\n\n /** Closes the associated toast message with this reference */\n close(): void {\n if (this.componentInstance._animationState !== 'leave') {\n this.componentInstance._animationStateChanged\n .pipe(\n filter(event => event.phaseName === 'start'),\n take(1)\n )\n .subscribe(() => {\n this._beforeClose.next();\n this._beforeClose.complete();\n });\n\n this.componentInstance._animationStateChanged\n .pipe(\n filter(event => event.phaseName === 'done' && event.toState === 'leave'),\n take(1)\n )\n .subscribe(() => {\n this._overlayRef.dispose();\n this._afterClosed.next();\n this._afterClosed.complete();\n this.componentInstance._componentInstance.unsubscribe();\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.componentInstance = null!;\n });\n\n this.componentInstance._startExitAnimation();\n }\n }\n}\n","import {Injectable, ComponentRef, Injector, TemplateRef, Type} from '@angular/core';\nimport {Overlay, OverlayConfig, OverlayRef, PositionStrategy} from '@angular/cdk/overlay';\nimport {ComponentPortal, TemplatePortal} from '@angular/cdk/portal';\nimport {HcToastComponent} from './hc-toast.component';\nimport {HcToastOptions} from './hc-toast-options';\nimport {HcToastRef} from './hc-toast-ref';\nimport {filter, take} from 'rxjs/operators';\n\nexport type ComponentSetup = Partial | ((instance: T) => void);\nexport type ToastContentType = Type | TemplateRef;\n\n/** Toasts provide users with instant feedback on actions they've taken. For more general information,\n * use a `hc-banner`. */\n@Injectable()\nexport class HcToasterService {\n _toasts: HcToastRef[] = [];\n\n // Inject overlay service\n constructor(private injector: Injector, private _overlay: Overlay) {}\n\n /** Displays a new toaster message with the settings included in `toastOptions`. `toastContent` can be used to\n * create entirely custom toasts, but only if the type in toastOptions is set to `custom`. Be sure to set `border-radius: 5px`\n * in the style of your custom content template so it matches the toast container. If your custom toast is\n * using a component, the `componentSetup` parameter accepts an object or function to configure that component. */\n addToast(toastOptions?: HcToastOptions, toastContent?: ToastContentType, componentSetup?: ComponentSetup): HcToastRef {\n const defaultOptions: HcToastOptions = {\n type: 'success',\n position: 'bottom-right',\n timeout: 5000,\n clickDismiss: false\n };\n const options = {...defaultOptions, ...toastOptions};\n\n // Returns an OverlayRef (which is a PortalHost)\n const _overlayRef = this._createOverlay(options);\n\n // Instantiate remote control\n const _toastRef = new HcToastRef(_overlayRef);\n\n const overlayComponent = this._attachToastContainer(_overlayRef, _toastRef);\n\n _toastRef.componentInstance = overlayComponent;\n\n if (options.type === 'custom' && toastContent) {\n if (toastContent instanceof TemplateRef) {\n _toastRef.componentInstance._toastPortal = new TemplatePortal(toastContent, _toastRef.componentInstance._viewContainerRef);\n } else {\n _toastRef.componentInstance._toastPortal = new ComponentPortal(toastContent);\n if (componentSetup) {\n _toastRef.componentInstance._componentInstance.pipe(filter(c => !!c)).subscribe(c => {\n if (componentSetup instanceof Function) {\n componentSetup(c);\n } else {\n Object.keys(componentSetup).forEach(k => (c[k] = componentSetup[k]));\n }\n });\n }\n }\n }\n\n // Listen for click events to close the toast if the option is set\n if (options.clickDismiss || options.toastClicked) {\n _toastRef.componentInstance._canClick = true;\n _toastRef.componentInstance._canDismiss = options.clickDismiss ? options.clickDismiss : false;\n _toastRef.componentInstance._closeClick.subscribe(() => {\n if (options.toastClicked) {\n options.toastClicked();\n }\n if ( _toastRef.componentInstance._canDismiss ) {\n _toastRef.close();\n }\n });\n }\n\n // Set the class for the type set in options\n if (options.type) {\n if (\n options.type === 'success' ||\n options.type === 'info' ||\n options.type === 'warning' ||\n options.type === 'alert' ||\n options.type === 'custom'\n ) {\n _toastRef.componentInstance._styleType = options.type;\n } else {\n throw Error('Unsupported toaster type: ' + options.type);\n }\n }\n\n // Set the header text\n if (options.header) {\n _toastRef.componentInstance._headerText = options.header;\n }\n\n // Set the toast width\n if (options.width || options.width === 0) {\n _toastRef.componentInstance._width = options.width;\n }\n\n // Set the body text\n if (options.body) {\n _toastRef.componentInstance._bodyText = options.body;\n }\n\n // Set the custom image if one is defined\n if (options.image) {\n _toastRef.componentInstance._customImage = options.image;\n }\n\n // Store the positioning of the toast\n _toastRef._toastPosition = String(options.position);\n\n // Set progress bar\n if (options.hasProgressBar) {\n _toastRef.componentInstance._hasProgressBar = options.hasProgressBar;\n }\n\n // Set the timeout interval to close the toast if non-zero\n if (options.timeout !== 0) {\n setTimeout(() => {\n if (_toastRef.componentInstance) {\n _toastRef.close();\n }\n }, options.timeout);\n }\n\n // Cleanup functions called when the toast close animation is triggered\n _toastRef.componentInstance._animationStateChanged\n .pipe(\n filter(event => event.phaseName === 'done' && event.toState === 'leave'),\n take(1)\n )\n .subscribe(() => {\n this._removeToastPointer(_toastRef);\n if (options.toastClosed) {\n options.toastClosed();\n }\n this._updateToastPositions();\n _toastRef.componentInstance._closeClick.unsubscribe();\n });\n\n _toastRef.componentInstance._changeRef.detectChanges();\n this._toasts.push(_toastRef);\n return _toastRef;\n }\n\n /** Closes the most recent toast displayed */\n closeLastToast(): void {\n if (this._toasts.length > 0) {\n const element = this._toasts[this._toasts.length - 1];\n if (element) {\n element.close();\n }\n }\n }\n\n /** Closes currently visible toasts */\n closeAllToasts(): void {\n const len = this._toasts.length;\n for (let index = 0; index < len; index++) {\n const element = this._toasts[index];\n if (element) {\n element.close();\n }\n }\n }\n\n private _createOverlay(config: HcToastOptions) {\n const overlayConfig = this._getOverlayConfig(config);\n return this._overlay.create(overlayConfig);\n }\n\n private _attachToastContainer(overlayRef: OverlayRef, toastRef: HcToastRef) {\n const injector = this._createInjector(toastRef);\n\n const containerPortal = new ComponentPortal(HcToastComponent, null, injector);\n const containerRef: ComponentRef = overlayRef.attach(containerPortal);\n\n return containerRef.instance;\n }\n\n private _createInjector(toastRef: HcToastRef): Injector {\n return Injector.create({\n providers: [\n { provide: HcToastRef, useValue: toastRef }\n ],\n parent: this.injector\n });\n }\n\n private _getOverlayConfig(config: HcToastOptions): OverlayConfig {\n let overlayConfig;\n const positionStrategy = this._getPositionStrategy(String(config.position), this._toasts.length);\n\n if (config.position === 'top-full-width' || config.position === 'bottom-full-width') {\n overlayConfig = new OverlayConfig({positionStrategy, width: '96%', panelClass: 'overlay-pointer-events'});\n } else {\n overlayConfig = new OverlayConfig({positionStrategy, panelClass: 'overlay-pointer-events'});\n }\n\n return overlayConfig;\n }\n\n private _getPositionStrategy(position: string, index: number): PositionStrategy {\n let positionStrategy: PositionStrategy;\n const toastIndex: number = this._getLastToast(position, index);\n\n switch (position) {\n case 'top-right':\n if (toastIndex !== -1) {\n positionStrategy = this._overlay\n .position()\n .flexibleConnectedTo(this._toasts[toastIndex].componentInstance._el.nativeElement.children[0])\n .withPositions([\n {\n overlayX: 'end',\n overlayY: 'top',\n originX: 'end',\n originY: 'bottom'\n }\n ]);\n } else {\n positionStrategy = this._overlay\n .position()\n .global()\n .right('10px');\n }\n break;\n case 'top-center':\n if (toastIndex !== -1) {\n positionStrategy = this._overlay\n .position()\n .flexibleConnectedTo(this._toasts[toastIndex].componentInstance._el.nativeElement.children[0])\n .withPositions([\n {\n overlayX: 'center',\n overlayY: 'top',\n originX: 'center',\n originY: 'bottom'\n }\n ]);\n } else {\n positionStrategy = this._overlay\n .position()\n .global()\n .centerHorizontally();\n }\n break;\n case 'top-left':\n if (toastIndex !== -1) {\n positionStrategy = this._overlay\n .position()\n .flexibleConnectedTo(this._toasts[toastIndex].componentInstance._el.nativeElement.children[0])\n .withPositions([\n {\n overlayX: 'start',\n overlayY: 'top',\n originX: 'start',\n originY: 'bottom'\n }\n ]);\n } else {\n positionStrategy = this._overlay\n .position()\n .global()\n .left('10px');\n }\n break;\n case 'top-full-width':\n if (toastIndex !== -1) {\n positionStrategy = this._overlay\n .position()\n .flexibleConnectedTo(this._toasts[toastIndex].componentInstance._el.nativeElement.children[0])\n .withFlexibleDimensions(false)\n .withPositions([\n {\n overlayX: 'center',\n overlayY: 'top',\n originX: 'center',\n originY: 'bottom'\n }\n ]);\n } else {\n positionStrategy = this._overlay\n .position()\n .global()\n .centerHorizontally();\n }\n break;\n case 'bottom-right':\n if (toastIndex !== -1) {\n positionStrategy = this._overlay\n .position()\n .flexibleConnectedTo(this._toasts[toastIndex].componentInstance._el.nativeElement.children[0])\n .withPositions([\n {\n overlayX: 'end',\n overlayY: 'bottom',\n originX: 'end',\n originY: 'top'\n }\n ]);\n } else {\n positionStrategy = this._overlay\n .position()\n .global()\n .bottom()\n .right('10px');\n }\n break;\n case 'bottom-center':\n if (toastIndex !== -1) {\n positionStrategy = this._overlay\n .position()\n .flexibleConnectedTo(this._toasts[toastIndex].componentInstance._el.nativeElement.children[0])\n .withPositions([\n {\n overlayX: 'center',\n overlayY: 'bottom',\n originX: 'center',\n originY: 'top'\n }\n ]);\n } else {\n positionStrategy = this._overlay\n .position()\n .global()\n .bottom()\n .centerHorizontally();\n }\n break;\n case 'bottom-left':\n if (toastIndex !== -1) {\n positionStrategy = this._overlay\n .position()\n .flexibleConnectedTo(this._toasts[toastIndex].componentInstance._el.nativeElement.children[0])\n .withPositions([\n {\n overlayX: 'start',\n overlayY: 'bottom',\n originX: 'start',\n originY: 'top'\n }\n ]);\n } else {\n positionStrategy = this._overlay\n .position()\n .global()\n .bottom()\n .left('10px');\n }\n break;\n case 'bottom-full-width':\n if (toastIndex !== -1) {\n positionStrategy = this._overlay\n .position()\n .flexibleConnectedTo(this._toasts[toastIndex].componentInstance._el.nativeElement.children[0])\n .withFlexibleDimensions(false)\n .withPositions([\n {\n overlayX: 'center',\n overlayY: 'bottom',\n originX: 'center',\n originY: 'top'\n }\n ]);\n } else {\n positionStrategy = this._overlay\n .position()\n .global()\n .bottom()\n .centerHorizontally();\n }\n break;\n default:\n throw Error('Unsupported toaster message position: ' + position);\n }\n\n return positionStrategy;\n }\n\n // Removes the toast that was closed from the storage array\n private _removeToastPointer(toastRef: HcToastRef) {\n for (let index = 0; index < this._toasts.length; index++) {\n if (this._toasts[index] === toastRef) {\n this._toasts.splice(index, 1);\n }\n }\n }\n\n // Returns one toast back from the index provided in the position provided\n private _getLastToast(toastPos: string, startIndex: number): number {\n let toastIndex = -1;\n\n for (let index = startIndex - 1; index >= 0; index--) {\n if (this._toasts[index]._toastPosition === toastPos) {\n toastIndex = index;\n break;\n }\n }\n return toastIndex;\n }\n\n // Updates the position strategy for what toasts are connected after one is closed\n private _updateToastPositions() {\n for (let index = 0; index < this._toasts.length; index++) {\n this._toasts[index]._overlayRef.updatePositionStrategy(this._getPositionStrategy(this._toasts[index]._toastPosition, index));\n }\n }\n}\n","import {HcToastComponent} from './hc-toast.component';\nimport {HcToasterService} from './hc-toaster.service';\nimport {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {PortalModule} from '@angular/cdk/portal';\nimport {OverlayModule} from '@angular/cdk/overlay';\nimport {IconModule} from '../icon/icon.module';\n\n@NgModule({\n imports: [CommonModule, PortalModule, OverlayModule, IconModule],\n exports: [HcToastComponent],\n declarations: [HcToastComponent],\n providers: [HcToasterService]\n})\nexport class ToasterModule {}\n","import { Component, Input, ViewEncapsulation } from '@angular/core';\n\nexport function throwErrorForMissingSurveyUri(): Error {\n throw Error(`SurveyUri must be specified on element hc-typeform-survey`);\n}\n\nexport class TypeformWindow {\n public typeformEmbed: unknown;\n}\n\n@Component({\n selector: 'hc-typeform-survey',\n template: `\n