@hashicorp/design-system-components 4.24.1-rc-20251103142501 → 4.24.1-rc-20251104114028
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/declarations/components/hds/flyout/index.d.ts +2 -1
- package/declarations/components/hds/icon/index.d.ts +1 -1
- package/declarations/components/hds/modal/index.d.ts +1 -0
- package/declarations/components/hds/stepper/task/indicator.d.ts +1 -1
- package/declarations/components.d.ts +0 -1
- package/declarations/services.d.ts +0 -1
- package/declarations/template-registry.d.ts +0 -3
- package/dist/components/hds/flyout/index.js +11 -8
- package/dist/components/hds/flyout/index.js.map +1 -1
- package/dist/components/hds/form/super-select/multiple/base.js +1 -1
- package/dist/components/hds/modal/index.js +25 -22
- package/dist/components/hds/modal/index.js.map +1 -1
- package/dist/components.js +0 -1
- package/dist/components.js.map +1 -1
- package/dist/services.js +1 -1
- package/dist/styles/@hashicorp/design-system-components.css +1563 -383
- package/dist/styles/@hashicorp/design-system-components.scss +59 -4
- package/dist/styles/@hashicorp/design-system-components.scss.map +1 -0
- package/dist/styles/components/app-header.scss +6 -1
- package/dist/styles/components/form/super-select.scss +4 -0
- package/dist/styles/components/side-nav/header.scss +6 -1
- package/package.json +5 -10
- package/declarations/components/hds/theme-switcher/index.d.ts +0 -41
- package/declarations/services/hds-theming.d.ts +0 -68
- package/dist/_app_/components/hds/theme-switcher.js +0 -1
- package/dist/_app_/services/hds-theming.js +0 -1
- package/dist/components/hds/theme-switcher/index.js +0 -86
- package/dist/components/hds/theme-switcher/index.js.map +0 -1
- package/dist/services/hds-theming.js +0 -204
- package/dist/services/hds-theming.js.map +0 -1
- package/dist/styles/@hashicorp/design-system-components-common.css +0 -9823
- package/dist/styles/@hashicorp/design-system-components-common.css.map +0 -1
- package/dist/styles/@hashicorp/design-system-components-common.scss +0 -20
- package/dist/styles/@hashicorp/design-system-components.css.map +0 -1
- package/dist/styles/@hashicorp/design-system-power-select-overrides.css +0 -229
- package/dist/styles/@hashicorp/design-system-power-select-overrides.css.map +0 -1
- package/dist/styles/components/index.scss +0 -52
|
@@ -40,8 +40,9 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
|
|
|
40
40
|
get size(): HdsFlyoutSizes;
|
|
41
41
|
get id(): string;
|
|
42
42
|
get classNames(): string;
|
|
43
|
-
|
|
43
|
+
private _performCloseCleanup;
|
|
44
44
|
private _registerDialog;
|
|
45
|
+
registerOnCloseCallback(event: Event): void;
|
|
45
46
|
open(): void;
|
|
46
47
|
onDismiss(): Promise<void>;
|
|
47
48
|
}
|
|
@@ -7,7 +7,7 @@ import type { HdsIconSizes, HdsIconColors } from './types';
|
|
|
7
7
|
import type { IconName } from '@hashicorp/flight-icons/svg';
|
|
8
8
|
import type Owner from '@ember/owner';
|
|
9
9
|
export declare const COLORS: HdsIconColors[];
|
|
10
|
-
export declare const NAMES: readonly ["loading", "loading-static", "running", "running-static", "apple", "apple-color", "alibaba", "alibaba-color", "amazon-ecs", "amazon-ecs-color", "amazon-eks", "amazon-eks-color", "auth0", "auth0-color", "aws", "aws-color", "aws-cdk", "aws-cdk-color", "aws-cloudwatch", "aws-cloudwatch-color", "aws-ec2", "aws-ec2-color", "aws-lambda", "aws-lambda-color", "aws-s3", "aws-s3-color", "azure", "azure-color", "azure-aks", "azure-aks-color", "azure-blob-storage", "azure-blob-storage-color", "azure-devops", "azure-devops-color", "azure-vms", "azure-vms-color", "bitbucket", "bitbucket-color", "bridgecrew", "bridgecrew-color", "cisco", "cisco-color", "codepen", "codepen-color", "confluence", "confluence-color", "confluent", "confluent-color", "datadog", "datadog-color", "digital-ocean", "digital-ocean-color", "docker", "docker-color", "duo", "duo-color", "elastic-observability", "elastic-observability-color", "f5", "f5-color", "facebook", "facebook-color", "figma", "figma-color", "gcp", "gcp-color", "git", "git-color", "gitlab", "gitlab-color", "github", "github-color", "google", "google-color", "google-docs", "google-docs-color", "google-drive", "google-drive-color", "google-forms", "google-forms-color", "google-sheets", "google-sheets-color", "google-slides", "google-slides-color", "grafana", "grafana-color", "helm", "helm-color", "infracost", "infracost-color", "jfrog", "jfrog-color", "jira", "jira-color", "jwt", "jwt-color", "kubernetes", "kubernetes-color", "lightlytics", "lightlytics-color", "linkedin", "linkedin-color", "linode", "linode-color", "linux", "linux-color", "loom", "loom-color", "meetup", "meetup-color", "microsoft", "microsoft-color", "microsoft-teams", "microsoft-teams-color", "minio", "minio-color", "mongodb", "mongodb-color", "new-relic", "new-relic-color", "okta", "okta-color", "oracle", "oracle-color", "opa", "opa-color", "openid", "openid-color", "pack", "pack-color", "pager-duty", "pager-duty-color", "ping-identity ", "ping-identity-color", "postgres", "postgres-color", "rabbitmq", "rabbitmq-color", "saml", "saml-color", "service-now", "service-now-color", "slack", "slack-color", "snyk", "snyk-color", "splunk", "splunk-color", "twilio", "twilio-color", "twitch", "twitch-color", "twitter", "twitter-color", "twitter-x", "twitter-x-color", "vantage", "vantage-color", "venafi", "venafi-color", "vercel", "vercel-color", "vmware", "vmware-color", "youtube", "youtube-color", "boundary", "boundary-color", "boundary-fill", "boundary-fill-color", "boundary-square", "boundary-square-color", "consul", "consul-color", "consul-fill", "consul-fill-color", "consul-square", "consul-square-color", "nomad", "nomad-color", "nomad-fill", "nomad-fill-color", "nomad-square", "nomad-square-color", "packer", "packer-color", "packer-fill", "packer-fill-color", "packer-square", "packer-square-color", "terraform", "terraform-color", "terraform-fill", "terraform-fill-color", "terraform-square", "terraform-square-color", "vagrant", "vagrant-color", "vagrant-fill", "vagrant-fill-color", "vagrant-square", "vagrant-square-color", "vault", "vault-color", "vault-fill", "vault-fill-color", "vault-square", "vault-square-color", "vault-radar", "vault-radar-color", "vault-radar-fill", "vault-radar-fill-color", "vault-radar-square", "vault-radar-square-color", "vault-secrets", "vault-secrets-color", "vault-secrets-fill", "vault-secrets-fill-color", "vault-secrets-square", "vault-secrets-square-color", "waypoint", "waypoint-color", "waypoint-fill", "waypoint-fill-color", "waypoint-square", "waypoint-square-color", "hashicorp", "hashicorp-color", "hashicorp-fill", "hashicorp-fill-color", "hashicorp-square", "hashicorp-square-color", "hcp", "hcp-color", "hcp-fill", "hcp-fill-color", "hcp-square", "hcp-square-color", "accessibility", "folder-users", "frown", "identity-service", "identity-user", "meh", "robot", "smile", "user", "user-check", "user-circle", "user-circle-fill", "user-minus", "user-plus", "user-x", "users", "ampersand", "beaker", "bucket", "bulb", "circle", "circle-dot", "circle-fill", "circle-half", "diamond", "diamond-fill", "disc", "dot", "dot-half", "droplet", "flag", "gift", "government", "handshake", "hash", "hexagon", "hexagon-fill", "labyrinth", "layers", "moon", "octagon", "outline", "random", "rocket", "sparkle", "square", "square-fill", "sun", "triangle", "triangle-fill", "truck", "wand", "zap", "zap-off", "docs", "docs-download", "docs-link", "guide", "guide-link", "help", "info", "info-fill", "learn", "learn-link", "support", "alert-circle", "alert-circle-fill", "alert-diamond", "alert-diamond-fill", "alert-octagon", "alert-octagon-fill", "alert-triangle", "alert-triangle-fill", "check", "check-circle", "check-circle-fill", "check-diamond", "check-diamond-fill", "check-hexagon", "check-hexagon-fill", "check-square", "check-square-fill", "skip", "x", "x-circle", "x-circle-fill", "x-diamond", "x-diamond-fill", "x-hexagon", "x-hexagon-fill", "x-square", "x-square-fill", "bug", "certificate", "eye", "eye-off", "fingerprint", "key", "keychain", "lock", "lock-fill", "lock-off", "shield", "shield-alert", "shield-check", "shield-off", "shield-x", "token", "unlock", "verified", "wall", "minus", "minus-circle", "minus-circle-fill", "minus-plus", "minus-plus-circle", "minus-plus-square", "minus-square", "minus-square-fill", "plus", "plus-circle", "plus-circle-fill", "plus-square", "camera", "camera-off", "cast", "closed-caption", "fast-forward", "film", "headphones", "image", "music", "pause", "pause-circle", "play", "play-circle", "radio", "rewind", "rss", "skip-back", "skip-forward", "speaker", "stop-circle", "volume", "volume-down", "volume-
|
|
10
|
+
export declare const NAMES: readonly ["loading", "loading-static", "running", "running-static", "apple", "apple-color", "alibaba", "alibaba-color", "amazon-ecs", "amazon-ecs-color", "amazon-eks", "amazon-eks-color", "auth0", "auth0-color", "aws", "aws-color", "aws-cdk", "aws-cdk-color", "aws-cloudwatch", "aws-cloudwatch-color", "aws-ec2", "aws-ec2-color", "aws-lambda", "aws-lambda-color", "aws-s3", "aws-s3-color", "azure", "azure-color", "azure-aks", "azure-aks-color", "azure-blob-storage", "azure-blob-storage-color", "azure-devops", "azure-devops-color", "azure-vms", "azure-vms-color", "bitbucket", "bitbucket-color", "bridgecrew", "bridgecrew-color", "cisco", "cisco-color", "codepen", "codepen-color", "confluence", "confluence-color", "confluent", "confluent-color", "datadog", "datadog-color", "digital-ocean", "digital-ocean-color", "docker", "docker-color", "duo", "duo-color", "elastic-observability", "elastic-observability-color", "f5", "f5-color", "facebook", "facebook-color", "figma", "figma-color", "gcp", "gcp-color", "git", "git-color", "gitlab", "gitlab-color", "github", "github-color", "google", "google-color", "google-docs", "google-docs-color", "google-drive", "google-drive-color", "google-forms", "google-forms-color", "google-sheets", "google-sheets-color", "google-slides", "google-slides-color", "grafana", "grafana-color", "helm", "helm-color", "infracost", "infracost-color", "jenkins", "jenkins-color", "jfrog", "jfrog-color", "jira", "jira-color", "jwt", "jwt-color", "kubernetes", "kubernetes-color", "lightlytics", "lightlytics-color", "linkedin", "linkedin-color", "linode", "linode-color", "linux", "linux-color", "loom", "loom-color", "meetup", "meetup-color", "microsoft", "microsoft-color", "microsoft-teams", "microsoft-teams-color", "minio", "minio-color", "mongodb", "mongodb-color", "new-relic", "new-relic-color", "okta", "okta-color", "oracle", "oracle-color", "opa", "opa-color", "openid", "openid-color", "pack", "pack-color", "pager-duty", "pager-duty-color", "ping-identity ", "ping-identity-color", "postgres", "postgres-color", "rabbitmq", "rabbitmq-color", "saml", "saml-color", "service-now", "service-now-color", "slack", "slack-color", "snyk", "snyk-color", "splunk", "splunk-color", "twilio", "twilio-color", "twitch", "twitch-color", "twitter", "twitter-color", "twitter-x", "twitter-x-color", "vantage", "vantage-color", "venafi", "venafi-color", "vercel", "vercel-color", "vmware", "vmware-color", "youtube", "youtube-color", "boundary", "boundary-color", "boundary-fill", "boundary-fill-color", "boundary-square", "boundary-square-color", "consul", "consul-color", "consul-fill", "consul-fill-color", "consul-square", "consul-square-color", "nomad", "nomad-color", "nomad-fill", "nomad-fill-color", "nomad-square", "nomad-square-color", "packer", "packer-color", "packer-fill", "packer-fill-color", "packer-square", "packer-square-color", "terraform", "terraform-color", "terraform-fill", "terraform-fill-color", "terraform-square", "terraform-square-color", "vagrant", "vagrant-color", "vagrant-fill", "vagrant-fill-color", "vagrant-square", "vagrant-square-color", "vault", "vault-color", "vault-fill", "vault-fill-color", "vault-square", "vault-square-color", "vault-radar", "vault-radar-color", "vault-radar-fill", "vault-radar-fill-color", "vault-radar-square", "vault-radar-square-color", "vault-secrets", "vault-secrets-color", "vault-secrets-fill", "vault-secrets-fill-color", "vault-secrets-square", "vault-secrets-square-color", "waypoint", "waypoint-color", "waypoint-fill", "waypoint-fill-color", "waypoint-square", "waypoint-square-color", "hashicorp", "hashicorp-color", "hashicorp-fill", "hashicorp-fill-color", "hashicorp-square", "hashicorp-square-color", "hcp", "hcp-color", "hcp-fill", "hcp-fill-color", "hcp-square", "hcp-square-color", "accessibility", "folder-users", "frown", "identity-service", "identity-user", "meh", "robot", "smile", "user", "user-check", "user-circle", "user-circle-fill", "user-minus", "user-plus", "user-x", "users", "ampersand", "beaker", "bucket", "bulb", "circle", "circle-dot", "circle-fill", "circle-half", "diamond", "diamond-fill", "disc", "dot", "dot-half", "droplet", "flag", "gift", "government", "handshake", "hash", "hexagon", "hexagon-fill", "labyrinth", "layers", "moon", "octagon", "outline", "random", "rocket", "sparkle", "square", "square-fill", "sun", "triangle", "triangle-fill", "truck", "wand", "zap", "zap-off", "docs", "docs-download", "docs-link", "guide", "guide-link", "help", "info", "info-fill", "learn", "learn-link", "support", "alert-circle", "alert-circle-fill", "alert-diamond", "alert-diamond-fill", "alert-octagon", "alert-octagon-fill", "alert-triangle", "alert-triangle-fill", "check", "check-circle", "check-circle-fill", "check-diamond", "check-diamond-fill", "check-hexagon", "check-hexagon-fill", "check-square", "check-square-fill", "skip", "x", "x-circle", "x-circle-fill", "x-diamond", "x-diamond-fill", "x-hexagon", "x-hexagon-fill", "x-square", "x-square-fill", "bug", "certificate", "eye", "eye-off", "fingerprint", "key", "keychain", "lock", "lock-fill", "lock-off", "shield", "shield-alert", "shield-check", "shield-off", "shield-x", "token", "unlock", "verified", "wall", "minus", "minus-circle", "minus-circle-fill", "minus-plus", "minus-plus-circle", "minus-plus-square", "minus-square", "minus-square-fill", "plus", "plus-circle", "plus-circle-fill", "plus-square", "camera", "camera-off", "cast", "closed-caption", "fast-forward", "film", "headphones", "image", "music", "pause", "pause-circle", "play", "play-circle", "radio", "rewind", "rss", "skip-back", "skip-forward", "speaker", "stop-circle", "volume", "volume-down", "volume-up", "volume-x", "wifi", "wifi-off", "compass", "crosshair", "map", "map-pin", "navigation", "navigation-alt", "redirect", "target", "align-center", "align-justify", "align-left", "align-right", "battery", "battery-charging", "bookmark", "bookmark-add", "bookmark-add-fill", "bookmark-fill", "bookmark-remove", "bookmark-remove-fill", "bottom", "top", "start", "end", "command", "crop", "dashboard", "delete", "download", "edit", "entry-point", "exit-point", "external-link", "filter", "filter-circle", "filter-fill", "grid", "grid-alt", "home", "jump-link", "layout", "link", "list", "maximize", "maximize-alt", "menu", "minimize", "minimize-alt", "more-horizontal", "more-vertical", "mouse-pointer", "move-horizontal", "paperclip", "pen-tool", "pencil-tool", "pin", "pin-off", "power", "printer", "reload", "repeat", "resize-column", "rotate-cw", "rotate-ccw", "search", "share", "sidebar", "sidebar-hide", "sidebar-show", "sign-in", "sign-out", "slash", "slash-square", "sort-asc", "sort-desc", "switcher", "sync", "sync-alert", "sync-reverse", "tag", "toggle-left", "toggle-right", "trash", "type", "text-wrap", "unfold-close", "unfold-open", "upload", "zoom-in", "zoom-out", "archive", "clipboard", "clipboard-checked", "clipboard-copy", "clipboard-x", "file", "file-change", "file-check", "file-diff", "file-minus", "file-plus", "file-source", "file-text", "file-x", "files", "folder", "folder-fill", "folder-minus", "folder-minus-fill", "folder-plus", "folder-plus-fill", "folder-star", "inbox", "api", "auto-apply", "build", "change", "change-circle", "change-square", "channel", "cloud", "cloud-check", "cloud-download", "cloud-lightning", "cloud-lock", "cloud-off", "cloud-upload", "cloud-x", "code", "connection", "connection-gateway", "cpu", "duplicate", "gateway", "git-branch", "git-commit", "git-merge", "git-pull-request", "git-repo", "hammer", "key-values", "mainframe", "mesh", "module", "monitor", "network", "network-alt", "node", "path", "pipeline", "plug", "replication-direct", "replication-perf", "scissors", "server", "server-cluster", "serverless", "service", "settings", "sliders", "smartphone", "socket", "step", "tablet", "terminal", "terminal-screen", "test", "tools", "transform-data", "tv", "webhook", "wrench", "calendar", "clock", "clock-filled", "delay", "event", "history", "hourglass", "watch", "bar-chart", "bar-chart-alt", "box", "collections", "database", "hard-drive", "line-chart", "line-chart-up", "logs", "package", "pie-chart", "queue", "save", "trend-down", "trend-up", "activity", "at-sign", "award", "bell", "bell-active", "bell-active-fill", "bell-off", "discussion-circle", "discussion-square", "heart", "heart-fill", "heart-off", "mail", "mail-open", "message-circle", "message-circle-fill", "message-square", "message-square-fill", "mic", "mic-off", "newspaper", "phone", "phone-call", "phone-off", "send", "star", "star-circle", "star-fill", "star-off", "thumbs-down", "thumbs-up", "video", "video-off", "bank-vault", "briefcase", "credit-card", "dollar-sign", "enterprise", "globe", "globe-private", "org", "provider", "shopping-bag", "shopping-cart", "arrow-down", "arrow-down-circle", "arrow-down-left", "arrow-down-right", "arrow-left", "arrow-left-circle", "arrow-right", "arrow-right-circle", "arrow-up", "arrow-up-circle", "arrow-up-left", "arrow-up-right", "caret", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-down", "chevrons-left", "chevrons-right", "chevrons-up", "corner-down-left", "corner-down-right", "corner-left-down", "corner-left-up", "corner-right-down", "corner-right-up", "corner-up-left", "corner-up-right", "load-balancer", "migrate", "move", "shuffle", "swap-horizontal", "swap-vertical"];
|
|
11
11
|
export interface HdsIconSignature {
|
|
12
12
|
Args: {
|
|
13
13
|
name: IconName;
|
|
@@ -44,6 +44,7 @@ export default class HdsModal extends Component<HdsModalSignature> {
|
|
|
44
44
|
get color(): HdsModalColors;
|
|
45
45
|
get id(): string;
|
|
46
46
|
get classNames(): string;
|
|
47
|
+
private _performCloseCleanup;
|
|
47
48
|
registerOnCloseCallback(event: Event): void;
|
|
48
49
|
private _registerDialog;
|
|
49
50
|
open(): void;
|
|
@@ -8,7 +8,7 @@ import type { HdsIconSignature } from '../../icon';
|
|
|
8
8
|
import type { HdsStepperStatuses } from '../types.ts';
|
|
9
9
|
export declare const DEFAULT_STATUS = HdsStepperStatusesValues.Incomplete;
|
|
10
10
|
export declare const STATUSES: HdsStepperStatuses[];
|
|
11
|
-
export declare const MAPPING_STATUS_TO_ICONS: Record<HdsStepperStatusesValues, "type" | "map" | "filter" | "code" | "link" | "menu" | "search" | "video" | "circle" | "image" | "path" | "tag" | "repeat" | "hash" | "queue" | "shuffle" | "chevron-up" | "chevron-down" | "unfold-open" | "unfold-close" | "arrow-down" | "arrow-up" | "swap-vertical" | "top" | "key" | "move" | "change" | "pause" | "play" | "move-horizontal" | "loading" | "loading-static" | "running" | "running-static" | "apple" | "apple-color" | "alibaba" | "alibaba-color" | "amazon-ecs" | "amazon-ecs-color" | "amazon-eks" | "amazon-eks-color" | "auth0" | "auth0-color" | "aws" | "aws-color" | "aws-cdk" | "aws-cdk-color" | "aws-cloudwatch" | "aws-cloudwatch-color" | "aws-ec2" | "aws-ec2-color" | "aws-lambda" | "aws-lambda-color" | "aws-s3" | "aws-s3-color" | "azure" | "azure-color" | "azure-aks" | "azure-aks-color" | "azure-blob-storage" | "azure-blob-storage-color" | "azure-devops" | "azure-devops-color" | "azure-vms" | "azure-vms-color" | "bitbucket" | "bitbucket-color" | "bridgecrew" | "bridgecrew-color" | "cisco" | "cisco-color" | "codepen" | "codepen-color" | "confluence" | "confluence-color" | "confluent" | "confluent-color" | "datadog" | "datadog-color" | "digital-ocean" | "digital-ocean-color" | "docker" | "docker-color" | "duo" | "duo-color" | "elastic-observability" | "elastic-observability-color" | "f5" | "f5-color" | "facebook" | "facebook-color" | "figma" | "figma-color" | "gcp" | "gcp-color" | "git" | "git-color" | "gitlab" | "gitlab-color" | "github" | "github-color" | "google" | "google-color" | "google-docs" | "google-docs-color" | "google-drive" | "google-drive-color" | "google-forms" | "google-forms-color" | "google-sheets" | "google-sheets-color" | "google-slides" | "google-slides-color" | "grafana" | "grafana-color" | "helm" | "helm-color" | "infracost" | "infracost-color" | "jfrog" | "jfrog-color" | "jira" | "jira-color" | "jwt" | "jwt-color" | "kubernetes" | "kubernetes-color" | "lightlytics" | "lightlytics-color" | "linkedin" | "linkedin-color" | "linode" | "linode-color" | "linux" | "linux-color" | "loom" | "loom-color" | "meetup" | "meetup-color" | "microsoft" | "microsoft-color" | "microsoft-teams" | "microsoft-teams-color" | "minio" | "minio-color" | "mongodb" | "mongodb-color" | "new-relic" | "new-relic-color" | "okta" | "okta-color" | "oracle" | "oracle-color" | "opa" | "opa-color" | "openid" | "openid-color" | "pack" | "pack-color" | "pager-duty" | "pager-duty-color" | "ping-identity " | "ping-identity-color" | "postgres" | "postgres-color" | "rabbitmq" | "rabbitmq-color" | "saml" | "saml-color" | "service-now" | "service-now-color" | "slack" | "slack-color" | "snyk" | "snyk-color" | "splunk" | "splunk-color" | "twilio" | "twilio-color" | "twitch" | "twitch-color" | "twitter" | "twitter-color" | "twitter-x" | "twitter-x-color" | "vantage" | "vantage-color" | "venafi" | "venafi-color" | "vercel" | "vercel-color" | "vmware" | "vmware-color" | "youtube" | "youtube-color" | "boundary" | "boundary-color" | "boundary-fill" | "boundary-fill-color" | "boundary-square" | "boundary-square-color" | "consul" | "consul-color" | "consul-fill" | "consul-fill-color" | "consul-square" | "consul-square-color" | "nomad" | "nomad-color" | "nomad-fill" | "nomad-fill-color" | "nomad-square" | "nomad-square-color" | "packer" | "packer-color" | "packer-fill" | "packer-fill-color" | "packer-square" | "packer-square-color" | "terraform" | "terraform-color" | "terraform-fill" | "terraform-fill-color" | "terraform-square" | "terraform-square-color" | "vagrant" | "vagrant-color" | "vagrant-fill" | "vagrant-fill-color" | "vagrant-square" | "vagrant-square-color" | "vault" | "vault-color" | "vault-fill" | "vault-fill-color" | "vault-square" | "vault-square-color" | "vault-radar" | "vault-radar-color" | "vault-radar-fill" | "vault-radar-fill-color" | "vault-radar-square" | "vault-radar-square-color" | "vault-secrets" | "vault-secrets-color" | "vault-secrets-fill" | "vault-secrets-fill-color" | "vault-secrets-square" | "vault-secrets-square-color" | "waypoint" | "waypoint-color" | "waypoint-fill" | "waypoint-fill-color" | "waypoint-square" | "waypoint-square-color" | "hashicorp" | "hashicorp-color" | "hashicorp-fill" | "hashicorp-fill-color" | "hashicorp-square" | "hashicorp-square-color" | "hcp" | "hcp-color" | "hcp-fill" | "hcp-fill-color" | "hcp-square" | "hcp-square-color" | "accessibility" | "folder-users" | "frown" | "identity-service" | "identity-user" | "meh" | "robot" | "smile" | "user" | "user-check" | "user-circle" | "user-circle-fill" | "user-minus" | "user-plus" | "user-x" | "users" | "ampersand" | "beaker" | "bucket" | "bulb" | "circle-dot" | "circle-fill" | "circle-half" | "diamond" | "diamond-fill" | "disc" | "dot" | "dot-half" | "droplet" | "flag" | "gift" | "government" | "handshake" | "hexagon" | "hexagon-fill" | "labyrinth" | "layers" | "moon" | "octagon" | "outline" | "random" | "rocket" | "sparkle" | "square" | "square-fill" | "sun" | "triangle" | "triangle-fill" | "truck" | "wand" | "zap" | "zap-off" | "docs" | "docs-download" | "docs-link" | "guide" | "guide-link" | "help" | "info" | "info-fill" | "learn" | "learn-link" | "support" | "alert-circle" | "alert-circle-fill" | "alert-diamond" | "alert-diamond-fill" | "alert-octagon" | "alert-octagon-fill" | "alert-triangle" | "alert-triangle-fill" | "check" | "check-circle" | "check-circle-fill" | "check-diamond" | "check-diamond-fill" | "check-hexagon" | "check-hexagon-fill" | "check-square" | "check-square-fill" | "skip" | "x" | "x-circle" | "x-circle-fill" | "x-diamond" | "x-diamond-fill" | "x-hexagon" | "x-hexagon-fill" | "x-square" | "x-square-fill" | "bug" | "certificate" | "eye" | "eye-off" | "fingerprint" | "keychain" | "lock" | "lock-fill" | "lock-off" | "shield" | "shield-alert" | "shield-check" | "shield-off" | "shield-x" | "token" | "unlock" | "verified" | "wall" | "minus" | "minus-circle" | "minus-circle-fill" | "minus-plus" | "minus-plus-circle" | "minus-plus-square" | "minus-square" | "minus-square-fill" | "plus" | "plus-circle" | "plus-circle-fill" | "plus-square" | "camera" | "camera-off" | "cast" | "closed-caption" | "fast-forward" | "film" | "headphones" | "music" | "pause-circle" | "play-circle" | "radio" | "rewind" | "rss" | "skip-back" | "skip-forward" | "speaker" | "stop-circle" | "volume" | "volume-down" | "volume-2" | "volume-x" | "wifi" | "wifi-off" | "compass" | "crosshair" | "map-pin" | "navigation" | "navigation-alt" | "redirect" | "target" | "align-center" | "align-justify" | "align-left" | "align-right" | "battery" | "battery-charging" | "bookmark" | "bookmark-add" | "bookmark-add-fill" | "bookmark-fill" | "bookmark-remove" | "bookmark-remove-fill" | "bottom" | "start" | "end" | "command" | "crop" | "dashboard" | "delete" | "download" | "edit" | "entry-point" | "exit-point" | "external-link" | "filter-circle" | "filter-fill" | "grid" | "grid-alt" | "home" | "jump-link" | "layout" | "list" | "maximize" | "maximize-alt" | "minimize" | "minimize-alt" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "paperclip" | "pen-tool" | "pencil-tool" | "pin" | "pin-off" | "power" | "printer" | "reload" | "resize-column" | "rotate-cw" | "rotate-ccw" | "share" | "sidebar" | "sidebar-hide" | "sidebar-show" | "sign-in" | "sign-out" | "slash" | "slash-square" | "sort-asc" | "sort-desc" | "switcher" | "sync" | "sync-alert" | "sync-reverse" | "toggle-left" | "toggle-right" | "trash" | "text-wrap" | "upload" | "zoom-in" | "zoom-out" | "archive" | "clipboard" | "clipboard-checked" | "clipboard-copy" | "clipboard-x" | "file" | "file-change" | "file-check" | "file-diff" | "file-minus" | "file-plus" | "file-source" | "file-text" | "file-x" | "files" | "folder" | "folder-fill" | "folder-minus" | "folder-minus-fill" | "folder-plus" | "folder-plus-fill" | "folder-star" | "inbox" | "api" | "auto-apply" | "build" | "change-circle" | "change-square" | "channel" | "cloud" | "cloud-check" | "cloud-download" | "cloud-lightning" | "cloud-lock" | "cloud-off" | "cloud-upload" | "cloud-x" | "connection" | "connection-gateway" | "cpu" | "duplicate" | "gateway" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "git-repo" | "hammer" | "key-values" | "mainframe" | "mesh" | "module" | "monitor" | "network" | "network-alt" | "node" | "pipeline" | "plug" | "replication-direct" | "replication-perf" | "scissors" | "server" | "server-cluster" | "serverless" | "service" | "settings" | "sliders" | "smartphone" | "socket" | "step" | "tablet" | "terminal" | "terminal-screen" | "test" | "tools" | "transform-data" | "tv" | "webhook" | "wrench" | "calendar" | "clock" | "clock-filled" | "delay" | "event" | "history" | "hourglass" | "watch" | "bar-chart" | "bar-chart-alt" | "box" | "collections" | "database" | "hard-drive" | "line-chart" | "line-chart-up" | "logs" | "package" | "pie-chart" | "save" | "trend-down" | "trend-up" | "activity" | "at-sign" | "award" | "bell" | "bell-active" | "bell-active-fill" | "bell-off" | "discussion-circle" | "discussion-square" | "heart" | "heart-fill" | "heart-off" | "mail" | "mail-open" | "message-circle" | "message-circle-fill" | "message-square" | "message-square-fill" | "mic" | "mic-off" | "newspaper" | "phone" | "phone-call" | "phone-off" | "send" | "star" | "star-circle" | "star-fill" | "star-off" | "thumbs-down" | "thumbs-up" | "video-off" | "bank-vault" | "briefcase" | "credit-card" | "dollar-sign" | "enterprise" | "globe" | "globe-private" | "org" | "provider" | "shopping-bag" | "shopping-cart" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "caret" | "chevron-left" | "chevron-right" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "load-balancer" | "migrate" | "swap-horizontal">;
|
|
11
|
+
export declare const MAPPING_STATUS_TO_ICONS: Record<HdsStepperStatusesValues, "type" | "map" | "filter" | "code" | "link" | "menu" | "search" | "video" | "circle" | "image" | "path" | "tag" | "repeat" | "hash" | "queue" | "shuffle" | "chevron-up" | "chevron-down" | "unfold-open" | "unfold-close" | "arrow-down" | "arrow-up" | "swap-vertical" | "top" | "key" | "move" | "change" | "pause" | "play" | "move-horizontal" | "loading" | "loading-static" | "running" | "running-static" | "apple" | "apple-color" | "alibaba" | "alibaba-color" | "amazon-ecs" | "amazon-ecs-color" | "amazon-eks" | "amazon-eks-color" | "auth0" | "auth0-color" | "aws" | "aws-color" | "aws-cdk" | "aws-cdk-color" | "aws-cloudwatch" | "aws-cloudwatch-color" | "aws-ec2" | "aws-ec2-color" | "aws-lambda" | "aws-lambda-color" | "aws-s3" | "aws-s3-color" | "azure" | "azure-color" | "azure-aks" | "azure-aks-color" | "azure-blob-storage" | "azure-blob-storage-color" | "azure-devops" | "azure-devops-color" | "azure-vms" | "azure-vms-color" | "bitbucket" | "bitbucket-color" | "bridgecrew" | "bridgecrew-color" | "cisco" | "cisco-color" | "codepen" | "codepen-color" | "confluence" | "confluence-color" | "confluent" | "confluent-color" | "datadog" | "datadog-color" | "digital-ocean" | "digital-ocean-color" | "docker" | "docker-color" | "duo" | "duo-color" | "elastic-observability" | "elastic-observability-color" | "f5" | "f5-color" | "facebook" | "facebook-color" | "figma" | "figma-color" | "gcp" | "gcp-color" | "git" | "git-color" | "gitlab" | "gitlab-color" | "github" | "github-color" | "google" | "google-color" | "google-docs" | "google-docs-color" | "google-drive" | "google-drive-color" | "google-forms" | "google-forms-color" | "google-sheets" | "google-sheets-color" | "google-slides" | "google-slides-color" | "grafana" | "grafana-color" | "helm" | "helm-color" | "infracost" | "infracost-color" | "jenkins" | "jenkins-color" | "jfrog" | "jfrog-color" | "jira" | "jira-color" | "jwt" | "jwt-color" | "kubernetes" | "kubernetes-color" | "lightlytics" | "lightlytics-color" | "linkedin" | "linkedin-color" | "linode" | "linode-color" | "linux" | "linux-color" | "loom" | "loom-color" | "meetup" | "meetup-color" | "microsoft" | "microsoft-color" | "microsoft-teams" | "microsoft-teams-color" | "minio" | "minio-color" | "mongodb" | "mongodb-color" | "new-relic" | "new-relic-color" | "okta" | "okta-color" | "oracle" | "oracle-color" | "opa" | "opa-color" | "openid" | "openid-color" | "pack" | "pack-color" | "pager-duty" | "pager-duty-color" | "ping-identity " | "ping-identity-color" | "postgres" | "postgres-color" | "rabbitmq" | "rabbitmq-color" | "saml" | "saml-color" | "service-now" | "service-now-color" | "slack" | "slack-color" | "snyk" | "snyk-color" | "splunk" | "splunk-color" | "twilio" | "twilio-color" | "twitch" | "twitch-color" | "twitter" | "twitter-color" | "twitter-x" | "twitter-x-color" | "vantage" | "vantage-color" | "venafi" | "venafi-color" | "vercel" | "vercel-color" | "vmware" | "vmware-color" | "youtube" | "youtube-color" | "boundary" | "boundary-color" | "boundary-fill" | "boundary-fill-color" | "boundary-square" | "boundary-square-color" | "consul" | "consul-color" | "consul-fill" | "consul-fill-color" | "consul-square" | "consul-square-color" | "nomad" | "nomad-color" | "nomad-fill" | "nomad-fill-color" | "nomad-square" | "nomad-square-color" | "packer" | "packer-color" | "packer-fill" | "packer-fill-color" | "packer-square" | "packer-square-color" | "terraform" | "terraform-color" | "terraform-fill" | "terraform-fill-color" | "terraform-square" | "terraform-square-color" | "vagrant" | "vagrant-color" | "vagrant-fill" | "vagrant-fill-color" | "vagrant-square" | "vagrant-square-color" | "vault" | "vault-color" | "vault-fill" | "vault-fill-color" | "vault-square" | "vault-square-color" | "vault-radar" | "vault-radar-color" | "vault-radar-fill" | "vault-radar-fill-color" | "vault-radar-square" | "vault-radar-square-color" | "vault-secrets" | "vault-secrets-color" | "vault-secrets-fill" | "vault-secrets-fill-color" | "vault-secrets-square" | "vault-secrets-square-color" | "waypoint" | "waypoint-color" | "waypoint-fill" | "waypoint-fill-color" | "waypoint-square" | "waypoint-square-color" | "hashicorp" | "hashicorp-color" | "hashicorp-fill" | "hashicorp-fill-color" | "hashicorp-square" | "hashicorp-square-color" | "hcp" | "hcp-color" | "hcp-fill" | "hcp-fill-color" | "hcp-square" | "hcp-square-color" | "accessibility" | "folder-users" | "frown" | "identity-service" | "identity-user" | "meh" | "robot" | "smile" | "user" | "user-check" | "user-circle" | "user-circle-fill" | "user-minus" | "user-plus" | "user-x" | "users" | "ampersand" | "beaker" | "bucket" | "bulb" | "circle-dot" | "circle-fill" | "circle-half" | "diamond" | "diamond-fill" | "disc" | "dot" | "dot-half" | "droplet" | "flag" | "gift" | "government" | "handshake" | "hexagon" | "hexagon-fill" | "labyrinth" | "layers" | "moon" | "octagon" | "outline" | "random" | "rocket" | "sparkle" | "square" | "square-fill" | "sun" | "triangle" | "triangle-fill" | "truck" | "wand" | "zap" | "zap-off" | "docs" | "docs-download" | "docs-link" | "guide" | "guide-link" | "help" | "info" | "info-fill" | "learn" | "learn-link" | "support" | "alert-circle" | "alert-circle-fill" | "alert-diamond" | "alert-diamond-fill" | "alert-octagon" | "alert-octagon-fill" | "alert-triangle" | "alert-triangle-fill" | "check" | "check-circle" | "check-circle-fill" | "check-diamond" | "check-diamond-fill" | "check-hexagon" | "check-hexagon-fill" | "check-square" | "check-square-fill" | "skip" | "x" | "x-circle" | "x-circle-fill" | "x-diamond" | "x-diamond-fill" | "x-hexagon" | "x-hexagon-fill" | "x-square" | "x-square-fill" | "bug" | "certificate" | "eye" | "eye-off" | "fingerprint" | "keychain" | "lock" | "lock-fill" | "lock-off" | "shield" | "shield-alert" | "shield-check" | "shield-off" | "shield-x" | "token" | "unlock" | "verified" | "wall" | "minus" | "minus-circle" | "minus-circle-fill" | "minus-plus" | "minus-plus-circle" | "minus-plus-square" | "minus-square" | "minus-square-fill" | "plus" | "plus-circle" | "plus-circle-fill" | "plus-square" | "camera" | "camera-off" | "cast" | "closed-caption" | "fast-forward" | "film" | "headphones" | "music" | "pause-circle" | "play-circle" | "radio" | "rewind" | "rss" | "skip-back" | "skip-forward" | "speaker" | "stop-circle" | "volume" | "volume-down" | "volume-up" | "volume-x" | "wifi" | "wifi-off" | "compass" | "crosshair" | "map-pin" | "navigation" | "navigation-alt" | "redirect" | "target" | "align-center" | "align-justify" | "align-left" | "align-right" | "battery" | "battery-charging" | "bookmark" | "bookmark-add" | "bookmark-add-fill" | "bookmark-fill" | "bookmark-remove" | "bookmark-remove-fill" | "bottom" | "start" | "end" | "command" | "crop" | "dashboard" | "delete" | "download" | "edit" | "entry-point" | "exit-point" | "external-link" | "filter-circle" | "filter-fill" | "grid" | "grid-alt" | "home" | "jump-link" | "layout" | "list" | "maximize" | "maximize-alt" | "minimize" | "minimize-alt" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "paperclip" | "pen-tool" | "pencil-tool" | "pin" | "pin-off" | "power" | "printer" | "reload" | "resize-column" | "rotate-cw" | "rotate-ccw" | "share" | "sidebar" | "sidebar-hide" | "sidebar-show" | "sign-in" | "sign-out" | "slash" | "slash-square" | "sort-asc" | "sort-desc" | "switcher" | "sync" | "sync-alert" | "sync-reverse" | "toggle-left" | "toggle-right" | "trash" | "text-wrap" | "upload" | "zoom-in" | "zoom-out" | "archive" | "clipboard" | "clipboard-checked" | "clipboard-copy" | "clipboard-x" | "file" | "file-change" | "file-check" | "file-diff" | "file-minus" | "file-plus" | "file-source" | "file-text" | "file-x" | "files" | "folder" | "folder-fill" | "folder-minus" | "folder-minus-fill" | "folder-plus" | "folder-plus-fill" | "folder-star" | "inbox" | "api" | "auto-apply" | "build" | "change-circle" | "change-square" | "channel" | "cloud" | "cloud-check" | "cloud-download" | "cloud-lightning" | "cloud-lock" | "cloud-off" | "cloud-upload" | "cloud-x" | "connection" | "connection-gateway" | "cpu" | "duplicate" | "gateway" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "git-repo" | "hammer" | "key-values" | "mainframe" | "mesh" | "module" | "monitor" | "network" | "network-alt" | "node" | "pipeline" | "plug" | "replication-direct" | "replication-perf" | "scissors" | "server" | "server-cluster" | "serverless" | "service" | "settings" | "sliders" | "smartphone" | "socket" | "step" | "tablet" | "terminal" | "terminal-screen" | "test" | "tools" | "transform-data" | "tv" | "webhook" | "wrench" | "calendar" | "clock" | "clock-filled" | "delay" | "event" | "history" | "hourglass" | "watch" | "bar-chart" | "bar-chart-alt" | "box" | "collections" | "database" | "hard-drive" | "line-chart" | "line-chart-up" | "logs" | "package" | "pie-chart" | "save" | "trend-down" | "trend-up" | "activity" | "at-sign" | "award" | "bell" | "bell-active" | "bell-active-fill" | "bell-off" | "discussion-circle" | "discussion-square" | "heart" | "heart-fill" | "heart-off" | "mail" | "mail-open" | "message-circle" | "message-circle-fill" | "message-square" | "message-square-fill" | "mic" | "mic-off" | "newspaper" | "phone" | "phone-call" | "phone-off" | "send" | "star" | "star-circle" | "star-fill" | "star-off" | "thumbs-down" | "thumbs-up" | "video-off" | "bank-vault" | "briefcase" | "credit-card" | "dollar-sign" | "enterprise" | "globe" | "globe-private" | "org" | "provider" | "shopping-bag" | "shopping-cart" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "caret" | "chevron-left" | "chevron-right" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "load-balancer" | "migrate" | "swap-horizontal">;
|
|
12
12
|
export interface HdsStepperTaskIndicatorSignature {
|
|
13
13
|
Args: {
|
|
14
14
|
status?: HdsStepperStatuses;
|
|
@@ -223,7 +223,6 @@ export { default as HdsTextBody } from './components/hds/text/body.ts';
|
|
|
223
223
|
export { default as HdsTextCode } from './components/hds/text/code.ts';
|
|
224
224
|
export { default as HdsTextDisplay } from './components/hds/text/display.ts';
|
|
225
225
|
export * from './components/hds/text/types.ts';
|
|
226
|
-
export { default as HdsThemeSwitcher } from './components/hds/theme-switcher/index.ts';
|
|
227
226
|
export { default as HdsTime } from './components/hds/time/index.ts';
|
|
228
227
|
export { default as HdsTimeSingle } from './components/hds/time/single.ts';
|
|
229
228
|
export { default as HdsTimeRange } from './components/hds/time/range.ts';
|
|
@@ -226,7 +226,6 @@ import type HdsTagComponent from './components/hds/tag';
|
|
|
226
226
|
import type HdsTooltipButtonComponent from './components/hds/tooltip-button';
|
|
227
227
|
import type HdsToastComponent from './components/hds/toast';
|
|
228
228
|
import type HdsTextCodeComponent from './components/hds/text/code';
|
|
229
|
-
import type HdsThemeSwitcherComponent from './components/hds/theme-switcher';
|
|
230
229
|
import type HdsTimeComponent from './components/hds/time';
|
|
231
230
|
import type HdsTimeSingleComponent from './components/hds/time/single';
|
|
232
231
|
import type HdsTimeRangeComponent from './components/hds/time/range';
|
|
@@ -718,8 +717,6 @@ export default interface HdsComponentsRegistry {
|
|
|
718
717
|
'hds/tooltip-button': typeof HdsTooltipButtonComponent;
|
|
719
718
|
'Hds::Toast': typeof HdsToastComponent;
|
|
720
719
|
'hds/toast': typeof HdsToastComponent;
|
|
721
|
-
'Hds::ThemeSwitcher': typeof HdsThemeSwitcherComponent;
|
|
722
|
-
'hds/theme-switcher': typeof HdsThemeSwitcherComponent;
|
|
723
720
|
'Hds::Time': typeof HdsTimeComponent;
|
|
724
721
|
'hds/time': typeof HdsTimeComponent;
|
|
725
722
|
'Hds::Time::Single': typeof HdsTimeSingleComponent;
|
|
@@ -54,10 +54,7 @@ class HdsFlyout extends Component {
|
|
|
54
54
|
classes.push(`hds-flyout--size-${this.size}`);
|
|
55
55
|
return classes.join(' ');
|
|
56
56
|
}
|
|
57
|
-
|
|
58
|
-
if (this.args.onClose && typeof this.args.onClose === 'function') {
|
|
59
|
-
this.args.onClose(event);
|
|
60
|
-
}
|
|
57
|
+
_performCloseCleanup() {
|
|
61
58
|
this._isOpen = false;
|
|
62
59
|
|
|
63
60
|
// Reset page `overflow` property
|
|
@@ -80,9 +77,6 @@ class HdsFlyout extends Component {
|
|
|
80
77
|
}
|
|
81
78
|
}
|
|
82
79
|
}
|
|
83
|
-
static {
|
|
84
|
-
n(this.prototype, "registerOnCloseCallback", [action]);
|
|
85
|
-
}
|
|
86
80
|
_registerDialog = modifier(element => {
|
|
87
81
|
// Store references of `<dialog>` and `<body>` elements
|
|
88
82
|
this._element = element;
|
|
@@ -103,13 +97,22 @@ class HdsFlyout extends Component {
|
|
|
103
97
|
return () => {
|
|
104
98
|
// if the <dialog> is removed from the dom while open we emulate the close event
|
|
105
99
|
if (this._isOpen) {
|
|
106
|
-
this.
|
|
100
|
+
this._performCloseCleanup();
|
|
107
101
|
}
|
|
108
102
|
this._element?.removeEventListener('close',
|
|
109
103
|
// eslint-disable-next-line @typescript-eslint/unbound-method
|
|
110
104
|
this.registerOnCloseCallback, true);
|
|
111
105
|
};
|
|
112
106
|
});
|
|
107
|
+
registerOnCloseCallback(event) {
|
|
108
|
+
if (this.args.onClose && typeof this.args.onClose === 'function') {
|
|
109
|
+
this.args.onClose(event);
|
|
110
|
+
}
|
|
111
|
+
this._performCloseCleanup();
|
|
112
|
+
}
|
|
113
|
+
static {
|
|
114
|
+
n(this.prototype, "registerOnCloseCallback", [action]);
|
|
115
|
+
}
|
|
113
116
|
open() {
|
|
114
117
|
// Make flyout dialog visible using the native `showModal` method
|
|
115
118
|
this._element.showModal();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/hds/flyout/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { assert } from '@ember/debug';\nimport { getElementId } from '../../../utils/hds-get-element-id.ts';\nimport { buildWaiter } from '@ember/test-waiters';\nimport type { WithBoundArgs } from '@glint/template';\nimport { modifier } from 'ember-modifier';\n\nimport type { HdsFlyoutSizes } from './types.ts';\n\nimport { HdsFlyoutSizesValues } from './types.ts';\nimport HdsDialogPrimitiveBodyComponent from '../dialog-primitive/body.ts';\nimport HdsDialogPrimitiveDescriptionComponent from '../dialog-primitive/description.ts';\nimport HdsDialogPrimitiveFooterComponent from '../dialog-primitive/footer.ts';\nimport HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.ts';\n\nconst waiter = buildWaiter('@hashicorp/design-system-components:flyout');\n\nexport const DEFAULT_SIZE = HdsFlyoutSizesValues.Medium;\nexport const DEFAULT_HAS_OVERLAY = true;\nexport const SIZES: HdsFlyoutSizes[] = Object.values(HdsFlyoutSizesValues);\n\nexport interface HdsFlyoutSignature {\n Args: {\n size?: HdsFlyoutSizes;\n returnFocusTo?: string;\n onOpen?: () => void;\n onClose?: (event: Event) => void;\n };\n Blocks: {\n default: [\n {\n Header?: WithBoundArgs<\n typeof HdsDialogPrimitiveHeaderComponent,\n 'id' | 'onDismiss' | 'contextualClassPrefix'\n >;\n Description?: WithBoundArgs<\n typeof HdsDialogPrimitiveDescriptionComponent,\n 'contextualClass'\n >;\n Body?: WithBoundArgs<\n typeof HdsDialogPrimitiveBodyComponent,\n 'contextualClass'\n >;\n Footer?: WithBoundArgs<\n typeof HdsDialogPrimitiveFooterComponent,\n 'onDismiss' | 'contextualClass'\n >;\n },\n ];\n };\n Element: HTMLDialogElement;\n}\n\nexport default class HdsFlyout extends Component<HdsFlyoutSignature> {\n @tracked private _isOpen = false;\n // TODO: make this property private; currently blocked by our consumers relying on it despite not being part of the public API: https://github.com/hashicorp/cloud-ui/blob/main/engines/waypoint/addon/components/preview-pane.ts#L15\n // private _element!: HTMLDialogElement;\n _element!: HTMLDialogElement;\n private _body!: HTMLElement;\n private _bodyInitialOverflowValue = '';\n\n get size(): HdsFlyoutSizes {\n const { size = DEFAULT_SIZE } = this.args;\n\n assert(\n `@size for \"Hds::Flyout\" must be one of the following: ${SIZES.join(\n ', '\n )}; received: ${size}`,\n SIZES.includes(size)\n );\n\n return size;\n }\n\n get id(): string {\n return getElementId(this);\n }\n\n get classNames(): string {\n const classes = ['hds-flyout'];\n\n // add a class based on the @size argument\n classes.push(`hds-flyout--size-${this.size}`);\n\n return classes.join(' ');\n }\n\n @action registerOnCloseCallback(event: Event) {\n if (this.args.onClose && typeof this.args.onClose === 'function') {\n this.args.onClose(event);\n }\n\n this._isOpen = false;\n\n // Reset page `overflow` property\n if (this._body) {\n this._body.style.removeProperty('overflow');\n if (this._bodyInitialOverflowValue === '') {\n if (this._body.style.length === 0) {\n this._body.removeAttribute('style');\n }\n } else {\n this._body.style.setProperty(\n 'overflow',\n this._bodyInitialOverflowValue\n );\n }\n }\n\n // Return focus to a specific element (if provided)\n if (this.args.returnFocusTo) {\n const initiator = document.getElementById(this.args.returnFocusTo);\n if (initiator) {\n initiator.focus();\n }\n }\n }\n\n private _registerDialog = modifier((element: HTMLDialogElement) => {\n // Store references of `<dialog>` and `<body>` elements\n this._element = element;\n this._body = document.body;\n\n if (this._body) {\n // Store the initial `overflow` value of `<body>` so we can reset to it\n this._bodyInitialOverflowValue =\n this._body.style.getPropertyValue('overflow');\n }\n\n // Register \"onClose\" callback function to be called when a native 'close' event is dispatched\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this._element.addEventListener('close', this.registerOnCloseCallback, true);\n\n // If the flyout dialog is not already open\n if (!this._element.open) {\n this.open();\n }\n\n return () => {\n // if the <dialog> is removed from the dom while open we emulate the close event\n if (this._isOpen) {\n this._element?.dispatchEvent(new Event('close'));\n }\n\n this._element?.removeEventListener(\n 'close',\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.registerOnCloseCallback,\n true\n );\n };\n });\n\n @action\n open(): void {\n // Make flyout dialog visible using the native `showModal` method\n this._element.showModal();\n this._isOpen = true;\n\n // Prevent page from scrolling when the dialog is open\n if (this._body) this._body.style.setProperty('overflow', 'hidden');\n\n // Call \"onOpen\" callback function\n if (this.args.onOpen && typeof this.args.onOpen === 'function') {\n this.args.onOpen();\n }\n }\n\n @action\n // eslint-disable-next-line @typescript-eslint/require-await\n async onDismiss(): Promise<void> {\n // allow ember test helpers to be aware of when the `close` event fires\n // when using `click` or other helpers from '@ember/test-helpers'\n if (this._element.open) {\n const token = waiter.beginAsync();\n const listener = () => {\n waiter.endAsync(token);\n this._element.removeEventListener('close', listener);\n };\n this._element.addEventListener('close', listener);\n }\n\n // Make flyout dialog invisible using the native `close` method\n this._element.close();\n }\n}\n"],"names":["waiter","buildWaiter","DEFAULT_SIZE","HdsFlyoutSizesValues","Medium","DEFAULT_HAS_OVERLAY","SIZES","Object","values","HdsFlyout","Component","g","prototype","tracked","i","void 0","_element","_body","_bodyInitialOverflowValue","size","args","assert","join","includes","id","getElementId","classNames","classes","push","registerOnCloseCallback","event","onClose","_isOpen","style","removeProperty","length","removeAttribute","setProperty","returnFocusTo","initiator","document","getElementById","focus","n","action","_registerDialog","modifier","element","body","getPropertyValue","addEventListener","open","dispatchEvent","Event","removeEventListener","showModal","onOpen","onDismiss","token","beginAsync","listener","endAsync","close","setComponentTemplate","TEMPLATE"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/hds/flyout/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { assert } from '@ember/debug';\nimport { getElementId } from '../../../utils/hds-get-element-id.ts';\nimport { buildWaiter } from '@ember/test-waiters';\nimport type { WithBoundArgs } from '@glint/template';\nimport { modifier } from 'ember-modifier';\n\nimport type { HdsFlyoutSizes } from './types.ts';\n\nimport { HdsFlyoutSizesValues } from './types.ts';\nimport HdsDialogPrimitiveBodyComponent from '../dialog-primitive/body.ts';\nimport HdsDialogPrimitiveDescriptionComponent from '../dialog-primitive/description.ts';\nimport HdsDialogPrimitiveFooterComponent from '../dialog-primitive/footer.ts';\nimport HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.ts';\n\nconst waiter = buildWaiter('@hashicorp/design-system-components:flyout');\n\nexport const DEFAULT_SIZE = HdsFlyoutSizesValues.Medium;\nexport const DEFAULT_HAS_OVERLAY = true;\nexport const SIZES: HdsFlyoutSizes[] = Object.values(HdsFlyoutSizesValues);\n\nexport interface HdsFlyoutSignature {\n Args: {\n size?: HdsFlyoutSizes;\n returnFocusTo?: string;\n onOpen?: () => void;\n onClose?: (event: Event) => void;\n };\n Blocks: {\n default: [\n {\n Header?: WithBoundArgs<\n typeof HdsDialogPrimitiveHeaderComponent,\n 'id' | 'onDismiss' | 'contextualClassPrefix'\n >;\n Description?: WithBoundArgs<\n typeof HdsDialogPrimitiveDescriptionComponent,\n 'contextualClass'\n >;\n Body?: WithBoundArgs<\n typeof HdsDialogPrimitiveBodyComponent,\n 'contextualClass'\n >;\n Footer?: WithBoundArgs<\n typeof HdsDialogPrimitiveFooterComponent,\n 'onDismiss' | 'contextualClass'\n >;\n },\n ];\n };\n Element: HTMLDialogElement;\n}\n\nexport default class HdsFlyout extends Component<HdsFlyoutSignature> {\n @tracked private _isOpen = false;\n // TODO: make this property private; currently blocked by our consumers relying on it despite not being part of the public API: https://github.com/hashicorp/cloud-ui/blob/main/engines/waypoint/addon/components/preview-pane.ts#L15\n // private _element!: HTMLDialogElement;\n _element!: HTMLDialogElement;\n private _body!: HTMLElement;\n private _bodyInitialOverflowValue = '';\n\n get size(): HdsFlyoutSizes {\n const { size = DEFAULT_SIZE } = this.args;\n\n assert(\n `@size for \"Hds::Flyout\" must be one of the following: ${SIZES.join(\n ', '\n )}; received: ${size}`,\n SIZES.includes(size)\n );\n\n return size;\n }\n\n get id(): string {\n return getElementId(this);\n }\n\n get classNames(): string {\n const classes = ['hds-flyout'];\n\n // add a class based on the @size argument\n classes.push(`hds-flyout--size-${this.size}`);\n\n return classes.join(' ');\n }\n\n private _performCloseCleanup() {\n this._isOpen = false;\n\n // Reset page `overflow` property\n if (this._body) {\n this._body.style.removeProperty('overflow');\n if (this._bodyInitialOverflowValue === '') {\n if (this._body.style.length === 0) {\n this._body.removeAttribute('style');\n }\n } else {\n this._body.style.setProperty(\n 'overflow',\n this._bodyInitialOverflowValue\n );\n }\n }\n\n // Return focus to a specific element (if provided)\n if (this.args.returnFocusTo) {\n const initiator = document.getElementById(this.args.returnFocusTo);\n if (initiator) {\n initiator.focus();\n }\n }\n }\n\n private _registerDialog = modifier((element: HTMLDialogElement) => {\n // Store references of `<dialog>` and `<body>` elements\n this._element = element;\n this._body = document.body;\n\n if (this._body) {\n // Store the initial `overflow` value of `<body>` so we can reset to it\n this._bodyInitialOverflowValue =\n this._body.style.getPropertyValue('overflow');\n }\n\n // Register \"onClose\" callback function to be called when a native 'close' event is dispatched\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this._element.addEventListener('close', this.registerOnCloseCallback, true);\n\n // If the flyout dialog is not already open\n if (!this._element.open) {\n this.open();\n }\n\n return () => {\n // if the <dialog> is removed from the dom while open we emulate the close event\n if (this._isOpen) {\n this._performCloseCleanup();\n }\n\n this._element?.removeEventListener(\n 'close',\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.registerOnCloseCallback,\n true\n );\n };\n });\n\n @action registerOnCloseCallback(event: Event) {\n if (this.args.onClose && typeof this.args.onClose === 'function') {\n this.args.onClose(event);\n }\n\n this._performCloseCleanup();\n }\n\n @action\n open(): void {\n // Make flyout dialog visible using the native `showModal` method\n this._element.showModal();\n this._isOpen = true;\n\n // Prevent page from scrolling when the dialog is open\n if (this._body) this._body.style.setProperty('overflow', 'hidden');\n\n // Call \"onOpen\" callback function\n if (this.args.onOpen && typeof this.args.onOpen === 'function') {\n this.args.onOpen();\n }\n }\n\n @action\n // eslint-disable-next-line @typescript-eslint/require-await\n async onDismiss(): Promise<void> {\n // allow ember test helpers to be aware of when the `close` event fires\n // when using `click` or other helpers from '@ember/test-helpers'\n if (this._element.open) {\n const token = waiter.beginAsync();\n const listener = () => {\n waiter.endAsync(token);\n this._element.removeEventListener('close', listener);\n };\n this._element.addEventListener('close', listener);\n }\n\n // Make flyout dialog invisible using the native `close` method\n this._element.close();\n }\n}\n"],"names":["waiter","buildWaiter","DEFAULT_SIZE","HdsFlyoutSizesValues","Medium","DEFAULT_HAS_OVERLAY","SIZES","Object","values","HdsFlyout","Component","g","prototype","tracked","i","void 0","_element","_body","_bodyInitialOverflowValue","size","args","assert","join","includes","id","getElementId","classNames","classes","push","_performCloseCleanup","_isOpen","style","removeProperty","length","removeAttribute","setProperty","returnFocusTo","initiator","document","getElementById","focus","_registerDialog","modifier","element","body","getPropertyValue","addEventListener","registerOnCloseCallback","open","removeEventListener","event","onClose","n","action","showModal","onOpen","onDismiss","token","beginAsync","listener","endAsync","close","setComponentTemplate","TEMPLATE"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ import { precompileTemplate } from '@ember/template-compilation';
|
|
|
7
7
|
import { g, i, n } from 'decorator-transforms/runtime';
|
|
8
8
|
import { setComponentTemplate } from '@ember/component';
|
|
9
9
|
|
|
10
|
-
var TEMPLATE = precompileTemplate("{{!\n Copyright (c) HashiCorp, Inc.\n SPDX-License-Identifier: MPL-2.0\n}}\n{{! Important: if an argument is added in base.hbs, it must also be added/processed in the Base component used in field.hbs }}\n<div class={{this.classNames}} {{style this.styles}}>\n <PowerSelectMultiple\n @afterOptionsComponent={{if\n this.showAfterOptions\n (or\n @afterOptionsComponent\n (component\n \"hds/form/super-select/after-options\"\n content=@afterOptionsContent\n resultCountMessage=this.resultCountMessageText\n showNoSelectedMessage=this._showNoSelectedMessage\n showOnlySelected=this._showOnlySelected\n showSelected=this.showSelected\n showAll=this.showAll\n clearSelected=this.clearSelected\n selectedCount=this.selectedCount\n )\n )\n }}\n @ariaDescribedBy={{@ariaDescribedBy}}\n @ariaInvalid={{@ariaInvalid}}\n @ariaLabel={{@ariaLabel}}\n @ariaLabelledBy={{@ariaLabelledBy}}\n @beforeOptionsComponent={{@beforeOptionsComponent}}\n @calculatePosition={{if @verticalPosition undefined this.calculatePosition}}\n @closeOnSelect={{false}}\n @disabled={{@disabled}}\n @dropdownClass={{@dropdownClass}}\n @extra={{@extra}}\n @groupComponent={{component \"hds/form/super-select/option-group\"}}\n @horizontalPosition={{@horizontalPosition}}\n @initiallyOpened={{@initiallyOpened}}\n @labelText={{@labelText}}\n @loadingMessage={{@loadingMessage}}\n @matcher={{@matcher}}\n @matchTriggerWidth={{if @dropdownMaxWidth false @matchTriggerWidth}}\n @noMatchesMessage={{@noMatchesMessage}}\n @onBlur={{@onBlur}}\n @onChange={{@onChange}}\n @onClose={{@onClose}}\n @onFocus={{@onFocus}}\n @onInput={{@onInput}}\n @onKeydown={{@onKeydown}}\n @onOpen={{@onOpen}}\n @options={{@options}}\n @optionsComponent={{@optionsComponent}}\n @placeholder={{@placeholder}}\n @placeholderComponent={{@placeholderComponent}}\n @preventScroll={{@preventScroll}}\n @registerAPI={{this.setPowerSelectAPI}}\n @renderInPlace={{true}}\n @resultCountMessage={{this.resultCountMessageFunction}}\n @scrollTo={{@scrollTo}}\n @search={{@search}}\n @searchEnabled={{@searchEnabled}}\n @searchField={{@searchField}}\n @searchFieldPosition=\"before-options\"\n @searchMessage={{@searchMessage}}\n @searchPlaceholder={{this.searchPlaceholder}}\n @selected={{@selected}}\n @selectedItemComponent={{@selectedItemComponent}}\n @tabindex={{@tabindex}}\n @triggerClass={{@triggerClass}}\n @triggerComponent={{@triggerComponent}}\n @triggerId={{@triggerId}}\n @triggerRole={{@triggerRole}}\n @typeAheadOptionMatcher={{@typeAheadOptionMatcher}}\n @verticalPosition={{@verticalPosition}}\n ...attributes\n as |option select|\n >\n {{! even if technically what is yielded here are _a list_ of options, we\'ve decided to keep the `option` name for consistency with the existing `PowerSelect` API }}\n {{yield option select}}\n </PowerSelectMultiple>\n</div>");
|
|
10
|
+
var TEMPLATE = precompileTemplate("{{!\n Copyright (c) HashiCorp, Inc.\n SPDX-License-Identifier: MPL-2.0\n}}\n{{! Important: if an argument is added in base.hbs, it must also be added/processed in the Base component used in field.hbs }}\n<div class={{this.classNames}} {{style this.styles}}>\n <PowerSelectMultiple\n tabindex=\"0\"\n @afterOptionsComponent={{if\n this.showAfterOptions\n (or\n @afterOptionsComponent\n (component\n \"hds/form/super-select/after-options\"\n content=@afterOptionsContent\n resultCountMessage=this.resultCountMessageText\n showNoSelectedMessage=this._showNoSelectedMessage\n showOnlySelected=this._showOnlySelected\n showSelected=this.showSelected\n showAll=this.showAll\n clearSelected=this.clearSelected\n selectedCount=this.selectedCount\n )\n )\n }}\n @ariaDescribedBy={{@ariaDescribedBy}}\n @ariaInvalid={{@ariaInvalid}}\n @ariaLabel={{@ariaLabel}}\n @ariaLabelledBy={{@ariaLabelledBy}}\n @beforeOptionsComponent={{@beforeOptionsComponent}}\n @calculatePosition={{if @verticalPosition undefined this.calculatePosition}}\n @closeOnSelect={{false}}\n @disabled={{@disabled}}\n @dropdownClass={{@dropdownClass}}\n @extra={{@extra}}\n @groupComponent={{component \"hds/form/super-select/option-group\"}}\n @horizontalPosition={{@horizontalPosition}}\n @initiallyOpened={{@initiallyOpened}}\n @labelText={{@labelText}}\n @loadingMessage={{@loadingMessage}}\n @matcher={{@matcher}}\n @matchTriggerWidth={{if @dropdownMaxWidth false @matchTriggerWidth}}\n @noMatchesMessage={{@noMatchesMessage}}\n @onBlur={{@onBlur}}\n @onChange={{@onChange}}\n @onClose={{@onClose}}\n @onFocus={{@onFocus}}\n @onInput={{@onInput}}\n @onKeydown={{@onKeydown}}\n @onOpen={{@onOpen}}\n @options={{@options}}\n @optionsComponent={{@optionsComponent}}\n @placeholder={{@placeholder}}\n @placeholderComponent={{@placeholderComponent}}\n @preventScroll={{@preventScroll}}\n @registerAPI={{this.setPowerSelectAPI}}\n @renderInPlace={{true}}\n @resultCountMessage={{this.resultCountMessageFunction}}\n @scrollTo={{@scrollTo}}\n @search={{@search}}\n @searchEnabled={{@searchEnabled}}\n @searchField={{@searchField}}\n @searchFieldPosition=\"before-options\"\n @searchMessage={{@searchMessage}}\n @searchPlaceholder={{this.searchPlaceholder}}\n @selected={{@selected}}\n @selectedItemComponent={{@selectedItemComponent}}\n @tabindex={{@tabindex}}\n @triggerClass={{@triggerClass}}\n @triggerComponent={{@triggerComponent}}\n @triggerId={{@triggerId}}\n @triggerRole={{@triggerRole}}\n @typeAheadOptionMatcher={{@typeAheadOptionMatcher}}\n @verticalPosition={{@verticalPosition}}\n ...attributes\n as |option select|\n >\n {{! even if technically what is yielded here are _a list_ of options, we\'ve decided to keep the `option` name for consistency with the existing `PowerSelect` API }}\n {{yield option select}}\n </PowerSelectMultiple>\n</div>");
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* Copyright (c) HashiCorp, Inc.
|
|
@@ -66,6 +66,29 @@ class HdsModal extends Component {
|
|
|
66
66
|
classes.push(`hds-modal--color-${this.color}`);
|
|
67
67
|
return classes.join(' ');
|
|
68
68
|
}
|
|
69
|
+
_performCloseCleanup() {
|
|
70
|
+
this._isOpen = false;
|
|
71
|
+
|
|
72
|
+
// Reset page `overflow` property
|
|
73
|
+
if (this._body) {
|
|
74
|
+
this._body.style.removeProperty('overflow');
|
|
75
|
+
if (this._bodyInitialOverflowValue === '') {
|
|
76
|
+
if (this._body.style.length === 0) {
|
|
77
|
+
this._body.removeAttribute('style');
|
|
78
|
+
}
|
|
79
|
+
} else {
|
|
80
|
+
this._body.style.setProperty('overflow', this._bodyInitialOverflowValue);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// Return focus to a specific element (if provided)
|
|
85
|
+
if (this.args.returnFocusTo) {
|
|
86
|
+
const initiator = document.getElementById(this.args.returnFocusTo);
|
|
87
|
+
if (initiator) {
|
|
88
|
+
initiator.focus();
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
69
92
|
registerOnCloseCallback(event) {
|
|
70
93
|
if (!this.isDismissDisabled && this.args.onClose && typeof this.args.onClose === 'function') {
|
|
71
94
|
this.args.onClose(event);
|
|
@@ -81,27 +104,7 @@ class HdsModal extends Component {
|
|
|
81
104
|
this._element.showModal();
|
|
82
105
|
}
|
|
83
106
|
} else {
|
|
84
|
-
this.
|
|
85
|
-
|
|
86
|
-
// Reset page `overflow` property
|
|
87
|
-
if (this._body) {
|
|
88
|
-
this._body.style.removeProperty('overflow');
|
|
89
|
-
if (this._bodyInitialOverflowValue === '') {
|
|
90
|
-
if (this._body.style.length === 0) {
|
|
91
|
-
this._body.removeAttribute('style');
|
|
92
|
-
}
|
|
93
|
-
} else {
|
|
94
|
-
this._body.style.setProperty('overflow', this._bodyInitialOverflowValue);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
// Return focus to a specific element (if provided)
|
|
99
|
-
if (this.args.returnFocusTo) {
|
|
100
|
-
const initiator = document.getElementById(this.args.returnFocusTo);
|
|
101
|
-
if (initiator) {
|
|
102
|
-
initiator.focus();
|
|
103
|
-
}
|
|
104
|
-
}
|
|
107
|
+
this._performCloseCleanup();
|
|
105
108
|
}
|
|
106
109
|
}
|
|
107
110
|
static {
|
|
@@ -142,7 +145,7 @@ class HdsModal extends Component {
|
|
|
142
145
|
return () => {
|
|
143
146
|
// if the <dialog> is removed from the dom while open we emulate the close event
|
|
144
147
|
if (this._isOpen) {
|
|
145
|
-
this.
|
|
148
|
+
this._performCloseCleanup();
|
|
146
149
|
}
|
|
147
150
|
this._element?.removeEventListener('close',
|
|
148
151
|
// eslint-disable-next-line @typescript-eslint/unbound-method
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/hds/modal/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { assert } from '@ember/debug';\nimport { getElementId } from '../../../utils/hds-get-element-id.ts';\nimport { buildWaiter } from '@ember/test-waiters';\nimport { modifier } from 'ember-modifier';\n\nimport type { WithBoundArgs } from '@glint/template';\nimport type { HdsModalSizes, HdsModalColors } from './types.ts';\n\nimport HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.ts';\nimport HdsDialogPrimitiveBodyComponent from '../dialog-primitive/body.ts';\nimport HdsDialogPrimitiveFooterComponent from '../dialog-primitive/footer.ts';\nimport { HdsModalSizeValues, HdsModalColorValues } from './types.ts';\n\nconst waiter = buildWaiter('@hashicorp/design-system-components:modal');\n\nexport const DEFAULT_SIZE = HdsModalSizeValues.Medium;\nexport const DEFAULT_COLOR = HdsModalColorValues.Neutral;\n\nexport const SIZES: HdsModalSizes[] = Object.values(HdsModalSizeValues);\nexport const COLORS: HdsModalColors[] = Object.values(HdsModalColorValues);\n\nexport interface HdsModalSignature {\n Args: {\n isDismissDisabled?: boolean;\n size?: HdsModalSizes;\n color?: HdsModalColors;\n returnFocusTo?: string;\n onOpen?: () => void;\n onClose?: (event: Event) => void;\n };\n Blocks: {\n default: [\n {\n Header?: WithBoundArgs<\n typeof HdsDialogPrimitiveHeaderComponent,\n 'id' | 'onDismiss' | 'contextualClassPrefix'\n >;\n Body?: WithBoundArgs<\n typeof HdsDialogPrimitiveBodyComponent,\n 'contextualClass'\n >;\n Footer?: WithBoundArgs<\n typeof HdsDialogPrimitiveFooterComponent,\n 'onDismiss' | 'contextualClass'\n >;\n },\n ];\n };\n Element: HTMLDialogElement;\n}\n\nexport default class HdsModal extends Component<HdsModalSignature> {\n @tracked private _isOpen = false;\n private _element!: HTMLDialogElement;\n private _body!: HTMLElement;\n private _bodyInitialOverflowValue = '';\n private _clickOutsideToDismissHandler!: (event: MouseEvent) => void;\n\n get isDismissDisabled(): boolean {\n return this.args.isDismissDisabled ?? false;\n }\n\n get size(): HdsModalSizes {\n const { size = DEFAULT_SIZE } = this.args;\n\n assert(\n `@size for \"Hds::Modal\" must be one of the following: ${SIZES.join(\n ', '\n )}; received: ${size}`,\n SIZES.includes(size)\n );\n\n return size;\n }\n\n get color(): HdsModalColors {\n const { color = DEFAULT_COLOR } = this.args;\n\n assert(\n `@color for \"Hds::Modal\" must be one of the following: ${COLORS.join(\n ', '\n )}; received: ${color}`,\n COLORS.includes(color)\n );\n\n return color;\n }\n\n get id(): string {\n return getElementId(this);\n }\n\n get classNames(): string {\n const classes = ['hds-modal'];\n\n // add a class based on the @size argument\n classes.push(`hds-modal--size-${this.size}`);\n\n // add a class based on the @color argument\n classes.push(`hds-modal--color-${this.color}`);\n\n return classes.join(' ');\n }\n\n @action registerOnCloseCallback(event: Event): void {\n if (\n !this.isDismissDisabled &&\n this.args.onClose &&\n typeof this.args.onClose === 'function'\n ) {\n this.args.onClose(event);\n }\n\n // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed\n if (this.isDismissDisabled) {\n // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail\n // so we add this safeguard condition that checks for the `<dialog>` to have a parent\n if (this._element.parentElement) {\n // As there is no way to `preventDefault` on `close` events, we call the `showModal` function\n // preserving the state of the modal dialog\n this._element.showModal();\n }\n } else {\n this._isOpen = false;\n\n // Reset page `overflow` property\n if (this._body) {\n this._body.style.removeProperty('overflow');\n if (this._bodyInitialOverflowValue === '') {\n if (this._body.style.length === 0) {\n this._body.removeAttribute('style');\n }\n } else {\n this._body.style.setProperty(\n 'overflow',\n this._bodyInitialOverflowValue\n );\n }\n }\n\n // Return focus to a specific element (if provided)\n if (this.args.returnFocusTo) {\n const initiator = document.getElementById(this.args.returnFocusTo);\n if (initiator) {\n initiator.focus();\n }\n }\n }\n }\n\n private _registerDialog = modifier((element: HTMLDialogElement) => {\n // Store references of `<dialog>` and `<body>` elements\n this._element = element;\n this._body = document.body;\n\n if (this._body) {\n // Store the initial `overflow` value of `<body>` so we can reset to it\n this._bodyInitialOverflowValue =\n this._body.style.getPropertyValue('overflow');\n }\n\n // Register \"onClose\" callback function to be called when a native 'close' event is dispatched\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this._element.addEventListener('close', this.registerOnCloseCallback, true);\n\n // If the modal dialog is not already open\n if (!this._element.open) {\n this.open();\n }\n\n // Note: because the Modal has the `@isDismissedDisabled` argument, we need to add our own click outside to dismiss logic. This is because `ember-focus-trap` treats the `focusTrapOptions` as static, so we can't update it dynamically if `@isDismissDisabled` changes.\n this._clickOutsideToDismissHandler = (event: MouseEvent) => {\n // check if the click is outside the modal and the modal is open\n if (!this._element.contains(event.target as Node) && this._isOpen) {\n if (!this.isDismissDisabled) {\n // here we use `void` because `onDismiss` is an async function, but in reality we don't need to handle the result or wait for its completion\n void this.onDismiss();\n }\n }\n };\n\n document.addEventListener('click', this._clickOutsideToDismissHandler, {\n capture: true,\n passive: false,\n });\n\n return () => {\n // if the <dialog> is removed from the dom while open we emulate the close event\n if (this._isOpen) {\n this._element?.dispatchEvent(new Event('close'));\n }\n\n this._element?.removeEventListener(\n 'close',\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.registerOnCloseCallback,\n true\n );\n\n document.removeEventListener(\n 'click',\n this._clickOutsideToDismissHandler,\n true\n );\n };\n });\n\n @action\n open(): void {\n // Make modal dialog visible using the native `showModal` method\n this._element.showModal();\n this._isOpen = true;\n\n // Prevent page from scrolling when the dialog is open\n if (this._body) this._body.style.setProperty('overflow', 'hidden');\n\n // Call \"onOpen\" callback function\n if (this.args.onOpen && typeof this.args.onOpen === 'function') {\n this.args.onOpen();\n }\n }\n\n @action\n // eslint-disable-next-line @typescript-eslint/require-await\n async onDismiss(): Promise<void> {\n // allow ember test helpers to be aware of when the `close` event fires\n // when using `click` or other helpers from '@ember/test-helpers'\n if (this._element.open) {\n const token = waiter.beginAsync();\n const listener = () => {\n waiter.endAsync(token);\n this._element.removeEventListener('close', listener);\n };\n this._element.addEventListener('close', listener);\n }\n\n // Make modal dialog invisible using the native `close` method\n this._element.close();\n }\n}\n"],"names":["waiter","buildWaiter","DEFAULT_SIZE","HdsModalSizeValues","Medium","DEFAULT_COLOR","HdsModalColorValues","Neutral","SIZES","Object","values","COLORS","HdsModal","Component","g","prototype","tracked","i","void 0","_element","_body","_bodyInitialOverflowValue","_clickOutsideToDismissHandler","isDismissDisabled","args","size","assert","join","includes","color","id","getElementId","classNames","classes","push","registerOnCloseCallback","event","onClose","parentElement","showModal","_isOpen","style","removeProperty","length","removeAttribute","setProperty","returnFocusTo","initiator","document","getElementById","focus","n","action","_registerDialog","modifier","element","body","getPropertyValue","addEventListener","open","contains","target","onDismiss","capture","passive","dispatchEvent","Event","removeEventListener","onOpen","token","beginAsync","listener","endAsync","close","setComponentTemplate","TEMPLATE"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/hds/modal/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { assert } from '@ember/debug';\nimport { getElementId } from '../../../utils/hds-get-element-id.ts';\nimport { buildWaiter } from '@ember/test-waiters';\nimport { modifier } from 'ember-modifier';\n\nimport type { WithBoundArgs } from '@glint/template';\nimport type { HdsModalSizes, HdsModalColors } from './types.ts';\n\nimport HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.ts';\nimport HdsDialogPrimitiveBodyComponent from '../dialog-primitive/body.ts';\nimport HdsDialogPrimitiveFooterComponent from '../dialog-primitive/footer.ts';\nimport { HdsModalSizeValues, HdsModalColorValues } from './types.ts';\n\nconst waiter = buildWaiter('@hashicorp/design-system-components:modal');\n\nexport const DEFAULT_SIZE = HdsModalSizeValues.Medium;\nexport const DEFAULT_COLOR = HdsModalColorValues.Neutral;\n\nexport const SIZES: HdsModalSizes[] = Object.values(HdsModalSizeValues);\nexport const COLORS: HdsModalColors[] = Object.values(HdsModalColorValues);\n\nexport interface HdsModalSignature {\n Args: {\n isDismissDisabled?: boolean;\n size?: HdsModalSizes;\n color?: HdsModalColors;\n returnFocusTo?: string;\n onOpen?: () => void;\n onClose?: (event: Event) => void;\n };\n Blocks: {\n default: [\n {\n Header?: WithBoundArgs<\n typeof HdsDialogPrimitiveHeaderComponent,\n 'id' | 'onDismiss' | 'contextualClassPrefix'\n >;\n Body?: WithBoundArgs<\n typeof HdsDialogPrimitiveBodyComponent,\n 'contextualClass'\n >;\n Footer?: WithBoundArgs<\n typeof HdsDialogPrimitiveFooterComponent,\n 'onDismiss' | 'contextualClass'\n >;\n },\n ];\n };\n Element: HTMLDialogElement;\n}\n\nexport default class HdsModal extends Component<HdsModalSignature> {\n @tracked private _isOpen = false;\n private _element!: HTMLDialogElement;\n private _body!: HTMLElement;\n private _bodyInitialOverflowValue = '';\n private _clickOutsideToDismissHandler!: (event: MouseEvent) => void;\n\n get isDismissDisabled(): boolean {\n return this.args.isDismissDisabled ?? false;\n }\n\n get size(): HdsModalSizes {\n const { size = DEFAULT_SIZE } = this.args;\n\n assert(\n `@size for \"Hds::Modal\" must be one of the following: ${SIZES.join(\n ', '\n )}; received: ${size}`,\n SIZES.includes(size)\n );\n\n return size;\n }\n\n get color(): HdsModalColors {\n const { color = DEFAULT_COLOR } = this.args;\n\n assert(\n `@color for \"Hds::Modal\" must be one of the following: ${COLORS.join(\n ', '\n )}; received: ${color}`,\n COLORS.includes(color)\n );\n\n return color;\n }\n\n get id(): string {\n return getElementId(this);\n }\n\n get classNames(): string {\n const classes = ['hds-modal'];\n\n // add a class based on the @size argument\n classes.push(`hds-modal--size-${this.size}`);\n\n // add a class based on the @color argument\n classes.push(`hds-modal--color-${this.color}`);\n\n return classes.join(' ');\n }\n\n private _performCloseCleanup(): void {\n this._isOpen = false;\n\n // Reset page `overflow` property\n if (this._body) {\n this._body.style.removeProperty('overflow');\n if (this._bodyInitialOverflowValue === '') {\n if (this._body.style.length === 0) {\n this._body.removeAttribute('style');\n }\n } else {\n this._body.style.setProperty(\n 'overflow',\n this._bodyInitialOverflowValue\n );\n }\n }\n\n // Return focus to a specific element (if provided)\n if (this.args.returnFocusTo) {\n const initiator = document.getElementById(this.args.returnFocusTo);\n if (initiator) {\n initiator.focus();\n }\n }\n }\n\n @action registerOnCloseCallback(event: Event): void {\n if (\n !this.isDismissDisabled &&\n this.args.onClose &&\n typeof this.args.onClose === 'function'\n ) {\n this.args.onClose(event);\n }\n\n // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed\n if (this.isDismissDisabled) {\n // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail\n // so we add this safeguard condition that checks for the `<dialog>` to have a parent\n if (this._element.parentElement) {\n // As there is no way to `preventDefault` on `close` events, we call the `showModal` function\n // preserving the state of the modal dialog\n this._element.showModal();\n }\n } else {\n this._performCloseCleanup();\n }\n }\n\n private _registerDialog = modifier((element: HTMLDialogElement) => {\n // Store references of `<dialog>` and `<body>` elements\n this._element = element;\n this._body = document.body;\n\n if (this._body) {\n // Store the initial `overflow` value of `<body>` so we can reset to it\n this._bodyInitialOverflowValue =\n this._body.style.getPropertyValue('overflow');\n }\n\n // Register \"onClose\" callback function to be called when a native 'close' event is dispatched\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this._element.addEventListener('close', this.registerOnCloseCallback, true);\n\n // If the modal dialog is not already open\n if (!this._element.open) {\n this.open();\n }\n\n // Note: because the Modal has the `@isDismissedDisabled` argument, we need to add our own click outside to dismiss logic. This is because `ember-focus-trap` treats the `focusTrapOptions` as static, so we can't update it dynamically if `@isDismissDisabled` changes.\n this._clickOutsideToDismissHandler = (event: MouseEvent) => {\n // check if the click is outside the modal and the modal is open\n if (!this._element.contains(event.target as Node) && this._isOpen) {\n if (!this.isDismissDisabled) {\n // here we use `void` because `onDismiss` is an async function, but in reality we don't need to handle the result or wait for its completion\n void this.onDismiss();\n }\n }\n };\n\n document.addEventListener('click', this._clickOutsideToDismissHandler, {\n capture: true,\n passive: false,\n });\n\n return () => {\n // if the <dialog> is removed from the dom while open we emulate the close event\n if (this._isOpen) {\n this._performCloseCleanup();\n }\n\n this._element?.removeEventListener(\n 'close',\n // eslint-disable-next-line @typescript-eslint/unbound-method\n this.registerOnCloseCallback,\n true\n );\n\n document.removeEventListener(\n 'click',\n this._clickOutsideToDismissHandler,\n true\n );\n };\n });\n\n @action\n open(): void {\n // Make modal dialog visible using the native `showModal` method\n this._element.showModal();\n this._isOpen = true;\n\n // Prevent page from scrolling when the dialog is open\n if (this._body) this._body.style.setProperty('overflow', 'hidden');\n\n // Call \"onOpen\" callback function\n if (this.args.onOpen && typeof this.args.onOpen === 'function') {\n this.args.onOpen();\n }\n }\n\n @action\n // eslint-disable-next-line @typescript-eslint/require-await\n async onDismiss(): Promise<void> {\n // allow ember test helpers to be aware of when the `close` event fires\n // when using `click` or other helpers from '@ember/test-helpers'\n if (this._element.open) {\n const token = waiter.beginAsync();\n const listener = () => {\n waiter.endAsync(token);\n this._element.removeEventListener('close', listener);\n };\n this._element.addEventListener('close', listener);\n }\n\n // Make modal dialog invisible using the native `close` method\n this._element.close();\n }\n}\n"],"names":["waiter","buildWaiter","DEFAULT_SIZE","HdsModalSizeValues","Medium","DEFAULT_COLOR","HdsModalColorValues","Neutral","SIZES","Object","values","COLORS","HdsModal","Component","g","prototype","tracked","i","void 0","_element","_body","_bodyInitialOverflowValue","_clickOutsideToDismissHandler","isDismissDisabled","args","size","assert","join","includes","color","id","getElementId","classNames","classes","push","_performCloseCleanup","_isOpen","style","removeProperty","length","removeAttribute","setProperty","returnFocusTo","initiator","document","getElementById","focus","registerOnCloseCallback","event","onClose","parentElement","showModal","n","action","_registerDialog","modifier","element","body","getPropertyValue","addEventListener","open","contains","target","onDismiss","capture","passive","removeEventListener","onOpen","token","beginAsync","listener","endAsync","close","setComponentTemplate","TEMPLATE"],"mappings":"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"}
|
package/dist/components.js
CHANGED
|
@@ -219,7 +219,6 @@ export { default as HdsTextBody } from './components/hds/text/body.js';
|
|
|
219
219
|
export { default as HdsTextCode } from './components/hds/text/code.js';
|
|
220
220
|
export { default as HdsTextDisplay } from './components/hds/text/display.js';
|
|
221
221
|
export { HdsTextAlignValues, HdsTextColorValues, HdsTextGroupValues, HdsTextSizeValues, HdsTextWeightValues } from './components/hds/text/types.js';
|
|
222
|
-
export { default as HdsThemeSwitcher } from './components/hds/theme-switcher/index.js';
|
|
223
222
|
export { default as HdsTime } from './components/hds/time/index.js';
|
|
224
223
|
export { default as HdsTimeSingle } from './components/hds/time/single.js';
|
|
225
224
|
export { default as HdsTimeRange } from './components/hds/time/range.js';
|
package/dist/components.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/services.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
//# sourceMappingURL=services.js.map
|