@clr/angular 18.2.0 → 18.2.2
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/fesm2022/clr-angular-button.mjs +11 -5
- package/fesm2022/clr-angular-button.mjs.map +1 -1
- package/fesm2022/clr-angular-data-datagrid.mjs +10 -3
- package/fesm2022/clr-angular-data-datagrid.mjs.map +1 -1
- package/fesm2022/clr-angular-icon.mjs +18 -4
- package/fesm2022/clr-angular-icon.mjs.map +1 -1
- package/fesm2022/clr-angular-popover-common.mjs +328 -39
- package/fesm2022/clr-angular-popover-common.mjs.map +1 -1
- package/package.json +2 -2
- package/types/clr-angular-data-datagrid.d.ts +2 -1
- package/types/clr-angular-icon.d.ts +4 -2
- package/types/clr-angular-popover-common.d.ts +62 -0
|
@@ -173,7 +173,7 @@ function renderIcon(shapeOrStringIcon) {
|
|
|
173
173
|
* The full license information can be found in LICENSE in the root directory of this project.
|
|
174
174
|
*/
|
|
175
175
|
const icon$6C = {
|
|
176
|
-
outline: '<circle class="cds-internal-dot-
|
|
176
|
+
outline: '<circle class="cds-internal-dot-3" cx="31.1" cy="18" r="2.9"/><circle class="cds-internal-dot-2" cx="18" cy="18" r="2.9"/><circle class="cds-internal-dot-1" cx="4.9" cy="18" r="2.9"/>',
|
|
177
177
|
};
|
|
178
178
|
const unknownIconName = 'unknown';
|
|
179
179
|
const unknownIcon = [unknownIconName, renderIcon(icon$6C)];
|
|
@@ -462,6 +462,9 @@ class ClrIcon {
|
|
|
462
462
|
}
|
|
463
463
|
});
|
|
464
464
|
}
|
|
465
|
+
ngAfterViewInit() {
|
|
466
|
+
this.cleanUpAdoptedStyleSheets();
|
|
467
|
+
}
|
|
465
468
|
ngOnDestroy() {
|
|
466
469
|
this.subscription?.unsubscribe();
|
|
467
470
|
}
|
|
@@ -480,12 +483,23 @@ class ClrIcon {
|
|
|
480
483
|
updateIconSize(value) {
|
|
481
484
|
updateIconSizeStyle(this.el.nativeElement, value);
|
|
482
485
|
}
|
|
486
|
+
/*
|
|
487
|
+
@TODO - remove in v19 after `cds-icon` selector is removed
|
|
488
|
+
If @cds/core is used in combination with @clr/angular the internal components or others that use `cds-icon` tag
|
|
489
|
+
get double icons and leaking style sheets from the web component so we need to clear these up.
|
|
490
|
+
*/
|
|
491
|
+
cleanUpAdoptedStyleSheets() {
|
|
492
|
+
const shadow = this.el.nativeElement.shadowRoot;
|
|
493
|
+
if (shadow) {
|
|
494
|
+
shadow.adoptedStyleSheets = [];
|
|
495
|
+
}
|
|
496
|
+
}
|
|
483
497
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrIcon, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrIcon, isStandalone: true, selector: "clr-icon, cds-icon", inputs: { shape: "shape", size: "size", direction: "direction", flip: "flip", solid: ["solid", "solid", booleanAttribute], status: "status", inverse: ["inverse", "inverse", booleanAttribute], badge: "badge" }, host: { properties: { "attr.shape": "shape", "attr.size": "size", "attr.direction": "direction", "attr.flip": "flip", "attr.solid": "solid ? true : null", "attr.status": "status", "attr.inverse": "inverse ? true : null", "attr.badge": "badge" } }, providers: [IconHtmlPipe], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n@if (isStringIcon) {\n <span [innerHTML]=\"iconSVG | iconHtml\"></span>\n} @else {\n <svg
|
|
498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrIcon, isStandalone: true, selector: "clr-icon, cds-icon", inputs: { shape: "shape", size: "size", direction: "direction", flip: "flip", solid: ["solid", "solid", booleanAttribute], status: "status", inverse: ["inverse", "inverse", booleanAttribute], badge: "badge" }, host: { properties: { "attr.shape": "shape", "attr.size": "size", "attr.direction": "direction", "attr.flip": "flip", "attr.solid": "solid ? true : null", "attr.status": "status", "attr.inverse": "inverse ? true : null", "attr.badge": "badge" } }, providers: [IconHtmlPipe], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n@if (isStringIcon) {\n <span [innerHTML]=\"iconSVG | iconHtml\" data-ng-owner></span>\n} @else {\n <svg\n [innerHTML]=\"iconSVG | iconHtml\"\n viewBox=\"0 0 36 36\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n data-ng-owner\n ></svg>\n}\n", styles: [":host{all:initial;display:block;visibility:inherit;font-family:var(--cds-alias-typography-font-family);contain:layout;box-sizing:border-box!important;appearance:none!important}*,*:before,*:after{box-sizing:inherit!important}slot{font-family:var(--cds-alias-typography-font-family);display:contents!important}::slotted(*){font-family:inherit;box-sizing:inherit}::slotted(*)::placeholder{color:var(--cds-alias-typography-color-200)}:host([role=button]),:host([_is-anchor]){cursor:pointer!important}:host([role=button]) ::slotted(*),:host([_is-anchor]) ::slotted(*){cursor:pointer!important}:host([role=button][disabled]){cursor:not-allowed!important}:host([role=button][disabled]) ::slotted(*){cursor:not-allowed!important;pointer-events:none}:host([hidden]),[hidden]{display:none!important}:host([hidden*=false]){display:block!important}[role=dialog][hidden],[role=dialog][hidden]>*,:host([role=dialog][hidden]),:host([role=dialog][hidden]) ::slotted(*){display:block!important;visibility:hidden!important}[role=dialog][hidden*=false],[role=dialog][hidden*=false]>*,:host([role=dialog][hidden*=false]),:host([role=dialog][hidden*=false]) ::slotted(*){visibility:visible!important}:host([tabindex=\"0\"]:focus),:host([tabindex=\"0\"]:focus) [focusable],:host([_focused]) [focusable],:host([_focused]) .input,[tabindex=\"0\"][focusable]:focus{outline:Highlight solid 2px;outline:5px auto -webkit-focus-ring-color;outline-offset:var(--cds-alias-object-interaction-outline-offset)}:host{--color: currentColor;display:inline-block;height:var(--cds-global-space-7);width:var(--cds-global-space-7);min-height:var(--cds-global-space-7);min-width:var(--cds-global-space-7);margin:0;vertical-align:middle;fill:var(--color);color:var(--color);contain:strict;cursor:inherit}:host>svg:not([data-ng-owner]){display:none!important}svg{display:block}:host([size*=xs]){height:var(--clr-base-icon-size-xs);width:var(--clr-base-icon-size-xs);min-height:var(--clr-base-icon-size-xs);min-width:var(--clr-base-icon-size-xs)}:host([size*=sm]){height:var(--clr-base-icon-size-s);width:var(--clr-base-icon-size-s);min-height:var(--clr-base-icon-size-s);min-width:var(--clr-base-icon-size-s)}:host([size*=md]){height:var(--clr-base-icon-size-m);width:var(--clr-base-icon-size-m);min-height:var(--clr-base-icon-size-m);min-width:var(--clr-base-icon-size-m)}:host([size*=lg]){height:var(--clr-base-icon-size-l);width:var(--clr-base-icon-size-l);min-height:var(--clr-base-icon-size-l);min-width:var(--clr-base-icon-size-l)}:host([size*=xl]){height:var(--clr-base-icon-size-xl);width:var(--clr-base-icon-size-xl);min-height:var(--clr-base-icon-size-xl);min-width:var(--clr-base-icon-size-xl)}:host([size*=xxl]){height:var(--clr-base-icon-size-2xl);width:var(--clr-base-icon-size-2xl);min-height:var(--clr-base-icon-size-2xl);min-width:var(--clr-base-icon-size-2xl)}:host([size*=\"3xl\"]){height:var(--clr-base-icon-size-3xl);width:var(--clr-base-icon-size-3xl);min-height:var(--clr-base-icon-size-3xl);min-width:var(--clr-base-icon-size-3xl)}:host([size*=\"4xl\"]){height:var(--clr-base-icon-size-4xl);width:var(--clr-base-icon-size-4xl);min-height:var(--clr-base-icon-size-4xl);min-width:var(--clr-base-icon-size-4xl)}:host([size*=fit]){height:auto;width:auto;contain:layout}:host([status=success]){--color: var(--cds-alias-status-success)}:host([status=danger]){--color: var(--cds-alias-status-danger)}:host([status=warning]){--color: var(--cds-alias-status-warning-dark)}:host([status=info]){--color: var(--cds-alias-status-info)}:host([status=neutral]){--color: var(--cds-alias-status-neutral)}:host([inverse]){--color: var(--cds-global-color-construction-200)}:host([direction=up]){transform:rotate(0)}:host([direction=down]){transform:rotate(180deg)}:host([direction=right]){transform:rotate(90deg)}:host([direction=left]){transform:rotate(270deg)}:host([flip=horizontal]){transform:scale(-1) rotateX(180deg)}:host([flip=vertical]){transform:scale(-1) rotateY(180deg)}.badge,.alert{fill:var(--badge-color, var(--cds-alias-status-danger))}:host([badge=success]){--badge-color: var(--cds-alias-status-success)}:host([badge=danger]){--badge-color: var(--cds-alias-status-danger)}:host([badge*=warning]){--badge-color: var(--cds-alias-status-warning-dark)}:host([badge=inherit]){--badge-color: currentColor}:host([badge=info]){--badge-color: var(--cds-alias-status-info)}:host([badge=neutral]){--badge-color: var(--cds-alias-status-neutral)}:host([badge=inherit-triangle]){--badge-color: currentColor}:host([badge][inverse]){--badge-color: var(--cds-alias-status-danger)}:host([badge=success][inverse]){--badge-color: var(--cds-alias-status-success)}:host([badge*=warning][inverse]){--badge-color: var(--cds-alias-status-warning-dark)}:host([badge*=inherit][inverse]){--badge-color: currentColor}:host([badge=info][inverse]){--badge-color: var(--cds-alias-status-info)}.cds-internal-dot-1{animation:fade-in-and-out 1.8s ease-in 0s infinite}.cds-internal-dot-2{animation:fade-in-and-out 1.8s ease-out .422s infinite}.cds-internal-dot-3{animation:fade-in-and-out 1.8s ease-out .675s infinite}@keyframes fade-in-and-out{0%{opacity:0}75%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion){.cds-internal-dot-1,.cds-internal-dot-2,.cds-internal-dot-3{animation:none}}\n"], dependencies: [{ kind: "pipe", type: IconHtmlPipe, name: "iconHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ExperimentalIsolatedShadowDom }); }
|
|
485
499
|
}
|
|
486
500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrIcon, decorators: [{
|
|
487
501
|
type: Component,
|
|
488
|
-
args: [{ selector: 'clr-icon, cds-icon', encapsulation: ViewEncapsulation.
|
|
502
|
+
args: [{ selector: 'clr-icon, cds-icon', encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
489
503
|
'[attr.shape]': 'shape',
|
|
490
504
|
'[attr.size]': 'size',
|
|
491
505
|
'[attr.direction]': 'direction',
|
|
@@ -494,7 +508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
494
508
|
'[attr.status]': 'status',
|
|
495
509
|
'[attr.inverse]': 'inverse ? true : null',
|
|
496
510
|
'[attr.badge]': 'badge',
|
|
497
|
-
}, imports: [IconHtmlPipe], providers: [IconHtmlPipe], template: "<!--\n ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n@if (isStringIcon) {\n <span [innerHTML]=\"iconSVG | iconHtml\"></span>\n} @else {\n <svg
|
|
511
|
+
}, imports: [IconHtmlPipe], providers: [IconHtmlPipe], template: "<!--\n ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n@if (isStringIcon) {\n <span [innerHTML]=\"iconSVG | iconHtml\" data-ng-owner></span>\n} @else {\n <svg\n [innerHTML]=\"iconSVG | iconHtml\"\n viewBox=\"0 0 36 36\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n data-ng-owner\n ></svg>\n}\n", styles: [":host{all:initial;display:block;visibility:inherit;font-family:var(--cds-alias-typography-font-family);contain:layout;box-sizing:border-box!important;appearance:none!important}*,*:before,*:after{box-sizing:inherit!important}slot{font-family:var(--cds-alias-typography-font-family);display:contents!important}::slotted(*){font-family:inherit;box-sizing:inherit}::slotted(*)::placeholder{color:var(--cds-alias-typography-color-200)}:host([role=button]),:host([_is-anchor]){cursor:pointer!important}:host([role=button]) ::slotted(*),:host([_is-anchor]) ::slotted(*){cursor:pointer!important}:host([role=button][disabled]){cursor:not-allowed!important}:host([role=button][disabled]) ::slotted(*){cursor:not-allowed!important;pointer-events:none}:host([hidden]),[hidden]{display:none!important}:host([hidden*=false]){display:block!important}[role=dialog][hidden],[role=dialog][hidden]>*,:host([role=dialog][hidden]),:host([role=dialog][hidden]) ::slotted(*){display:block!important;visibility:hidden!important}[role=dialog][hidden*=false],[role=dialog][hidden*=false]>*,:host([role=dialog][hidden*=false]),:host([role=dialog][hidden*=false]) ::slotted(*){visibility:visible!important}:host([tabindex=\"0\"]:focus),:host([tabindex=\"0\"]:focus) [focusable],:host([_focused]) [focusable],:host([_focused]) .input,[tabindex=\"0\"][focusable]:focus{outline:Highlight solid 2px;outline:5px auto -webkit-focus-ring-color;outline-offset:var(--cds-alias-object-interaction-outline-offset)}:host{--color: currentColor;display:inline-block;height:var(--cds-global-space-7);width:var(--cds-global-space-7);min-height:var(--cds-global-space-7);min-width:var(--cds-global-space-7);margin:0;vertical-align:middle;fill:var(--color);color:var(--color);contain:strict;cursor:inherit}:host>svg:not([data-ng-owner]){display:none!important}svg{display:block}:host([size*=xs]){height:var(--clr-base-icon-size-xs);width:var(--clr-base-icon-size-xs);min-height:var(--clr-base-icon-size-xs);min-width:var(--clr-base-icon-size-xs)}:host([size*=sm]){height:var(--clr-base-icon-size-s);width:var(--clr-base-icon-size-s);min-height:var(--clr-base-icon-size-s);min-width:var(--clr-base-icon-size-s)}:host([size*=md]){height:var(--clr-base-icon-size-m);width:var(--clr-base-icon-size-m);min-height:var(--clr-base-icon-size-m);min-width:var(--clr-base-icon-size-m)}:host([size*=lg]){height:var(--clr-base-icon-size-l);width:var(--clr-base-icon-size-l);min-height:var(--clr-base-icon-size-l);min-width:var(--clr-base-icon-size-l)}:host([size*=xl]){height:var(--clr-base-icon-size-xl);width:var(--clr-base-icon-size-xl);min-height:var(--clr-base-icon-size-xl);min-width:var(--clr-base-icon-size-xl)}:host([size*=xxl]){height:var(--clr-base-icon-size-2xl);width:var(--clr-base-icon-size-2xl);min-height:var(--clr-base-icon-size-2xl);min-width:var(--clr-base-icon-size-2xl)}:host([size*=\"3xl\"]){height:var(--clr-base-icon-size-3xl);width:var(--clr-base-icon-size-3xl);min-height:var(--clr-base-icon-size-3xl);min-width:var(--clr-base-icon-size-3xl)}:host([size*=\"4xl\"]){height:var(--clr-base-icon-size-4xl);width:var(--clr-base-icon-size-4xl);min-height:var(--clr-base-icon-size-4xl);min-width:var(--clr-base-icon-size-4xl)}:host([size*=fit]){height:auto;width:auto;contain:layout}:host([status=success]){--color: var(--cds-alias-status-success)}:host([status=danger]){--color: var(--cds-alias-status-danger)}:host([status=warning]){--color: var(--cds-alias-status-warning-dark)}:host([status=info]){--color: var(--cds-alias-status-info)}:host([status=neutral]){--color: var(--cds-alias-status-neutral)}:host([inverse]){--color: var(--cds-global-color-construction-200)}:host([direction=up]){transform:rotate(0)}:host([direction=down]){transform:rotate(180deg)}:host([direction=right]){transform:rotate(90deg)}:host([direction=left]){transform:rotate(270deg)}:host([flip=horizontal]){transform:scale(-1) rotateX(180deg)}:host([flip=vertical]){transform:scale(-1) rotateY(180deg)}.badge,.alert{fill:var(--badge-color, var(--cds-alias-status-danger))}:host([badge=success]){--badge-color: var(--cds-alias-status-success)}:host([badge=danger]){--badge-color: var(--cds-alias-status-danger)}:host([badge*=warning]){--badge-color: var(--cds-alias-status-warning-dark)}:host([badge=inherit]){--badge-color: currentColor}:host([badge=info]){--badge-color: var(--cds-alias-status-info)}:host([badge=neutral]){--badge-color: var(--cds-alias-status-neutral)}:host([badge=inherit-triangle]){--badge-color: currentColor}:host([badge][inverse]){--badge-color: var(--cds-alias-status-danger)}:host([badge=success][inverse]){--badge-color: var(--cds-alias-status-success)}:host([badge*=warning][inverse]){--badge-color: var(--cds-alias-status-warning-dark)}:host([badge*=inherit][inverse]){--badge-color: currentColor}:host([badge=info][inverse]){--badge-color: var(--cds-alias-status-info)}.cds-internal-dot-1{animation:fade-in-and-out 1.8s ease-in 0s infinite}.cds-internal-dot-2{animation:fade-in-and-out 1.8s ease-out .422s infinite}.cds-internal-dot-3{animation:fade-in-and-out 1.8s ease-out .675s infinite}@keyframes fade-in-and-out{0%{opacity:0}75%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion){.cds-internal-dot-1,.cds-internal-dot-2,.cds-internal-dot-3{animation:none}}\n"] }]
|
|
498
512
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { shape: [{
|
|
499
513
|
type: Input
|
|
500
514
|
}], size: [{
|