@corto-ai/gds-angular 2.1.5-dev.2 → 2.1.5-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.5-test.2/css/all.css>
|
|
34
|
+
- Acctivity: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.2/css/acctivity.css>
|
|
35
|
+
- CORTO: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.2/css/corto.css>
|
|
36
|
+
- LawY: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.2/css/lawy.css>
|
|
37
|
+
- LEAP: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.2/css/leap.css>
|
|
38
38
|
|
|
39
39
|
## Library `@layer`s
|
|
40
40
|
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14m-8 7a8 8 0 1 1 16 0 8 8 0 0 1-16 0m5.175-4.417c.275-.777 1.374-.778 1.65 0l.257.726a1 1 0 0 0 .609.609l.725.257c.778.275.778 1.374 0 1.65l-.725.256a1 1 0 0 0-.609.61l-.257.726c-.275.777-1.375.777-1.65 0l-.256-.726a1 1 0 0 0-.61-.61l-.726-.256c-.777-.275-.777-1.375 0-1.65l.726-.257a1 1 0 0 0 .61-.61zM12.672 10c-.2-.666-1.141-.666-1.341 0l-.179.593a.83.83 0 0 1-.558.559L10 11.33c-.666.2-.665 1.142 0 1.34l.592.178c.269.08.479.29.56.559l.178.595c.2.665 1.142.665 1.34 0l.179-.594a.83.83 0 0 1 .559-.559l.593-.178c.665-.2.665-1.141 0-1.341l-.594-.178a.83.83 0 0 1-.558-.559z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
|
@@ -2204,6 +2204,10 @@ const gdsLineSmartphoneIcon = {
|
|
|
2204
2204
|
data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 14a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zM7 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM6 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z" fill="currentColor"/></svg>`,
|
|
2205
2205
|
name: 'line-smartphone'
|
|
2206
2206
|
};
|
|
2207
|
+
const gdsLineSparkleCircleIcon = {
|
|
2208
|
+
data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14m-8 7a8 8 0 1 1 16 0 8 8 0 0 1-16 0m5.175-4.417c.275-.777 1.374-.778 1.65 0l.257.726a1 1 0 0 0 .609.609l.725.257c.778.275.778 1.374 0 1.65l-.725.256a1 1 0 0 0-.609.61l-.257.726c-.275.777-1.375.777-1.65 0l-.256-.726a1 1 0 0 0-.61-.61l-.726-.256c-.777-.275-.777-1.375 0-1.65l.726-.257a1 1 0 0 0 .61-.61zM12.672 10c-.2-.666-1.141-.666-1.341 0l-.179.593a.83.83 0 0 1-.558.559L10 11.33c-.666.2-.665 1.142 0 1.34l.592.178c.269.08.479.29.56.559l.178.595c.2.665 1.142.665 1.34 0l.179-.594a.83.83 0 0 1 .559-.559l.593-.178c.665-.2.665-1.141 0-1.341l-.594-.178a.83.83 0 0 1-.558-.559z" fill="currentColor"/></svg>`,
|
|
2209
|
+
name: 'line-sparkle-circle'
|
|
2210
|
+
};
|
|
2207
2211
|
const gdsLineSparkleIcon = {
|
|
2208
2212
|
data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.46524 13.8291C9.62134 13.9399 9.80806 13.9993 9.99946 13.999C10.1915 13.9998 10.379 13.9403 10.5355 13.829C10.6922 13.7133 10.8109 13.5535 10.8765 13.37L11.2235 12.303C11.3077 12.0514 11.4491 11.8228 11.6365 11.635C11.8231 11.448 12.0508 11.3073 12.3015 11.224L13.3875 10.871C13.5667 10.8071 13.7217 10.6894 13.8315 10.534C13.9415 10.3786 14.0005 10.1929 14.0005 10.0025C14.0005 9.8121 13.9415 9.6264 13.8315 9.47099C13.7129 9.30564 13.5443 9.1829 13.3505 9.12099L12.2815 8.77499C12.0299 8.69189 11.8012 8.55114 11.6137 8.36398C11.4262 8.17681 11.285 7.94841 11.2015 7.69699L10.8485 6.61299C10.7852 6.43375 10.6678 6.27859 10.5125 6.16899C10.3556 6.06084 10.1695 6.00293 9.97896 6.00293C9.78841 6.00293 9.60235 6.06084 9.44546 6.16899C9.28572 6.28147 9.16594 6.44189 9.10346 6.62699L8.74846 7.71699C8.66476 7.96106 8.52691 8.18302 8.34524 8.36625C8.16358 8.54947 7.9428 8.68921 7.69946 8.77499L6.61546 9.12599C6.43437 9.18999 6.27775 9.30889 6.16743 9.46611C6.05712 9.62334 5.99859 9.81106 6.00003 10.0031C6.00146 10.1952 6.06277 10.382 6.17541 10.5376C6.28806 10.6932 6.44643 10.8097 6.62846 10.871L7.69546 11.218C7.94767 11.3025 8.17673 11.4446 8.36446 11.633C8.41519 11.6832 8.46262 11.7367 8.50646 11.793C8.62481 11.9457 8.71614 12.1175 8.77646 12.301L9.12846 13.381C9.19143 13.5617 9.30914 13.7184 9.46524 13.8291ZM8.00746 10.264L7.15246 9.99899L8.01646 9.71799C8.41071 9.58136 8.76826 9.35588 9.06146 9.05899C9.35281 8.75991 9.57294 8.39895 9.70546 8.00299L9.97046 7.14399L10.2505 8.00599C10.3835 8.4059 10.6081 8.7692 10.9064 9.06695C11.2046 9.3647 11.5683 9.58866 11.9685 9.72099L12.8485 9.98999L11.9875 10.27C11.5871 10.4022 11.2232 10.6264 10.9251 10.9246C10.6269 11.2227 10.4027 11.5866 10.2705 11.987L10.0055 12.844L9.72646 11.985C9.63026 11.6928 9.48483 11.4192 9.29646 11.176C9.22699 11.0872 9.15254 11.0024 9.07346 10.922C8.7738 10.6232 8.4089 10.3979 8.00746 10.264ZM14.5344 17.851C14.6703 17.9472 14.8328 17.9989 14.9994 17.999C15.1642 17.9975 15.3245 17.9451 15.4584 17.849C15.5979 17.7505 15.7029 17.6105 15.7584 17.449L16.0064 16.687C16.0595 16.5286 16.1485 16.3845 16.2664 16.266C16.3837 16.1475 16.5277 16.0587 16.6864 16.007L17.4584 15.755C17.6161 15.7005 17.7528 15.598 17.8494 15.462C17.9227 15.359 17.9706 15.2401 17.9891 15.115C18.0076 14.9899 17.9962 14.8622 17.9558 14.7423C17.9154 14.6225 17.8472 14.5139 17.7567 14.4256C17.6662 14.3372 17.5561 14.2716 17.4354 14.234L16.6714 13.985C16.5132 13.9324 16.3695 13.8438 16.2514 13.7261C16.1334 13.6085 16.0444 13.465 15.9914 13.307L15.7394 12.533C15.685 12.3757 15.5825 12.2396 15.4464 12.144C15.3443 12.071 15.2266 12.0231 15.1026 12.004C14.9787 11.985 14.8519 11.9953 14.7327 12.0343C14.6135 12.0732 14.5051 12.1396 14.4163 12.2282C14.3274 12.3167 14.2607 12.4249 14.2214 12.544L13.9744 13.306C13.9221 13.4636 13.8345 13.6073 13.7184 13.726C13.6038 13.8422 13.4643 13.9308 13.3104 13.985L12.5344 14.238C12.4169 14.2788 12.3106 14.3465 12.2238 14.4356C12.1371 14.5247 12.0723 14.6328 12.0346 14.7513C11.997 14.8699 11.9875 14.9955 12.0069 15.1184C12.0262 15.2412 12.074 15.3578 12.1464 15.459C12.2446 15.5988 12.3846 15.7039 12.5464 15.759L13.3094 16.006C13.4682 16.0594 13.6126 16.1487 13.7314 16.267C13.8496 16.3852 13.938 16.5299 13.9894 16.689L14.2424 17.463C14.2971 17.6195 14.3992 17.755 14.5344 17.851ZM13.6204 15.058L13.4424 14.999L13.6264 14.935C13.9281 14.83 14.2018 14.6573 14.4264 14.43C14.6528 14.201 14.8238 13.9233 14.9264 13.618L14.9844 13.44L15.0434 13.621C15.1453 13.9277 15.3175 14.2064 15.5461 14.4348C15.7748 14.6633 16.0536 14.8352 16.3604 14.937L16.5554 15L16.3754 15.059C16.068 15.1612 15.7888 15.3339 15.5601 15.5632C15.3314 15.7926 15.1596 16.0723 15.0584 16.38L14.9994 16.561L14.9414 16.38C14.84 16.0716 14.6676 15.7914 14.4382 15.5618C14.2088 15.3322 13.9286 15.1596 13.6204 15.058Z" fill="currentColor"/></svg>`,
|
|
2209
2213
|
name: 'line-sparkle'
|
|
@@ -3200,6 +3204,7 @@ var icons = /*#__PURE__*/Object.freeze({
|
|
|
3200
3204
|
gdsLineSignatureIcon: gdsLineSignatureIcon,
|
|
3201
3205
|
gdsLineSlideTextSparkleIcon: gdsLineSlideTextSparkleIcon,
|
|
3202
3206
|
gdsLineSmartphoneIcon: gdsLineSmartphoneIcon,
|
|
3207
|
+
gdsLineSparkleCircleIcon: gdsLineSparkleCircleIcon,
|
|
3203
3208
|
gdsLineSparkleIcon: gdsLineSparkleIcon,
|
|
3204
3209
|
gdsLineStatusInProgressIcon: gdsLineStatusInProgressIcon,
|
|
3205
3210
|
gdsLineStrikethroughIcon: gdsLineStrikethroughIcon,
|
|
@@ -4860,7 +4865,7 @@ class GdsContextMenuItemComponent extends GdsContextMenuBaseDirective {
|
|
|
4860
4865
|
nestedMenu = input(...(ngDevMode ? [undefined, { debugName: "nestedMenu" }] : /* istanbul ignore next */ []));
|
|
4861
4866
|
hasChildren = computed(() => !!this.nestedMenu(), ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
|
|
4862
4867
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4863
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuItemComponent, isStandalone: true, selector: "gds-context-menu-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, nestedMenu: { classPropertyName: "nestedMenu", publicName: "nestedMenu", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" } }, usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuItem, outputs: ["cdkMenuItemTriggered", "clicked"] }, { directive: i1$1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "nestedMenu"] }], ngImport: i0, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4868
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuItemComponent, isStandalone: true, selector: "gds-context-menu-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, nestedMenu: { classPropertyName: "nestedMenu", publicName: "nestedMenu", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" } }, usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuItem, outputs: ["cdkMenuItemTriggered", "clicked"] }, { directive: i1$1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "nestedMenu"] }], ngImport: i0, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host .gds-context-menu-item_endIcon{margin-left:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4864
4869
|
}
|
|
4865
4870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuItemComponent, decorators: [{
|
|
4866
4871
|
type: Component,
|
|
@@ -4869,17 +4874,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4869
4874
|
{ directive: CdkMenuTrigger, inputs: ['cdkMenuTriggerFor: nestedMenu'] }
|
|
4870
4875
|
], host: {
|
|
4871
4876
|
tabindex: '0'
|
|
4872
|
-
}, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
|
|
4877
|
+
}, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host .gds-context-menu-item_endIcon{margin-left:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
|
|
4873
4878
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], nestedMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nestedMenu", required: false }] }] } });
|
|
4874
4879
|
|
|
4875
4880
|
class GdsContextMenuHeadingComponent extends GdsContextMenuBaseDirective {
|
|
4876
4881
|
variant = signal(GdsContextMenuItemVariantEnum.Heading).asReadonly();
|
|
4877
4882
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuHeadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4878
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuHeadingComponent, isStandalone: true, selector: "gds-context-menu-heading", usesInheritance: true, ngImport: i0, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4883
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuHeadingComponent, isStandalone: true, selector: "gds-context-menu-heading", usesInheritance: true, ngImport: i0, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host .gds-context-menu-item_endIcon{margin-left:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4879
4884
|
}
|
|
4880
4885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuHeadingComponent, decorators: [{
|
|
4881
4886
|
type: Component,
|
|
4882
|
-
args: [{ selector: 'gds-context-menu-heading', imports: [GdsIconComponent, TippyDirective, GdsSwitchComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
|
|
4887
|
+
args: [{ selector: 'gds-context-menu-heading', imports: [GdsIconComponent, TippyDirective, GdsSwitchComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host .gds-context-menu-item_endIcon{margin-left:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
|
|
4883
4888
|
}] });
|
|
4884
4889
|
|
|
4885
4890
|
class GdsContextMenuSwitchComponent extends GdsContextMenuBaseDirective {
|
|
@@ -4897,7 +4902,7 @@ class GdsContextMenuSwitchComponent extends GdsContextMenuBaseDirective {
|
|
|
4897
4902
|
};
|
|
4898
4903
|
}
|
|
4899
4904
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4900
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuSwitchComponent, isStandalone: true, selector: "gds-context-menu-switch", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, triggered: { classPropertyName: "triggered", publicName: "triggered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", triggered: "triggeredChange" }, usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "selected"], outputs: ["cdkMenuItemTriggered", "clicked"] }, { directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }, { kind: "directive", type: GdsNativeInputDirective, selector: "input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4905
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsContextMenuSwitchComponent, isStandalone: true, selector: "gds-context-menu-switch", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, triggered: { classPropertyName: "triggered", publicName: "triggered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", triggered: "triggeredChange" }, usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "selected"], outputs: ["cdkMenuItemTriggered", "clicked"] }, { directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host .gds-context-menu-item_endIcon{margin-left:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsSwitchComponent, selector: "gds-switch" }, { kind: "directive", type: GdsNativeInputDirective, selector: "input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4901
4906
|
}
|
|
4902
4907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsContextMenuSwitchComponent, decorators: [{
|
|
4903
4908
|
type: Component,
|
|
@@ -4908,7 +4913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4908
4913
|
outputs: ['cdkMenuItemTriggered: clicked']
|
|
4909
4914
|
},
|
|
4910
4915
|
{ directive: CdkMenuTrigger }
|
|
4911
|
-
], template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
|
|
4916
|
+
], template: "@if (border()) {\n <div class=\"border\"></div>\n}\n<div class=\"\n gds-radius-sm\n wrapper\n\">\n @if (variantIcon(); as variantIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-2xs\n \"\n [key]=\"variantIcon\"\n />\n }\n\n @if (startIcon(); as startIcon) {\n <gds-icon\n class=\"\n gds-context-menu-item_startIcon\n gds-icon-size-xs\n \"\n [key]=\"startIcon\"\n />\n }\n\n <div\n class=\"\n gds-align-items-start\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-justify-content-center\n gds-min-width-0\n \"\n >\n <div\n class=\"\n gds-context-menu-item_label\n gds-truncate\n gds-width-100-parent\n \"\n [class]=\"labelClass()\"\n [tp]=\"label()\"\n [tpOnlyTextOverflow]=\"true\"\n [tpVariation]=\"tooltipVariation()\"\n >\n {{ label() }}\n </div>\n\n @if (hint(); as hint) {\n <div class=\"gds-context-menu-item_hint\">{{ hint }}</div>\n }\n </div>\n\n @if (variant() === 'switch') {\n <gds-switch class=\"\n gds-margin-block-auto\n gds-margin-inline-start-auto\n gds-min-width-fit-content\n \">\n <input\n type=\"checkbox\"\n [checked]=\"selected()\"\n (click)=\"$event.stopPropagation()\"\n />\n </gds-switch>\n }\n\n @if (hasChildren()) {\n <gds-icon\n class=\"\n gds-context-menu-item_endIcon\n gds-icon-size-xs\n \"\n key=\"line-chevron-right-stroke\"\n />\n }\n</div>\n", styles: ["@layer design-system{:host{--icon-color: var(--gds-palette-icon-primary)}:host .border{border-top:1px solid var(--gds-palette-border-modal);height:var(--gds-spacing-2xs)}:host .wrapper{--font: var(--gds-text-body-shorthand);--color: var(--gds-palette-text-default-primary);--background-color: var(--gds-palette-background-white);display:flex;align-items:center;padding:7px 11px;gap:var(--gds-spacing-xs);cursor:default;background:var(--background-color)}:host[variant=heading]>.wrapper{--font: var(--gds-text-bodyStrong-shorthand);--color: var(--gds-palette-text-primary-primary)}:host[variant=indent]>.wrapper{padding-left:40px}:host[variant=double-indent]>.wrapper{padding-left:68px}:host[compact]>.wrapper{padding:3px 11px}:host:focus-visible>.wrapper{outline:none;--background-color: var(--gds-palette-background-hover)}:host:focus-visible{outline:none;--background-color: var(--gds-palette-background-hover)}:host[clickable]>.wrapper{cursor:pointer}:host[clickable]>.wrapper:hover{--background-color: var(--gds-palette-background-hover)}:host .gds-context-menu-item_label{flex:1;font:var(--font);color:var(--color);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .gds-context-menu-item_endIcon{margin-left:auto;color:var(--icon-color)}:host .gds-context-menu-item_startIcon{color:var(--icon-color)}:host .gds-context-menu-item_hint{font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-default-secondary)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{--font: var(--gds-text-caption-shorthand);--color: var(--gds-palette-text-default-secondary);border-bottom:1px solid var(--gds-palette-border-modal);border-radius:0}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host>.wrapper{justify-content:center}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host .gds-context-menu-item_endIcon{margin-left:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=default]>.wrapper,:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=heading]>.wrapper{padding-inline:unset}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=check]>.wrapper{position:relative;right:var(--gds-spacing-sm)}:is(body[isMobile=true]) gds-dropdown:not([preventMobileStyling]) :host[variant=indent]>.wrapper{padding-left:0}}\n"] }]
|
|
4912
4917
|
}], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], triggered: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggered", required: false }] }, { type: i0.Output, args: ["triggeredChange"] }] } });
|
|
4913
4918
|
|
|
4914
4919
|
class GdsDialogComponent {
|
|
@@ -6178,7 +6183,7 @@ class GdsFileUploadComponent extends GdsSignalFormControl {
|
|
|
6178
6183
|
separatorLabel = input('or', ...(ngDevMode ? [{ debugName: "separatorLabel" }] : /* istanbul ignore next */ []));
|
|
6179
6184
|
browseLabel = input('Browse your files', ...(ngDevMode ? [{ debugName: "browseLabel" }] : /* istanbul ignore next */ []));
|
|
6180
6185
|
inputAriaLabel = input('File upload', ...(ngDevMode ? [{ debugName: "inputAriaLabel" }] : /* istanbul ignore next */ []));
|
|
6181
|
-
layoutTmpl = contentChild('
|
|
6186
|
+
layoutTmpl = contentChild('fileUploadLayoutTmpl', ...(ngDevMode ? [{ debugName: "layoutTmpl" }] : /* istanbul ignore next */ []));
|
|
6182
6187
|
fileUpload = viewChild.required('fileUpload');
|
|
6183
6188
|
changed = output();
|
|
6184
6189
|
#emitOnFileChange = effect(() => {
|
|
@@ -6233,7 +6238,7 @@ class GdsFileUploadComponent extends GdsSignalFormControl {
|
|
|
6233
6238
|
this.fileUpload().nativeElement.click();
|
|
6234
6239
|
}
|
|
6235
6240
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6236
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsFileUploadComponent, isStandalone: true, selector: "gds-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, dragDropLabel: { classPropertyName: "dragDropLabel", publicName: "dragDropLabel", isSignal: true, isRequired: false, transformFunction: null }, separatorLabel: { classPropertyName: "separatorLabel", publicName: "separatorLabel", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "drop": "onFileDrop($event)", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)" }, properties: { "attr.data-dragover": "dragOver() ? \"\": undefined" }, classAttribute: "\n gds-height-100-parent\n gds-width-100-parent\n " }, queries: [{ propertyName: "layoutTmpl", first: true, predicate: ["
|
|
6241
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsFileUploadComponent, isStandalone: true, selector: "gds-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, dragDropLabel: { classPropertyName: "dragDropLabel", publicName: "dragDropLabel", isSignal: true, isRequired: false, transformFunction: null }, separatorLabel: { classPropertyName: "separatorLabel", publicName: "separatorLabel", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "drop": "onFileDrop($event)", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)" }, properties: { "attr.data-dragover": "dragOver() ? \"\": undefined" }, classAttribute: "\n gds-height-100-parent\n gds-width-100-parent\n " }, queries: [{ propertyName: "layoutTmpl", first: true, predicate: ["fileUploadLayoutTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"layoutTmpl() ?? defaultTmpl; context: { dragOver: dragOver() }\" />\n<input\n #fileUpload\n type=\"file\"\n class=\"gds-display-none\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [attr.aria-label]=\"inputAriaLabel()\"\n (change)=\"fileSelected($event)\"\n/>\n<ng-template #defaultTmpl>\n <div\n tabindex=\"0\"\n class=\"\n container\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-sm\n gds-height-100-parent\n gds-justify-content-center\n gds-padding-md\n gds-radius-md\n gds-width-100-parent\n \"\n [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n [attr.inert]=\"disabled() ? '' : undefined\"\n (keydown.enter)=\"openFileSelector()\"\n (click)=\"openFileSelector()\"\n >\n <gds-icon\n class=\"\n gds-icon-size-lg\n icon\n \"\n key=\"line-cloud-up\"\n aria-hidden=\"true\"\n />\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-text-body\n gds-text-center\n \">\n <span class=\"\n gds-text-body-large-strong\n text\n \">{{ dragDropLabel() }}</span>\n <span class=\"text\">{{ separatorLabel() }}</span>\n <a class=\"link\">\n {{ browseLabel() }}\n </a>\n </div>\n <span\n class=\"\n gds-align-content-center\n gds-display-flex\n gds-flex-wrap\n gds-gap-2xs\n gds-justify-content-center\n gds-text-body\n gds-text-secondary\n \"\n >\n <ng-content />\n </span>\n </div>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host .container{cursor:var(--cursor)}:host[data-dragover] .container,:host .container:focus{outline:var(--border-color) auto 1px}:host .container{background:var(--background-color);border:2px dashed var(--border-color)}:host .container .text{color:var(--text-color)}:host .container .icon{color:var(--icon-color)}:host .container .link{color:var(--text-color)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6237
6242
|
}
|
|
6238
6243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFileUploadComponent, decorators: [{
|
|
6239
6244
|
type: Component,
|
|
@@ -6248,7 +6253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6248
6253
|
gds-width-100-parent
|
|
6249
6254
|
`
|
|
6250
6255
|
}, template: "<ng-container *ngTemplateOutlet=\"layoutTmpl() ?? defaultTmpl; context: { dragOver: dragOver() }\" />\n<input\n #fileUpload\n type=\"file\"\n class=\"gds-display-none\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [attr.aria-label]=\"inputAriaLabel()\"\n (change)=\"fileSelected($event)\"\n/>\n<ng-template #defaultTmpl>\n <div\n tabindex=\"0\"\n class=\"\n container\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-sm\n gds-height-100-parent\n gds-justify-content-center\n gds-padding-md\n gds-radius-md\n gds-width-100-parent\n \"\n [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n [attr.inert]=\"disabled() ? '' : undefined\"\n (keydown.enter)=\"openFileSelector()\"\n (click)=\"openFileSelector()\"\n >\n <gds-icon\n class=\"\n gds-icon-size-lg\n icon\n \"\n key=\"line-cloud-up\"\n aria-hidden=\"true\"\n />\n <div class=\"\n gds-align-items-center\n gds-display-flex\n gds-flex-column\n gds-gap-2xs\n gds-text-body\n gds-text-center\n \">\n <span class=\"\n gds-text-body-large-strong\n text\n \">{{ dragDropLabel() }}</span>\n <span class=\"text\">{{ separatorLabel() }}</span>\n <a class=\"link\">\n {{ browseLabel() }}\n </a>\n </div>\n <span\n class=\"\n gds-align-content-center\n gds-display-flex\n gds-flex-wrap\n gds-gap-2xs\n gds-justify-content-center\n gds-text-body\n gds-text-secondary\n \"\n >\n <ng-content />\n </span>\n </div>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host .container{cursor:var(--cursor)}:host[data-dragover] .container,:host .container:focus{outline:var(--border-color) auto 1px}:host .container{background:var(--background-color);border:2px dashed var(--border-color)}:host .container .text{color:var(--text-color)}:host .container .icon{color:var(--icon-color)}:host .container .link{color:var(--text-color)}}\n"] }]
|
|
6251
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dragDropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDropLabel", required: false }] }], separatorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], inputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAriaLabel", required: false }] }], layoutTmpl: [{ type: i0.ContentChild, args: ['
|
|
6256
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dragDropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDropLabel", required: false }] }], separatorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], inputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAriaLabel", required: false }] }], layoutTmpl: [{ type: i0.ContentChild, args: ['fileUploadLayoutTmpl', { isSignal: true }] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
6252
6257
|
|
|
6253
6258
|
class GdsFormControlComponent extends GdsSignalFormContainer {
|
|
6254
6259
|
locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|