npm - @genexus/genexus-ide-ui - Versions diffs - 1.0.1 → 1.0.2 - Mend

@genexus/genexus-ide-ui 1.0.1 → 1.0.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.

Files changed (614) hide show

package/dist/collection/components/team-dev/update-partial-selection/update-partial-selection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"update-partial-selection.js","sourceRoot":"","sources":["../../../../src/components/team-dev/update-partial-selection/update-partial-selection.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n getAssetPath\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { MercuryBundles } from \"@genexus/mercury\";\n/ CUSTOM IMPORTS /\nimport { Locale } from \"../../../common/locale\";\nimport { config } from \"../../../common/config\";\nimport { gridCommon } from \"../../../common/grid\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n // \"utils/form\",\n // \"utils/layout\",\n // \"utils/typography\",\n // \"components/button\",\n // \"components/checkbox\",\n // \"components/edit\",\n \"components/tabular-grid\"\n];\n@Component({\n tag: \"gx-ide-team-dev-update-partial-selection\",\n styleUrl: \"update-partial-selection.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/team-dev-update-partial-selection\"]\n})\nexport class GxIdeTeamDevUpdatePartialSelection {\n // 1.OWN PROPERTIES //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n private shortcutsSrc = getAssetPath(\n `./gx-ide-assets/team-dev-update-partial-selection/shortcuts.json`\n );\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeTeamDevUpdatePartialSelectionElement;\n\n / References needed to collect data /\n private chGridEl!: HTMLElement;\n\n // 3.STATE() VARIABLES //\n\n /\n The selected objects in the table of objects\n /\n @State() selectedObjectsIds: string[] = [];\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n This is a function provided by the developer that return a list of new objects to populate the table of objects.\n /\n @Prop() readonly addCallback!: AddCallback;\n\n /\n This is a function provided by the developer for execute when cancel button is pressed.\n /\n @Prop() readonly cancelCallback!: CancelCallback;\n\n /\n This is a function provided by the developer and is invoked when the action confirm is executed passing the selected objects of the grid\n /\n @Prop() readonly confirmCallback!: ConfirmCallback;\n\n /\n The categories render in the filter category selector\n /\n @Prop({ mutable: true }) selection: ObjectData[] = [];\n\n // 5.EVENTS (EMIT) //\n\n /\n This event is emitted once just after the component is fully loaded and the first render() occurs.\n /\n @Event() componentDidLoadEvent: EventEmitter<boolean>;\n\n /\n @description Gets fired when the component has rendered for the first time.\n /\n @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n // 6.COMPONENT LIFECYCLE EVENTS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.componentDidLoadEvent.emit(true);\n }\n\n componentDidLoad() {\n this.listenChanges();\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(\n this._componentLocale.componentName\n );\n this.renderedFirstTime = true;\n }\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n /\n Validate necessary data input\n /\n @Method()\n async validate(): Promise<boolean> {\n const isValid = true;\n return isValid;\n }\n\n // 9.LOCAL METHODS //\n\n private renderObjects = (): Element => {\n return (\n <ch-tabular-grid\n class=\"tabular-grid\"\n row-selection-mode=\"multiple\"\n ref={(el: HTMLElement) => (this.chGridEl = el)}\n part=\"ch-grid-objects\"\n >\n <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n <ch-tabular-grid-column\n columnName=\"\"\n settingable={false}\n sortable={false}\n size={gridCommon.colSize.minContent}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n columnName={this._componentLocale.tableHead.name}\n settingable={false}\n size={gridCommon.colSize.auto}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n columnName={this._componentLocale.tableHead.type}\n settingable={false}\n size={gridCommon.colSize.auto}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n columnName={this._componentLocale.tableHead.description}\n settingable={false}\n size={gridCommon.colSize.auto}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n columnName={this._componentLocale.tableHead.modifiedOn}\n settingable={false}\n size={gridCommon.colSize.auto}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n </ch-tabular-grid-columnset>\n {this.selection.map((obj: ObjectData) => (\n <ch-tabular-grid-row\n rowid={obj.id}\n key={obj.id}\n class=\"tabular-grid-row\"\n >\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n <ch-image src={obj.typeIcon} class=\"icon-md\"></ch-image>\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {obj.name}\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {obj.type}\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {obj.description}\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {`${obj.modifiedOn.toISOString().slice(0, 10)}`}\n </ch-tabular-grid-cell>\n </ch-tabular-grid-row>\n ))}\n </ch-tabular-grid>\n );\n };\n\n private getObjectsHandler = (): void => {\n this.addCallback().then((items: ObjectData[]) => {\n if (items?.length > 0) {\n this.selection = [...this.selection, ...items];\n this.selectedObjectsIds = [];\n }\n });\n };\n\n private removeSelectedObjectsHandler = (): void => {\n this.selection = this.selection.filter(\n item => !this.selectedObjectsIds.includes(item.id)\n );\n this.selectedObjectsIds = [];\n };\n\n private confirmHandler = (): void => {\n if (this.confirmCallback) {\n const allRowsIds: string[] = [];\n this.selection.forEach(row => {\n allRowsIds.push(row.id);\n });\n this.confirmCallback(allRowsIds);\n }\n };\n\n private cancelHandler = (): void => {\n this.cancelCallback();\n };\n\n private removeAllHandler = (): void => {\n this.selection = [];\n };\n\n private listenChanges = (): void => {\n // for grid selection\n this.chGridEl.addEventListener(\"selectionChanged\", (ev: any): void => {\n this.selectedObjectsIds = ev.detail.rowsId;\n });\n };\n\n // 10.RENDER() FUNCTION //\n\n render(): void {\n return (\n <Host class=\"gx-ide-component\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div class=\"gx-ide-main-wrapper\">\n <gx-ide-container\n noContentPadding\n noContentGap\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n slimmerFooter={config.gxIdeContainer.slimmerFooter}\n >\n <div class=\"top-actions\">\n {/ add button/}\n <gxg-button\n id=\"button-add\"\n type=\"outlined\"\n icon=\"gemini-tools/add\"\n onClick={this.getObjectsHandler}\n part=\"add\"\n >\n {this._componentLocale.btnAddObject}\n </gxg-button>\n\n {/ remove button/}\n <gxg-button\n id=\"button-remove\"\n type=\"secondary-text-only\"\n onClick={this.removeSelectedObjectsHandler}\n part=\"remove\"\n disabled={!(this.selectedObjectsIds.length > 0)}\n >\n {this._componentLocale.btnRemoveSelectedObjects}\n </gxg-button>\n </div>\n\n {this.renderObjects()}\n\n {/ remove all button/}\n <gxg-button\n id=\"button-clear\"\n onClick={this.removeAllHandler}\n disabled={!(this.selection.length > 0)}\n part=\"clear\"\n slot=\"footer-start\"\n type=\"secondary-text-only\"\n >\n {this._componentLocale.footer.btnRemoveAll}\n </gxg-button>\n\n {/ cancel button/}\n <gxg-button\n id=\"button-cancel\"\n type=\"outlined\"\n onClick={this.cancelHandler}\n part=\"cancel\"\n slot=\"footer-end\"\n >\n {this._componentLocale.footer.btnCancel}\n </gxg-button>\n\n {/ confirm button*/}\n <gxg-button\n id=\"button-ok\"\n type=\"primary-text-only\"\n onClick={this.confirmHandler}\n part=\"confirm\"\n slot=\"footer-end\"\n >\n {this._componentLocale.footer.btnConfirm}\n </gxg-button>\n </gx-ide-container>\n </div>\n <gxg-shortcuts src={this.shortcutsSrc}></gxg-shortcuts>\n </Host>\n );\n }\n}\n\nexport type AddCallback = () => Promise<ObjectData[]>;\nexport type CancelCallback = () => Promise<void>;\nexport type ConfirmCallback = (ids: string[]) => Promise<void>;\n\nexport interface ObjectData {\n id: string;\n typeIcon: string;\n name: string;\n type: string;\n description: string;\n modifiedOn: Date;\n}\n"]}
1	+ {"version":3,"file":"update-partial-selection.js","sourceRoot":"","sources":["../../../../src/components/team-dev/update-partial-selection/update-partial-selection.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n getAssetPath\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { MercuryBundles } from \"@genexus/mercury\";\n/ CUSTOM IMPORTS /\nimport { Locale } from \"../../../common/locale\";\nimport { config } from \"../../../common/config\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n // \"utils/form\",\n // \"utils/layout\",\n // \"utils/typography\",\n // \"components/button\",\n // \"components/checkbox\",\n // \"components/edit\",\n \"components/tabular-grid\"\n];\n@Component({\n tag: \"gx-ide-team-dev-update-partial-selection\",\n styleUrl: \"update-partial-selection.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/team-dev-update-partial-selection\"]\n})\nexport class GxIdeTeamDevUpdatePartialSelection {\n // 1.OWN PROPERTIES //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n private shortcutsSrc = getAssetPath(\n `./gx-ide-assets/team-dev-update-partial-selection/shortcuts.json`\n );\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeTeamDevUpdatePartialSelectionElement;\n\n / References needed to collect data /\n private chGridEl!: HTMLElement;\n\n // 3.STATE() VARIABLES //\n\n /\n The selected objects in the table of objects\n /\n @State() selectedObjectsIds: string[] = [];\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n This is a function provided by the developer that return a list of new objects to populate the table of objects.\n /\n @Prop() readonly addCallback!: AddCallback;\n\n /\n This is a function provided by the developer for execute when cancel button is pressed.\n /\n @Prop() readonly cancelCallback!: CancelCallback;\n\n /\n This is a function provided by the developer and is invoked when the action confirm is executed passing the selected objects of the grid\n /\n @Prop() readonly confirmCallback!: ConfirmCallback;\n\n /\n The categories render in the filter category selector\n /\n @Prop({ mutable: true }) selection: ObjectData[] = [];\n\n // 5.EVENTS (EMIT) //\n\n /\n This event is emitted once just after the component is fully loaded and the first render() occurs.\n /\n @Event() componentDidLoadEvent: EventEmitter<boolean>;\n\n /\n @description Gets fired when the component has rendered for the first time.\n /\n @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n // 6.COMPONENT LIFECYCLE EVENTS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.componentDidLoadEvent.emit(true);\n }\n\n componentDidLoad() {\n this.listenChanges();\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(\n this._componentLocale.componentName\n );\n this.renderedFirstTime = true;\n }\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n /\n Validate necessary data input\n /\n @Method()\n async validate(): Promise<boolean> {\n const isValid = true;\n return isValid;\n }\n\n // 9.LOCAL METHODS //\n\n private renderObjects = (): Element => {\n return (\n <ch-tabular-grid\n class=\"tabular-grid\"\n row-selection-mode=\"multiple\"\n ref={(el: HTMLElement) => (this.chGridEl = el)}\n part=\"ch-grid-objects\"\n >\n <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n <ch-tabular-grid-column\n columnName=\"\"\n settingable={false}\n sortable={false}\n size={config.tabularGrid.colSize.minContent}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n columnName={this._componentLocale.tableHead.name}\n settingable={false}\n size={config.tabularGrid.colSize.auto}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n columnName={this._componentLocale.tableHead.type}\n settingable={false}\n size={config.tabularGrid.colSize.auto}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n columnName={this._componentLocale.tableHead.description}\n settingable={false}\n size={config.tabularGrid.colSize.auto}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n <ch-tabular-grid-column\n columnName={this._componentLocale.tableHead.modifiedOn}\n settingable={false}\n size={config.tabularGrid.colSize.auto}\n class=\"tabular-grid-column\"\n ></ch-tabular-grid-column>\n </ch-tabular-grid-columnset>\n {this.selection.map((obj: ObjectData) => (\n <ch-tabular-grid-row\n rowid={obj.id}\n key={obj.id}\n class=\"tabular-grid-row\"\n >\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n <ch-image src={obj.typeIcon} class=\"icon-md\"></ch-image>\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {obj.name}\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {obj.type}\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {obj.description}\n </ch-tabular-grid-cell>\n <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n {`${obj.modifiedOn.toISOString().slice(0, 10)}`}\n </ch-tabular-grid-cell>\n </ch-tabular-grid-row>\n ))}\n </ch-tabular-grid>\n );\n };\n\n private getObjectsHandler = (): void => {\n this.addCallback().then((items: ObjectData[]) => {\n if (items?.length > 0) {\n this.selection = [...this.selection, ...items];\n this.selectedObjectsIds = [];\n }\n });\n };\n\n private removeSelectedObjectsHandler = (): void => {\n this.selection = this.selection.filter(\n item => !this.selectedObjectsIds.includes(item.id)\n );\n this.selectedObjectsIds = [];\n };\n\n private confirmHandler = (): void => {\n if (this.confirmCallback) {\n const allRowsIds: string[] = [];\n this.selection.forEach(row => {\n allRowsIds.push(row.id);\n });\n this.confirmCallback(allRowsIds);\n }\n };\n\n private cancelHandler = (): void => {\n this.cancelCallback();\n };\n\n private removeAllHandler = (): void => {\n this.selection = [];\n };\n\n private listenChanges = (): void => {\n // for grid selection\n this.chGridEl.addEventListener(\"selectionChanged\", (ev: any): void => {\n this.selectedObjectsIds = ev.detail.rowsId;\n });\n };\n\n // 10.RENDER() FUNCTION //\n\n render(): void {\n return (\n <Host class=\"gx-ide-component\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div class=\"gx-ide-main-wrapper\">\n <gx-ide-container\n noContentPadding\n noContentGap\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n slimmerFooter={config.gxIdeContainer.slimmerFooter}\n >\n <div class=\"top-actions\">\n {/ add button/}\n <gxg-button\n id=\"button-add\"\n type=\"outlined\"\n icon=\"gemini-tools/add\"\n onClick={this.getObjectsHandler}\n part=\"add\"\n >\n {this._componentLocale.btnAddObject}\n </gxg-button>\n\n {/ remove button/}\n <gxg-button\n id=\"button-remove\"\n type=\"secondary-text-only\"\n onClick={this.removeSelectedObjectsHandler}\n part=\"remove\"\n disabled={!(this.selectedObjectsIds.length > 0)}\n >\n {this._componentLocale.btnRemoveSelectedObjects}\n </gxg-button>\n </div>\n\n {this.renderObjects()}\n\n {/ remove all button/}\n <gxg-button\n id=\"button-clear\"\n onClick={this.removeAllHandler}\n disabled={!(this.selection.length > 0)}\n part=\"clear\"\n slot=\"footer-start\"\n type=\"secondary-text-only\"\n >\n {this._componentLocale.footer.btnRemoveAll}\n </gxg-button>\n\n {/ cancel button/}\n <gxg-button\n id=\"button-cancel\"\n type=\"outlined\"\n onClick={this.cancelHandler}\n part=\"cancel\"\n slot=\"footer-end\"\n >\n {this._componentLocale.footer.btnCancel}\n </gxg-button>\n\n {/ confirm button*/}\n <gxg-button\n id=\"button-ok\"\n type=\"primary-text-only\"\n onClick={this.confirmHandler}\n part=\"confirm\"\n slot=\"footer-end\"\n >\n {this._componentLocale.footer.btnConfirm}\n </gxg-button>\n </gx-ide-container>\n </div>\n <gxg-shortcuts src={this.shortcutsSrc}></gxg-shortcuts>\n </Host>\n );\n }\n}\n\nexport type AddCallback = () => Promise<ObjectData[]>;\nexport type CancelCallback = () => Promise<void>;\nexport type ConfirmCallback = (ids: string[]) => Promise<void>;\n\nexport interface ObjectData {\n id: string;\n typeIcon: string;\n name: string;\n type: string;\n description: string;\n modifiedOn: Date;\n}\n"]}

