@corto-ai/gds-angular 2.1.4-dev.2 → 2.1.4-test.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/README.md
CHANGED
|
@@ -30,11 +30,11 @@ If you plan to only use the stylesheet/fonts for this library, we recommend impl
|
|
|
30
30
|
|
|
31
31
|
## CDN Assets
|
|
32
32
|
|
|
33
|
-
- All brands combined: <https://cdn.
|
|
34
|
-
- Acctivity: <https://cdn.
|
|
35
|
-
- CORTO: <https://cdn.
|
|
36
|
-
- LawY: <https://cdn.
|
|
37
|
-
- LEAP: <https://cdn.
|
|
33
|
+
- All brands combined: <https://cdn.test.cortoaws.com/style/gds/2.1.4-test.2/css/all.css>
|
|
34
|
+
- Acctivity: <https://cdn.test.cortoaws.com/style/gds/2.1.4-test.2/css/acctivity.css>
|
|
35
|
+
- CORTO: <https://cdn.test.cortoaws.com/style/gds/2.1.4-test.2/css/corto.css>
|
|
36
|
+
- LawY: <https://cdn.test.cortoaws.com/style/gds/2.1.4-test.2/css/lawy.css>
|
|
37
|
+
- LEAP: <https://cdn.test.cortoaws.com/style/gds/2.1.4-test.2/css/leap.css>
|
|
38
38
|
|
|
39
39
|
## Library `@layer`s
|
|
40
40
|
|
|
@@ -7684,6 +7684,7 @@ class GdsTreeViewListItemComponent {
|
|
|
7684
7684
|
expanded = input(false, { ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7685
7685
|
hasChildren = input(false, { ...(ngDevMode ? { debugName: "hasChildren" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7686
7686
|
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
7687
|
+
disableChevron = input(...(ngDevMode ? [undefined, { debugName: "disableChevron" }] : /* istanbul ignore next */ []));
|
|
7687
7688
|
clicked = output();
|
|
7688
7689
|
doubleClicked = output();
|
|
7689
7690
|
toggleExpanded = output();
|
|
@@ -7731,15 +7732,15 @@ class GdsTreeViewListItemComponent {
|
|
|
7731
7732
|
}
|
|
7732
7733
|
}
|
|
7733
7734
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTreeViewListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7734
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsTreeViewListItemComponent, isStandalone: true, selector: "gds-tree-view-list-item", inputs: { tier: { classPropertyName: "tier", publicName: "tier", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", doubleClicked: "doubleClicked", toggleExpanded: "toggleExpanded" }, host: { properties: { "style.--tier": "tier()" }, classAttribute: "gds-display-contents" }, queries: [{ propertyName: "checkbox", first: true, predicate: GdsCheckboxComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "item", first: true, predicate: ["item"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GdsListboxOptionDirective }], ngImport: i0, template: "<div\n #item\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-min-width-0\n gds-position-relative\n gds-width-100-parent\n root\n \"\n [ngClass]=\"{\n selected: activeOverride(),\n disabled: disabled(),\n dropdown: expanded(),\n 'has-checkbox': hasCheckbox()\n }\"\n role=\"treeitem\"\n [attr.aria-selected]=\"activeOverride()\"\n [attr.aria-label]=\"ariaLabel()\"\n [tabindex]=\"-1\"\n (click)=\"onHandleClick($event)\"\n (keydown.space)=\"onHandleClick($event)\"\n (dblclick)=\"onHandleDoubleClick($event)\"\n (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n <ng-content select=\"[checkbox]\" />\n @if (displayChevron()) {\n <button\n class=\"\n chevron-btn\n gds-background-none\n gds-min-height-0\n gds-mobile-margin-inline-end-sm\n \"\n gds-icon-button\n variant=\"primary\"\n [tabindex]=\"-1\"\n (clicked)=\"handleToggleExpanded($event)\"\n >\n <gds-icon\n class=\"\n chevron\n gds-icon-size-2xs\n gds-mobile-icon-size-sm\n \"\n key=\"line-chevron-right-stroke\"\n />\n </button>\n } @else {\n <span class=\"gds-width-sm\"></span>\n }\n\n @if (icon(); as icon) {\n <gds-icon\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-sm\n icon\n \"\n [key]=\"icon\"\n />\n }\n <div class=\"\n gds-flex-1\n gds-min-width-0\n gds-text-body\n label\n \">\n <ng-content />\n </div>\n <div class=\"\n end-content\n gds-padding-block-end-2xs\n gds-text-caption\n \">\n <ng-content select=\"[end-content]\" />\n </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .root{padding-left:calc(var(--gds-spacing-sm) + var(--gds-spacing-md) * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7735
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsTreeViewListItemComponent, isStandalone: true, selector: "gds-tree-view-list-item", inputs: { tier: { classPropertyName: "tier", publicName: "tier", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disableChevron: { classPropertyName: "disableChevron", publicName: "disableChevron", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", doubleClicked: "doubleClicked", toggleExpanded: "toggleExpanded" }, host: { properties: { "style.--tier": "tier()" }, classAttribute: "gds-display-contents" }, queries: [{ propertyName: "checkbox", first: true, predicate: GdsCheckboxComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "item", first: true, predicate: ["item"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GdsListboxOptionDirective }], ngImport: i0, template: "<div\n #item\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-min-width-0\n gds-position-relative\n gds-width-100-parent\n root\n \"\n [ngClass]=\"{\n selected: activeOverride(),\n disabled: disabled(),\n dropdown: expanded(),\n 'has-checkbox': hasCheckbox()\n }\"\n role=\"treeitem\"\n [attr.aria-selected]=\"activeOverride()\"\n [attr.aria-label]=\"ariaLabel()\"\n [tabindex]=\"-1\"\n (click)=\"onHandleClick($event)\"\n (keydown.space)=\"onHandleClick($event)\"\n (dblclick)=\"onHandleDoubleClick($event)\"\n (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n <ng-content select=\"[checkbox]\" />\n @if (displayChevron()) {\n <button\n class=\"\n chevron-btn\n gds-background-none\n gds-border-none\n gds-min-height-0\n gds-mobile-margin-inline-end-sm\n \"\n gds-icon-button\n variant=\"primary\"\n [disabled]=\"disableChevron()\"\n [tabindex]=\"-1\"\n (clicked)=\"handleToggleExpanded($event)\"\n >\n <gds-icon\n class=\"\n chevron\n gds-icon-size-2xs\n gds-mobile-icon-size-sm\n \"\n key=\"line-chevron-right-stroke\"\n />\n </button>\n } @else {\n <span class=\"gds-width-sm\"></span>\n }\n\n @if (icon(); as icon) {\n <gds-icon\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-sm\n icon\n \"\n [key]=\"icon\"\n />\n }\n <div class=\"\n gds-flex-1\n gds-min-width-0\n gds-text-body\n label\n \">\n <ng-content />\n </div>\n <div class=\"\n end-content\n gds-padding-block-end-2xs\n gds-text-caption\n \">\n <ng-content select=\"[end-content]\" />\n </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .root{padding-left:calc(var(--gds-spacing-sm) + var(--gds-spacing-md) * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7735
7736
|
}
|
|
7736
7737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTreeViewListItemComponent, decorators: [{
|
|
7737
7738
|
type: Component,
|
|
7738
7739
|
args: [{ selector: 'gds-tree-view-list-item', imports: [NgClass, GdsIconComponent, GdsIconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
7739
7740
|
'[style.--tier]': 'tier()',
|
|
7740
7741
|
class: 'gds-display-contents'
|
|
7741
|
-
}, hostDirectives: [GdsListboxOptionDirective], template: "<div\n #item\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-min-width-0\n gds-position-relative\n gds-width-100-parent\n root\n \"\n [ngClass]=\"{\n selected: activeOverride(),\n disabled: disabled(),\n dropdown: expanded(),\n 'has-checkbox': hasCheckbox()\n }\"\n role=\"treeitem\"\n [attr.aria-selected]=\"activeOverride()\"\n [attr.aria-label]=\"ariaLabel()\"\n [tabindex]=\"-1\"\n (click)=\"onHandleClick($event)\"\n (keydown.space)=\"onHandleClick($event)\"\n (dblclick)=\"onHandleDoubleClick($event)\"\n (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n <ng-content select=\"[checkbox]\" />\n @if (displayChevron()) {\n <button\n class=\"\n chevron-btn\n gds-background-none\n gds-min-height-0\n gds-mobile-margin-inline-end-sm\n \"\n gds-icon-button\n variant=\"primary\"\n [tabindex]=\"-1\"\n (clicked)=\"handleToggleExpanded($event)\"\n >\n <gds-icon\n class=\"\n chevron\n gds-icon-size-2xs\n gds-mobile-icon-size-sm\n \"\n key=\"line-chevron-right-stroke\"\n />\n </button>\n } @else {\n <span class=\"gds-width-sm\"></span>\n }\n\n @if (icon(); as icon) {\n <gds-icon\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-sm\n icon\n \"\n [key]=\"icon\"\n />\n }\n <div class=\"\n gds-flex-1\n gds-min-width-0\n gds-text-body\n label\n \">\n <ng-content />\n </div>\n <div class=\"\n end-content\n gds-padding-block-end-2xs\n gds-text-caption\n \">\n <ng-content select=\"[end-content]\" />\n </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .root{padding-left:calc(var(--gds-spacing-sm) + var(--gds-spacing-md) * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"] }]
|
|
7742
|
-
}], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsCheckboxComponent), { isSignal: true }] }], item: [{ type: i0.ViewChild, args: ['item', { isSignal: true }] }], tier: [{ type: i0.Input, args: [{ isSignal: true, alias: "tier", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], doubleClicked: [{ type: i0.Output, args: ["doubleClicked"] }], toggleExpanded: [{ type: i0.Output, args: ["toggleExpanded"] }] } });
|
|
7742
|
+
}, hostDirectives: [GdsListboxOptionDirective], template: "<div\n #item\n class=\"\n gds-align-items-center\n gds-display-flex\n gds-gap-2xs\n gds-min-width-0\n gds-position-relative\n gds-width-100-parent\n root\n \"\n [ngClass]=\"{\n selected: activeOverride(),\n disabled: disabled(),\n dropdown: expanded(),\n 'has-checkbox': hasCheckbox()\n }\"\n role=\"treeitem\"\n [attr.aria-selected]=\"activeOverride()\"\n [attr.aria-label]=\"ariaLabel()\"\n [tabindex]=\"-1\"\n (click)=\"onHandleClick($event)\"\n (keydown.space)=\"onHandleClick($event)\"\n (dblclick)=\"onHandleDoubleClick($event)\"\n (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n <ng-content select=\"[checkbox]\" />\n @if (displayChevron()) {\n <button\n class=\"\n chevron-btn\n gds-background-none\n gds-border-none\n gds-min-height-0\n gds-mobile-margin-inline-end-sm\n \"\n gds-icon-button\n variant=\"primary\"\n [disabled]=\"disableChevron()\"\n [tabindex]=\"-1\"\n (clicked)=\"handleToggleExpanded($event)\"\n >\n <gds-icon\n class=\"\n chevron\n gds-icon-size-2xs\n gds-mobile-icon-size-sm\n \"\n key=\"line-chevron-right-stroke\"\n />\n </button>\n } @else {\n <span class=\"gds-width-sm\"></span>\n }\n\n @if (icon(); as icon) {\n <gds-icon\n class=\"\n gds-icon-size-xs\n gds-mobile-icon-size-sm\n icon\n \"\n [key]=\"icon\"\n />\n }\n <div class=\"\n gds-flex-1\n gds-min-width-0\n gds-text-body\n label\n \">\n <ng-content />\n </div>\n <div class=\"\n end-content\n gds-padding-block-end-2xs\n gds-text-caption\n \">\n <ng-content select=\"[end-content]\" />\n </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .root{padding-left:calc(var(--gds-spacing-sm) + var(--gds-spacing-md) * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}:host .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"] }]
|
|
7743
|
+
}], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsCheckboxComponent), { isSignal: true }] }], item: [{ type: i0.ViewChild, args: ['item', { isSignal: true }] }], tier: [{ type: i0.Input, args: [{ isSignal: true, alias: "tier", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disableChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableChevron", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], doubleClicked: [{ type: i0.Output, args: ["doubleClicked"] }], toggleExpanded: [{ type: i0.Output, args: ["toggleExpanded"] }] } });
|
|
7743
7744
|
|
|
7744
7745
|
class TreeViewListItemDirective {
|
|
7745
7746
|
templateRef = inject((TemplateRef));
|