@ongov/ontario-design-system-component-library 6.0.0-alpha.5 → 6.0.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/index.d.ts +43 -0
- package/components/index.js +2169 -0
- package/components/index.js.map +1 -0
- package/components/ontario-accordion.d.ts +11 -0
- package/components/ontario-accordion.js +378 -0
- package/components/ontario-accordion.js.map +1 -0
- package/components/ontario-aside.d.ts +11 -0
- package/components/ontario-aside.js +171 -0
- package/components/ontario-aside.js.map +1 -0
- package/components/ontario-back-to-top.d.ts +11 -0
- package/components/ontario-back-to-top.js +119 -0
- package/components/ontario-back-to-top.js.map +1 -0
- package/components/ontario-badge.d.ts +11 -0
- package/components/ontario-badge.js +9 -0
- package/components/ontario-badge.js.map +1 -0
- package/components/ontario-blockquote.d.ts +11 -0
- package/components/ontario-blockquote.js +145 -0
- package/components/ontario-blockquote.js.map +1 -0
- package/components/ontario-button.d.ts +11 -0
- package/components/ontario-button.js +237 -0
- package/components/ontario-button.js.map +1 -0
- package/components/ontario-callout.d.ts +11 -0
- package/components/ontario-callout.js +170 -0
- package/components/ontario-callout.js.map +1 -0
- package/components/ontario-card-collection.d.ts +11 -0
- package/components/ontario-card-collection.js +111 -0
- package/components/ontario-card-collection.js.map +1 -0
- package/components/ontario-card.d.ts +11 -0
- package/components/ontario-card.js +389 -0
- package/components/ontario-card.js.map +1 -0
- package/components/ontario-checkboxes.d.ts +11 -0
- package/components/ontario-checkboxes.js +428 -0
- package/components/ontario-checkboxes.js.map +1 -0
- package/components/ontario-critical-alert.d.ts +11 -0
- package/components/ontario-critical-alert.js +128 -0
- package/components/ontario-critical-alert.js.map +1 -0
- package/components/ontario-date-input.d.ts +11 -0
- package/components/ontario-date-input.js +623 -0
- package/components/ontario-date-input.js.map +1 -0
- package/components/ontario-dropdown-list.d.ts +11 -0
- package/components/ontario-dropdown-list.js +449 -0
- package/components/ontario-dropdown-list.js.map +1 -0
- package/components/ontario-fieldset.d.ts +11 -0
- package/components/ontario-fieldset.js +167 -0
- package/components/ontario-fieldset.js.map +1 -0
- package/components/ontario-footer.d.ts +11 -0
- package/components/ontario-footer.js +455 -0
- package/components/ontario-footer.js.map +1 -0
- package/components/ontario-form-container.d.ts +11 -0
- package/components/ontario-form-container.js +74 -0
- package/components/ontario-form-container.js.map +1 -0
- package/components/ontario-header-overflow-menu.d.ts +11 -0
- package/components/ontario-header-overflow-menu.js +9 -0
- package/components/ontario-header-overflow-menu.js.map +1 -0
- package/components/ontario-header.d.ts +11 -0
- package/components/ontario-header.js +900 -0
- package/components/ontario-header.js.map +1 -0
- package/components/ontario-hint-expander.d.ts +11 -0
- package/components/ontario-hint-expander.js +9 -0
- package/components/ontario-hint-expander.js.map +1 -0
- package/components/ontario-hint-text.d.ts +11 -0
- package/components/ontario-hint-text.js +9 -0
- package/components/ontario-hint-text.js.map +1 -0
- package/components/ontario-icon-accessibility.d.ts +11 -0
- package/components/ontario-icon-accessibility.js +170 -0
- package/components/ontario-icon-accessibility.js.map +1 -0
- package/components/ontario-icon-account.d.ts +11 -0
- package/components/ontario-icon-account.js +170 -0
- package/components/ontario-icon-account.js.map +1 -0
- package/components/ontario-icon-add-alt.d.ts +11 -0
- package/components/ontario-icon-add-alt.js +171 -0
- package/components/ontario-icon-add-alt.js.map +1 -0
- package/components/ontario-icon-add.d.ts +11 -0
- package/components/ontario-icon-add.js +171 -0
- package/components/ontario-icon-add.js.map +1 -0
- package/components/ontario-icon-alert-error.d.ts +11 -0
- package/components/ontario-icon-alert-error.js +9 -0
- package/components/ontario-icon-alert-error.js.map +1 -0
- package/components/ontario-icon-alert-information.d.ts +11 -0
- package/components/ontario-icon-alert-information.js +9 -0
- package/components/ontario-icon-alert-information.js.map +1 -0
- package/components/ontario-icon-alert-success.d.ts +11 -0
- package/components/ontario-icon-alert-success.js +9 -0
- package/components/ontario-icon-alert-success.js.map +1 -0
- package/components/ontario-icon-alert-warning.d.ts +11 -0
- package/components/ontario-icon-alert-warning.js +9 -0
- package/components/ontario-icon-alert-warning.js.map +1 -0
- package/components/ontario-icon-arrow-up.d.ts +11 -0
- package/components/ontario-icon-arrow-up.js +171 -0
- package/components/ontario-icon-arrow-up.js.map +1 -0
- package/components/ontario-icon-attach.d.ts +11 -0
- package/components/ontario-icon-attach.js +172 -0
- package/components/ontario-icon-attach.js.map +1 -0
- package/components/ontario-icon-bookmark-off.d.ts +11 -0
- package/components/ontario-icon-bookmark-off.js +170 -0
- package/components/ontario-icon-bookmark-off.js.map +1 -0
- package/components/ontario-icon-bookmark-on.d.ts +11 -0
- package/components/ontario-icon-bookmark-on.js +170 -0
- package/components/ontario-icon-bookmark-on.js.map +1 -0
- package/components/ontario-icon-calendar.d.ts +11 -0
- package/components/ontario-icon-calendar.js +170 -0
- package/components/ontario-icon-calendar.js.map +1 -0
- package/components/ontario-icon-camera.d.ts +11 -0
- package/components/ontario-icon-camera.js +170 -0
- package/components/ontario-icon-camera.js.map +1 -0
- package/components/ontario-icon-chevron-down.d.ts +11 -0
- package/components/ontario-icon-chevron-down.js +9 -0
- package/components/ontario-icon-chevron-down.js.map +1 -0
- package/components/ontario-icon-chevron-left.d.ts +11 -0
- package/components/ontario-icon-chevron-left.js +9 -0
- package/components/ontario-icon-chevron-left.js.map +1 -0
- package/components/ontario-icon-chevron-right.d.ts +11 -0
- package/components/ontario-icon-chevron-right.js +171 -0
- package/components/ontario-icon-chevron-right.js.map +1 -0
- package/components/ontario-icon-chevron-up.d.ts +11 -0
- package/components/ontario-icon-chevron-up.js +9 -0
- package/components/ontario-icon-chevron-up.js.map +1 -0
- package/components/ontario-icon-clock.d.ts +11 -0
- package/components/ontario-icon-clock.js +170 -0
- package/components/ontario-icon-clock.js.map +1 -0
- package/components/ontario-icon-close-header.d.ts +11 -0
- package/components/ontario-icon-close-header.js +171 -0
- package/components/ontario-icon-close-header.js.map +1 -0
- package/components/ontario-icon-close.d.ts +11 -0
- package/components/ontario-icon-close.js +171 -0
- package/components/ontario-icon-close.js.map +1 -0
- package/components/ontario-icon-cloud.d.ts +11 -0
- package/components/ontario-icon-cloud.js +170 -0
- package/components/ontario-icon-cloud.js.map +1 -0
- package/components/ontario-icon-collapse.d.ts +11 -0
- package/components/ontario-icon-collapse.js +168 -0
- package/components/ontario-icon-collapse.js.map +1 -0
- package/components/ontario-icon-credit-card.d.ts +11 -0
- package/components/ontario-icon-credit-card.js +171 -0
- package/components/ontario-icon-credit-card.js.map +1 -0
- package/components/ontario-icon-critical-alert-warning.d.ts +11 -0
- package/components/ontario-icon-critical-alert-warning.js +188 -0
- package/components/ontario-icon-critical-alert-warning.js.map +1 -0
- package/components/ontario-icon-delete.d.ts +11 -0
- package/components/ontario-icon-delete.js +170 -0
- package/components/ontario-icon-delete.js.map +1 -0
- package/components/ontario-icon-document.d.ts +11 -0
- package/components/ontario-icon-document.js +170 -0
- package/components/ontario-icon-document.js.map +1 -0
- package/components/ontario-icon-download.d.ts +11 -0
- package/components/ontario-icon-download.js +170 -0
- package/components/ontario-icon-download.js.map +1 -0
- package/components/ontario-icon-dropdown-arrow.d.ts +11 -0
- package/components/ontario-icon-dropdown-arrow.js +142 -0
- package/components/ontario-icon-dropdown-arrow.js.map +1 -0
- package/components/ontario-icon-edit.d.ts +11 -0
- package/components/ontario-icon-edit.js +170 -0
- package/components/ontario-icon-edit.js.map +1 -0
- package/components/ontario-icon-email.d.ts +11 -0
- package/components/ontario-icon-email.js +171 -0
- package/components/ontario-icon-email.js.map +1 -0
- package/components/ontario-icon-expand.d.ts +11 -0
- package/components/ontario-icon-expand.js +168 -0
- package/components/ontario-icon-expand.js.map +1 -0
- package/components/ontario-icon-export.d.ts +11 -0
- package/components/ontario-icon-export.js +170 -0
- package/components/ontario-icon-export.js.map +1 -0
- package/components/ontario-icon-facebook-alt.d.ts +11 -0
- package/components/ontario-icon-facebook-alt.js +170 -0
- package/components/ontario-icon-facebook-alt.js.map +1 -0
- package/components/ontario-icon-facebook.d.ts +11 -0
- package/components/ontario-icon-facebook.js +170 -0
- package/components/ontario-icon-facebook.js.map +1 -0
- package/components/ontario-icon-favourite-off.d.ts +11 -0
- package/components/ontario-icon-favourite-off.js +170 -0
- package/components/ontario-icon-favourite-off.js.map +1 -0
- package/components/ontario-icon-favourite-on.d.ts +11 -0
- package/components/ontario-icon-favourite-on.js +170 -0
- package/components/ontario-icon-favourite-on.js.map +1 -0
- package/components/ontario-icon-filter.d.ts +11 -0
- package/components/ontario-icon-filter.js +170 -0
- package/components/ontario-icon-filter.js.map +1 -0
- package/components/ontario-icon-flickr.d.ts +11 -0
- package/components/ontario-icon-flickr.js +170 -0
- package/components/ontario-icon-flickr.js.map +1 -0
- package/components/ontario-icon-grid.d.ts +11 -0
- package/components/ontario-icon-grid.js +170 -0
- package/components/ontario-icon-grid.js.map +1 -0
- package/components/ontario-icon-help.d.ts +11 -0
- package/components/ontario-icon-help.js +171 -0
- package/components/ontario-icon-help.js.map +1 -0
- package/components/ontario-icon-instagram.d.ts +11 -0
- package/components/ontario-icon-instagram.js +170 -0
- package/components/ontario-icon-instagram.js.map +1 -0
- package/components/ontario-icon-interac-en-alt.d.ts +11 -0
- package/components/ontario-icon-interac-en-alt.js +203 -0
- package/components/ontario-icon-interac-en-alt.js.map +1 -0
- package/components/ontario-icon-interac-en.d.ts +11 -0
- package/components/ontario-icon-interac-en.js +202 -0
- package/components/ontario-icon-interac-en.js.map +1 -0
- package/components/ontario-icon-interac-fr-alt.d.ts +11 -0
- package/components/ontario-icon-interac-fr-alt.js +203 -0
- package/components/ontario-icon-interac-fr-alt.js.map +1 -0
- package/components/ontario-icon-interac-fr.d.ts +11 -0
- package/components/ontario-icon-interac-fr.js +183 -0
- package/components/ontario-icon-interac-fr.js.map +1 -0
- package/components/ontario-icon-linkedin-alt.d.ts +11 -0
- package/components/ontario-icon-linkedin-alt.js +170 -0
- package/components/ontario-icon-linkedin-alt.js.map +1 -0
- package/components/ontario-icon-linkedin.d.ts +11 -0
- package/components/ontario-icon-linkedin.js +170 -0
- package/components/ontario-icon-linkedin.js.map +1 -0
- package/components/ontario-icon-list.d.ts +11 -0
- package/components/ontario-icon-list.js +170 -0
- package/components/ontario-icon-list.js.map +1 -0
- package/components/ontario-icon-live-chat.d.ts +11 -0
- package/components/ontario-icon-live-chat.js +170 -0
- package/components/ontario-icon-live-chat.js.map +1 -0
- package/components/ontario-icon-location-off.d.ts +11 -0
- package/components/ontario-icon-location-off.js +170 -0
- package/components/ontario-icon-location-off.js.map +1 -0
- package/components/ontario-icon-location-on.d.ts +11 -0
- package/components/ontario-icon-location-on.js +170 -0
- package/components/ontario-icon-location-on.js.map +1 -0
- package/components/ontario-icon-lock-off.d.ts +11 -0
- package/components/ontario-icon-lock-off.js +170 -0
- package/components/ontario-icon-lock-off.js.map +1 -0
- package/components/ontario-icon-lock-on.d.ts +11 -0
- package/components/ontario-icon-lock-on.js +170 -0
- package/components/ontario-icon-lock-on.js.map +1 -0
- package/components/ontario-icon-map.d.ts +11 -0
- package/components/ontario-icon-map.js +170 -0
- package/components/ontario-icon-map.js.map +1 -0
- package/components/ontario-icon-mastercard-alt.d.ts +11 -0
- package/components/ontario-icon-mastercard-alt.js +161 -0
- package/components/ontario-icon-mastercard-alt.js.map +1 -0
- package/components/ontario-icon-mastercard.d.ts +11 -0
- package/components/ontario-icon-mastercard.js +173 -0
- package/components/ontario-icon-mastercard.js.map +1 -0
- package/components/ontario-icon-media-fast-forward.d.ts +11 -0
- package/components/ontario-icon-media-fast-forward.js +167 -0
- package/components/ontario-icon-media-fast-forward.js.map +1 -0
- package/components/ontario-icon-media-fast-rewind.d.ts +11 -0
- package/components/ontario-icon-media-fast-rewind.js +170 -0
- package/components/ontario-icon-media-fast-rewind.js.map +1 -0
- package/components/ontario-icon-media-pause.d.ts +11 -0
- package/components/ontario-icon-media-pause.js +167 -0
- package/components/ontario-icon-media-pause.js.map +1 -0
- package/components/ontario-icon-media-play.d.ts +11 -0
- package/components/ontario-icon-media-play.js +167 -0
- package/components/ontario-icon-media-play.js.map +1 -0
- package/components/ontario-icon-media-stop.d.ts +11 -0
- package/components/ontario-icon-media-stop.js +167 -0
- package/components/ontario-icon-media-stop.js.map +1 -0
- package/components/ontario-icon-menu-header.d.ts +11 -0
- package/components/ontario-icon-menu-header.js +171 -0
- package/components/ontario-icon-menu-header.js.map +1 -0
- package/components/ontario-icon-menu.d.ts +11 -0
- package/components/ontario-icon-menu.js +171 -0
- package/components/ontario-icon-menu.js.map +1 -0
- package/components/ontario-icon-microphone-off.d.ts +11 -0
- package/components/ontario-icon-microphone-off.js +170 -0
- package/components/ontario-icon-microphone-off.js.map +1 -0
- package/components/ontario-icon-microphone-on.d.ts +11 -0
- package/components/ontario-icon-microphone-on.js +170 -0
- package/components/ontario-icon-microphone-on.js.map +1 -0
- package/components/ontario-icon-more-vertical.d.ts +11 -0
- package/components/ontario-icon-more-vertical.js +170 -0
- package/components/ontario-icon-more-vertical.js.map +1 -0
- package/components/ontario-icon-new-window.d.ts +11 -0
- package/components/ontario-icon-new-window.js +171 -0
- package/components/ontario-icon-new-window.js.map +1 -0
- package/components/ontario-icon-next.d.ts +11 -0
- package/components/ontario-icon-next.js +170 -0
- package/components/ontario-icon-next.js.map +1 -0
- package/components/ontario-icon-notification.d.ts +11 -0
- package/components/ontario-icon-notification.js +170 -0
- package/components/ontario-icon-notification.js.map +1 -0
- package/components/ontario-icon-password-hide.d.ts +11 -0
- package/components/ontario-icon-password-hide.js +170 -0
- package/components/ontario-icon-password-hide.js.map +1 -0
- package/components/ontario-icon-password-show.d.ts +11 -0
- package/components/ontario-icon-password-show.js +170 -0
- package/components/ontario-icon-password-show.js.map +1 -0
- package/components/ontario-icon-phone.d.ts +11 -0
- package/components/ontario-icon-phone.js +171 -0
- package/components/ontario-icon-phone.js.map +1 -0
- package/components/ontario-icon-photo.d.ts +11 -0
- package/components/ontario-icon-photo.js +170 -0
- package/components/ontario-icon-photo.js.map +1 -0
- package/components/ontario-icon-pin-location-off.d.ts +11 -0
- package/components/ontario-icon-pin-location-off.js +170 -0
- package/components/ontario-icon-pin-location-off.js.map +1 -0
- package/components/ontario-icon-pin-location-on.d.ts +11 -0
- package/components/ontario-icon-pin-location-on.js +170 -0
- package/components/ontario-icon-pin-location-on.js.map +1 -0
- package/components/ontario-icon-previous.d.ts +11 -0
- package/components/ontario-icon-previous.js +170 -0
- package/components/ontario-icon-previous.js.map +1 -0
- package/components/ontario-icon-print.d.ts +11 -0
- package/components/ontario-icon-print.js +170 -0
- package/components/ontario-icon-print.js.map +1 -0
- package/components/ontario-icon-remove-alt.d.ts +11 -0
- package/components/ontario-icon-remove-alt.js +171 -0
- package/components/ontario-icon-remove-alt.js.map +1 -0
- package/components/ontario-icon-remove.d.ts +11 -0
- package/components/ontario-icon-remove.js +171 -0
- package/components/ontario-icon-remove.js.map +1 -0
- package/components/ontario-icon-replay.d.ts +11 -0
- package/components/ontario-icon-replay.js +170 -0
- package/components/ontario-icon-replay.js.map +1 -0
- package/components/ontario-icon-rss-feed.d.ts +11 -0
- package/components/ontario-icon-rss-feed.js +170 -0
- package/components/ontario-icon-rss-feed.js.map +1 -0
- package/components/ontario-icon-save.d.ts +11 -0
- package/components/ontario-icon-save.js +170 -0
- package/components/ontario-icon-save.js.map +1 -0
- package/components/ontario-icon-search-white.d.ts +11 -0
- package/components/ontario-icon-search-white.js +173 -0
- package/components/ontario-icon-search-white.js.map +1 -0
- package/components/ontario-icon-search.d.ts +11 -0
- package/components/ontario-icon-search.js +171 -0
- package/components/ontario-icon-search.js.map +1 -0
- package/components/ontario-icon-sentiment-1.d.ts +11 -0
- package/components/ontario-icon-sentiment-1.js +170 -0
- package/components/ontario-icon-sentiment-1.js.map +1 -0
- package/components/ontario-icon-sentiment-2.d.ts +11 -0
- package/components/ontario-icon-sentiment-2.js +170 -0
- package/components/ontario-icon-sentiment-2.js.map +1 -0
- package/components/ontario-icon-sentiment-3.d.ts +11 -0
- package/components/ontario-icon-sentiment-3.js +170 -0
- package/components/ontario-icon-sentiment-3.js.map +1 -0
- package/components/ontario-icon-sentiment-4.d.ts +11 -0
- package/components/ontario-icon-sentiment-4.js +170 -0
- package/components/ontario-icon-sentiment-4.js.map +1 -0
- package/components/ontario-icon-sentiment-5.d.ts +11 -0
- package/components/ontario-icon-sentiment-5.js +170 -0
- package/components/ontario-icon-sentiment-5.js.map +1 -0
- package/components/ontario-icon-settings.d.ts +11 -0
- package/components/ontario-icon-settings.js +170 -0
- package/components/ontario-icon-settings.js.map +1 -0
- package/components/ontario-icon-share.d.ts +11 -0
- package/components/ontario-icon-share.js +170 -0
- package/components/ontario-icon-share.js.map +1 -0
- package/components/ontario-icon-sort-alphabetical-ascending.d.ts +11 -0
- package/components/ontario-icon-sort-alphabetical-ascending.js +170 -0
- package/components/ontario-icon-sort-alphabetical-ascending.js.map +1 -0
- package/components/ontario-icon-sort-alphabetical-descending.d.ts +11 -0
- package/components/ontario-icon-sort-alphabetical-descending.js +170 -0
- package/components/ontario-icon-sort-alphabetical-descending.js.map +1 -0
- package/components/ontario-icon-sort-ascending.d.ts +11 -0
- package/components/ontario-icon-sort-ascending.js +170 -0
- package/components/ontario-icon-sort-ascending.js.map +1 -0
- package/components/ontario-icon-sort-descending.d.ts +11 -0
- package/components/ontario-icon-sort-descending.js +170 -0
- package/components/ontario-icon-sort-descending.js.map +1 -0
- package/components/ontario-icon-sort-variant.d.ts +11 -0
- package/components/ontario-icon-sort-variant.js +167 -0
- package/components/ontario-icon-sort-variant.js.map +1 -0
- package/components/ontario-icon-sort.d.ts +11 -0
- package/components/ontario-icon-sort.js +170 -0
- package/components/ontario-icon-sort.js.map +1 -0
- package/components/ontario-icon-tag.d.ts +11 -0
- package/components/ontario-icon-tag.js +170 -0
- package/components/ontario-icon-tag.js.map +1 -0
- package/components/ontario-icon-text-message.d.ts +11 -0
- package/components/ontario-icon-text-message.js +170 -0
- package/components/ontario-icon-text-message.js.map +1 -0
- package/components/ontario-icon-timer.d.ts +11 -0
- package/components/ontario-icon-timer.js +170 -0
- package/components/ontario-icon-timer.js.map +1 -0
- package/components/ontario-icon-transport-bicycle.d.ts +11 -0
- package/components/ontario-icon-transport-bicycle.js +170 -0
- package/components/ontario-icon-transport-bicycle.js.map +1 -0
- package/components/ontario-icon-transport-bus.d.ts +11 -0
- package/components/ontario-icon-transport-bus.js +170 -0
- package/components/ontario-icon-transport-bus.js.map +1 -0
- package/components/ontario-icon-transport-car.d.ts +11 -0
- package/components/ontario-icon-transport-car.js +170 -0
- package/components/ontario-icon-transport-car.js.map +1 -0
- package/components/ontario-icon-transport-walk.d.ts +11 -0
- package/components/ontario-icon-transport-walk.js +170 -0
- package/components/ontario-icon-transport-walk.js.map +1 -0
- package/components/ontario-icon-tty.d.ts +11 -0
- package/components/ontario-icon-tty.js +171 -0
- package/components/ontario-icon-tty.js.map +1 -0
- package/components/ontario-icon-twitter-alt.d.ts +11 -0
- package/components/ontario-icon-twitter-alt.js +170 -0
- package/components/ontario-icon-twitter-alt.js.map +1 -0
- package/components/ontario-icon-twitter.d.ts +11 -0
- package/components/ontario-icon-twitter.js +170 -0
- package/components/ontario-icon-twitter.js.map +1 -0
- package/components/ontario-icon-upload.d.ts +11 -0
- package/components/ontario-icon-upload.js +170 -0
- package/components/ontario-icon-upload.js.map +1 -0
- package/components/ontario-icon-video.d.ts +11 -0
- package/components/ontario-icon-video.js +170 -0
- package/components/ontario-icon-video.js.map +1 -0
- package/components/ontario-icon-visa.d.ts +11 -0
- package/components/ontario-icon-visa.js +148 -0
- package/components/ontario-icon-visa.js.map +1 -0
- package/components/ontario-icon-vote-dislike.d.ts +11 -0
- package/components/ontario-icon-vote-dislike.js +170 -0
- package/components/ontario-icon-vote-dislike.js.map +1 -0
- package/components/ontario-icon-vote-like.d.ts +11 -0
- package/components/ontario-icon-vote-like.js +170 -0
- package/components/ontario-icon-vote-like.js.map +1 -0
- package/components/ontario-icon-vpn-key.d.ts +11 -0
- package/components/ontario-icon-vpn-key.js +170 -0
- package/components/ontario-icon-vpn-key.js.map +1 -0
- package/components/ontario-icon-wheelchair.d.ts +11 -0
- package/components/ontario-icon-wheelchair.js +170 -0
- package/components/ontario-icon-wheelchair.js.map +1 -0
- package/components/ontario-icon-wifi.d.ts +11 -0
- package/components/ontario-icon-wifi.js +170 -0
- package/components/ontario-icon-wifi.js.map +1 -0
- package/components/ontario-icon-youtube.d.ts +11 -0
- package/components/ontario-icon-youtube.js +170 -0
- package/components/ontario-icon-youtube.js.map +1 -0
- package/components/ontario-input.d.ts +11 -0
- package/components/ontario-input.js +419 -0
- package/components/ontario-input.js.map +1 -0
- package/components/ontario-language-toggle.d.ts +11 -0
- package/components/ontario-language-toggle.js +9 -0
- package/components/ontario-language-toggle.js.map +1 -0
- package/components/ontario-loading-indicator.d.ts +11 -0
- package/components/ontario-loading-indicator.js +181 -0
- package/components/ontario-loading-indicator.js.map +1 -0
- package/components/ontario-page-alert.d.ts +11 -0
- package/components/ontario-page-alert.js +172 -0
- package/components/ontario-page-alert.js.map +1 -0
- package/components/ontario-radio-buttons.d.ts +11 -0
- package/components/ontario-radio-buttons.js +430 -0
- package/components/ontario-radio-buttons.js.map +1 -0
- package/components/ontario-search-box.d.ts +11 -0
- package/components/ontario-search-box.js +283 -0
- package/components/ontario-search-box.js.map +1 -0
- package/components/ontario-step-indicator.d.ts +11 -0
- package/components/ontario-step-indicator.js +172 -0
- package/components/ontario-step-indicator.js.map +1 -0
- package/components/ontario-table.d.ts +11 -0
- package/components/ontario-table.js +392 -0
- package/components/ontario-table.js.map +1 -0
- package/components/ontario-task-list.d.ts +11 -0
- package/components/ontario-task-list.js +211 -0
- package/components/ontario-task-list.js.map +1 -0
- package/components/ontario-task.d.ts +11 -0
- package/components/ontario-task.js +327 -0
- package/components/ontario-task.js.map +1 -0
- package/components/ontario-textarea.d.ts +11 -0
- package/components/ontario-textarea.js +327 -0
- package/components/ontario-textarea.js.map +1 -0
- package/components/p-6uqsTY-M.js +171 -0
- package/components/p-6uqsTY-M.js.map +1 -0
- package/components/p-A8xwC5QP.js +24 -0
- package/components/p-A8xwC5QP.js.map +1 -0
- package/components/p-BBhl-3u7.js +169 -0
- package/components/p-BBhl-3u7.js.map +1 -0
- package/components/p-BF0_OXTe.js +64 -0
- package/components/p-BF0_OXTe.js.map +1 -0
- package/components/p-BHTls9cv.js +286 -0
- package/components/p-BHTls9cv.js.map +1 -0
- package/components/p-BOcd5PoR.js +330 -0
- package/components/p-BOcd5PoR.js.map +1 -0
- package/components/p-BxXM4eur.js +29 -0
- package/components/p-BxXM4eur.js.map +1 -0
- package/components/p-C-t5TNzY.js +10 -0
- package/components/p-C-t5TNzY.js.map +1 -0
- package/components/p-C0Xvjp7G.js +282 -0
- package/components/p-C0Xvjp7G.js.map +1 -0
- package/components/p-C73HZQcq.js +89 -0
- package/components/p-C73HZQcq.js.map +1 -0
- package/components/p-CI209psv.js +271 -0
- package/components/p-CI209psv.js.map +1 -0
- package/components/p-CIdZS10A.js +20 -0
- package/components/p-CIdZS10A.js.map +1 -0
- package/components/p-CNDrx73J.js +145 -0
- package/components/p-CNDrx73J.js.map +1 -0
- package/components/p-CNqFEifG.js +34 -0
- package/components/p-CNqFEifG.js.map +1 -0
- package/components/p-CRMogYVY.js +168 -0
- package/components/p-CRMogYVY.js.map +1 -0
- package/components/p-CXTm9jmr.js +141 -0
- package/components/p-CXTm9jmr.js.map +1 -0
- package/components/p-CXfntdg5.js +7 -0
- package/components/p-CXfntdg5.js.map +1 -0
- package/components/p-C__FBxsY.js +145 -0
- package/components/p-C__FBxsY.js.map +1 -0
- package/components/p-Cdm-Ot0O.js +95 -0
- package/components/p-Cdm-Ot0O.js.map +1 -0
- package/components/p-CeFeBwzQ.js +331 -0
- package/components/p-CeFeBwzQ.js.map +1 -0
- package/components/p-DGFFJaKo.js +168 -0
- package/components/p-DGFFJaKo.js.map +1 -0
- package/components/p-DIe1tcOp.js +197 -0
- package/components/p-DIe1tcOp.js.map +1 -0
- package/components/p-DJOzeqZ-.js +168 -0
- package/components/p-DJOzeqZ-.js.map +1 -0
- package/components/p-DMH_JI3w.js +6 -0
- package/components/p-DMH_JI3w.js.map +1 -0
- package/components/p-DgMhpSmi.js +324 -0
- package/components/p-DgMhpSmi.js.map +1 -0
- package/components/p-TS9NoIOc.js +11 -0
- package/components/p-TS9NoIOc.js.map +1 -0
- package/components/p-V_1wpeJe.js +17 -0
- package/components/p-V_1wpeJe.js.map +1 -0
- package/components/p-dXtLd1df.js +63 -0
- package/components/p-dXtLd1df.js.map +1 -0
- package/components/p-vdzS-daB.js +145 -0
- package/components/p-vdzS-daB.js.map +1 -0
- package/package.json +9 -7
|
@@ -0,0 +1,327 @@
|
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
|
|
2
|
+
import { I as InputCaption, h as handleInputEvent, E as EventType } from './p-CeFeBwzQ.js';
|
|
3
|
+
import { b as validateLanguage, a as validatePropExists } from './p-CNqFEifG.js';
|
|
4
|
+
import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
|
|
5
|
+
import { c as constructHintTextObject } from './p-CIdZS10A.js';
|
|
6
|
+
import { t as translations } from './p-DgMhpSmi.js';
|
|
7
|
+
import { E as ErrorMessage } from './p-V_1wpeJe.js';
|
|
8
|
+
import { d as defineCustomElement$6 } from './p-CI209psv.js';
|
|
9
|
+
import { d as defineCustomElement$5 } from './p-BBhl-3u7.js';
|
|
10
|
+
import { d as defineCustomElement$4 } from './p-vdzS-daB.js';
|
|
11
|
+
import { d as defineCustomElement$3 } from './p-DJOzeqZ-.js';
|
|
12
|
+
import { d as defineCustomElement$2 } from './p-CRMogYVY.js';
|
|
13
|
+
import { v as v4 } from './p-BF0_OXTe.js';
|
|
14
|
+
|
|
15
|
+
const ontarioTextareaCss =
|
|
16
|
+
'@charset "UTF-8";.ontario-textarea:focus,.ontario-textarea:active,.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:rgb(25.5, 25.5, 25.5);margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid rgb(25.5, 25.5, 25.5)}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}p{margin:0 0 1.5rem 0}p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.99875em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-fieldset__legend{color:rgb(25.5, 25.5, 25.5);font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label{cursor:pointer;color:rgb(25.5, 25.5, 25.5);font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1>.ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-input{border:2px solid rgb(25.5, 25.5, 25.5);border-radius:4px;box-sizing:border-box;color:rgb(25.5, 25.5, 25.5);display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-error-messaging{display:flex;align-items:flex-start;margin:-0.25rem 0 0.5rem 0;color:#D81A21;max-width:48rem}.ontario-error-messaging__content{margin-left:0.5rem;margin-top:0.125rem}.ontario-input__error{border-color:#D81A21 !important}.ontario-error__hidden{display:none}.ontario-textarea{border:2px solid rgb(25.5, 25.5, 25.5);border-radius:4px;box-sizing:border-box;color:rgb(25.5, 25.5, 25.5);font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;display:block;max-width:48rem;min-height:144px;margin:0;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out;white-space:pre-wrap;width:100%}.ontario-textarea.ontario-textarea-hint-expander--true{margin-bottom:1rem}.ontario-textarea--error textarea{border:0.125rem solid #CD0000}';
|
|
17
|
+
|
|
18
|
+
const OntarioTextarea$1 = /*@__PURE__*/ proxyCustomElement(
|
|
19
|
+
class OntarioTextarea extends H {
|
|
20
|
+
constructor() {
|
|
21
|
+
super();
|
|
22
|
+
this.__registerHost();
|
|
23
|
+
this.__attachShadow();
|
|
24
|
+
this.inputOnInput = createEvent(this, 'inputOnInput');
|
|
25
|
+
this.inputOnChange = createEvent(this, 'inputOnChange');
|
|
26
|
+
this.inputOnBlur = createEvent(this, 'inputOnBlur');
|
|
27
|
+
this.inputOnFocus = createEvent(this, 'inputOnFocus');
|
|
28
|
+
this.inputErrorOccurred = createEvent(this, 'inputErrorOccurred');
|
|
29
|
+
this.internals = this.attachInternals();
|
|
30
|
+
/**
|
|
31
|
+
* This is used to determine whether the textarea is required or not.
|
|
32
|
+
* This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.
|
|
33
|
+
* If no prop is set, it will default to false (optional).
|
|
34
|
+
*/
|
|
35
|
+
this.required = false;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the textarea component loads.
|
|
39
|
+
*/
|
|
40
|
+
handleSetAppLanguage(event) {
|
|
41
|
+
if (!this.language) {
|
|
42
|
+
this.language = validateLanguage(event);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Handles an update to the language should the user request a language update from the language toggle.
|
|
47
|
+
* @param {CustomEvent} - The language that has been selected.
|
|
48
|
+
*/
|
|
49
|
+
handleHeaderLanguageToggled(event) {
|
|
50
|
+
this.language = validateLanguage(event.detail.newLanguage);
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Watch for changes to the `hintText` prop.
|
|
54
|
+
*
|
|
55
|
+
* If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.
|
|
56
|
+
*/
|
|
57
|
+
parseHintText() {
|
|
58
|
+
if (this.hintText) {
|
|
59
|
+
const hintTextObject = constructHintTextObject(this.hintText);
|
|
60
|
+
this.internalHintText = hintTextObject;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Watch for changes to the `hintExpander` prop.
|
|
65
|
+
*
|
|
66
|
+
* If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.
|
|
67
|
+
*/
|
|
68
|
+
parseHintExpander() {
|
|
69
|
+
const hintExpander = this.hintExpander;
|
|
70
|
+
if (hintExpander) {
|
|
71
|
+
if (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);
|
|
72
|
+
else this.internalHintExpander = hintExpander;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
/*
|
|
76
|
+
* Watch for changes in the `name` prop for validation purposes.
|
|
77
|
+
*
|
|
78
|
+
* Validate the `name` and make sure the `name` prop has a value.
|
|
79
|
+
* Log a warning if user doesn't input a value for the `name`.
|
|
80
|
+
*/
|
|
81
|
+
validateName(newValue) {
|
|
82
|
+
if (validatePropExists(newValue)) {
|
|
83
|
+
const message = new ConsoleMessageClass();
|
|
84
|
+
message
|
|
85
|
+
.addDesignSystemTag()
|
|
86
|
+
.addMonospaceText(' name ')
|
|
87
|
+
.addRegularText('for')
|
|
88
|
+
.addMonospaceText(' <ontario-textarea> ')
|
|
89
|
+
.addRegularText('was not provided')
|
|
90
|
+
.printMessage();
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* Watch for changes to the `caption` prop.
|
|
95
|
+
*
|
|
96
|
+
* The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.
|
|
97
|
+
* @param newValue: Caption | string
|
|
98
|
+
*/
|
|
99
|
+
updateCaptionState(newValue) {
|
|
100
|
+
this.captionState = new InputCaption(
|
|
101
|
+
this.element.tagName,
|
|
102
|
+
newValue,
|
|
103
|
+
translations,
|
|
104
|
+
this.language,
|
|
105
|
+
false,
|
|
106
|
+
this.required,
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Watch for changes to the `language` prop to render either the English or French translations
|
|
111
|
+
*/
|
|
112
|
+
updateLanguage() {
|
|
113
|
+
this.updateCaptionState(this.caption);
|
|
114
|
+
}
|
|
115
|
+
broadcastInputErrorOccurredEvent() {
|
|
116
|
+
var _a;
|
|
117
|
+
// Emit event to notify anyone who wants to listen for errors occurring
|
|
118
|
+
this.inputErrorOccurred.emit({
|
|
119
|
+
inputId: this.getId(),
|
|
120
|
+
errorMessage: (_a = this.errorMessage) !== null && _a !== void 0 ? _a : '',
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
/**
|
|
124
|
+
* Function to handle textarea events and the information pertaining to the textarea to emit.
|
|
125
|
+
*/
|
|
126
|
+
handleEvent(event, eventType) {
|
|
127
|
+
var _a, _b;
|
|
128
|
+
const input = event.target;
|
|
129
|
+
// Guard usage of `this.internals` to ensure this logic only runs in the browser.
|
|
130
|
+
// `ElementInternals` is not available during SSR, and unguarded access can cause hydration errors.
|
|
131
|
+
if (typeof ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) === 'function') {
|
|
132
|
+
this.internals.setFormValue(
|
|
133
|
+
(_b = input === null || input === void 0 ? void 0 : input.value) !== null && _b !== void 0 ? _b : '',
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
handleInputEvent(
|
|
137
|
+
event,
|
|
138
|
+
eventType,
|
|
139
|
+
input,
|
|
140
|
+
this.inputOnChange,
|
|
141
|
+
this.inputOnFocus,
|
|
142
|
+
this.inputOnBlur,
|
|
143
|
+
this.inputOnInput,
|
|
144
|
+
'input',
|
|
145
|
+
this.customOnChange,
|
|
146
|
+
this.customOnFocus,
|
|
147
|
+
this.customOnBlur,
|
|
148
|
+
this.customOnInput,
|
|
149
|
+
this.element,
|
|
150
|
+
);
|
|
151
|
+
}
|
|
152
|
+
getId() {
|
|
153
|
+
var _a;
|
|
154
|
+
return (_a = this.elementId) !== null && _a !== void 0 ? _a : '';
|
|
155
|
+
}
|
|
156
|
+
getValue() {
|
|
157
|
+
var _a;
|
|
158
|
+
return (_a = this.value) !== null && _a !== void 0 ? _a : '';
|
|
159
|
+
}
|
|
160
|
+
getClass() {
|
|
161
|
+
return this.hintExpander ? `ontario-textarea ontario-textarea-hint-expander--true` : `ontario-textarea`;
|
|
162
|
+
}
|
|
163
|
+
/**
|
|
164
|
+
* If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the textarea `aria-describedBy` attribute.
|
|
165
|
+
*/
|
|
166
|
+
async componentDidLoad() {
|
|
167
|
+
var _a;
|
|
168
|
+
this.hintTextId = await ((_a = this.hintTextRef) === null || _a === void 0 ? void 0 : _a.getHintTextId());
|
|
169
|
+
}
|
|
170
|
+
componentWillLoad() {
|
|
171
|
+
var _a;
|
|
172
|
+
this.updateCaptionState(this.caption);
|
|
173
|
+
this.elementId = (_a = this.elementId) !== null && _a !== void 0 ? _a : v4();
|
|
174
|
+
this.parseHintText();
|
|
175
|
+
this.parseHintExpander();
|
|
176
|
+
this.validateName(this.name);
|
|
177
|
+
this.language = validateLanguage(this.language);
|
|
178
|
+
}
|
|
179
|
+
render() {
|
|
180
|
+
const error = !!this.errorMessage;
|
|
181
|
+
return h(
|
|
182
|
+
'div',
|
|
183
|
+
{ key: '20de6d500b81d24c463275aed2881f07ca1d8378', class: error ? 'ontario-textarea--error' : '' },
|
|
184
|
+
this.captionState.getCaption(this.getId(), !!this.internalHintExpander),
|
|
185
|
+
this.internalHintText &&
|
|
186
|
+
h('ontario-hint-text', {
|
|
187
|
+
key: 'e1fa695a506f91f64297e9b8b5af35bff7faf96c',
|
|
188
|
+
hint: this.internalHintText.hint,
|
|
189
|
+
hintContentType: this.internalHintText.hintContentType,
|
|
190
|
+
ref: (el) => (this.hintTextRef = el),
|
|
191
|
+
}),
|
|
192
|
+
h(ErrorMessage, { key: '7774c51c0d12057c3b193f08a8952a753b71b0c1', message: this.errorMessage, error: error }),
|
|
193
|
+
h('textarea', {
|
|
194
|
+
'key': '81e5ffe34352f99fa8af12f2384903771ae67a60',
|
|
195
|
+
'aria-describedby': this.hintTextId,
|
|
196
|
+
'class': this.getClass(),
|
|
197
|
+
'id': this.getId(),
|
|
198
|
+
'name': this.name,
|
|
199
|
+
'value': this.getValue(),
|
|
200
|
+
'onInput': (e) => this.handleEvent(e, EventType.Input),
|
|
201
|
+
'onChange': (e) => this.handleEvent(e, EventType.Change),
|
|
202
|
+
'onBlur': (e) => this.handleEvent(e, EventType.Blur),
|
|
203
|
+
'onFocus': (e) => this.handleEvent(e, EventType.Focus),
|
|
204
|
+
'required': !!this.required,
|
|
205
|
+
}),
|
|
206
|
+
this.internalHintExpander &&
|
|
207
|
+
h('ontario-hint-expander', {
|
|
208
|
+
'key': 'a7aa404350682a0f70740237e9f67aeef1717080',
|
|
209
|
+
'hint': this.internalHintExpander.hint,
|
|
210
|
+
'content': this.internalHintExpander.content,
|
|
211
|
+
'hintContentType': this.internalHintExpander.hintContentType,
|
|
212
|
+
'input-exists': true,
|
|
213
|
+
}),
|
|
214
|
+
);
|
|
215
|
+
}
|
|
216
|
+
static get formAssociated() {
|
|
217
|
+
return true;
|
|
218
|
+
}
|
|
219
|
+
get element() {
|
|
220
|
+
return this;
|
|
221
|
+
}
|
|
222
|
+
static get watchers() {
|
|
223
|
+
return {
|
|
224
|
+
hintText: ['parseHintText'],
|
|
225
|
+
hintExpander: ['parseHintExpander'],
|
|
226
|
+
name: ['validateName'],
|
|
227
|
+
caption: ['updateCaptionState'],
|
|
228
|
+
language: ['updateLanguage'],
|
|
229
|
+
errorMessage: ['broadcastInputErrorOccurredEvent'],
|
|
230
|
+
};
|
|
231
|
+
}
|
|
232
|
+
static get style() {
|
|
233
|
+
return ontarioTextareaCss;
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
[
|
|
237
|
+
321,
|
|
238
|
+
'ontario-textarea',
|
|
239
|
+
{
|
|
240
|
+
caption: [1],
|
|
241
|
+
name: [1],
|
|
242
|
+
elementId: [1025, 'element-id'],
|
|
243
|
+
required: [4],
|
|
244
|
+
value: [1025],
|
|
245
|
+
hintText: [1, 'hint-text'],
|
|
246
|
+
hintExpander: [1, 'hint-expander'],
|
|
247
|
+
language: [1025],
|
|
248
|
+
errorMessage: [1025, 'error-message'],
|
|
249
|
+
customOnInput: [16, 'custom-on-input'],
|
|
250
|
+
customOnChange: [16, 'custom-on-change'],
|
|
251
|
+
customOnBlur: [16, 'custom-on-blur'],
|
|
252
|
+
customOnFocus: [16, 'custom-on-focus'],
|
|
253
|
+
hintTextId: [32],
|
|
254
|
+
internalHintText: [32],
|
|
255
|
+
internalHintExpander: [32],
|
|
256
|
+
captionState: [32],
|
|
257
|
+
},
|
|
258
|
+
[
|
|
259
|
+
[8, 'setAppLanguage', 'handleSetAppLanguage'],
|
|
260
|
+
[8, 'headerLanguageToggled', 'handleHeaderLanguageToggled'],
|
|
261
|
+
],
|
|
262
|
+
{
|
|
263
|
+
hintText: ['parseHintText'],
|
|
264
|
+
hintExpander: ['parseHintExpander'],
|
|
265
|
+
name: ['validateName'],
|
|
266
|
+
caption: ['updateCaptionState'],
|
|
267
|
+
language: ['updateLanguage'],
|
|
268
|
+
errorMessage: ['broadcastInputErrorOccurredEvent'],
|
|
269
|
+
},
|
|
270
|
+
],
|
|
271
|
+
);
|
|
272
|
+
function defineCustomElement$1() {
|
|
273
|
+
if (typeof customElements === 'undefined') {
|
|
274
|
+
return;
|
|
275
|
+
}
|
|
276
|
+
const components = [
|
|
277
|
+
'ontario-textarea',
|
|
278
|
+
'ontario-hint-expander',
|
|
279
|
+
'ontario-hint-text',
|
|
280
|
+
'ontario-icon-alert-error',
|
|
281
|
+
'ontario-icon-chevron-down',
|
|
282
|
+
'ontario-icon-chevron-up',
|
|
283
|
+
];
|
|
284
|
+
components.forEach((tagName) => {
|
|
285
|
+
switch (tagName) {
|
|
286
|
+
case 'ontario-textarea':
|
|
287
|
+
if (!customElements.get(tagName)) {
|
|
288
|
+
customElements.define(tagName, OntarioTextarea$1);
|
|
289
|
+
}
|
|
290
|
+
break;
|
|
291
|
+
case 'ontario-hint-expander':
|
|
292
|
+
if (!customElements.get(tagName)) {
|
|
293
|
+
defineCustomElement$6();
|
|
294
|
+
}
|
|
295
|
+
break;
|
|
296
|
+
case 'ontario-hint-text':
|
|
297
|
+
if (!customElements.get(tagName)) {
|
|
298
|
+
defineCustomElement$5();
|
|
299
|
+
}
|
|
300
|
+
break;
|
|
301
|
+
case 'ontario-icon-alert-error':
|
|
302
|
+
if (!customElements.get(tagName)) {
|
|
303
|
+
defineCustomElement$4();
|
|
304
|
+
}
|
|
305
|
+
break;
|
|
306
|
+
case 'ontario-icon-chevron-down':
|
|
307
|
+
if (!customElements.get(tagName)) {
|
|
308
|
+
defineCustomElement$3();
|
|
309
|
+
}
|
|
310
|
+
break;
|
|
311
|
+
case 'ontario-icon-chevron-up':
|
|
312
|
+
if (!customElements.get(tagName)) {
|
|
313
|
+
defineCustomElement$2();
|
|
314
|
+
}
|
|
315
|
+
break;
|
|
316
|
+
}
|
|
317
|
+
});
|
|
318
|
+
}
|
|
319
|
+
defineCustomElement$1();
|
|
320
|
+
|
|
321
|
+
const OntarioTextarea = OntarioTextarea$1;
|
|
322
|
+
const defineCustomElement = defineCustomElement$1;
|
|
323
|
+
|
|
324
|
+
export { OntarioTextarea, defineCustomElement };
|
|
325
|
+
//# sourceMappingURL=ontario-textarea.js.map
|
|
326
|
+
|
|
327
|
+
//# sourceMappingURL=ontario-textarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"ontario-textarea.js","mappings":"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","names":["OntarioTextarea","__stencil_proxyCustomElement","HTMLElement","uuid"],"sources":["src/components/ontario-textarea/ontario-textarea.scss?tag=ontario-textarea&encapsulation=shadow","src/components/ontario-textarea/ontario-textarea.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n\n@use '../../styles/fieldsets.scss';\n@use '../../styles/labels.scss';\n@use '../../styles/text-inputs.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-textarea-border-width: 0.125rem;\n\n.ontario-textarea {\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-black;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tline-height: globalVariables.$line-height-default;\n\tdisplay: block;\n\tmax-width: globalVariables.$standard-width;\n\tmin-height: 144px;\n\tmargin: spacing.$spacing-0;\n\tpadding: 0.625rem spacing.$spacing-4;\n\ttransition: focusPlaceholders.$ontario-focus-transition;\n\twhite-space: pre-wrap;\n\twidth: globalVariables.$full-width;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n}\n\n.ontario-textarea.ontario-textarea-hint-expander--true {\n\tmargin-bottom: spacing.$spacing-4;\n}\n\n.ontario-textarea--error {\n\ttextarea {\n\t\tborder: $ontario-textarea-border-width solid colours.$ontario-colour-alert;\n\t}\n}\n","import { Component, Event, h, Prop, State, Listen, Watch, Element, EventEmitter, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint, Input } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { validatePropExists, validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\n\n@Component({\n\ttag: 'ontario-textarea',\n\tstyleUrl: 'ontario-textarea.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioTextarea implements Input {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display as the textarea label.\n\t *\n\t * @example\n\t * <ontario-input\n\t * caption='{\n\t * \"captionText\": \"Address\",\n\t * \"captionType\": \"heading\",\n\t * }'\n\t * required=\"true\"\n\t * ...>\n\t * </ontario-input>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The name assigned to the textarea. The name value is used to reference form data after a form is submitted.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * The unique identifier of the textarea. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * This is used to determine whether the textarea is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * The textarea content value.\n\t */\n\t@Prop({ mutable: true }) value?: string;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the textarea.\n\t * This is optional.\n\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the textarea component.\n\t * This is passed in as an object with key-value pairs.\n\t *\n\t * This is optional.\n\t *\n\t * @example\n\t * <ontario-textarea\n\t * caption='{\n\t * \"captionText\": \"What are your thoughts\",\n\t * \"captionType\": \"heading\",\n\t * }'\n\t * \t name: \"textarea\"\n\t * hint-expander='{\n\t * \"hint\": \"This is the hint expander\",\n\t * \"content\": \"This is the content for the hint expander\"\n\t * }'\n\t * required=\"true\"\n\t * >\n\t * </ontario-textarea>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * Set this to display an error message\n\t */\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/**\n\t * Used to add a custom function to the textarea onInput event.\n\t */\n\t@Prop() customOnInput?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the textarea onChange event.\n\t */\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the textarea onBlur event.\n\t */\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the textarea onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used for the `aria-describedby` value of the textarea. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\n\n\t/**\n\t * The hint text options are re-assigned to the internalHintText array.\n\t */\n\t@State() private internalHintText: Hint;\n\n\t/**\n\t * The hint expander options are re-assigned to the internalHintExpander array.\n\t */\n\t@State() private internalHintExpander: HintExpander;\n\n\t/**\n\t * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * Emitted when a input event occurs when an input has been changed.\n\t */\n\t@Event() inputOnInput: EventEmitter<InputInputEvent>;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t */\n\t@Event() inputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has lost focus.\n\t */\n\t@Event() inputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has gained focus.\n\t */\n\t@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ inputId: string; errorMessage: string }>;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the textarea component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t/**\n\t * Handles an update to the language should the user request a language update from the language toggle.\n\t * @param {CustomEvent} - The language that has been selected.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\n\t}\n\n\t/**\n\t * Watch for changes to the `hintText` prop.\n\t *\n\t * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t */\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `hintExpander` prop.\n\t *\n\t * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.\n\t */\n\t@Watch('hintExpander')\n\tprivate parseHintExpander() {\n\t\tconst hintExpander = this.hintExpander;\n\t\tif (hintExpander) {\n\t\t\tif (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);\n\t\t\telse this.internalHintExpander = hintExpander;\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `name` prop for validation purposes.\n\t *\n\t * Validate the `name` and make sure the `name` prop has a value.\n\t * Log a warning if user doesn't input a value for the `name`.\n\t */\n\t@Watch('name')\n\tvalidateName(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' name ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-textarea> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ inputId: this.getId(), errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * Function to handle textarea events and the information pertaining to the textarea to emit.\n\t */\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLTextAreaElement | null;\n\n\t\t// Guard usage of `this.internals` to ensure this logic only runs in the browser.\n\t\t// `ElementInternals` is not available during SSR, and unguarded access can cause hydration errors.\n\t\tif (typeof this.internals?.setFormValue === 'function') {\n\t\t\tthis.internals.setFormValue(input?.value ?? '');\n\t\t}\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.inputOnChange,\n\t\t\tthis.inputOnFocus,\n\t\t\tthis.inputOnBlur,\n\t\t\tthis.inputOnInput,\n\t\t\t'input',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tthis.customOnInput,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getValue(): string | number {\n\t\treturn this.value ?? '';\n\t}\n\n\tprivate getClass(): string {\n\t\treturn this.hintExpander ? `ontario-textarea ontario-textarea-hint-expander--true` : `ontario-textarea`;\n\t}\n\n\t/**\n\t * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the textarea `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.validateName(this.name);\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst error = !!this.errorMessage;\n\t\treturn (\n\t\t\t<div class={error ? 'ontario-textarea--error' : ''}>\n\t\t\t\t{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}\n\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t)}\n\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t<textarea\n\t\t\t\t\taria-describedby={this.hintTextId}\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t></textarea>\n\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\tinput-exists\n\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import { p as proxyCustomElement, H, h } from './index.js';
|
|
2
|
+
import { r as retrieveEnumKeys } from './p-DIe1tcOp.js';
|
|
3
|
+
import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
|
|
4
|
+
import { a as isClientSideRendering } from './p-TS9NoIOc.js';
|
|
5
|
+
import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
|
|
6
|
+
|
|
7
|
+
var BadgeColourToClass;
|
|
8
|
+
(function (BadgeColourToClass) {
|
|
9
|
+
BadgeColourToClass['teal'] = 'ontario-badge--default-heavy';
|
|
10
|
+
BadgeColourToClass['lightTeal'] = 'ontario-badge--default-light';
|
|
11
|
+
BadgeColourToClass['black'] = 'ontario-badge--neutral-heavy';
|
|
12
|
+
BadgeColourToClass['grey'] = 'ontario-badge--neutral-light';
|
|
13
|
+
BadgeColourToClass['red'] = 'ontario-badge--alert-heavy';
|
|
14
|
+
BadgeColourToClass['yellow'] = 'ontario-badge--warning-heavy';
|
|
15
|
+
BadgeColourToClass['green'] = 'ontario-badge--success-heavy';
|
|
16
|
+
BadgeColourToClass['white'] = 'ontario-badge--white';
|
|
17
|
+
BadgeColourToClass['darkGrey'] = 'ontario-badge--grey';
|
|
18
|
+
})(BadgeColourToClass || (BadgeColourToClass = {}));
|
|
19
|
+
const BadgeColours = retrieveEnumKeys(BadgeColourToClass);
|
|
20
|
+
|
|
21
|
+
const ontarioBadgeCss =
|
|
22
|
+
'.ontario-badge__container{display:flex;flex-direction:column;gap:2.5rem;align-items:flex-start;padding:1.5rem 1rem}.ontario-badge__label{display:block;text-align:left;font-weight:600;margin-bottom:0.75rem;font-size:0.875rem;color:rgb(76.5, 76.5, 76.5)}.ontario-badge{display:inline-block;background-color:#E2F0F4;color:rgb(76.5, 76.5, 76.5);padding:0.25rem 0.5rem;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:700;line-height:1.5625rem;letter-spacing:0.03rem;text-transform:uppercase}.ontario-badge--default-light{background-color:#E2F0F4;color:rgb(76.5, 76.5, 76.5)}.ontario-badge--default-heavy{background-color:#1080A6;color:#FFFFFF}.ontario-badge--neutral-light{background-color:rgb(242.25, 242.25, 242.25);color:rgb(76.5, 76.5, 76.5)}.ontario-badge--neutral-heavy{background-color:rgb(25.5, 25.5, 25.5);color:#FFFFFF}.ontario-badge--alert-heavy{background-color:#CD0000;color:#FFFFFF}.ontario-badge--warning-heavy{background-color:#FFD440;color:rgb(25.5, 25.5, 25.5)}.ontario-badge--success-heavy{background-color:#118847;color:#FFFFFF}.ontario-badge--white{background-color:#FFFFFF;color:rgb(76.5, 76.5, 76.5);border:0.0625rem solid rgb(76.5, 76.5, 76.5)}.ontario-badge--grey{background-color:#cccccc;color:rgb(25.5, 25.5, 25.5)}';
|
|
23
|
+
|
|
24
|
+
const OntarioBadge = /*@__PURE__*/ proxyCustomElement(
|
|
25
|
+
class OntarioBadge extends H {
|
|
26
|
+
constructor() {
|
|
27
|
+
super();
|
|
28
|
+
this.__registerHost();
|
|
29
|
+
this.__attachShadow();
|
|
30
|
+
this.internals = this.attachInternals();
|
|
31
|
+
/**
|
|
32
|
+
* The colour of the badge.
|
|
33
|
+
*/
|
|
34
|
+
this.colour = 'teal';
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Watch for changes in the `label` prop for validation purposes.
|
|
38
|
+
*
|
|
39
|
+
* If no `label` value or host.textContent is provided, a warning message will be printed.
|
|
40
|
+
*/
|
|
41
|
+
validateLabel() {
|
|
42
|
+
if (!this.getBadgeLabel()) {
|
|
43
|
+
const message = new ConsoleMessageClass();
|
|
44
|
+
message
|
|
45
|
+
.addDesignSystemTag()
|
|
46
|
+
.addMonospaceText(' a label ')
|
|
47
|
+
.addRegularText('for')
|
|
48
|
+
.addMonospaceText(' <ontario-badge> ')
|
|
49
|
+
.addRegularText('was not provided.')
|
|
50
|
+
.printMessage();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Watch for changes to the `colour` prop.
|
|
55
|
+
*
|
|
56
|
+
* If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.
|
|
57
|
+
*
|
|
58
|
+
* @returns {BadgeColour}
|
|
59
|
+
*/
|
|
60
|
+
validateColour() {
|
|
61
|
+
if (this.colour) {
|
|
62
|
+
if (validateValueAgainstArray(this.colour, BadgeColours)) {
|
|
63
|
+
return this.colour;
|
|
64
|
+
} else {
|
|
65
|
+
const message = new ConsoleMessageClass();
|
|
66
|
+
message
|
|
67
|
+
.addDesignSystemTag()
|
|
68
|
+
.addMonospaceText(` colour ${this.colour} `)
|
|
69
|
+
.addRegularText('for')
|
|
70
|
+
.addMonospaceText(' <ontario-badge> ')
|
|
71
|
+
.addRegularText('does not match one of the valid colour types. A default colour of `teal` will be applied.')
|
|
72
|
+
.printMessage();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
return this.setBadgeColour('teal');
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Programatically set and return the colour prop.
|
|
79
|
+
*
|
|
80
|
+
* @prop {BadgeColour} colour
|
|
81
|
+
*
|
|
82
|
+
* @returns {BadgeColour}
|
|
83
|
+
*/
|
|
84
|
+
setBadgeColour(colour) {
|
|
85
|
+
this.colour = colour;
|
|
86
|
+
return this.colour;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Returns badge label depending on if the label prop was set or
|
|
90
|
+
* if the host.textContent (text in-between the opening and closing tag) was set.
|
|
91
|
+
*
|
|
92
|
+
* The label prop takes priority.
|
|
93
|
+
*
|
|
94
|
+
* @returns {string | null}
|
|
95
|
+
*/
|
|
96
|
+
getBadgeLabel() {
|
|
97
|
+
var _a;
|
|
98
|
+
if (this.label) return this.label;
|
|
99
|
+
// SSR safety check: ensure we're in the client-side environment before accessing textContent
|
|
100
|
+
if (
|
|
101
|
+
isClientSideRendering() &&
|
|
102
|
+
typeof ((_a = this.host) === null || _a === void 0 ? void 0 : _a.textContent) !== 'undefined'
|
|
103
|
+
) {
|
|
104
|
+
return this.host.textContent;
|
|
105
|
+
}
|
|
106
|
+
return null;
|
|
107
|
+
}
|
|
108
|
+
componentWillLoad() {
|
|
109
|
+
this.validateColour();
|
|
110
|
+
this.validateLabel();
|
|
111
|
+
}
|
|
112
|
+
render() {
|
|
113
|
+
return h(
|
|
114
|
+
'span',
|
|
115
|
+
{
|
|
116
|
+
'key': '8cc536810ec1ebad05bbe2a14b0bbdc360d0cf54',
|
|
117
|
+
'class': `ontario-badge ${BadgeColourToClass[this.colour]}`,
|
|
118
|
+
'aria-label': this.ariaLabelText,
|
|
119
|
+
},
|
|
120
|
+
this.getBadgeLabel(),
|
|
121
|
+
);
|
|
122
|
+
}
|
|
123
|
+
get host() {
|
|
124
|
+
return this;
|
|
125
|
+
}
|
|
126
|
+
static get watchers() {
|
|
127
|
+
return {
|
|
128
|
+
label: ['validateLabel'],
|
|
129
|
+
colour: ['validateColour'],
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
static get style() {
|
|
133
|
+
return ontarioBadgeCss;
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
[
|
|
137
|
+
257,
|
|
138
|
+
'ontario-badge',
|
|
139
|
+
{
|
|
140
|
+
colour: [1025],
|
|
141
|
+
label: [1],
|
|
142
|
+
ariaLabelText: [1025, 'aria-label-text'],
|
|
143
|
+
},
|
|
144
|
+
undefined,
|
|
145
|
+
{
|
|
146
|
+
label: ['validateLabel'],
|
|
147
|
+
colour: ['validateColour'],
|
|
148
|
+
},
|
|
149
|
+
],
|
|
150
|
+
);
|
|
151
|
+
function defineCustomElement() {
|
|
152
|
+
if (typeof customElements === 'undefined') {
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
const components = ['ontario-badge'];
|
|
156
|
+
components.forEach((tagName) => {
|
|
157
|
+
switch (tagName) {
|
|
158
|
+
case 'ontario-badge':
|
|
159
|
+
if (!customElements.get(tagName)) {
|
|
160
|
+
customElements.define(tagName, OntarioBadge);
|
|
161
|
+
}
|
|
162
|
+
break;
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
defineCustomElement();
|
|
167
|
+
|
|
168
|
+
export { OntarioBadge as O, defineCustomElement as d };
|
|
169
|
+
//# sourceMappingURL=p-6uqsTY-M.js.map
|
|
170
|
+
|
|
171
|
+
//# sourceMappingURL=p-6uqsTY-M.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-6uqsTY-M.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-badge/ontario-badge.types.ts","src/components/ontario-badge/ontario-badge.scss?tag=ontario-badge&encapsulation=shadow","src/components/ontario-badge/ontario-badge.tsx"],"sourcesContent":["import { retrieveEnumKeys } from '../../utils/helper/utils';\n\nexport enum BadgeColourToClass {\n\tteal = 'ontario-badge--default-heavy',\n\tlightTeal = 'ontario-badge--default-light',\n\tblack = 'ontario-badge--neutral-heavy',\n\tgrey = 'ontario-badge--neutral-light',\n\tred = 'ontario-badge--alert-heavy',\n\tyellow = 'ontario-badge--warning-heavy',\n\tgreen = 'ontario-badge--success-heavy',\n\twhite = 'ontario-badge--white',\n\tdarkGrey = 'ontario-badge--grey',\n}\n\nexport const BadgeColours = retrieveEnumKeys(BadgeColourToClass);\n\nexport type BadgeColour = keyof typeof BadgeColourToClass;\n","@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as\n\tglobalFunctions;\n\n.ontario-badge__container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: spacing.$spacing-7;\n\talign-items: flex-start;\n\tpadding: spacing.$spacing-5 spacing.$spacing-4;\n}\n\n.ontario-badge__label {\n\tdisplay: block;\n\ttext-align: left;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tmargin-bottom: spacing.$spacing-3;\n\tfont-size: fontSizes.$ontario-font-size-small;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge {\n\tdisplay: inline-block;\n\tbackground-color: colours.$ontario-colour-information-light;\n\tcolor: colours.$ontario-greyscale-70;\n\tpadding: spacing.$spacing-1 spacing.$spacing-2;\n\tfont-family: fonts.$ontario-font-raleway-modified;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\tline-height: globalFunctions.px-to-rem(25);\n\tletter-spacing: 0.03rem;\n\ttext-transform: uppercase;\n}\n\n.ontario-badge--default-light {\n\tbackground-color: colours.$ontario-colour-information-light;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--default-heavy {\n\tbackground-color: colours.$ontario-colour-information;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--neutral-light {\n\tbackground-color: colours.$ontario-greyscale-5;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--neutral-heavy {\n\tbackground-color: colours.$ontario-colour-black;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--alert-heavy {\n\tbackground-color: colours.$ontario-colour-alert;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--warning-heavy {\n\tbackground-color: colours.$ontario-colour-warning;\n\tcolor: colours.$ontario-colour-black;\n}\n\n.ontario-badge--success-heavy {\n\tbackground-color: colours.$ontario-colour-success;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--white {\n\tbackground-color: colours.$ontario-colour-white;\n\tcolor: colours.$ontario-greyscale-70;\n\tborder: globalFunctions.px-to-rem(1) solid colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--grey {\n\tbackground-color: colours.$ontario-greyscale-20;\n\tcolor: colours.$ontario-colour-black;\n}\n","import { Component, Prop, Element, h, Watch, AttachInternals } from '@stencil/core';\n\nimport { BadgeColour, BadgeColours, BadgeColourToClass } from './ontario-badge.types';\n\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { isClientSideRendering } from '../../utils/common/environment';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\n@Component({\n\ttag: 'ontario-badge',\n\tstyleUrl: 'ontario-badge.scss',\n\tshadow: true,\n})\nexport class OntarioBadge {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The colour of the badge.\n\t */\n\t@Prop({ mutable: true }) colour: BadgeColour = 'teal';\n\n\t/**\n\t * The label for the badge.\n\t *\n\t * Offical guidance is to keep the label length within 15 characters.\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * An aria label for screen readers.\n\t *\n\t * Used to provide more context to screen readers if necessary.\n\t *\n\t * This property is optional.\n\t *\n\t * @example\n\t * <ontario-badge aria-label-text=\"This training is currently in progress.\">In progress</ontario-badge>\n\t */\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/**\n\t * Watch for changes in the `label` prop for validation purposes.\n\t *\n\t * If no `label` value or host.textContent is provided, a warning message will be printed.\n\t */\n\t@Watch('label')\n\tvalidateLabel() {\n\t\tif (!this.getBadgeLabel()) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' a label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-badge> ')\n\t\t\t\t.addRegularText('was not provided.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `colour` prop.\n\t *\n\t * If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.\n\t *\n\t * @returns {BadgeColour}\n\t */\n\t@Watch('colour')\n\tvalidateColour(): BadgeColour {\n\t\tif (this.colour) {\n\t\t\tif (validateValueAgainstArray(this.colour, BadgeColours)) {\n\t\t\t\treturn this.colour;\n\t\t\t} else {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` colour ${this.colour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-badge> ')\n\t\t\t\t\t.addRegularText('does not match one of the valid colour types. A default colour of `teal` will be applied.')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\treturn this.setBadgeColour('teal');\n\t}\n\n\t/**\n\t * Programatically set and return the colour prop.\n\t *\n\t * @prop {BadgeColour} colour\n\t *\n\t * @returns {BadgeColour}\n\t */\n\tsetBadgeColour(colour: BadgeColour): BadgeColour {\n\t\tthis.colour = colour;\n\t\treturn this.colour;\n\t}\n\n\t/**\n\t * Returns badge label depending on if the label prop was set or\n\t * if the host.textContent (text in-between the opening and closing tag) was set.\n\t *\n\t * The label prop takes priority.\n\t *\n\t * @returns {string | null}\n\t */\n\tgetBadgeLabel(): string | null {\n\t\tif (this.label) return this.label;\n\n\t\t// SSR safety check: ensure we're in the client-side environment before accessing textContent\n\t\tif (isClientSideRendering() && typeof this.host?.textContent !== 'undefined') {\n\t\t\treturn this.host.textContent;\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateLabel();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<span class={`ontario-badge ${BadgeColourToClass[this.colour]}`} aria-label={this.ariaLabelText}>\n\t\t\t\t{this.getBadgeLabel()}\n\t\t\t</span>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// Define an enum for task statuses
|
|
2
|
+
var TaskStatuses;
|
|
3
|
+
(function (TaskStatuses) {
|
|
4
|
+
TaskStatuses['NotStarted'] = 'notStarted';
|
|
5
|
+
TaskStatuses['InProgress'] = 'inProgress';
|
|
6
|
+
TaskStatuses['Completed'] = 'completed';
|
|
7
|
+
TaskStatuses['CannotStartYet'] = 'cannotStartYet';
|
|
8
|
+
TaskStatuses['Error'] = 'error';
|
|
9
|
+
TaskStatuses['Optional'] = 'optional';
|
|
10
|
+
})(TaskStatuses || (TaskStatuses = {}));
|
|
11
|
+
// Map task statuses to badge colours
|
|
12
|
+
const TaskToBadgeColour = {
|
|
13
|
+
[TaskStatuses.NotStarted]: 'lightTeal',
|
|
14
|
+
[TaskStatuses.InProgress]: 'teal',
|
|
15
|
+
[TaskStatuses.Completed]: 'white',
|
|
16
|
+
[TaskStatuses.CannotStartYet]: 'darkGrey',
|
|
17
|
+
[TaskStatuses.Error]: 'red',
|
|
18
|
+
[TaskStatuses.Optional]: 'grey',
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export { TaskStatuses as T, TaskToBadgeColour as a };
|
|
22
|
+
//# sourceMappingURL=p-A8xwC5QP.js.map
|
|
23
|
+
|
|
24
|
+
//# sourceMappingURL=p-A8xwC5QP.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-A8xwC5QP.js","mappings":"AAAA;IACY;AAAZ,CAAA,UAAY,YAAY,EAAA;AACvB,IAAA,YAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzB,IAAA,YAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzB,IAAA,YAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,YAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC;AACjC,IAAA,YAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,YAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACtB,CAAC,EAPW,YAAY,KAAZ,YAAY,GAOvB,EAAA,CAAA,CAAA;AAED;AACa,MAAA,iBAAiB,GAAG;AAChC,IAAA,CAAC,YAAY,CAAC,UAAU,GAAG,WAAW;AACtC,IAAA,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM;AACjC,IAAA,CAAC,YAAY,CAAC,SAAS,GAAG,OAAO;AACjC,IAAA,CAAC,YAAY,CAAC,cAAc,GAAG,UAAU;AACzC,IAAA,CAAC,YAAY,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,CAAC,YAAY,CAAC,QAAQ,GAAG,MAAM;;;;;","names":[],"sources":["src/utils/common/task-statuses.enum.ts"],"sourcesContent":["// Define an enum for task statuses\nexport enum TaskStatuses {\n\tNotStarted = 'notStarted',\n\tInProgress = 'inProgress',\n\tCompleted = 'completed',\n\tCannotStartYet = 'cannotStartYet',\n\tError = 'error',\n\tOptional = 'optional',\n}\n\n// Map task statuses to badge colours\nexport const TaskToBadgeColour = {\n\t[TaskStatuses.NotStarted]: 'lightTeal',\n\t[TaskStatuses.InProgress]: 'teal',\n\t[TaskStatuses.Completed]: 'white',\n\t[TaskStatuses.CannotStartYet]: 'darkGrey',\n\t[TaskStatuses.Error]: 'red',\n\t[TaskStatuses.Optional]: 'grey',\n} as const;\n\n// Define the type for task statuses\nexport type TaskStatus = keyof typeof TaskStatuses;\n\n// Define the type for badge colours\nexport type TaskBadgeColour = (typeof TaskToBadgeColour)[TaskStatuses];\n"],"version":3}
|