package/dist/collection/components/team-dev/update-to-revision/update-to-revision.css CHANGED Viewed

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+.opacity-0 {
+  opacity: 0;
+}
+.opacity-1 {
+  opacity: 1;
+}
+.display-contents {
+  display: contents;
+}
+/* - - - - - - - - - - - - - - - - - - -
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/wf-settings/wf-settings.css CHANGED Viewed

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+.opacity-0 {
+  opacity: 0;
+}
+.opacity-1 {
+  opacity: 1;
+}
+.display-contents {
+  display: contents;
+}
+/* - - - - - - - - - - - - - - - - - - -
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/ww-images/ww-images.css CHANGED Viewed

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+.opacity-0 {
+  opacity: 0;
+}
+.opacity-1 {
+  opacity: 1;
+}
+.display-contents {
+  display: contents;
+}
+/* - - - - - - - - - - - - - - - - - - -
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,11 +609,59 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
 :host {
   display: block;
 }
@@ -691,8 +839,8 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 }
 .hiChar {
-  color: var(--gx-ide-hi-char-color);
-  font-weight: 600;
+  color: var(--mer-color__primary-blue--200);
+  filter: brightness(1.3);
 }
 .tabular-grid-ww-images ch-tabular-grid-cell:is(:nth-child(4)) {

package/dist/collection/components/ww-images/ww-images.js CHANGED Viewed

@@ -6,7 +6,6 @@ import { config } from "../../common/config";
 import { renderFormItems } from "../../common/common";
 import { FILTER_AFTER } from "../../common/constants";
 import { formatDate, hiChar, closeOnOutsideClickHandler } from "../../common/helpers";
-import { gridCommon } from "../../common/grid";
 const CSS_BUNDLES = [
     "resets/box-sizing",
     // "utils/form",
@@ -59,7 +58,7 @@ export class GxIdeWWImages {
         // 9.LOCAL METHODS -> Renders //
         this.renderFilter = () => {
             var _a, _b, _c, _d, _e;
-            return (h("div", { class: "filter filter--padding", ref: (el) => (this.filterEl = el) }, h("div", { class: "filter__first-row" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.name, ref: (el) => (this.filterNameEl = el), part: "filter-name", class: "name" }), h("div", { class: "second-column" }, h("gx-ide-entity-selector", { label: this._componentLocale.filter.moduleFolder, "label-position": "above", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), class: "module-folder", part: "filter-module-folder" }), h("gxg-button", { onClick: this.resetFilterHandler, part: "gxg-button-reset-filter", type: "secondary-icon-only", icon: "gemini-tools/reset", class: "reset-filter-btn" }), h("gxg-button", { onClick: this.toggleFiltersHandler, part: "gxg-button gxg-button--more-less", type: "secondary-icon-only", icon: true ? "window-tools/filter-conditions" : "window-tools/filter", class: "filter-btn" }))), h("div", { class: {
+            return (h("div", { class: "filter filter--padding", ref: (el) => (this.filterEl = el) }, h("div", { class: "filter__first-row" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.name, ref: (el) => (this.filterNameEl = el), part: "filter-name", class: "name" }), h("div", { class: "second-column" }, h("gx-ide-entity-selector", { "label-position": "above", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), class: "module-folder", part: "filter-module-folder" }), h("gxg-button", { onClick: this.resetFilterHandler, part: "gxg-button-reset-filter", type: "secondary-icon-only", icon: "gemini-tools/reset", class: "reset-filter-btn" }), h("gxg-button", { onClick: this.toggleFiltersHandler, part: "gxg-button gxg-button--more-less", type: "secondary-icon-only", icon: true ? "window-tools/filter-conditions" : "window-tools/filter", class: "filter-btn" }))), h("div", { class: {
                     "filters-outer-wrapper": true,
                     "filters-outer-wrapper--hidden": this.filtersHidden
                 } }, h("div", { class: {
@@ -97,7 +96,7 @@ export class GxIdeWWImages {
         this.renderImagesData = () => {
             return (
             /* images information*/
