', props.className)}
+<% if(formValue!=="no"){ -%>
+ onChange={(event) => state.handleChange(event)}
+ onBlur={(event) => state.handleBlur(event)}
+ onFocus={(event) => state.handleFocus(event)}
+<% } -%>
+ >
diff --git a/packages/components/_templates/mitosis/new/power-app-solution.ejs.t b/packages/components/_templates/mitosis/new/power-app-solution.ejs.t
index b89ab056e680..869db016fba1 100644
--- a/packages/components/_templates/mitosis/new/power-app-solution.ejs.t
+++ b/packages/components/_templates/mitosis/new/power-app-solution.ejs.t
@@ -4,4 +4,4 @@ to: ../../build-power-apps/DBUI/DBUI.cdsproj
before: ProjectReference
skip_if: <%= name %>
---
-
+
diff --git a/packages/components/_templates/mitosis/new/prompt.js b/packages/components/_templates/mitosis/new/prompt.js
index b8d2b4e23fe1..dc6a071cd0bd 100644
--- a/packages/components/_templates/mitosis/new/prompt.js
+++ b/packages/components/_templates/mitosis/new/prompt.js
@@ -15,5 +15,14 @@ module.exports = [
name: 'readme',
default: true,
message: 'Do you want to auto-generate READMEs?'
+ },
+ {
+ type: 'input',
+ name: 'formValue',
+ default: 'no',
+ message:
+ 'Is your component a form component like an input, ' +
+ 'which has to inform the user if event.target.value changed? ' +
+ 'If it is a form component whatΒ΄s the name of the changing value (checked, value, ...)?'
}
];
diff --git a/packages/components/_templates/mitosis/new/readmes/readme-angular.ejs.t b/packages/components/_templates/mitosis/new/readmes/readme-angular.ejs.t
index 710a024f6828..b9c51302b932 100644
--- a/packages/components/_templates/mitosis/new/readmes/readme-angular.ejs.t
+++ b/packages/components/_templates/mitosis/new/readmes/readme-angular.ejs.t
@@ -3,7 +3,7 @@ to: "<%= readme ? `src/components/${name}/docs/Angular.md` : null %>"
---
## Angular
-For general installation and configuration look at the [ngx-components](https://www.npmjs.com/package/@db-ui/ngx-components) package.
+For general installation and configuration take a look at the [ngx-components](https://www.npmjs.com/package/@db-ui/ngx-components) package.
### Load component
diff --git a/packages/components/_templates/mitosis/new/readmes/readme-html.ejs.t b/packages/components/_templates/mitosis/new/readmes/readme-html.ejs.t
index a492cae7936c..cb2024cfe87f 100644
--- a/packages/components/_templates/mitosis/new/readmes/readme-html.ejs.t
+++ b/packages/components/_templates/mitosis/new/readmes/readme-html.ejs.t
@@ -3,7 +3,7 @@ to: "<%= readme ? `src/components/${name}/docs/HTML.md` : null %>"
---
## HTML
-For general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ui/components) package.
+For general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ui/components) package.
### Use component
diff --git a/packages/components/_templates/mitosis/new/readmes/readme-react.ejs.t b/packages/components/_templates/mitosis/new/readmes/readme-react.ejs.t
index d69e22cf9c3e..6b75bff662af 100644
--- a/packages/components/_templates/mitosis/new/readmes/readme-react.ejs.t
+++ b/packages/components/_templates/mitosis/new/readmes/readme-react.ejs.t
@@ -3,7 +3,7 @@ to: "<%= readme ? `src/components/${name}/docs/React.md` : null %>"
---
## React
-For general installation and configuration look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package.
+For general installation and configuration take a look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package.
### Use component
diff --git a/packages/components/_templates/mitosis/new/readmes/readme-vue.ejs.t b/packages/components/_templates/mitosis/new/readmes/readme-vue.ejs.t
index 5a57d9fbba16..ad83ccc73617 100644
--- a/packages/components/_templates/mitosis/new/readmes/readme-vue.ejs.t
+++ b/packages/components/_templates/mitosis/new/readmes/readme-vue.ejs.t
@@ -3,7 +3,7 @@ to: "<%= readme ? `src/components/${name}/docs/Vue.md` : null %>"
---
## Vue
-For general installation and configuration look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package.
+For general installation and configuration take a look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package.
### Use component
diff --git a/packages/components/_templates/power-apps/new/comp-xml.ejs.t b/packages/components/_templates/power-apps/new/comp-xml.ejs.t
index 863f7a56704e..8e4af7f0a230 100644
--- a/packages/components/_templates/power-apps/new/comp-xml.ejs.t
+++ b/packages/components/_templates/power-apps/new/comp-xml.ejs.t
@@ -10,7 +10,7 @@ force: true
control-type="standard">
<% if(locals.props){ locals.props.forEach((prop)=>{ -%>
-
of-type="Enum">
- 1st-class
- 2nd-class
+ 1st_class
+ 2nd_class
account
add
- add-circle
- add-link
- air-condition
+ add_circle
+ add_link
+ air_condition
airplane
- airplane-inverted
+ airplane_inverted
aisle
- aisle-not-available
+ aisle_not_available
alarm
- alarm-add
+ alarm_add
alert
- alert-off
- alternative-connection
- arrow-back
- arrow-down
- arrow-forward
- arrow-up
+ alert_off
+ alternative_connection
+ arrow_back
+ arrow_down
+ arrow_forward
+ arrow_up
attachment
- augmented-reality
+ augmented_reality
bahnbonus
- bahnbonus-card
+ bahnbonus_card
bahncard
bed
- best-price
+ best_price
bicycle
- bicycle-inverted
- bicycle-trailer
- bicycle-trailer-inverted
+ bicycle_inverted
+ bicycle_trailer
+ bicycle_trailer_inverted
block
booking
bookmark
@@ -74,37 +74,37 @@ force: true
build
calendar
call
- call-a-bike
- call-a-bike-inverted
+ call_a_bike
+ call_a_bike_inverted
camera
cancel
- capacity-indicator
- capacity-indicator-fully-booked
- capacity-indicator-high
- capacity-indicator-low
+ capacity_indicator
+ capacity_indicator_fully_booked
+ capacity_indicator_high
+ capacity_indicator_low
car
- car-inverted
- car-sequence
+ car_inverted
+ car_sequence
carsharing
- carsharing-inverted
+ carsharing_inverted
cash
chat
- check-circle
- chevron-left
- chevron-right
- childrens-compartment
+ check_circle
+ chevron_left
+ chevron_right
+ childrens_compartment
close
- clothing-hanger
+ clothing_hanger
cloud
- cloud-download
- cloud-upload
- coffee-cup
- commuter-ticket
+ cloud_download
+ cloud_upload
+ coffee_cup
+ commuter_ticket
compass
conversation
copy
couchette
- credit-card
+ credit_card
dashboard
database
day
@@ -114,84 +114,84 @@ force: true
document
done
download
- drag-and-drop
+ drag_and_drop
drink
edit
elderly
- electric-locomotive
- electric-locomotive-inverted
- electric-scooter
- electric-scooter-inverted
- entry-aid
- environmental-mobility-check
+ electric_locomotive
+ electric_locomotive_inverted
+ electric_scooter
+ electric_scooter_inverted
+ entry_aid
+ environmental_mobility_check
error
- ev-car
- ev-car-inverted
- expand-less
- expand-more
- face-neutral
- face-sad
- face-smiling
- fast-backward-10
- fast-backward-30
- fast-backward-empty
- fast-forward-10
- fast-forward-30
- fast-forward-empty
+ ev_car
+ ev_car_inverted
+ expand_less
+ expand_more
+ face_neutral
+ face_sad
+ face_smiling
+ fast_backward_10
+ fast_backward_30
+ fast_backward_empty
+ fast_forward_10
+ fast_forward_30
+ fast_forward_empty
fax
feedback
ferry
- ferry-inverted
+ ferry_inverted
filter
fingerprint
folder
- folder-open
+ folder_open
fullscreen
- fullscreen-exit
- generic-card
+ fullscreen_exit
+ generic_card
giftcard
gps
- gps-north
- grid-view
+ gps_north
+ grid_view
handcart
- handcart-inverted
+ handcart_inverted
handicapped
hearing
- hearing-disabled
+ hearing_disabled
heart
help
home
hydrogen
ice
- ice-inverted
- ice-side-view
+ ice_inverted
+ ice_side_view
image
info
- intercity-train
- intercity-train-inverted
- intermediary-stop
+ intercity_train
+ intercity_train_inverted
+ intermediary_stop
key
- komfort-check-in
- komfort-check-in-check
- komfort-check-in-circle
+ komfort_check_in
+ komfort_check_in_check
+ komfort_check_in_circle
legal
lightbulb
link
- link-external
+ link_external
list
- local-bus
- local-bus-inverted
- local-train
- local-train-inverted
- lock-close
- lock-open
- log-out
+ local_bus
+ local_bus_inverted
+ local_train
+ local_train_inverted
+ lock_close
+ lock_open
+ log_out
logbook
logo
- long-distance-bus
- long-distance-bus-inverted
- luggage-compartment
- luggage-rack
+ long_distance_bus
+ long_distance_bus_inverted
+ luggage_compartment
+ luggage_rack
mail
map
marketplace
@@ -200,136 +200,136 @@ force: true
menu
microphone
minus
- mixed-class
- mobile-off
- mobile-phone
- monochrome-capacity-indicator-high
- monochrome-capacity-indicator-low
- monochrome-capacity-indicator-moderate
- more-horizontal
- more-vertical
- multiple-cards
- multiple-passenger
- my-travel
+ mixed_class
+ mobile_off
+ mobile_phone
+ monochrome_capacity_indicator_high
+ monochrome_capacity_indicator_low
+ monochrome_capacity_indicator_moderate
+ more_horizontal
+ more_vertical
+ multiple_cards
+ multiple_passenger
+ my_travel
night
- no-smoking
+ no_smoking
notify
- notify-cutoff
- outward-journey
- parent-child-compartment
+ notify_cutoff
+ outward_journey
+ parent_child_compartment
parking
pause
- person-with-cane
- person-with-rollator
+ person_with_cane
+ person_with_rollator
pin
place
platform
play
playground
- power-outlet
+ power_outlet
print
priority
- qr-code
+ qr_code
question
- quiet-zone
- rail-and-fly
- railroad-car
- receive-item
+ quiet_zone
+ rail_and_fly
+ railroad_car
+ receive_item
refresh
remove
reservation
resize
restaurant
- restricted-mobility-toilet
- return-journey
- round-trip
+ restricted_mobility_toilet
+ return_journey
+ round_trip
s-bahn
s-bahn-inverted
save
schedule
scooter
- scooter-inverted
+ scooter_inverted
search
send
sepa
- set-position
+ set_position
settings
sev
share
- share-item
- shopping-bag
- shopping-basket
- shopping-basket-disabled
- shopping-cart
- shopping-cart-disabled
+ share_item
+ shopping_bag
+ shopping_basket
+ shopping_basket_disabled
+ shopping_cart
+ shopping_cart_disabled
shower
- shower-men
- shower-women
- single-trip
+ shower_men
+ shower_women
+ single_trip
sink
- skip-backward
- skip-forward
- sort-down
- sort-up
+ skip_backward
+ skip_forward
+ sort_down
+ sort_up
speedboat
- speedboat-inverted
+ speedboat_inverted
sprinter
- standing-room
+ standing_room
star
start
station
- steppless-entry
+ steppless_entry
stop
- stop-sign
+ stop_sign
subtitles
subway
- subway-inverted
- support-dog
- swap-horizontal
- swap-vertical
+ subway_inverted
+ support_dog
+ swap_horizontal
+ swap_vertical
table
taxi
- taxi-inverted
- thumb-up
- thumb-up-down
+ taxi_inverted
+ thumb_up
+ thumb_up_down
ticket
- ticket-discount
- ticket-multiple
- ticket-subscription
- time-outward-journey
- time-return-journey
+ ticket_discount
+ ticket_multiple
+ ticket_subscription
+ time_outward_journey
+ time_return_journey
timetable
- train-and-car
- train-and-car-inverted
- train-station
+ train_and_car
+ train_and_car_inverted
+ train_station
tram
- tram-inverted
+ tram_inverted
translation
- travel-insurance
+ travel_insurance
undo
upload
visibility
- visibility-off
- volume-down
- volume-mute
- volume-off
- volume-up
+ visibility_off
+ volume_down
+ volume_mute
+ volume_off
+ volume_up
voucher
walking
- walking-fast
- walking-fast-inverted
- walking-inverted
+ walking_fast
+ walking_fast_inverted
+ walking_inverted
warning
wc
- wc-men
- wc-sign
- wc-women
+ wc_men
+ wc_sign
+ wc_women
website
wifi
- wifi-off
+ wifi_off
window
- zoom-in
- zoom-out
+ zoom_in
+ zoom_out
<% } else if(prop.type === "DefaultVariant"){ -%>
@@ -359,11 +359,6 @@ force: true
description-key="clicked_Desc_Key" of-type="TwoOptions" usage="bound" required="false"/>
<% } -%>
-
-
-
+ -
+ DBTextarea
+
+ -
+ DBAccordionItem
+
+
+ -
+ DBAccordion
+
+ -
+ DBBadge
+
+
+ -
+ Fonts
+
-
DBAlert
diff --git a/packages/components/mitosis.config.js b/packages/components/mitosis.config.js
index cf4f98667806..afd4a204408a 100644
--- a/packages/components/mitosis.config.js
+++ b/packages/components/mitosis.config.js
@@ -20,10 +20,15 @@ module.exports = {
attributeChangedCallback(test, json) {
const properties =
json?.meta?.useMetadata?.component?.properties?.map(
- (prop) => prop.name
+ (prop) => prop.name.toLowerCase()
) || [];
return (
- 'this.props[name] = newValue;\n' +
+ 'const foundProp = this.componentProps.find(prop=> prop.toLowerCase() === name);\n' +
+ "if (newValue === 'false') {\n" +
+ '\t\t\tdelete this.props[foundProp];\n' +
+ '\t\t} else {\n' +
+ '\t\t\tthis.props[foundProp] = newValue;\n' +
+ '\t\t}' +
' this.update();' +
'}' +
'static get observedAttributes() {\n' +
diff --git a/packages/components/overrides/angular/src/components/accordion-item/index.ts b/packages/components/overrides/angular/src/components/accordion-item/index.ts
new file mode 100644
index 000000000000..27ab670b43dc
--- /dev/null
+++ b/packages/components/overrides/angular/src/components/accordion-item/index.ts
@@ -0,0 +1 @@
+export { DBAccordionItem, DBAccordionItemModule } from './accordion-item';
diff --git a/packages/components/overrides/angular/src/components/accordion/index.ts b/packages/components/overrides/angular/src/components/accordion/index.ts
new file mode 100644
index 000000000000..f1954d19cc05
--- /dev/null
+++ b/packages/components/overrides/angular/src/components/accordion/index.ts
@@ -0,0 +1 @@
+export { DBAccordion, DBAccordionModule } from './accordion';
diff --git a/packages/components/overrides/angular/src/components/badge/index.ts b/packages/components/overrides/angular/src/components/badge/index.ts
new file mode 100644
index 000000000000..e775ca2345ec
--- /dev/null
+++ b/packages/components/overrides/angular/src/components/badge/index.ts
@@ -0,0 +1 @@
+export { DBBadge, DBBadgeModule } from './badge';
diff --git a/packages/components/overrides/angular/src/components/main-navigation/index.ts b/packages/components/overrides/angular/src/components/main-navigation/index.ts
new file mode 100644
index 000000000000..48bd43cb7e94
--- /dev/null
+++ b/packages/components/overrides/angular/src/components/main-navigation/index.ts
@@ -0,0 +1 @@
+export { DBMainNavigation, DBMainNavigationModule } from './main-navigation';
diff --git a/packages/components/overrides/angular/src/components/sub-navigation/index.ts b/packages/components/overrides/angular/src/components/sub-navigation/index.ts
new file mode 100644
index 000000000000..1368a7fcd4b6
--- /dev/null
+++ b/packages/components/overrides/angular/src/components/sub-navigation/index.ts
@@ -0,0 +1 @@
+export { DBSubNavigation, DBSubNavigationModule } from './sub-navigation';
diff --git a/packages/components/overrides/angular/src/components/textarea/index.ts b/packages/components/overrides/angular/src/components/textarea/index.ts
new file mode 100644
index 000000000000..1eee7df7ccd1
--- /dev/null
+++ b/packages/components/overrides/angular/src/components/textarea/index.ts
@@ -0,0 +1 @@
+export { DBTextarea, DBTextareaModule } from './textarea';
diff --git a/packages/components/package.json b/packages/components/package.json
index e09322ccb138..a4000e86c618 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -15,13 +15,17 @@
"build"
],
"scripts": {
- "build": "npm-run-all build:*",
+ "build": "npm-run-all -p build-components build-style",
+ "build-components": "npm-run-all build:mitosis -p build-components:*",
+ "build-components:directives": "cpr overrides/angular ../../output/angular -o",
+ "build-components:docs": "react-docgen ../../output/react/src/components/**/*.tsx -o ../../output/docs.json -i *.spec.tsx",
+ "build-components:post": "node scripts/post-build/index.js",
+ "build-style": "npm-run-all build-style:*",
+ "build-style:01_mv": "cpr src build -o -f \"(.ts|.tsx|.md)$\"",
+ "build-style:02_sass": "sass build --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ --future-deprecation=import",
+ "build-style:03_postcss": "postcss build/**/*.css --replace",
"build:mitosis": "mitosis build",
- "build:mv-styles": "cpr src build -o -f \"(.ts|.tsx|.md)$\"",
- "build:sass": "sass build --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ --future-deprecation=import",
- "build:z-post": "node scripts/post-build/index.js",
- "build:z2-docs": "react-docgen ../../output/react/src/components/**/*.tsx -o ../../output/docs.json -i *.spec.tsx",
- "compile:angular": "mitosis build -c mitosis-angular.config.js && node -e \"require('./scripts/post-build/angular.js')(true)\" && cpr ../../output/tmp/angular/src ../../output/angular/src -o",
+ "compile:angular": "mitosis build -c mitosis-angular.config.js && node -e \"require('./scripts/post-build/angular.js')(true)\" && npm run build-components:directives && cpr ../../output/tmp/angular/src ../../output/angular/src -o",
"compile:react": "mitosis build -c mitosis-react.config.js && node -e \"require('./scripts/post-build/react.js')(true)\" && cpr ../../output/tmp/react/src ../../output/react/src -o",
"compile:vue": "mitosis build -c mitosis-vue.config.js && node -e \"require('./scripts/post-build/vue.js')(true)\" && cpr ../../output/tmp/vue/vue3/src ../../output/vue/vue3/src -o",
"copy-output": "npm-run-all copy:*",
@@ -29,9 +33,9 @@
"copy:package.json": "cpr package.json ../../build-outputs/components/package.json -o",
"copy:readme": "cpr README.md ../../build-outputs/components/README.md -o",
"dev:angular": "nodemon --watch src --watch overrides -e tsx,ts -x \"npm run compile:angular\"",
- "dev:html": "cpr ../foundations/assets build/assets -o && npm run build:mv-styles && npm run build:sass && vite --open",
+ "dev:html": "cpr ../foundations/assets build/assets -o && npm run build-style:01_mv && npm run build-style:02_sass && vite --open",
"dev:react": "nodemon --watch src --watch overrides -e tsx,ts -x \"npm run compile:react\"",
- "dev:scss": "nodemon --watch src -e scss -x \"npm run build:mv-styles && npm run build:sass\"",
+ "dev:scss": "nodemon --watch src -e scss -x \"npm run build-style:01_mv && npm run build-style:02_sass\"",
"dev:vue": "nodemon --watch src --watch overrides -e tsx,ts -x \"npm run compile:vue\"",
"generate:component": "hygen mitosis new",
"generate:docs": "hygen update-docs new",
@@ -43,15 +47,15 @@
},
"devDependencies": {
"@builder.io/eslint-plugin-mitosis": "^0.0.14",
- "@builder.io/mitosis": "^0.0.117",
- "@builder.io/mitosis-cli": "^0.0.75",
- "@react-docgen/cli": "^1.0.2",
+ "@builder.io/mitosis": "^0.0.119",
+ "@builder.io/mitosis-cli": "^0.0.77",
+ "@react-docgen/cli": "^1.0.4",
"cpr": "3.0.1",
- "eslint": "^8.46.0",
+ "eslint": "^8.49.0",
"hygen": "^6.2.11",
"lit": "^2.8.0",
"nodemon": "3.0.1",
- "sass": "^1.64.2"
+ "sass": "^1.66.1"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/",
diff --git a/packages/components/plugins/power-apps/index.js b/packages/components/plugins/power-apps/index.js
index 4dc3359cf874..e00246710fc4 100644
--- a/packages/components/plugins/power-apps/index.js
+++ b/packages/components/plugins/power-apps/index.js
@@ -9,6 +9,8 @@ module.exports = () => ({
let includeIcon = '';
let hasDisabledProp = '';
let hasOnClick = '';
+ let canvasHeight = '--canvasHeight fixed';
+ let canvasWidth = '--canvasWidth fixed';
if (component) {
if (component.properties) {
const propsString = JSON.stringify(component.properties);
@@ -28,12 +30,21 @@ module.exports = () => ({
if (component.hasOnClick) {
hasOnClick = `--hasOnClick true`;
}
+
+ if (component.canvasSize) {
+ if (component.canvasSize.width) {
+ canvasWidth = `--canvasWidth ${component.canvasSize.width}`;
+ }
+ if (component.canvasSize.height) {
+ canvasHeight = `--canvasHeight ${component.canvasSize.height}`;
+ }
+ }
}
ChildProcess.execSync(
`hygen power-apps new --version 0.0.0 ${json.name
.replace('DB', '')
- .toLowerCase()} ${includeIcon} ${hasDisabledProp} ${hasOnClick} ${propsCliString}`
+ .toLowerCase()} ${canvasHeight} ${canvasWidth} ${includeIcon} ${hasDisabledProp} ${hasOnClick} ${propsCliString}`
);
return json;
}
diff --git a/packages/components/postcss.config.js b/packages/components/postcss.config.js
new file mode 100644
index 000000000000..e61de6453cb7
--- /dev/null
+++ b/packages/components/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+ plugins: [
+ require('cssnano')({
+ preset: 'default'
+ })
+ ]
+};
diff --git a/packages/components/scripts/generate-icon-types.js b/packages/components/scripts/generate-icon-types.js
index fbe99382f996..4ac96fc700be 100644
--- a/packages/components/scripts/generate-icon-types.js
+++ b/packages/components/scripts/generate-icon-types.js
@@ -2,7 +2,7 @@
* This script can be used to update the icon type for all components using icons.
*/
-const FS = require('fs');
+const FS = require('node:fs');
const foundationAssetsPath = '../foundations/assets/icons/functional/images';
@@ -47,7 +47,12 @@ const generateIconTypes = () => {
(!icon.includes('_solid') && icon.includes('_24')) ||
icon.startsWith('//')
)
- .map((icon) => icon.replace('db_ic_', '').replace('_24.svg', ''))
+ .map((icon) =>
+ icon
+ .replace('db_ic_', '')
+ .replace('_24.svg', '')
+ .replace(/-/g, '_')
+ )
.map((icon) => {
if (icon.startsWith('//')) {
return icon;
diff --git a/packages/components/scripts/post-build/angular.js b/packages/components/scripts/post-build/angular.js
index 89bca6952387..9ce5a02503e2 100644
--- a/packages/components/scripts/post-build/angular.js
+++ b/packages/components/scripts/post-build/angular.js
@@ -1,6 +1,7 @@
const Replace = require('replace-in-file');
+const FS = require('node:fs');
const { components } = require('./components');
-const { runReplacements } = require('../utils');
+const { runReplacements, getComponentName } = require('../utils');
const changeFile = (component, input) => {
return input
@@ -38,18 +39,22 @@ const changeFile = (component, input) => {
*
* @param {*} replacements
* @param {*} componentName
+ * @param {*} upperComponentName
* @param {*} valueAccessor 'checked' | 'value' [adopt if needed]
*/
const setControlValueAccessorReplacements = (
replacements,
componentName,
+ upperComponentName,
valueAccessor
) => {
// for native angular support (e.g. reactive forms) we have to implement
// the ControlValueAccessor interface with all impacts :/
- const upperComponentName = `DB${
- componentName.charAt(0).toUpperCase() + componentName.slice(1)
- }`;
+
+ replacements.push({
+ from: /\/\/ ANGULAR:/g,
+ to: ''
+ });
replacements.push({
from: '} from "@angular/core";',
@@ -89,6 +94,8 @@ const setControlValueAccessorReplacements = (
}
}
+ propagateChange(_: any) {}
+
registerOnChange(onChange: any) {
this.propagateChange = onChange;
}
@@ -105,9 +112,71 @@ const setControlValueAccessorReplacements = (
});
};
+/**
+ * It's not possible to use multiple times in a component.
+ * In Angular, you have to use a directive for this...
+ * This is a workaround to replace it in the file.
+ * @param replacements
+ * @param componentName {string}
+ * @param upperComponentName {string}
+ * @param directives {{name:string, ngContentName?:string}[]}
+ */
+const setDirectiveReplacements = (
+ replacements,
+ componentName,
+ upperComponentName,
+ directives
+) => {
+ for (const directive of directives) {
+ // Add ng-content multiple times to overwrite all
+ for (let i = 0; i < 4; i++) {
+ replacements.push({
+ from: ``,
+ to: ``
+ });
+ }
+
+ replacements.push({
+ from: `export class ${upperComponentName} {\n`,
+ to:
+ `export class ${upperComponentName} {\n` +
+ `\t@ContentChild(${directive.name}Directive, { read: TemplateRef }) db${directive.name}: any;\n`
+ });
+
+ replacements.push({
+ from: 'import { NgModule } from "@angular/core";',
+ to:
+ 'import { NgModule } from "@angular/core";\n' +
+ `import { ${directive.name}Directive } from './${directive.name}.directive';\n`
+ });
+
+ FS.writeFileSync(
+ `../../output/angular/src/components/${componentName}/${directive.name}.directive.ts`,
+ '/* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */\n' +
+ "import { Directive } from '@angular/core';" +
+ `
+@Directive({
+\tselector: '[db${directive.name}]'
+})
+export class ${directive.name}Directive {}
+`
+ );
+ }
+
+ replacements.push({
+ from: 'import { NgModule } from "@angular/core";',
+ to: "import { NgModule, ContentChild, TemplateRef } from '@angular/core';"
+ });
+};
+
module.exports = (tmp) => {
for (const component of components) {
const componentName = component.name;
+ const upperComponentName = `DB${getComponentName(component.name)}`;
const file = `../../${
tmp ? 'output/tmp' : 'output'
}/angular/src/components/${componentName}/${componentName}.ts`;
@@ -118,18 +187,24 @@ module.exports = (tmp) => {
const replacements = [];
- if (
- component.config &&
- component.config.angular &&
- component.config.angular.controlValueAccessor
- ) {
+ if (component.config?.angular?.controlValueAccessor) {
setControlValueAccessorReplacements(
replacements,
componentName,
+ upperComponentName,
component.config.angular.controlValueAccessor // value / checked / ...
);
}
+ if (component.config?.angular?.directives?.length > 0) {
+ setDirectiveReplacements(
+ replacements,
+ componentName,
+ upperComponentName,
+ component.config.angular.directives
+ );
+ }
+
try {
Replace.sync(options);
runReplacements(replacements, component, 'angular', file);
diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js
index 4744c8385e99..fbb8dc2a775a 100644
--- a/packages/components/scripts/post-build/components.js
+++ b/packages/components/scripts/post-build/components.js
@@ -1,29 +1,100 @@
/**
* @returns {[{
* name:string,
- * defaultStylePath:string,
* overwrites?:{
* global?:{from:string,to:string}[],
* angular?:{from:string,to:string}[],
* react?:{from:string,to:string}[],
- * vue?:{from:string,to:string}[]
+ * vue?:{from:string,to:string}[],
+ * webComponents?:{from:string,to:string}[]
* },
* config?:{
* vue?:{
* vModel?: {modelValue:string, binding:string}[]
- * }
+ * },
+ * angular?: {
+ * controlValueAccessor?: string,
+ * directives?: {name:string, ngContentName?:string}[]
+ * }
* }
* }]}
*/
const getComponents = () => [
{
- name: 'navigation-item'
+ name: 'accordion-item'
},
{
- name: 'select'
+ name: 'accordion',
+ overwrites: {
+ angular: [
+ { from: 'openItems = []', to: 'openItems: string[] = []' }
+ ],
+ react: [
+ {
+ from: 'const ref = useRef(null);',
+ to: 'const ref = useRef(component);'
+ }
+ ]
+ }
+ },
+
+ {
+ name: 'textarea',
+ config: {
+ vue: {
+ vModel: [{ modelValue: 'value', binding: ':value' }]
+ },
+ angular: {
+ controlValueAccessor: 'value'
+ }
+ },
+ overwrites: {
+ angular: [
+ {
+ from: '[attr.defaultValue]="defaultValue ?? children"',
+ to: ''
+ },
+ {
+ from: '',
+ to: '{{value || defaultValue}}'
+ }
+ ],
+ vue: [
+ {
+ from: ':defaultValue="defaultValue || $slots.default"',
+ to: ''
+ }
+ ]
+ }
+ },
+ {
+ name: 'badge'
+ },
+
+ {
+ name: 'main-navigation'
+ },
+ {
+ name: 'navigation-item',
+ config: {
+ angular: {
+ directives: [{ name: 'NavigationContent' }]
+ }
+ }
},
+ {
+ name: 'select',
+ config: {
+ vue: {
+ vModel: [{ modelValue: 'value', binding: ':value' }]
+ },
+ angular: {
+ controlValueAccessor: 'value'
+ }
+ }
+ },
{
name: 'drawer',
overwrites: {
@@ -88,7 +159,55 @@ const getComponents = () => [
name: 'page'
},
{
- name: 'header'
+ name: 'header',
+ config: {
+ angular: {
+ directives: [
+ { name: 'ActionBar', ngContentName: 'action-bar' },
+ {
+ name: 'MetaNavigation',
+ ngContentName: 'meta-navigation'
+ },
+ { name: 'Navigation' }
+ ]
+ }
+ },
+ overwrites: {
+ global: [
+ {
+ from: '(event) => toggle()',
+ to: '() => toggle()'
+ },
+ {
+ from: '(event) => toggle()',
+ to: '() => toggle()'
+ }
+ ],
+ webComponents: [
+ {
+ from: '',
+ to: ''
+ },
+ {
+ from: 'name="meta-navigation"',
+ to: 'name="meta-navigation-mobile"'
+ },
+ {
+ from: 'name="action-bar"',
+ to: 'name="action-bar-mobile"'
+ },
+ {
+ from:
+ ' el.removeEventListener("close", this.onDbDrawerDbHeaderClose);\n' +
+ ' el.addEventListener("close", this.onDbDrawerDbHeaderClose);',
+ to: 'el.props.onClose = this.onDbDrawerDbHeaderClose;'
+ },
+ {
+ from: 'if(this.props.drawerOpen) el.setAttribute("open", this.props.drawerOpen);',
+ to: ' el.setAttribute("open", Boolean(this.props.drawerOpen));'
+ }
+ ]
+ }
},
{
name: 'brand'
diff --git a/packages/components/scripts/post-build/react.js b/packages/components/scripts/post-build/react.js
index 9454f034d1f2..9c96dd062a88 100644
--- a/packages/components/scripts/post-build/react.js
+++ b/packages/components/scripts/post-build/react.js
@@ -25,8 +25,12 @@ module.exports = (tmp) => {
to: `const DB${upperComponentName} = forwardRef(DB${upperComponentName}Fn);\nexport default DB${upperComponentName};`
},
{
- from: `checked={props.checked}`,
- to: `defaultChecked={props.checked}`
+ from: 'if (ref.current)',
+ to: 'if (ref?.current)'
+ },
+ {
+ from: '[ref.current]',
+ to: '[ref]'
}
];
diff --git a/packages/components/scripts/post-build/vue.js b/packages/components/scripts/post-build/vue.js
index d797e9695223..4079313dad92 100644
--- a/packages/components/scripts/post-build/vue.js
+++ b/packages/components/scripts/post-build/vue.js
@@ -96,7 +96,7 @@ module.exports = (tmp) => {
runReplacements(
[
{
- from: 'immediate: true,',
+ from: /immediate: true,/g,
to: 'immediate: true,\nflush: "post"'
}
],
diff --git a/packages/components/scripts/post-build/web-components.js b/packages/components/scripts/post-build/web-components.js
index 0b24f7802e61..2f4e50ed1ede 100644
--- a/packages/components/scripts/post-build/web-components.js
+++ b/packages/components/scripts/post-build/web-components.js
@@ -64,8 +64,9 @@ const workaroundAttributes = (lines) => {
module.exports = () => {
for (const component of components) {
+ const filePath = `../../output/webcomponent/src/components/${component.name}/${component.name}.ts`;
const fixImports = {
- files: `../../output/webcomponent/src/components/${component.name}/${component.name}.ts`,
+ files: filePath,
processor(input) {
let lines = input
.split('\n')
@@ -88,7 +89,7 @@ module.exports = () => {
};
const defaultStyleUrl = {
- files: `../../output/webcomponent/src/components/${component.name}/${component.name}.ts`,
+ files: filePath,
from: 'this.state = {',
to: `this.state = {stylePath: "components/${component.name}/${component.name}-web-component.css",`
};
@@ -96,11 +97,18 @@ module.exports = () => {
try {
Replace.sync(fixImports);
Replace.sync(defaultStyleUrl);
- if (
- Fse.pathExistsSync(
- `../../output/webcomponent/src/components/${component.name}/${component.name}.ts`
- )
- ) {
+
+ if (component?.overwrites?.webComponents) {
+ for (const over of component.overwrites.webComponents) {
+ Replace.sync({
+ files: filePath,
+ from: over.from,
+ to: over.to
+ });
+ }
+ }
+
+ if (Fse.pathExistsSync(filePath)) {
Fse.moveSync(
`../../output/webcomponent/src/components/${component.name}/${component.name}.ts`,
`../../output/webcomponent/src/components/${component.name}/${component.name}.js`
diff --git a/packages/components/src/components/accordion-item/accordion-item-web-component.scss b/packages/components/src/components/accordion-item/accordion-item-web-component.scss
new file mode 100644
index 000000000000..452e0a7337b8
--- /dev/null
+++ b/packages/components/src/components/accordion-item/accordion-item-web-component.scss
@@ -0,0 +1 @@
+@forward "accordion-item";
diff --git a/packages/components/src/components/accordion-item/accordion-item.lite.tsx b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
new file mode 100644
index 000000000000..1370fc1bcccf
--- /dev/null
+++ b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
@@ -0,0 +1,67 @@
+import {
+ onMount,
+ onUpdate,
+ Show,
+ Slot,
+ useMetadata,
+ useStore
+} from '@builder.io/mitosis';
+import { DBAccordionItemState, DBAccordionItemProps } from './model';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
+
+useMetadata({
+ isAttachedToShadowDom: true,
+ component: {
+ // MS Power Apps
+ includeIcon: false,
+ properties: []
+ }
+});
+
+export default function DBAccordionItem(props: DBAccordionItemProps) {
+ // This is used as forwardRef
+ let component: any;
+ // jscpd:ignore-start
+ const state = useStore({
+ _id: DEFAULT_ID,
+ toggle: (event: any) => {
+ // We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431
+ event?.preventDefault();
+ if (props.onToggle) {
+ props.onToggle(!props.open);
+ }
+ }
+ });
+
+ onMount(() => {
+ state._id = props.id || 'accordion-item-' + uuid();
+ if (props.stylePath) {
+ state.stylePath = props.stylePath;
+ }
+ });
+ // jscpd:ignore-end
+
+ return (
+
+
+
+
+ state.toggle(event)}>
+ {props.title}
+
+
+
+
+
+ {props.content}
+ {props.children}
+
+
+ );
+}
diff --git a/packages/components/src/components/accordion-item/accordion-item.scss b/packages/components/src/components/accordion-item/accordion-item.scss
new file mode 100644
index 000000000000..f91ee9449d67
--- /dev/null
+++ b/packages/components/src/components/accordion-item/accordion-item.scss
@@ -0,0 +1,70 @@
+@use "@db-ui/foundations/build/scss/variables" as *;
+@use "@db-ui/foundations/build/scss/variables.global" as var;
+@use "@db-ui/foundations/build/scss/helpers/functions" as functions;
+@use "@db-ui/foundations/build/scss/helpers/component" as component;
+@use "@db-ui/foundations/build/scss/color/color-variants" as col-var;
+@use "@db-ui/foundations/build/scss/animation/animations" as animations;
+@use "../../styles/form-components" as form;
+
+@mixin accordion-item-content() {
+ :not(summary):not(link) {
+ @content;
+ }
+}
+
+.db-accordion-item {
+ @extend %bg-transparent;
+ @include functions.divider($position: "top");
+
+ position: relative;
+ inline-size: 100%;
+
+ @include accordion-item-content() {
+ padding: var.$db-spacing-fixed-md;
+ padding-block-end: var.$db-spacing-fixed-lg;
+ }
+
+ &:last-of-type {
+ @include functions.divider($position: "bottom", $slot: "after");
+ }
+
+ &[aria-disabled="true"] {
+ pointer-events: none;
+ opacity: component.$default-disabled-opacity;
+ }
+
+ summary {
+ @extend %dropdown-icon;
+ @include col-var.bg-transparent-interactive(false);
+
+ list-style: none;
+ display: flex;
+ justify-content: space-between;
+ padding: var.$db-spacing-fixed-md;
+ gap: var.$db-spacing-fixed-md;
+
+ &::-webkit-details-marker {
+ display: none;
+ }
+
+ &::after {
+ inset-inline-end: var.$db-spacing-fixed-sm;
+ }
+
+ &:focus-visible {
+ // TODO: Evaluate whether this number is intended
+ border-radius: component.$default-border-radius + 2;
+ }
+ }
+
+ &[open] {
+ @include accordion-item-content() {
+ animation: accordion-open $db-transition-emotional-straight normal
+ both;
+ }
+
+ summary::after {
+ transform: form.$dropdown-icon-transform;
+ }
+ }
+}
diff --git a/packages/components/src/components/accordion-item/accordion-item.spec.tsx b/packages/components/src/components/accordion-item/accordion-item.spec.tsx
new file mode 100644
index 000000000000..7991f1acfa96
--- /dev/null
+++ b/packages/components/src/components/accordion-item/accordion-item.spec.tsx
@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import AxeBuilder from '@axe-core/playwright';
+
+import { DBAccordionItem } from './index';
+// @ts-ignore - vue can only find it with .ts as file ending
+import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
+
+const comp = Test;
+
+const testComponent = () => {
+ test('should contain text', async ({ mount }) => {
+ const component = await mount(comp);
+ await expect(component).toContainText('Test');
+ });
+
+ test('should match screenshot', async ({ mount }) => {
+ const component = await mount(comp);
+ await expect(component).toHaveScreenshot();
+ });
+};
+
+test.describe('DBAccordionItem', () => {
+ test.use({ viewport: DEFAULT_VIEWPORT });
+ testComponent();
+});
+
+test.describe('DBAccordionItem', () => {
+ test('should not have any A11y issues', async ({ page, mount }) => {
+ await mount(comp);
+ const accessibilityScanResults = await new AxeBuilder({ page })
+ .include('.db-accordion-item')
+ .analyze();
+
+ expect(accessibilityScanResults.violations).toEqual([]);
+ });
+});
diff --git a/packages/components/src/components/accordion-item/docs/Angular.md b/packages/components/src/components/accordion-item/docs/Angular.md
new file mode 100644
index 000000000000..89421c1c13f1
--- /dev/null
+++ b/packages/components/src/components/accordion-item/docs/Angular.md
@@ -0,0 +1,36 @@
+## Angular
+
+For general installation and configuration look at the [ngx-components](https://www.npmjs.com/package/@db-ui/ngx-components) package.
+
+### Load component
+
+```ts app.module.ts
+//app.module.ts
+import { DBAccordionItemModule } from '@db-ui/ngx-components';
+
+@NgModule({
+ ...
+ imports: [..., DBAccordionItemModule],
+ ...
+})
+
+```
+
+### Use component
+
+#### With Slots
+
+```html app.component.html
+
+
+ Title
+ Content
+
+```
+
+#### With attributes
+
+```html app.component.html
+
+
+```
diff --git a/packages/components/src/components/accordion-item/docs/HTML.md b/packages/components/src/components/accordion-item/docs/HTML.md
new file mode 100644
index 000000000000..dbb7b83a894a
--- /dev/null
+++ b/packages/components/src/components/accordion-item/docs/HTML.md
@@ -0,0 +1,16 @@
+## HTML
+
+For general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ui/components) package.
+
+### Use component
+
+```html index.html
+
+...
+
+
+ Title
+ Content
+
+
+```
diff --git a/packages/components/src/components/accordion-item/docs/Migration.md b/packages/components/src/components/accordion-item/docs/Migration.md
new file mode 100644
index 000000000000..897577058d8e
--- /dev/null
+++ b/packages/components/src/components/accordion-item/docs/Migration.md
@@ -0,0 +1,23 @@
+## General
+
+> **Note**
+> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ui/components).
+
+## DB UI Core β‘ DB UI Components
+
+### class
+
+| Before | Status | After | Description |
+| --------------- | :----: | ------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `cmp-accordion` | π | `db-accordion-item` | The old accordion was just 1 item, we split it to combine multiple accordion-items into 1 accordion (which is another component) |
+
+### props
+
+| Before | Status | After | Description |
+| ---------- | :----: | ----------- | ----------------------------------------------------------- |
+| `summary` | π | `title` | The title/summary of the details element. |
+| `emphasis` | β | β | There is no emphasis anymore. |
+| `size` | β | β | Controlled by the tonality. |
+| | π | `disabled` | Disable the component. |
+| | π | `content` | Pass in a simple string as fallback to normal children/slot |
+| | π | `slotTitle` | Pass in a custom title (only required for React) |
diff --git a/packages/components/src/components/accordion-item/docs/React.md b/packages/components/src/components/accordion-item/docs/React.md
new file mode 100644
index 000000000000..a9881822b9a9
--- /dev/null
+++ b/packages/components/src/components/accordion-item/docs/React.md
@@ -0,0 +1,25 @@
+## React
+
+For general installation and configuration look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package.
+
+### Use component
+
+#### With Slots
+
+```tsx App.tsx
+// App.tsx
+import { DBAccordionItem } from "@db-ui/react-components";
+
+const App = () => Content;
+export default App;
+```
+
+#### With attributes
+
+```tsx App.tsx
+// App.tsx
+import { DBAccordionItem } from "@db-ui/react-components";
+
+const App = () => ;
+export default App;
+```
diff --git a/packages/components/src/components/accordion-item/docs/Vue.md b/packages/components/src/components/accordion-item/docs/Vue.md
new file mode 100644
index 000000000000..43153a324574
--- /dev/null
+++ b/packages/components/src/components/accordion-item/docs/Vue.md
@@ -0,0 +1,34 @@
+## Vue
+
+For general installation and configuration look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package.
+
+### Use component
+
+#### With Slots
+
+```vue App.vue
+
+
+
+
+
+ Title
+ Content
+
+
+```
+
+#### With attributes
+
+```vue App.vue
+
+
+
+
+
+
+```
diff --git a/packages/components/src/components/accordion-item/index.html b/packages/components/src/components/accordion-item/index.html
new file mode 100644
index 000000000000..f90b5e1c86fd
--- /dev/null
+++ b/packages/components/src/components/accordion-item/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+ DBAccordionItem
+
+
+
+
+
+ DB Accordion Item
+ Und hier ist der Content
+
+
+
diff --git a/packages/components/src/components/accordion-item/index.ts b/packages/components/src/components/accordion-item/index.ts
new file mode 100644
index 000000000000..b010b61cc468
--- /dev/null
+++ b/packages/components/src/components/accordion-item/index.ts
@@ -0,0 +1 @@
+export { default as DBAccordionItem } from './accordion-item';
diff --git a/packages/components/src/components/accordion-item/model.ts b/packages/components/src/components/accordion-item/model.ts
new file mode 100644
index 000000000000..e8fc9caa8ece
--- /dev/null
+++ b/packages/components/src/components/accordion-item/model.ts
@@ -0,0 +1,39 @@
+import {
+ GlobalProps,
+ GlobalState,
+ ToggleEventProps,
+ ToggleEventState
+} from '../../shared/model';
+
+export interface DBAccordionItemDefaultProps {
+ /**
+ * Alternative for passing only a string instead of children
+ */
+ content?: string;
+ /**
+ * The disabled attribute can be set to keep a user from clicking on the element.
+ */
+ disabled?: boolean;
+ /**
+ * Initial state for the accordion item
+ */
+ open?: boolean;
+ /**
+ * For react only to pass any title element to the specific slot
+ */
+ slotTitle?: any;
+ /**
+ * Alternative for passing only a string instead of a slot
+ */
+ title?: string;
+}
+
+export type DBAccordionItemProps = DBAccordionItemDefaultProps &
+ GlobalProps &
+ ToggleEventProps;
+
+export interface DBAccordionItemDefaultState {}
+
+export type DBAccordionItemState = DBAccordionItemDefaultState &
+ GlobalState &
+ ToggleEventState;
diff --git a/packages/components/src/components/accordion/accordion-web-component.scss b/packages/components/src/components/accordion/accordion-web-component.scss
new file mode 100644
index 000000000000..65bc6f97afa4
--- /dev/null
+++ b/packages/components/src/components/accordion/accordion-web-component.scss
@@ -0,0 +1 @@
+@forward "accordion";
diff --git a/packages/components/src/components/accordion/accordion.lite.tsx b/packages/components/src/components/accordion/accordion.lite.tsx
new file mode 100644
index 000000000000..22b4792f3dba
--- /dev/null
+++ b/packages/components/src/components/accordion/accordion.lite.tsx
@@ -0,0 +1,149 @@
+import {
+ For,
+ onMount,
+ onUpdate,
+ Show,
+ useMetadata,
+ useRef,
+ useStore
+} from '@builder.io/mitosis';
+import {
+ DBAccordionState,
+ DBAccordionProps,
+ DBAccordionItemInterface
+} from './model';
+import { cls } from '../../utils';
+import { DBAccordionItem } from '../accordion-item';
+
+useMetadata({
+ isAttachedToShadowDom: true,
+ component: {
+ // MS Power Apps
+ includeIcon: false,
+ properties: []
+ }
+});
+
+export default function DBAccordion(props: DBAccordionProps) {
+ const ref = useRef(null);
+ // jscpd:ignore-start
+ const state = useStore({
+ openItems: [],
+ clickedId: '',
+ initialized: false,
+ convertItems(items: any[] | string | undefined) {
+ try {
+ if (typeof items === 'string') {
+ return JSON.parse(items);
+ }
+
+ return items;
+ } catch (error) {
+ console.error(error);
+ }
+
+ return undefined;
+ },
+ handleItemClick: (id: string) => {
+ if (state.openItems.includes(id)) {
+ if (props.behaviour === 'single') {
+ state.openItems = [];
+ } else {
+ state.openItems = state.openItems.filter(
+ (oItem) => oItem !== id
+ );
+ }
+ } else if (props.behaviour === 'single') {
+ state.openItems = [id];
+ } else {
+ state.openItems = [...state.openItems, id];
+ }
+
+ if (props.onChange) {
+ props.onChange(state.openItems);
+ }
+ }
+ });
+
+ onMount(() => {
+ if (props.stylePath) {
+ state.stylePath = props.stylePath;
+ }
+ state.initialized = true;
+ });
+ // jscpd:ignore-end
+
+ onUpdate(() => {
+ if (ref && state.initialized) {
+ const childDetails = ref.getElementsByTagName('details');
+ if (childDetails) {
+ let initOpenItems: string[] = [];
+ Array.from(childDetails).forEach(
+ (details: HTMLDetailsElement) => {
+ const id = details.id;
+ if (details.open) {
+ initOpenItems.push(id);
+ }
+ const summaries =
+ details.getElementsByTagName('summary');
+ if (summaries?.length > 0) {
+ summaries[0].addEventListener('click', () => {
+ state.clickedId = id;
+ });
+ }
+ }
+ );
+ if (props.behaviour === 'single' && initOpenItems.length > 1) {
+ initOpenItems = [initOpenItems[0]];
+ }
+ state.openItems = initOpenItems;
+ }
+ /* Just set the click listener once */
+ state.initialized = false;
+ }
+ }, [ref, state.initialized]);
+
+ onUpdate(() => {
+ if (state.clickedId?.length > 0) {
+ state.handleItemClick(state.clickedId);
+ state.clickedId = '';
+ }
+ }, [state.clickedId]);
+
+ onUpdate(() => {
+ if (ref) {
+ const childDetails = ref.getElementsByTagName('details');
+ if (childDetails) {
+ Array.from(childDetails).forEach(
+ (details: HTMLDetailsElement) => {
+ details.open = state.openItems.includes(details.id);
+ }
+ );
+ }
+ }
+ }, [state.openItems]);
+
+ return (
+
+
+
+
+ {props.children}
+
+
+ {(item: DBAccordionItemInterface, index: number) => (
+
+ )}
+
+
+
+ );
+}
diff --git a/packages/components/src/components/accordion/accordion.scss b/packages/components/src/components/accordion/accordion.scss
new file mode 100644
index 000000000000..00c188bdcb4c
--- /dev/null
+++ b/packages/components/src/components/accordion/accordion.scss
@@ -0,0 +1,3 @@
+.db-accordion {
+ // No styling for now only JS code for this component
+}
diff --git a/packages/components/src/components/accordion/accordion.spec.tsx b/packages/components/src/components/accordion/accordion.spec.tsx
new file mode 100644
index 000000000000..a58d93cc0939
--- /dev/null
+++ b/packages/components/src/components/accordion/accordion.spec.tsx
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import AxeBuilder from '@axe-core/playwright';
+
+import { DBAccordion } from './index';
+// @ts-ignore - vue can only find it with .ts as file ending
+import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
+import { DBAccordionItem } from '../accordion-item';
+
+const comp = (
+
+
+
+
+
+);
+
+const testComponent = () => {
+ test('should contain text', async ({ mount }) => {
+ const component = await mount(comp);
+ await expect(component).toContainText('Test');
+ });
+
+ test('should match screenshot', async ({ mount }) => {
+ const component = await mount(comp);
+ await expect(component).toHaveScreenshot();
+ });
+};
+
+test.describe('DBAccordion', () => {
+ test.use({ viewport: DEFAULT_VIEWPORT });
+ testComponent();
+});
+
+test.describe('DBAccordion', () => {
+ test('should not have any A11y issues', async ({ page, mount }) => {
+ await mount(comp);
+ const accessibilityScanResults = await new AxeBuilder({ page })
+ .include('.db-accordion')
+ .analyze();
+
+ expect(accessibilityScanResults.violations).toEqual([]);
+ });
+});
diff --git a/packages/components/src/components/accordion/docs/Angular.md b/packages/components/src/components/accordion/docs/Angular.md
new file mode 100644
index 000000000000..204ec31c6d89
--- /dev/null
+++ b/packages/components/src/components/accordion/docs/Angular.md
@@ -0,0 +1,28 @@
+## Angular
+
+For general installation and configuration look at the [ngx-components](https://www.npmjs.com/package/@db-ui/ngx-components) package.
+
+### Load component
+
+```ts app.module.ts
+//app.module.ts
+import { DBAccordionModule } from '@db-ui/ngx-components';
+
+@NgModule({
+ ...
+ imports: [..., DBAccordionModule],
+ ...
+})
+
+```
+
+### Use component
+
+```html app.component.html
+
+
+
+
+
+
+```
diff --git a/packages/components/src/components/accordion/docs/HTML.md b/packages/components/src/components/accordion/docs/HTML.md
new file mode 100644
index 000000000000..94f5c55dc910
--- /dev/null
+++ b/packages/components/src/components/accordion/docs/HTML.md
@@ -0,0 +1,26 @@
+## HTML
+
+For general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ui/components) package.
+
+### Use component
+
+```html index.html
+
+...
+
+
+
+ Title 1
+ Content 1
+
+
+ Title 2
+ Content 2
+
+
+ Title 3
+ Content 3
+
+
Test
+
+
diff --git a/packages/components/src/components/accordion/index.ts b/packages/components/src/components/accordion/index.ts
new file mode 100644
index 000000000000..2c48f4a5f86d
--- /dev/null
+++ b/packages/components/src/components/accordion/index.ts
@@ -0,0 +1 @@
+export { default as DBAccordion } from './accordion';
diff --git a/packages/components/src/components/accordion/model.ts b/packages/components/src/components/accordion/model.ts
new file mode 100644
index 000000000000..af00d4c956a9
--- /dev/null
+++ b/packages/components/src/components/accordion/model.ts
@@ -0,0 +1,34 @@
+import { GlobalProps, GlobalState, InitializedState } from '../../shared/model';
+import { DBAccordionItemDefaultProps } from '../accordion-item/model';
+
+export interface DBAccordionItemInterface
+ extends Omit {}
+export interface DBAccordionDefaultProps {
+ /**
+ * To allow multiple items open at the same time or only 1 item
+ */
+ behaviour?: 'multiple' | 'single';
+
+ /**
+ * Alternative to pass in a simple representation of accordion items
+ */
+ items?: DBAccordionItemInterface[] | string;
+
+ /**
+ * Informs about the changes in the internal state, which item is open
+ */
+ onChange?: (openAccordionItemIds: string[]) => void;
+}
+
+export type DBAccordionProps = DBAccordionDefaultProps & GlobalProps;
+
+export interface DBAccordionDefaultState {
+ clickedId: string;
+ openItems: string[];
+ handleItemClick: (id: string) => void;
+ convertItems: (items?: any[] | string) => DBAccordionItemInterface[];
+}
+
+export type DBAccordionState = DBAccordionDefaultState &
+ GlobalState &
+ InitializedState;
diff --git a/packages/components/src/components/alert/alert.lite.tsx b/packages/components/src/components/alert/alert.lite.tsx
index 5b039ecd23b0..958217c0fe7b 100644
--- a/packages/components/src/components/alert/alert.lite.tsx
+++ b/packages/components/src/components/alert/alert.lite.tsx
@@ -1,7 +1,5 @@
import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
import { DBAlertProps, DBAlertState } from './model';
-import { DBIcon } from '../icon';
-import { DefaultVariantsIcon } from '../../shared/model';
import { DBButton } from '../button';
import { DBLink } from '../link';
import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
@@ -13,6 +11,10 @@ useMetadata({
// MS Power Apps
includeIcon: true,
hasOnClick: true,
+ canvasSize: {
+ height: 'fixed', // 'fixed', 'controlled'
+ width: 'controlled' // 'fixed', 'dynamic' (requires width property), 'controlled'
+ },
properties: [
{ name: 'headline', type: 'SingleLine.Text' },
{
@@ -22,11 +24,13 @@ useMetadata({
},
{
name: 'icon',
- type: 'Icon' // this is a custom type not provided by ms
+ type: 'Icon', // this is a custom type not provided by ms
+ defaultValue: 'info'
},
{
name: 'variant',
- type: 'DefaultVariant' // this is a custom type not provided by ms
+ type: 'DefaultVariant', // this is a custom type not provided by ms
+ defaultValue: 'adaptive'
}
]
}
@@ -41,16 +45,6 @@ export default function DBAlert(props: DBAlertProps) {
if (props.onClick) {
props.onClick(event);
}
- },
- getIcon: (icon?: string, variant?: string) => {
- if (state.iconVisible(icon)) {
- return icon;
- }
-
- return (variant && DefaultVariantsIcon[variant]) || 'info';
- },
- iconVisible: (icon?: string) => {
- return Boolean(icon && icon !== '_' && icon !== 'none');
}
});
@@ -64,11 +58,12 @@ export default function DBAlert(props: DBAlertProps) {
return (
diff --git a/packages/components/src/components/alert/alert.scss b/packages/components/src/components/alert/alert.scss
index b304f671d5fe..6e395b665865 100644
--- a/packages/components/src/components/alert/alert.scss
+++ b/packages/components/src/components/alert/alert.scss
@@ -5,6 +5,8 @@
@use "@db-ui/foundations/build/scss/helpers/component" as *;
@use "@db-ui/foundations/build/scss/color/color-variants" as *;
+@use "@db-ui/foundations/build/scss/icon/icons.helpers" as icons;
+
%grid-layout {
grid-template-areas: "icon content close";
grid-template-columns: min-content 1fr min-content;
@@ -54,7 +56,6 @@
}
.db-alert {
- @extend %db-bg-neutral-0;
@extend %component-border;
@extend %grid-layout;
display: grid;
@@ -65,6 +66,10 @@
// TODO: probably extract this to an overwrite or external file
text-align: start; // workaround for power apps
+ @include icons.has-no-icon() {
+ @include icons.icon("info");
+ }
+
dblink,
db-link {
// workaround angular
@@ -88,12 +93,10 @@
grid-area: close;
}
+ &[data-icon]::before,
&::before {
- /* TODO: Take filled icons if they are ready */
- --icon-font-family: var(--db-base-icon-font-family);
- --icon-font-size: var(--db-base-icon-font-size);
+ --db-icon-margin-end: 0;
grid-area: icon;
- margin-inline-end: 0;
}
&[data-type="inline"] {
@@ -116,10 +119,10 @@
@extend %db-bg-successful;
}
- --db-current-border-color: #{map.get($colors, "border")};
+ @include icons.variant-icons($name);
&::before {
- color: map.get($colors, "element");
+ --db-current-icon-color: #{map.get($colors, "element")};
}
}
}
diff --git a/packages/components/src/components/alert/docs/Angular.md b/packages/components/src/components/alert/docs/Angular.md
index f9a0226e2b9f..40eba038fbdf 100644
--- a/packages/components/src/components/alert/docs/Angular.md
+++ b/packages/components/src/components/alert/docs/Angular.md
@@ -1,6 +1,6 @@
## Angular
-For general installation and configuration look at the [ngx-components](https://www.npmjs.com/package/@db-ui/ngx-components) package.
+For general installation and configuration take a look at the [ngx-components](https://www.npmjs.com/package/@db-ui/ngx-components) package.
### Load component
diff --git a/packages/components/src/components/alert/docs/HTML.md b/packages/components/src/components/alert/docs/HTML.md
index 9f4cc7a7eb9e..395dae07790a 100644
--- a/packages/components/src/components/alert/docs/HTML.md
+++ b/packages/components/src/components/alert/docs/HTML.md
@@ -1,6 +1,6 @@
## HTML
-For general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ui/components) package.
+For general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ui/components) package.
### Use component
diff --git a/packages/components/src/components/alert/docs/React.md b/packages/components/src/components/alert/docs/React.md
index 13514e3aecb6..0949eb4626a9 100644
--- a/packages/components/src/components/alert/docs/React.md
+++ b/packages/components/src/components/alert/docs/React.md
@@ -1,6 +1,6 @@
## React
-For general installation and configuration look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package.
+For general installation and configuration take a look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package.
### Use component
diff --git a/packages/components/src/components/alert/docs/Vue.md b/packages/components/src/components/alert/docs/Vue.md
index c5a0f61b06ac..901506cc7c48 100644
--- a/packages/components/src/components/alert/docs/Vue.md
+++ b/packages/components/src/components/alert/docs/Vue.md
@@ -1,6 +1,6 @@
## Vue
-For general installation and configuration look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package.
+For general installation and configuration take a look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package.
### Use component
diff --git a/packages/components/src/components/alert/index.html b/packages/components/src/components/alert/index.html
index 81899888958f..104f4decb97b 100644
--- a/packages/components/src/components/alert/index.html
+++ b/packages/components/src/components/alert/index.html
@@ -6,23 +6,41 @@
-
-
-
-
Headline
-
-
-
-
-
Alert
-
+
+
Headline
+
+
Custom Icon
+
+
+
Headline
+
+
informational
+
+
+
Headline
+
+
Overwrite Icon in Variant