Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(cdk/private): create cdk-visually-hidden style loader #29757

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

feat(cdk/private): create cdk-visually-hidden style loader #29757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3108241
feat(cdk/private): create cdk-visually-hidden style loader
wagnermaciel Sep 18, 2024
7265de1
fixup! feat(cdk/private): create cdk-visually-hidden style loader
wagnermaciel Sep 18, 2024
09c3c97
fixup! feat(cdk/private): create cdk-visually-hidden style loader
wagnermaciel Sep 18, 2024
58650cf
fixup! feat(cdk/private): create cdk-visually-hidden style loader
wagnermaciel Sep 19, 2024
d4f894b
fixup! feat(cdk/private): create cdk-visually-hidden style loader
wagnermaciel Sep 19, 2024
f85713e
fixup! feat(cdk/private): create cdk-visually-hidden style loader
wagnermaciel Sep 19, 2024
629c3ac
fixup! feat(cdk/private): create cdk-visually-hidden style loader
wagnermaciel Sep 19, 2024
f5a54ca
fixup! feat(cdk/private): create cdk-visually-hidden style loader
wagnermaciel Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/cdk/private/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
load("//tools:defaults.bzl", "markdown_to_html", "ng_module")
load("//tools:defaults.bzl", "markdown_to_html", "ng_module", "sass_binary")

package(default_visibility = ["//visibility:public"])

Expand All @@ -8,11 +8,18 @@ ng_module(
["**/*.ts"],
exclude = ["**/*.spec.ts"],
),
assets = [":visually-hidden-styles"],
deps = [
"@npm//@angular/core",
],
)

sass_binary(
name = "visually-hidden-styles",
src = ":visually-hidden/visually-hidden.scss",
deps = ["//src/cdk/a11y:a11y_scss_lib"],
)

markdown_to_html(
name = "overview",
srcs = [":private.md"],
Expand Down
1 change: 1 addition & 0 deletions src/cdk/private/public-api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@
*/

export * from './style-loader';
export * from './visually-hidden/visually-hidden';
3 changes: 3 additions & 0 deletions src/cdk/private/visually-hidden/visually-hidden.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@use '../../a11y';

@include a11y.a11y-visually-hidden();
23 changes: 23 additions & 0 deletions src/cdk/private/visually-hidden/visually-hidden.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/

import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';

/**
* Component used to load the .cdk-visually-hidden styles.
* @docs-private
*/
@Component({
standalone: true,
styleUrl: 'visually-hidden.css',
exportAs: 'cdkVisuallyHidden',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can drop the exportAs.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to add this in because if I drop the exportAs I get a duplicate component ID error :( Is there another way to resolve this error?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The full error is:

Detected identical metadata between following components:
- _MatBadgeStyleLoader and _VisuallyHiddenLoader

The metadata of one of each of these components should be changed to be slightly different in order to avoid conflicts at runtime.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, then it should be fine. Another way to work around it is to add a host binding.

encapsulation: ViewEncapsulation.None,
template: '',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class _VisuallyHiddenLoader {}
8 changes: 8 additions & 0 deletions tools/public_api_guard/cdk/private.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ export class _CdkPrivateStyleLoader {
static ɵprov: i0.ɵɵInjectableDeclaration<_CdkPrivateStyleLoader>;
}

// @public
export class _VisuallyHiddenLoader {
// (undocumented)
static ɵcmp: i0.ɵɵComponentDeclaration<_VisuallyHiddenLoader, "ng-component", ["cdkVisuallyHidden"], {}, {}, never, never, true, never>;
// (undocumented)
static ɵfac: i0.ɵɵFactoryDeclaration<_VisuallyHiddenLoader, never>;
}

// (No @packageDocumentation comment for this package)

```
Loading