-            h("gx-ide-container", { contentBorderEnd: true, noContentPadding: true, titleType: "secondary", containerTitle: !this.secondaryFilter ? this._componentLocale.imagesDataTitle : null, class: { "images-information": true, "overflow-auto": true }, part: "grid-container" }, this.secondaryFilter ? (h("header", { class: "images-information__header", slot: "header" }, h("gx-ide-title", { type: "secondary", class: "images-information__header-title" }, this._componentLocale.imagesDataTitle), h("gxg-form-text", { icon: "gemini-tools/search", "icon-position": "start", placeholder: "Search by any field", onInput: this.filterInputHandler }))) : null, h("ch-tabular-grid", { ref: (el) => (this.chGridEl = el), part: "ch-grid-images", rowSelectionMode: "single", class: "tabular-grid tabular-grid-ww-images" }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { columnName: "", columnNameHidden: false, settingable: false, size: gridCommon.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.name, columnNameHidden: false, settingable: false, class: "tabular-grid-column", size: gridCommon.colSize.common }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.module, columnNameHidden: false, settingable: false, size: gridCommon.colSize.common, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.description, columnNameHidden: false, settingable: false, size: gridCommon.colSize.commonDouble, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNameHidden: false, settingable: false, size: gridCommon.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNameHidden: false, settingable: false, size: gridCommon.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNameHidden: false, settingable: false, size: gridCommon.colSize.maxContent, class: "tabular-grid-column" })), this.filteredImages.map((obj) => (h("ch-tabular-grid-row", { rowid: obj.id, class: "tabular-grid-row" }, h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("ch-image", { src: obj.icon })), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.name, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.module, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.description, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(`${formatDate(obj.modifiedDate)}`, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.lastUser, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(`${formatDate(obj.importDate)}`, this.filterImagesInputValue))))))));
+            h("gx-ide-container", { contentBorderEnd: true, noContentPadding: true, titleType: "secondary", containerTitle: !this.secondaryFilter ? this._componentLocale.imagesDataTitle : null, class: { "images-information": true, "overflow-auto": true }, part: "grid-container" }, this.secondaryFilter ? (h("header", { class: "images-information__header", slot: "header" }, h("gx-ide-title", { type: "secondary", class: "images-information__header-title" }, this._componentLocale.imagesDataTitle), h("gxg-form-text", { icon: "gemini-tools/search", "icon-position": "start", placeholder: "Search by any field", onInput: this.filterInputHandler }))) : null, h("ch-tabular-grid", { ref: (el) => (this.chGridEl = el), part: "ch-grid-images", rowSelectionMode: "single", class: "tabular-grid tabular-grid-ww-images" }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { columnName: "", columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.name, columnNameHidden: false, settingable: false, class: "tabular-grid-column", size: config.tabularGrid.colSize.common }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.module, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.common, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.description, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.commonDouble, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" })), this.filteredImages.map((obj) => (h("ch-tabular-grid-row", { rowid: obj.id, class: "tabular-grid-row" }, h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("ch-image", { src: obj.icon })), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.name, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.module, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.description, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(`${formatDate(obj.modifiedDate)}`, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.lastUser, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(`${formatDate(obj.importDate)}`, this.filterImagesInputValue))))))));
         };
         this.renderImages = () => {
             return (
@@ -465,7 +464,7 @@ export class GxIdeWWImages {
                 "mutable": false,
                 "complexType": {
                     "original": "EntityData",
-                    "resolved": "{ id: string; name: string; iconSrc?: string; iconColor?: Color; }",
+                    "resolved": "{ id: string; name: string; iconSrc?: string; }",
                     "references": {
                         "EntityData": {
                             "location": "import",