@hestia-earth/ui-components 0.43.7 → 0.43.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/hestia-earth-ui-components-svg-icons.mjs +2 -2
- package/fesm2022/hestia-earth-ui-components-svg-icons.mjs.map +1 -1
- package/fesm2022/hestia-earth-ui-components.mjs +9 -18
- package/fesm2022/hestia-earth-ui-components.mjs.map +1 -1
- package/package.json +1 -1
- package/types/hestia-earth-ui-components.d.ts +5 -1
|
@@ -224,13 +224,13 @@ class HESvgIconComponent {
|
|
|
224
224
|
return `${this.size()}px`;
|
|
225
225
|
}
|
|
226
226
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HESvgIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
227
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: HESvgIconComponent, isStandalone: true, selector: "he-svg-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.icon-size": "size()", "style.width": "this._width", "style.height": "this._height" } }, ngImport: i0, template: "<svg [attr.animation]=\"animation()\">\n <use [attr.href]=\"iconPath()\"></use>\n</svg>\n", styles: ["@keyframes spinner{to{transform:rotate(360deg)}}:host{display:inline-block;color:inherit;vertical-align:text-top}svg{color:inherit;width:inherit;height:inherit}svg[animation=spin]{animation:spinner 2s linear infinite}\n"] }); }
|
|
227
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: HESvgIconComponent, isStandalone: true, selector: "he-svg-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.icon-size": "size()", "style.width": "this._width", "style.height": "this._height" } }, ngImport: i0, template: "<svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.animation]=\"animation()\">\n <use [attr.href]=\"iconPath()\"></use>\n</svg>\n", styles: ["@keyframes spinner{to{transform:rotate(360deg)}}:host{display:inline-block;color:inherit;vertical-align:text-top}svg{color:inherit;width:inherit;height:inherit}svg[animation=spin]{animation:spinner 2s linear infinite}\n"] }); }
|
|
228
228
|
}
|
|
229
229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HESvgIconComponent, decorators: [{
|
|
230
230
|
type: Component,
|
|
231
231
|
args: [{ selector: 'he-svg-icon', imports: [], host: {
|
|
232
232
|
'[attr.icon-size]': 'size()'
|
|
233
|
-
}, template: "<svg [attr.animation]=\"animation()\">\n <use [attr.href]=\"iconPath()\"></use>\n</svg>\n", styles: ["@keyframes spinner{to{transform:rotate(360deg)}}:host{display:inline-block;color:inherit;vertical-align:text-top}svg{color:inherit;width:inherit;height:inherit}svg[animation=spin]{animation:spinner 2s linear infinite}\n"] }]
|
|
233
|
+
}, template: "<svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.animation]=\"animation()\">\n <use [attr.href]=\"iconPath()\"></use>\n</svg>\n", styles: ["@keyframes spinner{to{transform:rotate(360deg)}}:host{display:inline-block;color:inherit;vertical-align:text-top}svg{color:inherit;width:inherit;height:inherit}svg[animation=spin]{animation:spinner 2s linear infinite}\n"] }]
|
|
234
234
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], _width: [{
|
|
235
235
|
type: HostBinding,
|
|
236
236
|
args: ['style.width']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hestia-earth-ui-components-svg-icons.mjs","sources":["../../src/svg-icons/icons.ts","../../src/svg-icons/svg-icon.component.ts","../../src/svg-icons/svg-icon.component.html","../../src/svg-icons/hestia-earth-ui-components-svg-icons.ts"],"sourcesContent":["// auto-generated content using \"node scripts/generate-icons.js\"\n\nexport type svgIconSizes = '16' | '20' | '24' | '40' | '48';\nexport const iconSizes = [\n '16',\n '20',\n '24',\n '40',\n '48'\n];\n\nexport type svgIconNames =\n | 'aggregation'\n | 'api'\n | 'api-circle'\n | 'archive'\n | 'arrow-down'\n | 'arrow-down-right'\n | 'arrow-left'\n | 'arrow-right'\n | 'arrow-up'\n | 'autogenerate'\n | 'autogenerate-circle'\n | 'aws'\n | 'ban'\n | 'bell'\n | 'bell-with-badge'\n | 'book'\n | 'breakdown'\n | 'bug'\n | 'buoy'\n | 'calculation-toolkit'\n | 'calculator'\n | 'caret-down'\n | 'caret-left'\n | 'caret-right'\n | 'caret-up'\n | 'certificate'\n | 'chart'\n | 'checkmark'\n | 'checkmark-circle'\n | 'checkmark-circle-filled'\n | 'checkmark-circle-filled-with-shadow'\n | 'chevron-double-left'\n | 'chevron-double-right'\n | 'chevron-down'\n | 'chevron-left'\n | 'chevron-right'\n | 'chevron-up'\n | 'circle'\n | 'citation'\n | 'citation-square'\n | 'clock'\n | 'cloud'\n | 'collapse'\n | 'collapse-panel'\n | 'commit'\n | 'community'\n | 'community-edition'\n | 'compare'\n | 'copy'\n | 'corner-drag'\n | 'csv-file'\n | 'cycle'\n | 'cycle-schema'\n | 'dashboard'\n | 'data-format'\n | 'data-management'\n | 'data-plan'\n | 'database-wheat'\n | 'dot-circle'\n | 'dot-filled'\n | 'download'\n | 'drag'\n | 'edit'\n | 'edit-withfield'\n | 'embed'\n | 'exclamation'\n | 'exclamation-triangle'\n | 'exclamation-triangle-filled'\n | 'export'\n | 'external-link'\n | 'feedback'\n | 'fence'\n | 'film'\n | 'filter-funnel'\n | 'filter-slider'\n | 'flash'\n | 'folder'\n | 'folder-open'\n | 'foodprocessor'\n | 'funding'\n | 'globe-continents'\n | 'globe-lines'\n | 'glossary'\n | 'greenhouse'\n | 'guide'\n | 'guide-overlay'\n | 'heart'\n | 'help'\n | 'help-circle'\n | 'history'\n | 'home'\n | 'husk'\n | 'image'\n | 'incognito'\n | 'indexed'\n | 'info'\n | 'info-circle'\n | 'info-circle-schema'\n | 'lake'\n | 'link'\n | 'list-indented'\n | 'livestock'\n | 'loading'\n | 'loading-bar'\n | 'loading-circle-filled'\n | 'loading-circle-filled-withshadow'\n | 'log'\n | 'mail'\n | 'map'\n | 'menu'\n | 'messages'\n | 'messages-with-badge'\n | 'metrics'\n | 'migration'\n | 'minus'\n | 'model-docs'\n | 'news'\n | 'node'\n | 'notepad'\n | 'ocean'\n | 'organisation'\n | 'organisation-schema'\n | 'overflow-menu'\n | 'pin'\n | 'pin-schema'\n | 'plus'\n | 'pond'\n | 'private-eye'\n | 'private-eye-crossed'\n | 'private-lock'\n | 'private-lock-filled'\n | 'private-unlocked'\n | 'profile-checkmark'\n | 'profile-circle'\n | 'profile-circle-schema'\n | 'profile-gear'\n | 'progress'\n | 'python'\n | 'refresh'\n | 'rename'\n | 'retailer'\n | 'review'\n | 'river'\n | 'save'\n | 'schema'\n | 'search'\n | 'search-schema'\n | 'search-with-exclamation'\n | 'search-with-minus'\n | 'search-with-plus'\n | 'settings'\n | 'share'\n | 'share-socials'\n | 'shrub'\n | 'sign-out'\n | 'slack'\n | 'socials-gitlab'\n | 'socials-google'\n | 'socials-linkedin'\n | 'socials-linkedin-circle'\n | 'socials-orcid'\n | 'socials-orcid-circle'\n | 'sort-ascending'\n | 'sort-caret-down-filled'\n | 'sort-caret-stacked-filled-stacked'\n | 'sort-caret-up-filled'\n | 'source'\n | 'source-schema'\n | 'star'\n | 'star-filled'\n | 'table'\n | 'tag-filled'\n | 'tank'\n | 'target'\n | 'target-schema'\n | 'term'\n | 'term-schema'\n | 'textform-list'\n | 'tool'\n | 'transport'\n | 'transport-schema'\n | 'trash'\n | 'tree'\n | 'turn-phone'\n | 'unit'\n | 'upload'\n | 'video'\n | 'webhook'\n | 'xlsx-file'\n | 'xmark'\n | 'xmark-circle'\n | 'xmark-circle-filled'\n | 'xmark-circle-filled-with-shadow'\n | 'zip';\nexport const icons: svgIconNames[] = [\n 'aggregation',\n 'api',\n 'api-circle',\n 'archive',\n 'arrow-down',\n 'arrow-down-right',\n 'arrow-left',\n 'arrow-right',\n 'arrow-up',\n 'autogenerate',\n 'autogenerate-circle',\n 'aws',\n 'ban',\n 'bell',\n 'bell-with-badge',\n 'book',\n 'breakdown',\n 'bug',\n 'buoy',\n 'calculation-toolkit',\n 'calculator',\n 'caret-down',\n 'caret-left',\n 'caret-right',\n 'caret-up',\n 'certificate',\n 'chart',\n 'checkmark',\n 'checkmark-circle',\n 'checkmark-circle-filled',\n 'checkmark-circle-filled-with-shadow',\n 'chevron-double-left',\n 'chevron-double-right',\n 'chevron-down',\n 'chevron-left',\n 'chevron-right',\n 'chevron-up',\n 'circle',\n 'citation',\n 'citation-square',\n 'clock',\n 'cloud',\n 'collapse',\n 'collapse-panel',\n 'commit',\n 'community',\n 'community-edition',\n 'compare',\n 'copy',\n 'corner-drag',\n 'csv-file',\n 'cycle',\n 'cycle-schema',\n 'dashboard',\n 'data-format',\n 'data-management',\n 'data-plan',\n 'database-wheat',\n 'dot-circle',\n 'dot-filled',\n 'download',\n 'drag',\n 'edit',\n 'edit-withfield',\n 'embed',\n 'exclamation',\n 'exclamation-triangle',\n 'exclamation-triangle-filled',\n 'export',\n 'external-link',\n 'feedback',\n 'fence',\n 'film',\n 'filter-funnel',\n 'filter-slider',\n 'flash',\n 'folder',\n 'folder-open',\n 'foodprocessor',\n 'funding',\n 'globe-continents',\n 'globe-lines',\n 'glossary',\n 'greenhouse',\n 'guide',\n 'guide-overlay',\n 'heart',\n 'help',\n 'help-circle',\n 'history',\n 'home',\n 'husk',\n 'image',\n 'incognito',\n 'indexed',\n 'info',\n 'info-circle',\n 'info-circle-schema',\n 'lake',\n 'link',\n 'list-indented',\n 'livestock',\n 'loading',\n 'loading-bar',\n 'loading-circle-filled',\n 'loading-circle-filled-withshadow',\n 'log',\n 'mail',\n 'map',\n 'menu',\n 'messages',\n 'messages-with-badge',\n 'metrics',\n 'migration',\n 'minus',\n 'model-docs',\n 'news',\n 'node',\n 'notepad',\n 'ocean',\n 'organisation',\n 'organisation-schema',\n 'overflow-menu',\n 'pin',\n 'pin-schema',\n 'plus',\n 'pond',\n 'private-eye',\n 'private-eye-crossed',\n 'private-lock',\n 'private-lock-filled',\n 'private-unlocked',\n 'profile-checkmark',\n 'profile-circle',\n 'profile-circle-schema',\n 'profile-gear',\n 'progress',\n 'python',\n 'refresh',\n 'rename',\n 'retailer',\n 'review',\n 'river',\n 'save',\n 'schema',\n 'search',\n 'search-schema',\n 'search-with-exclamation',\n 'search-with-minus',\n 'search-with-plus',\n 'settings',\n 'share',\n 'share-socials',\n 'shrub',\n 'sign-out',\n 'slack',\n 'socials-gitlab',\n 'socials-google',\n 'socials-linkedin',\n 'socials-linkedin-circle',\n 'socials-orcid',\n 'socials-orcid-circle',\n 'sort-ascending',\n 'sort-caret-down-filled',\n 'sort-caret-stacked-filled-stacked',\n 'sort-caret-up-filled',\n 'source',\n 'source-schema',\n 'star',\n 'star-filled',\n 'table',\n 'tag-filled',\n 'tank',\n 'target',\n 'target-schema',\n 'term',\n 'term-schema',\n 'textform-list',\n 'tool',\n 'transport',\n 'transport-schema',\n 'trash',\n 'tree',\n 'turn-phone',\n 'unit',\n 'upload',\n 'video',\n 'webhook',\n 'xlsx-file',\n 'xmark',\n 'xmark-circle',\n 'xmark-circle-filled',\n 'xmark-circle-filled-with-shadow',\n 'zip'\n];\n","import { Component, computed, HostBinding, inject, input } from '@angular/core';\nimport { PlatformLocation } from '@angular/common';\n\nimport { svgIconSizes, svgIconNames } from './icons';\n\nexport const defaultSvgIconSize: svgIconSizes = '20';\n\n@Component({\n selector: 'he-svg-icon',\n imports: [],\n templateUrl: './svg-icon.component.html',\n styleUrls: ['./svg-icon.component.scss'],\n host: {\n '[attr.icon-size]': 'size()'\n }\n})\nexport class HESvgIconComponent {\n private readonly baseHref = inject(PlatformLocation).getBaseHrefFromDOM() || '/';\n\n protected readonly name = input.required<svgIconNames>();\n protected readonly size = input<svgIconSizes>(defaultSvgIconSize);\n protected readonly animation = input<string>();\n\n private readonly iconName = computed(() => [this.name(), this.size()].filter(Boolean).join('-'));\n protected readonly iconPath = computed(\n () => `${this.baseHref}assets/svg-icons/icons-sprite.svg#${this.iconName()}px`\n );\n\n @HostBinding('style.width')\n protected get _width() {\n return `${this.size()}px`;\n }\n\n @HostBinding('style.height')\n protected get _height() {\n return `${this.size()}px`;\n }\n}\n","<svg [attr.animation]=\"animation()\">\n <use [attr.href]=\"iconPath()\"></use>\n</svg>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"hestia-earth-ui-components-svg-icons.mjs","sources":["../../src/svg-icons/icons.ts","../../src/svg-icons/svg-icon.component.ts","../../src/svg-icons/svg-icon.component.html","../../src/svg-icons/hestia-earth-ui-components-svg-icons.ts"],"sourcesContent":["// auto-generated content using \"node scripts/generate-icons.js\"\n\nexport type svgIconSizes = '16' | '20' | '24' | '40' | '48';\nexport const iconSizes = [\n '16',\n '20',\n '24',\n '40',\n '48'\n];\n\nexport type svgIconNames =\n | 'aggregation'\n | 'api'\n | 'api-circle'\n | 'archive'\n | 'arrow-down'\n | 'arrow-down-right'\n | 'arrow-left'\n | 'arrow-right'\n | 'arrow-up'\n | 'autogenerate'\n | 'autogenerate-circle'\n | 'aws'\n | 'ban'\n | 'bell'\n | 'bell-with-badge'\n | 'book'\n | 'breakdown'\n | 'bug'\n | 'buoy'\n | 'calculation-toolkit'\n | 'calculator'\n | 'caret-down'\n | 'caret-left'\n | 'caret-right'\n | 'caret-up'\n | 'certificate'\n | 'chart'\n | 'checkmark'\n | 'checkmark-circle'\n | 'checkmark-circle-filled'\n | 'checkmark-circle-filled-with-shadow'\n | 'chevron-double-left'\n | 'chevron-double-right'\n | 'chevron-down'\n | 'chevron-left'\n | 'chevron-right'\n | 'chevron-up'\n | 'circle'\n | 'citation'\n | 'citation-square'\n | 'clock'\n | 'cloud'\n | 'collapse'\n | 'collapse-panel'\n | 'commit'\n | 'community'\n | 'community-edition'\n | 'compare'\n | 'copy'\n | 'corner-drag'\n | 'csv-file'\n | 'cycle'\n | 'cycle-schema'\n | 'dashboard'\n | 'data-format'\n | 'data-management'\n | 'data-plan'\n | 'database-wheat'\n | 'dot-circle'\n | 'dot-filled'\n | 'download'\n | 'drag'\n | 'edit'\n | 'edit-withfield'\n | 'embed'\n | 'exclamation'\n | 'exclamation-triangle'\n | 'exclamation-triangle-filled'\n | 'export'\n | 'external-link'\n | 'feedback'\n | 'fence'\n | 'film'\n | 'filter-funnel'\n | 'filter-slider'\n | 'flash'\n | 'folder'\n | 'folder-open'\n | 'foodprocessor'\n | 'funding'\n | 'globe-continents'\n | 'globe-lines'\n | 'glossary'\n | 'greenhouse'\n | 'guide'\n | 'guide-overlay'\n | 'heart'\n | 'help'\n | 'help-circle'\n | 'history'\n | 'home'\n | 'husk'\n | 'image'\n | 'incognito'\n | 'indexed'\n | 'info'\n | 'info-circle'\n | 'info-circle-schema'\n | 'lake'\n | 'link'\n | 'list-indented'\n | 'livestock'\n | 'loading'\n | 'loading-bar'\n | 'loading-circle-filled'\n | 'loading-circle-filled-withshadow'\n | 'log'\n | 'mail'\n | 'map'\n | 'menu'\n | 'messages'\n | 'messages-with-badge'\n | 'metrics'\n | 'migration'\n | 'minus'\n | 'model-docs'\n | 'news'\n | 'node'\n | 'notepad'\n | 'ocean'\n | 'organisation'\n | 'organisation-schema'\n | 'overflow-menu'\n | 'pin'\n | 'pin-schema'\n | 'plus'\n | 'pond'\n | 'private-eye'\n | 'private-eye-crossed'\n | 'private-lock'\n | 'private-lock-filled'\n | 'private-unlocked'\n | 'profile-checkmark'\n | 'profile-circle'\n | 'profile-circle-schema'\n | 'profile-gear'\n | 'progress'\n | 'python'\n | 'refresh'\n | 'rename'\n | 'retailer'\n | 'review'\n | 'river'\n | 'save'\n | 'schema'\n | 'search'\n | 'search-schema'\n | 'search-with-exclamation'\n | 'search-with-minus'\n | 'search-with-plus'\n | 'settings'\n | 'share'\n | 'share-socials'\n | 'shrub'\n | 'sign-out'\n | 'slack'\n | 'socials-gitlab'\n | 'socials-google'\n | 'socials-linkedin'\n | 'socials-linkedin-circle'\n | 'socials-orcid'\n | 'socials-orcid-circle'\n | 'sort-ascending'\n | 'sort-caret-down-filled'\n | 'sort-caret-stacked-filled-stacked'\n | 'sort-caret-up-filled'\n | 'source'\n | 'source-schema'\n | 'star'\n | 'star-filled'\n | 'table'\n | 'tag-filled'\n | 'tank'\n | 'target'\n | 'target-schema'\n | 'term'\n | 'term-schema'\n | 'textform-list'\n | 'tool'\n | 'transport'\n | 'transport-schema'\n | 'trash'\n | 'tree'\n | 'turn-phone'\n | 'unit'\n | 'upload'\n | 'video'\n | 'webhook'\n | 'xlsx-file'\n | 'xmark'\n | 'xmark-circle'\n | 'xmark-circle-filled'\n | 'xmark-circle-filled-with-shadow'\n | 'zip';\nexport const icons: svgIconNames[] = [\n 'aggregation',\n 'api',\n 'api-circle',\n 'archive',\n 'arrow-down',\n 'arrow-down-right',\n 'arrow-left',\n 'arrow-right',\n 'arrow-up',\n 'autogenerate',\n 'autogenerate-circle',\n 'aws',\n 'ban',\n 'bell',\n 'bell-with-badge',\n 'book',\n 'breakdown',\n 'bug',\n 'buoy',\n 'calculation-toolkit',\n 'calculator',\n 'caret-down',\n 'caret-left',\n 'caret-right',\n 'caret-up',\n 'certificate',\n 'chart',\n 'checkmark',\n 'checkmark-circle',\n 'checkmark-circle-filled',\n 'checkmark-circle-filled-with-shadow',\n 'chevron-double-left',\n 'chevron-double-right',\n 'chevron-down',\n 'chevron-left',\n 'chevron-right',\n 'chevron-up',\n 'circle',\n 'citation',\n 'citation-square',\n 'clock',\n 'cloud',\n 'collapse',\n 'collapse-panel',\n 'commit',\n 'community',\n 'community-edition',\n 'compare',\n 'copy',\n 'corner-drag',\n 'csv-file',\n 'cycle',\n 'cycle-schema',\n 'dashboard',\n 'data-format',\n 'data-management',\n 'data-plan',\n 'database-wheat',\n 'dot-circle',\n 'dot-filled',\n 'download',\n 'drag',\n 'edit',\n 'edit-withfield',\n 'embed',\n 'exclamation',\n 'exclamation-triangle',\n 'exclamation-triangle-filled',\n 'export',\n 'external-link',\n 'feedback',\n 'fence',\n 'film',\n 'filter-funnel',\n 'filter-slider',\n 'flash',\n 'folder',\n 'folder-open',\n 'foodprocessor',\n 'funding',\n 'globe-continents',\n 'globe-lines',\n 'glossary',\n 'greenhouse',\n 'guide',\n 'guide-overlay',\n 'heart',\n 'help',\n 'help-circle',\n 'history',\n 'home',\n 'husk',\n 'image',\n 'incognito',\n 'indexed',\n 'info',\n 'info-circle',\n 'info-circle-schema',\n 'lake',\n 'link',\n 'list-indented',\n 'livestock',\n 'loading',\n 'loading-bar',\n 'loading-circle-filled',\n 'loading-circle-filled-withshadow',\n 'log',\n 'mail',\n 'map',\n 'menu',\n 'messages',\n 'messages-with-badge',\n 'metrics',\n 'migration',\n 'minus',\n 'model-docs',\n 'news',\n 'node',\n 'notepad',\n 'ocean',\n 'organisation',\n 'organisation-schema',\n 'overflow-menu',\n 'pin',\n 'pin-schema',\n 'plus',\n 'pond',\n 'private-eye',\n 'private-eye-crossed',\n 'private-lock',\n 'private-lock-filled',\n 'private-unlocked',\n 'profile-checkmark',\n 'profile-circle',\n 'profile-circle-schema',\n 'profile-gear',\n 'progress',\n 'python',\n 'refresh',\n 'rename',\n 'retailer',\n 'review',\n 'river',\n 'save',\n 'schema',\n 'search',\n 'search-schema',\n 'search-with-exclamation',\n 'search-with-minus',\n 'search-with-plus',\n 'settings',\n 'share',\n 'share-socials',\n 'shrub',\n 'sign-out',\n 'slack',\n 'socials-gitlab',\n 'socials-google',\n 'socials-linkedin',\n 'socials-linkedin-circle',\n 'socials-orcid',\n 'socials-orcid-circle',\n 'sort-ascending',\n 'sort-caret-down-filled',\n 'sort-caret-stacked-filled-stacked',\n 'sort-caret-up-filled',\n 'source',\n 'source-schema',\n 'star',\n 'star-filled',\n 'table',\n 'tag-filled',\n 'tank',\n 'target',\n 'target-schema',\n 'term',\n 'term-schema',\n 'textform-list',\n 'tool',\n 'transport',\n 'transport-schema',\n 'trash',\n 'tree',\n 'turn-phone',\n 'unit',\n 'upload',\n 'video',\n 'webhook',\n 'xlsx-file',\n 'xmark',\n 'xmark-circle',\n 'xmark-circle-filled',\n 'xmark-circle-filled-with-shadow',\n 'zip'\n];\n","import { Component, computed, HostBinding, inject, input } from '@angular/core';\nimport { PlatformLocation } from '@angular/common';\n\nimport { svgIconSizes, svgIconNames } from './icons';\n\nexport const defaultSvgIconSize: svgIconSizes = '20';\n\n@Component({\n selector: 'he-svg-icon',\n imports: [],\n templateUrl: './svg-icon.component.html',\n styleUrls: ['./svg-icon.component.scss'],\n host: {\n '[attr.icon-size]': 'size()'\n }\n})\nexport class HESvgIconComponent {\n private readonly baseHref = inject(PlatformLocation).getBaseHrefFromDOM() || '/';\n\n protected readonly name = input.required<svgIconNames>();\n protected readonly size = input<svgIconSizes>(defaultSvgIconSize);\n protected readonly animation = input<string>();\n\n private readonly iconName = computed(() => [this.name(), this.size()].filter(Boolean).join('-'));\n protected readonly iconPath = computed(\n () => `${this.baseHref}assets/svg-icons/icons-sprite.svg#${this.iconName()}px`\n );\n\n @HostBinding('style.width')\n protected get _width() {\n return `${this.size()}px`;\n }\n\n @HostBinding('style.height')\n protected get _height() {\n return `${this.size()}px`;\n }\n}\n","<svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.animation]=\"animation()\">\n <use [attr.href]=\"iconPath()\"></use>\n</svg>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, InjectionToken, inject, ElementRef, PLATFORM_ID, output, Directive, DestroyRef, input, computed, ChangeDetectionStrategy, Component as Component$1, Pipe, viewChild, HostListener, model, ViewEncapsulation, signal, effect, HostBinding, contentChild, untracked, viewChildren, forwardRef, LOCALE_ID } from '@angular/core';
|
|
2
|
+
import { Injectable, InjectionToken, inject, ElementRef, PLATFORM_ID, output, Directive, DestroyRef, input, computed, ChangeDetectionStrategy, Component as Component$1, Pipe, viewChild, HostListener, model, ViewEncapsulation, signal, afterNextRender, effect, HostBinding, contentChild, untracked, viewChildren, forwardRef, LOCALE_ID } from '@angular/core';
|
|
3
3
|
import { toObservable, toSignal, outputFromObservable, takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { FormsModule, NG_VALUE_ACCESSOR, UntypedFormBuilder, Validators, ReactiveFormsModule, FormControl } from '@angular/forms';
|
|
@@ -1952,20 +1952,6 @@ const ANIMATIONS = [
|
|
|
1952
1952
|
})),
|
|
1953
1953
|
transition('hidden => *', animate(`${animationDuration} ease-in`)),
|
|
1954
1954
|
transition('* => hidden', animate(`${animationDuration} ease-out`))
|
|
1955
|
-
]),
|
|
1956
|
-
trigger('reduceWidth', [
|
|
1957
|
-
state('*', style({
|
|
1958
|
-
width: '100%',
|
|
1959
|
-
transform: 'translateX(0)'
|
|
1960
|
-
})),
|
|
1961
|
-
state('reduced', style({
|
|
1962
|
-
width: 'calc(100% - var(--content-transition-x))',
|
|
1963
|
-
transform: 'translateX(calc(var(--sidenav-side-transform) * var(--content-transition-x)))'
|
|
1964
|
-
})),
|
|
1965
|
-
transition('void -> *', animate('0ms')),
|
|
1966
|
-
transition(':enter', animate(0)),
|
|
1967
|
-
transition('reduced => *', animate(`${animationDuration} ease-out`)),
|
|
1968
|
-
transition('* => reduced', animate(`${animationDuration} ease-in`))
|
|
1969
1955
|
])
|
|
1970
1956
|
];
|
|
1971
1957
|
|
|
@@ -2222,7 +2208,11 @@ class DrawerContainerComponent {
|
|
|
2222
2208
|
/**
|
|
2223
2209
|
* we use combineLatest instead of computed to avoid the animation flickering (wait for all sources to emit)
|
|
2224
2210
|
*/
|
|
2225
|
-
this.
|
|
2211
|
+
this.isReduced = toSignal(combineLatest([toObservable(this.expanded), toObservable(this.isCompact), toObservable(this.visible)]).pipe(map(([expanded, isCompact, visible]) => [expanded, !isCompact, visible].every(Boolean))), { initialValue: false });
|
|
2212
|
+
/**
|
|
2213
|
+
* only transition the content once it has been rendered, so the initial layout snaps into place.
|
|
2214
|
+
*/
|
|
2215
|
+
this.animated = signal(false, ...(ngDevMode ? [{ debugName: "animated" }] : []));
|
|
2226
2216
|
this._contentContainerPadding$ = combineLatest([
|
|
2227
2217
|
this._hostComponentWidth$,
|
|
2228
2218
|
toObservable(this.contentPaddingStyles)
|
|
@@ -2233,6 +2223,7 @@ class DrawerContainerComponent {
|
|
|
2233
2223
|
this.storedConfiguration = signal({}, ...(ngDevMode ? [{ debugName: "storedConfiguration" }] : []));
|
|
2234
2224
|
this.storedWith = computed(() => this.storedConfiguration()?.width || 0, ...(ngDevMode ? [{ debugName: "storedWith" }] : []));
|
|
2235
2225
|
this.storedExpanded = computed(() => this.storedConfiguration()?.expanded, ...(ngDevMode ? [{ debugName: "storedExpanded" }] : []));
|
|
2226
|
+
afterNextRender(() => this.animated.set(true));
|
|
2236
2227
|
this._updateSidenavEvent$.pipe(takeUntil(this.destroy$)).subscribe(clientX => this.updateResizing(clientX));
|
|
2237
2228
|
this._contentContainerPadding$
|
|
2238
2229
|
.pipe(takeUntil(this.destroy$))
|
|
@@ -2332,7 +2323,7 @@ class DrawerContainerComponent {
|
|
|
2332
2323
|
return parseInt(padding, 10) + parseInt(margin, 10);
|
|
2333
2324
|
}
|
|
2334
2325
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2335
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, secondaryLinks: { classPropertyName: "secondaryLinks", publicName: "secondaryLinks", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerFooterTemplate: { classPropertyName: "drawerFooterTemplate", publicName: "drawerFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuFooterTemplate: { classPropertyName: "drawerMenuFooterTemplate", publicName: "drawerMenuFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, compactMenuHeaderClass: { classPropertyName: "compactMenuHeaderClass", publicName: "compactMenuHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (links()?.length > 0) {\n <div\n ngbDropdown\n #optionDd=\"ngbDropdown\"\n container=\"body\"\n placement=\"bottom-end\"\n [dropdownClass]=\"compactMenuHeaderClass()\">\n <button\n ngbDropdownToggle\n class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 is-gap-4 | compact-header--btn\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n <span>{{ compactMenuLabel() }}</span>\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" [secondaryLinks]=\"secondaryLinks()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n </div>\n </div>\n </div>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\n [class.is-pr-3]=\"position() === 'right'\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }\n @if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\" [secondaryLinks]=\"secondaryLinks()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n <ng-content select=\"[drawer-content]\" />\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=left]>aside{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent>.shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right]>aside{right:0;order:1}:host-context[drawer-position=right]>aside>.shell__menuContent{right:0}:host-context[drawer-position=right]>aside>.shell__menuContent>.shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width:1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{padding:.5rem 1rem;width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{background:#dbe3ea}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "secondaryLinks", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2326
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, secondaryLinks: { classPropertyName: "secondaryLinks", publicName: "secondaryLinks", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerFooterTemplate: { classPropertyName: "drawerFooterTemplate", publicName: "drawerFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuFooterTemplate: { classPropertyName: "drawerMenuFooterTemplate", publicName: "drawerMenuFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, compactMenuHeaderClass: { classPropertyName: "compactMenuHeaderClass", publicName: "compactMenuHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (links()?.length > 0) {\n <div\n ngbDropdown\n #optionDd=\"ngbDropdown\"\n container=\"body\"\n placement=\"bottom-end\"\n [dropdownClass]=\"compactMenuHeaderClass()\">\n <button\n ngbDropdownToggle\n class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 is-gap-4 | compact-header--btn\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n <span>{{ compactMenuLabel() }}</span>\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" [secondaryLinks]=\"secondaryLinks()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n </div>\n </div>\n </div>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\n [class.is-pr-3]=\"position() === 'right'\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }\n @if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\" [secondaryLinks]=\"secondaryLinks()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [class.is-animated]=\"animated()\" [class.is-reduced]=\"isReduced()\">\n <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n <ng-content select=\"[drawer-content]\" />\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=left]>aside{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent>.shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right]>aside{right:0;order:1}:host-context[drawer-position=right]>aside>.shell__menuContent{right:0}:host-context[drawer-position=right]>aside>.shell__menuContent>.shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width:1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none;transform:translate(0)}.shell__content--body.is-reduced{width:calc(100% - var(--content-transition-x));transform:translate(calc(var(--sidenav-side-transform) * var(--content-transition-x)))}.shell__content:not(.is-resizing) .shell__content--body.is-animated{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{padding:.5rem 1rem;width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{background:#dbe3ea}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "secondaryLinks", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2336
2327
|
}
|
|
2337
2328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DrawerContainerComponent, decorators: [{
|
|
2338
2329
|
type: Component$1,
|
|
@@ -2349,7 +2340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2349
2340
|
'[class]': 'hostClass()',
|
|
2350
2341
|
'[attr.drawer-position]': 'position()',
|
|
2351
2342
|
'[attr.drawer-state]': 'menuState()'
|
|
2352
|
-
}, template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (links()?.length > 0) {\n <div\n ngbDropdown\n #optionDd=\"ngbDropdown\"\n container=\"body\"\n placement=\"bottom-end\"\n [dropdownClass]=\"compactMenuHeaderClass()\">\n <button\n ngbDropdownToggle\n class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 is-gap-4 | compact-header--btn\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n <span>{{ compactMenuLabel() }}</span>\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" [secondaryLinks]=\"secondaryLinks()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n </div>\n </div>\n </div>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\n [class.is-pr-3]=\"position() === 'right'\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }\n @if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\" [secondaryLinks]=\"secondaryLinks()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [
|
|
2343
|
+
}, template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (links()?.length > 0) {\n <div\n ngbDropdown\n #optionDd=\"ngbDropdown\"\n container=\"body\"\n placement=\"bottom-end\"\n [dropdownClass]=\"compactMenuHeaderClass()\">\n <button\n ngbDropdownToggle\n class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 is-gap-4 | compact-header--btn\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n <span>{{ compactMenuLabel() }}</span>\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" [secondaryLinks]=\"secondaryLinks()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n </div>\n </div>\n </div>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\n [class.is-pr-3]=\"position() === 'right'\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }\n @if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\" [secondaryLinks]=\"secondaryLinks()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [class.is-animated]=\"animated()\" [class.is-reduced]=\"isReduced()\">\n <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n <ng-content select=\"[drawer-content]\" />\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=left]>aside{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent>.shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right]>aside{right:0;order:1}:host-context[drawer-position=right]>aside>.shell__menuContent{right:0}:host-context[drawer-position=right]>aside>.shell__menuContent>.shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width:1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none;transform:translate(0)}.shell__content--body.is-reduced{width:calc(100% - var(--content-transition-x));transform:translate(calc(var(--sidenav-side-transform) * var(--content-transition-x)))}.shell__content:not(.is-resizing) .shell__content--body.is-animated{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{padding:.5rem 1rem;width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{background:#dbe3ea}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
|
|
2353
2344
|
}], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{ read: ElementRef }, isSignal: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], compactBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactBreakpoint", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], contentStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyles", required: false }] }], contentPaddingStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPaddingStyles", required: false }] }], menuOverlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOverlap", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], secondaryLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryLinks", required: false }] }], drawerHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerHeaderTemplate", required: false }] }], drawerContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerContentTemplate", required: false }] }], drawerFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerFooterTemplate", required: false }] }], drawerMenuHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuHeaderTemplate", required: false }] }], drawerMenuFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuFooterTemplate", required: false }] }], compactMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuLabel", required: false }] }], compactHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactHeaderClass", required: false }] }], compactMenuHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuHeaderClass", required: false }] }], minMenuDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMenuDistance", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], stopResizing: [{
|
|
2354
2345
|
type: HostListener,
|
|
2355
2346
|
args: ['window:mouseup']
|